The SourceCodeEditMixin class

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.

The “Terrasoft.SourceCodeEditMixin” class

Properties

Table 1. Primary properties of the SourceCodeEditMixin class

sourceCodeEdit

Terrasoft.SourceCodeEdit

An instance of the source code editor control.

---

sourceCodeEditContainer

Terrasoft.Container

An instance of the container with the source code editor.

---

Methods

Table 2. Primary methods of the SourceCodeEditMixin class

openSourceCodeEditModalBox

A method that implements the opening of a window for editing source code.

---

loadSourceCodeValue

Abstract method. Must be implemented in the main class. Implements the logic of obtaining the value to edit.

---

saveSourceCodeValue

Abstract method. Must be implemented in the main class. Implements the logic of saving editing results in the main class object.

Parameters:

• value {String}

---

destroySourceCodeEdit

A method that implements the purification of mixin resources.

---

getSourceCodeEditModalBoxStyleConfig

Returns a key-value object that describes styles in the modal window for editing source code.

---

getSourceCodeEditStyleConfig

Returns a key-value object that describes styles applied to source editor controls.

---

getSourceCodeEditConfig

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

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)

Table 5. - Source code editor themes (SourceCodeEditEnums.Theme)

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);
          }
      });
  });