Для создания интерфейсов используется конструктор, в котором можно создать необходимую форму, страницу и т. д. с помощью стандартных виджетов. Однако иногда возникает необходимость создать более сложный интерфейс. В этом помогает виджет «Код», который предоставляет все возможности для построения пользовательской структуры формы. В статье про пользовательское отображение элементов приложения рассказывалось, как при разработке интерфейса добавлять нужные виджеты в виджет «Код» через константу 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: "Текст комментария"}) %>Помимо написания кода добавления виджета вручную, можно вставить его через контекстное меню. Для этого необходимо нажать правой клавишей мыши на поле в настройках виджета «Код» и выбрать пункт «Добавить виджет».
Откроется диалоговое окно добавления виджета. Таким образом можно вставить стандартные виджеты, доступные в сценариях, и пользовательские виджеты, список которых зависит от области видимости. По умолчанию доступны только виджеты того же уровня, что и редактируемый виджет, и виджеты более низких уровней. Например, если мы редактируем виджет уровня раздела, то в нем доступны виджеты этого же раздела, а также виджеты приложений этого раздела.
После выбора виджета из списка открывается модальное окно с его настройками:
После сохранения код для добавления виджета с указанными настройками вставляется в виджет «Код».
Доступность элементов
В окне выбора виджета при вставке в виджет «Код» отображается ограниченный список доступных виджетов. Чтобы расширить область видимости, необходимо перейти во вкладку «Настройки» дизайнера и переключиться на раздел «Доступные элементы».
После включения опции «Разрешить использование всех элементов» в виджете «Код» будут доступны для добавления все виджеты из других разделов, в том числе и глобальные пользовательские виджеты. Обратите внимание, что при включении данной опции экспорт виджета будет невозможен.
Если в дизайнере открыта форма приложения, то в разделе «Доступные элементы» будет доступна еще одна настройка — «Разрешить использование элементов раздела». Она также расширяет список доступных виджетов, но в пределах данного раздела.