The SourceCodeEditMixin class
Glossary Item Box
Introduction
When developing controls, it may be necessary to implement the string value editing functionality with the HTML, JavaScript, or LESS code. The SourceCodeEditMixin class was created for that.
SourceCodeEditMixin is a mixin, which provides a user-friendly string editing interface for class enrichment. Its concept resembles that of multiple inheritance.
SourceCodeEditMixin properties and methods.
The main SourceCodeEditMixin class properties are listed in table 1, and its methods are listed in table 2.
Table 1. SourceCodeEditMixin mixin proiperties
| Name | Type | Details |
|---|---|---|
| sourceCodeEdit | Terrasoft.SourceCodeEdit | An instance of the source code editor control. |
| sourceCodeEditContainer | Terrasoft.Container | An instance of the container with the source code editor. |
Table 2. Main SourceCodeEditMixin mixin methods
| Name | Parameters | Details |
|---|---|---|
| openSourceCodeEditModalBox | No | A method that implements the opening of a window for editing source code. |
| loadSourceCodeValue | No | Abstract method. Must be implemented in the main class. Implements the logic of obtaining the value to edit. |
| saveSourceCodeValue | value {String} | Abstract method. Must be implemented in the main class. Implements the logic of saving editing results in the main class object. |
| destroySourceCodeEdit | No | A method that implements the purification of mixin resources. |
| getSourceCodeEditModalBoxStyleConfig | No | Returns a key-value object that describes styles in the modal window for editing source code. |
| getSourceCodeEditStyleConfig | No | Returns a key-value object that describes styles applied to source editor controls. |
| getSourceCodeEditConfig | No | Returns a key-value object that describes the properties that the created instance of the source code editor controls will have. |
Main properties of the created instance of source code editor controls (see getSourceCodeEditConfig method) are listed in table 3.
Table 3. Created source editor properties
| Name | Type | Details |
|---|---|---|
| showWhitespaces | Boolean | Displaying invisible strings Default value: false. |
| language | SourceCodeEditEnums.Language |
Language syntax. Selected from the SourceCodeEditEnums.Language enumeration (Table 4). Default value: SourceCodeEditEnums.Language.JAVASCRIPT. |
| theme | SourceCodeEditEnums.Theme |
Editor theme Selected from the SourceCodeEditEnums.Theme enumeration (Table 5). Default value: SourceCodeEditEnums.Theme.CRIMSON_EDITOR. |
| showLineNumbers | Boolean | Display string numbers. Default value: true. |
| showGutter | Boolean | Set the gap between columns. Default value: true. |
| highlightActiveLine | Boolean |
Highlighting the active line. Default value: true. |
| highlightGutterLine | Boolean |
Highlighting of the inter-column space line. Default value: true. |
Table 4. Language syntax of the source code editor (SourceCodeEditEnums.Language)
| Enumeration member | Programming language |
|---|---|
| JAVASCRIPT | JavaScript |
| CSHARP | C# |
| LESS | LESS |
| CSS | CSS |
| SQL | SQL |
| HTML | HTML |
Table 5. - Source code editor themes (SourceCodeEditEnums.Theme)
| Enumeration member | Subject |
|---|---|
| SQLSERVER | SQL editor subject |
| CRIMSON_EDITOR | Crimson editor subject |
Use case
Add a mixin to the mixins property to use it in a control:
// Connecting a mixin. mixins: { SourceCodeEditMixin: "Terrasoft.SourceCodeEditMixin" },
Mixin functionality gets a value by calling the getSourceCodeValue() abstract getter method. It returns the string for editing. The getter method should be implemented each time a mixin is used:
// Implementing a field string value. getSourceCodeValue: function () { // The "getValue()" method is implemented in the "Terrasoft.BaseEdit" base class. return this.getValue(); },
After the editing is completed, the mixin will call the setSourceCodeValue() abstract setter method to save the result. The setter method should be implemented each time a mixin is used:
// Method implementation for setting up a result string. setSourceCodeValue: function (value) { // The "setValue()" method is implemented in the "Terrasoft.BaseEdit" base class. this.setValue(value); },
Call the openSourceCodeBox() method to open the source code editing window. The method is called in the main class instance context. For example, when the onSourceButtonClick method of the component is called.
// Implementing the process of calling a source editor window method. onSourceButtonClick: function () { this.mixins.SourceCodeEditMixin .openSourceCodeBox.call(this); },
After the work with the primary class instance is finished, it is deleted from the memory. The SourceCodeEditMixin requires freeing certain resources. To do this, the destroySourceCode method is called in the main class instance context.
onDestroy: function () { this.mixins.SourceCodeEditMixin .destroySourceCode.apply(this, arguments); this.callParent(arguments); }
Below is the complete source code:
// Adding a mixin module to dependencies. define("SomeControl", ["SomeControlResources", "SourceCodeEditMixin"], function (resources) { Ext.define("Terrasoft.controls.SomeControl", { extend: "Terrasoft.BaseEdit", alternateClassName: "Terrasoft.SomeControl", // Connecting a mixin. mixins: { SourceCodeEditMixin: "Terrasoft.SourceCodeEditMixin" }, // Method implementation for obtaining a string value. getSourceCodeValue: function () { // The "getValue()" method is implemented in the "Terrasoft.BaseEdit" base class. return this.getValue(); }, // Method implementation for setting up the result string. setSourceCodeValue: function (value) { // The "setValue()" method is implemented in the "Terrasoft.BaseEdit" base class. this.setValue(value); }, // Implementing the process of calling a source editor window method. onSourceButtonClick: function () { this.mixins.SourceCodeEditMixin .openSourceCodeBox.call(this); }, // Implementing a call to clear mixin resources. onDestroy: function () { this.mixins.SourceCodeEditMixin .destroySourceCode.apply(this, arguments); this.callParent(arguments); } }); });
