Creatio development guide
PDF
This documentation is valid for Creatio version 7.16.0. We recommend using the newest version of Creatio documentation.

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.

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)

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);
          }
      });
  });
© Creatio 2002-2020.

Did you find this information useful?

How can we improve it?