Для создания интерфейсов используется конструктор, в котором можно создать необходимую форму, страницу и т. д. с помощью стандартных виджетов. Однако иногда возникает необходимость создать более сложный интерфейс. В этом помогает виджет Код, который предоставляет все возможности для построения пользовательской структуры формы. В статье про пользовательское отображение элементов приложения рассказывалось, как при разработке интерфейса добавлять нужные виджеты в виджет Код через константу UI. Рассмотрим возможности этой константы подробнее.
Для отображения виджетов используется API виджетов UI.widget, где определены методы добавления доступных виджетов. В качестве аргументов в метод добавления можно передать значения параметров виджета, а также функции, вызываемые при срабатывании событий виджетов. Например:
Для каждого виджета аргументы с возможными параметрами свои. Виджеты и примеры их использования можно найти в статье о виджетах.
Помимо стандартных виджетов, в системе можно добавить пользовательские виджеты с помощью метода Widget.render. В качестве первого параметра указывается код виджета с символом @ в начале, в качестве второго передаются необходимые значения для параметров виджета.
Например, мы создали виджет с кодом custom_widget_1, который содержит в себе информационный блок и вывод строки из контекста виджета с кодом comment (Комментарий). Так как в виджете есть свойство контекста, ему можно передать необходимое значение. Для добавления этого виджета через виджет Код напишем следующий сценарий:
Помимо написания кода добавления виджета вручную, можно вставить его через контекстное меню. Для этого необходимо нажать правой клавишей мыши на поле в настройках виджета Код и выбрать пункт Добавить виджет.
Откроется диалоговое окно добавления виджета. Таким образом можно вставить стандартные виджеты, доступные в сценариях, и пользовательские виджеты, список которых зависит от области видимости. По умолчанию доступны только виджеты того же уровня, что и редактируемый виджет, и виджеты более низких уровней. Например, если мы редактируем виджет уровня раздела, то в нем доступны виджеты этого же раздела, а также виджеты приложений этого раздела.
После выбора виджета из списка открывается модальное окно с его настройками:
После сохранения код для добавления виджета с указанными настройками вставляется в виджет Код.
В окне выбора виджета при вставке в виджет Код отображается ограниченный список доступных виджетов. Чтобы расширить область видимости, необходимо перейти во вкладку Настройки дизайнера и переключиться на раздел Доступные элементы.
После включения опции Разрешить использование всех элементов в виджете Код будут доступны для добавления все виджеты из других разделов, в том числе и глобальные пользовательские виджеты. Обратите внимание, что при включении данной опции экспорт виджета будет невозможен.
Если в дизайнере открыта форма приложения, то в разделе Доступные элементы будет доступна еще одна настройка — Разрешить использование элементов раздела. Она также расширяет список доступных виджетов, но в пределах данного раздела.
Веб-компоненты
Для создания интерфейсов используется конструктор, в котором можно создать необходимую форму, страницу и т. д. с помощью стандартных виджетов. Однако иногда возникает необходимость создать более сложный интерфейс. В этом помогает виджет Код, который предоставляет все возможности для построения пользовательской структуры формы. В статье про пользовательское отображение элементов приложения рассказывалось, как при разработке интерфейса добавлять нужные виджеты в виджет Код через константу
UI. Рассмотрим возможности этой константы подробнее.Добавление виджетов
Для отображения виджетов используется API виджетов
UI.widget, где определены методы добавления доступных виджетов. В качестве аргументов в метод добавления можно передать значения параметров виджета, а также функции, вызываемые при срабатывании событий виджетов. Например:<%= UI.widget.viewContextRow('price', { required: true, onChange: Scripts.calcTotal }) %>Для каждого виджета аргументы с возможными параметрами свои. Виджеты и примеры их использования можно найти в статье о виджетах.
Помимо стандартных виджетов, в системе можно добавить пользовательские виджеты с помощью метода Widget.render. В качестве первого параметра указывается код виджета с символом @ в начале, в качестве второго передаются необходимые значения для параметров виджета.
Например, мы создали виджет с кодом
custom_widget_1, который содержит в себе информационный блок и вывод строки из контекста виджета с кодомcomment(Комментарий). Так как в виджете есть свойство контекста, ему можно передать необходимое значение. Для добавления этого виджета через виджет Код напишем следующий сценарий:<%= UI.widget.render('@custom_widget_1', {comment: "Текст комментария"}) %>Помимо написания кода добавления виджета вручную, можно вставить его через контекстное меню. Для этого необходимо нажать правой клавишей мыши на поле в настройках виджета Код и выбрать пункт Добавить виджет.
Откроется диалоговое окно добавления виджета. Таким образом можно вставить стандартные виджеты, доступные в сценариях, и пользовательские виджеты, список которых зависит от области видимости. По умолчанию доступны только виджеты того же уровня, что и редактируемый виджет, и виджеты более низких уровней. Например, если мы редактируем виджет уровня раздела, то в нем доступны виджеты этого же раздела, а также виджеты приложений этого раздела.
После выбора виджета из списка открывается модальное окно с его настройками:
После сохранения код для добавления виджета с указанными настройками вставляется в виджет Код.
Доступность элементов
В окне выбора виджета при вставке в виджет Код отображается ограниченный список доступных виджетов. Чтобы расширить область видимости, необходимо перейти во вкладку Настройки дизайнера и переключиться на раздел Доступные элементы.
После включения опции Разрешить использование всех элементов в виджете Код будут доступны для добавления все виджеты из других разделов, в том числе и глобальные пользовательские виджеты. Обратите внимание, что при включении данной опции экспорт виджета будет невозможен.
Если в дизайнере открыта форма приложения, то в разделе Доступные элементы будет доступна еще одна настройка — Разрешить использование элементов раздела. Она также расширяет список доступных виджетов, но в пределах данного раздела.