Класс SourceCodeEditMixin

Общие сведения

При разработке элементов управления иногда возникает необходимость реализовать функциональность редактирования строкового значения, содержащего HTML, JavaScript или LESS код. Для реализации такой возможности создан класс SourceCodeEditMixin.

SourceCodeEditMixin — это миксин, который предназначен не для самостоятельного использования, а для обогащения других классов возможностью редактирования строки, используя удобный интерфейс. Концепция миксина напоминает концепцию множественного наследования.

Класс Terrasoft.SourceCodeEditMixin

Свойства

Табл. 1. — Основные свойства класса SourceCodeEditMixin

sourceCodeEdit

Terrasoft.SourceCodeEdit

Экземпляр элемента управления редактора исходного кода.

---

sourceCodeEditContainer

Terrasoft.Container

Экземпляр контейнера, в котором размещен редактор исходного кода.

---

Методы

Табл. 2. — Основные методы класса SourceCodeEditMixin

openSourceCodeEditModalBox

Метод, реализующий открытие модального окна редактирования исходного кода.

---

loadSourceCodeValue

Абстрактный метод. Должен быть реализован в основном классе. Реализует логику получения значения для редактирования.

---

saveSourceCodeValue

Абстрактный метод. Должен быть реализован в основном классе. Реализует логику сохранения результата редактирования в объект основного класса.

Параметры:

• value {String}

---

destroySourceCodeEdit

Метод, реализующий очистку ресурсов, используемых миксином.

---

getSourceCodeEditModalBoxStyleConfig

Возвращает объект типа "ключ-значение", описывающий стили, которые будут установлены на модальное окно редактора исходного кода.

---

getSourceCodeEditStyleConfig

Возвращает объект типа ключ-значение, описывающий стили, которые будут применены к элементам управления редактора исходного кода.

---

getSourceCodeEditConfig

Возвращает объект типа "ключ-значение", описывающий свойства, с которыми будет создан экземпляр элементов управления редактора исходного кода.

---

Основные свойства, с которыми будет создан экземпляр элементов управления редактора исходного кода (см. метод getSourceCodeEditConfig).

Табл. 3. — Свойства, с которыми может быть создан редактор исходного кода

showWhitespaces

Boolean

Отображение невидимых строк. По умолчанию: false.

---

language

SourceCodeEditEnums.Language

Синтаксис языка. Выбирается из перечисления SourceCodeEditEnums.Language (таблица 4). По умолчанию: SourceCodeEditEnums.Language.JAVASCRIPT.

---

theme

SourceCodeEditEnums.Theme

Тема редактора. Выбирается из перечисления SourceCodeEditEnums.Theme (таблица 5). По умолчанию: SourceCodeEditEnums.Theme.CRIMSON_EDITOR.

---

showLineNumbers

Boolean

Отображение номеров строк. По умолчанию: true.

---

showGutter

Boolean

Установка зазора между столбцами. По умолчанию: true.

---

highlightActiveLine

Boolean

Подсветка активной линии. По умолчанию: true.

---

highlightGutterLine

Boolean

Подсветка линии в межстолбцовом промежутке. По умолчанию: true.

---

Табл. 4. — Синтаксис языков, с которыми работает редактор исходного кода (SourceCodeEditEnums.Language)

Табл. 5. — Темы редактора исходного кода (SourceCodeEditEnums.Theme)

Пример использования

Для использования миксина в элементе управления необходимо добавить его в свойстве mixins:

// Подключение миксина.
mixins: {
    SourceCodeEditMixin: "Terrasoft.SourceCodeEditMixin"
},

Функциональность миксина получает значение, вызывая абстрактный getter-метод getSourceCodeValue(), задача которого — вернуть строку для редактирования. В каждом конкретном случае "подмешивания" функциональности должен быть реализован свой getter-метод:

// Реализация метода получения строкового значения.
getSourceCodeValue: function () {
    // Метод getValue() реализован в базовом классе Terrasoft.BaseEdit.
    return this.getValue();
},

После завершения редактирования миксин вызовет абстрактный setter-метод setSourceCodeValue() для сохранения результата. В каждом конкретном случае "подмешивания" функциональности должен быть реализован свой setter-метод.

// Реализация метода установки результирующей строки.
setSourceCodeValue: function (value) {
    // Метод setValue() реализован в базовом классе Terrasoft.BaseEdit.
    this.setValue(value);
},

Для открытия окна редактирования исходного кода нужно вызвать метод миксина openSourceCodeBox(). Следует обратить внимание на то, что метод вызван в контексте экземпляра основного класса. Например, при вызове метода onSourceButtonClick компонента.

// Реализация вызова метода открытия окна редактора исходного кода.
onSourceButtonClick: function () {
    this.mixins.SourceCodeEditMixin
      .openSourceCodeBox.call(this);
},

После завершения работы с экземпляром основного класса происходит его удаление из памяти. Так как SourceCodeEditMixin требует определенных ресурсов, их также необходимо освободить. Для этого вызывается метод миксина destroySourceCode в контексте экземпляра основного класса.

onDestroy: function () {
    this.mixins.SourceCodeEditMixin
      .destroySourceCode.apply(this, arguments);
    this.callParent(arguments);
}

Полный исходный код примера:

// Добавление модуля миксина в зависимости.
define("SomeControl", ["SomeControlResources", "SourceCodeEditMixin"],
  function (resources) {
      Ext.define("Terrasoft.controls.SomeControl", {
          extend: "Terrasoft.BaseEdit",
          alternateClassName: "Terrasoft.SomeControl",

          // Подключение миксина.
          mixins: {
              SourceCodeEditMixin: "Terrasoft.SourceCodeEditMixin"
          },

          // Реализация метода получения строкового значения.
          getSourceCodeValue: function () {
              // Метод getValue() реализован в базовом классе Terrasoft.BaseEdit.
              return this.getValue();
          },

          // Реализация метода установки результирующей строки.
          setSourceCodeValue: function (value) {
              // Метод setValue() реализован в базовом классе Terrasoft.BaseEdit.
              this.setValue(value);
          },

          // Реализация вызова метода открытия окна редактора исходного кода.
          onSourceButtonClick: function () {
              this.mixins.SourceCodeEditMixin
                .openSourceCodeBox.call(this);
          },

          // Реализация вызова очистки ресурсов миксина.
          onDestroy: function () {
              this.mixins.SourceCodeEditMixin
                .destroySourceCode.apply(this, arguments);
              this.callParent(arguments);
          }
      });
  });