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

SourceCodeEditMixin class description and work examples.

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

 

 

 

© bpm'online 2002-2019.

Did you find this information useful?

How can we improve it?