Визуальные компоненты
N2O - компонентно-ориентированный фреймворк. Визуальные компоненты разработаны на React. Компоненты имеют иерархическую структуру.
#
Структура приложенияСтруктура приложения - описание компонентов общих для всего приложения:
заголовок с навигацией, боковая панель, подвал.
Структура приложения задается в файле *.application.xml
.
Обычно в приложении существует только один файл application.xml
Если их несколько, то необходимо задать идентификатор структуры приложения в настройке n2o.application.id
.
<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-2.0" welcome-page-id="index"> <header> ... <header> <sidebar> ... </sidebar> <footer> ... </footer></application>
#
Шапка (header)Шапка (header) - это заголовок каждой страницы, содержащий логотип и название, меню навигации, меню пользователя и строку поиска по приложению.
<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-2.0"> <header title="Мое приложение"> <nav> ... </nav> <extra-menu> ... </extra-menu> </header></application>
#
Боковая панельБоковая панель - содержит меню навигации, может содерждать логотип и название.
<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-2.0"> <sidebar title="Мое приложение"> <nav> ... </nav> <extra-menu> ... </extra-menu> </sidebar></application>
#
Подвал (footer)Подвал (footer) - информация, отображаемая внизу страницы.
<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-2.0"> <footer left-text="N2O ${n2o.version}"/></application>
#
Меню навигацииМеню навигации задаётся в файлах вида *.menu.xml
:
<?xml version='1.0' encoding='UTF-8'?><nav xmlns="http://n2oapp.net/framework/config/schema/menu-3.0"> <menu-item id="mi1" name="Первая страница"> <open-page page-id="menu1"/> </menu-item> <menu-item id="mi2" name="Вторая страница"> <open-page page-id="menu2"/> </menu-item> ...</nav>
Либо перечисляется внутри элементов <nav>
и <extra-menu>
шапки или боковой панели:
<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-2.0"> <header title="Мое приложение"> <nav> <menu-item id="mi1" name="Первая страница"> <open-page page-id="menu1"/> </menu-item> <menu-item id="mi2" name="Вторая страница"> <open-page page-id="menu2"/> </menu-item> </nav> </header> <sidebar title="Мое приложение"> <extra-menu> <menu-item id="mi1" name="Первая страница"> <open-page page-id="menu1"/> </menu-item> <menu-item id="mi2" name="Вторая страница"> <open-page page-id="menu2"/> </menu-item> </extra-menu> </sidebar></application>
На меню навигации, заданному в отдельном файле, можно ссылаться
через атрибут ref-id
в элементах <nav>
и <extra-menu>
шапки или боковой панели:
<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-2.0"> <header title="Мое приложение"> <nav ref-id="myMenu"/> <sidebar title="Мое приложение"> <extra-menu ref-id="myMenu"/> </sidebar></application>
Виды меню навигации
Вид | Описание |
---|---|
<menu-item> | Ссылка на страницу |
<dropdown-menu> | Вложенное меню |
#
СтраницаПриложения на N2O состоят из страниц.
Страницы задаются в файлах вида *.page.xml
.
Страницы могут иметь простую или сложную разметку.
Простая страница содержит один единственный компонент-виджет, занимающий всё свободное пространство.
<simple-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0" name="Моя страница"> <form>...</form><!-- Виджет --></simple-page>
Сложные страницы поделены на регионы, которые могут располагаться в разных областях страницы.
<?xml version='1.0' encoding='UTF-8'?><page xmlns="http://n2oapp.net/framework/config/schema/page-4.0" name="Моя страница"> <regions> <!-- Регионы --> </regions></page>
<?xml version='1.0' encoding='UTF-8'?><left-right-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0" name="Моя страница"> <left> <panel>...</panel> </left> <right> <panel>...</panel> </right></page>
<?xml version='1.0' encoding='UTF-8'?><top-left-right-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0" name="Моя страница"> <top> <panel>...</panel> </top> <left width="30%"> <panel>...</panel> </left> <right width="70%"> <panel>...</panel> </right></page>
<?xml version='1.0' encoding='UTF-8'?><searchable-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0" name="Моя страница"> <search-bar search-filter-id="name" search-param="name"/> <regions> <!-- Регионы --> </regions></searchable-page>
Виды страниц
Вид | React компонент | Описание |
---|---|---|
<simple-page> | SimplePage | Страница с единственным виджетом |
<page> | StandardPage | Страница с регионами |
<left-right-page> | LeftRightPage | Страница с разметкой регионов "слева и справа" |
<top-left-right-page> | TopLeftRightPage | Страница с разметкой регионов "сверху, слева и справа" |
<searchable-page> | SearchablePage | Страница с поисковой строкой |
#
РегионВ регион могут вкладываться произвольное количество виджетов и регионов. Регионы имеют свою верстку для различной компоновки виджетов.
<regions> <tabs> <!-- Вкладки --> <tab name="Один">...</tab> <tab name="Два">...</tab> ... </tabs></regions>
Виды регионов
Вид | React компонент | Описание |
---|---|---|
<region> | NoneRegion | Виджеты без обрамления |
<tabs> | TabsRegion | Виджеты во вкладках |
<panel> | PanelRegion | Виджеты в панелях |
<line> | ListRegion | Горизонтальная черта над виджетом |
#
ВиджетВиджеты отображают и управляют данными одного объекта.
Виджеты задаются в файлах вида *.widget.xml
:
<?xml version='1.0' encoding='UTF-8'?><table xmlns="http://n2oapp.net/framework/config/schema/widget-5.0" name="Моя таблица"> ...</table>
Можно вкладывать виджеты в страницу:
<?xml version='1.0' encoding='UTF-8'?><simple-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"> <table name="Моя таблица"> ... </table></simple-page>
Или в регион:
<?xml version='1.0' encoding='UTF-8'?><page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"> <regions> <table name="Моя таблица"> ... </table> </regions></page>
Виды основных виджетов
Вид | React компонент | Описание |
---|---|---|
<form> | FormWidget | Форма |
<table> | TableWidget | Таблица |
<list> | ListWidget | Список |
<tree> | TreeWidget | Дерево |
<cards> | CardsWidget | Карточки |
<tiles> | TilesWidget | Плитки |
Описание других виджетов можно посмотреть здесь.
#
ТаблицаТаблица - виджет N2O, представляющий данные в виде таблицы с возможностью сортировки, фильтрации, паджинации.
<?xml version='1.0' encoding='UTF-8'?><table xmlns="http://n2oapp.net/framework/config/schema/widget-5.0" name="Моя таблица" query-id="table"> <columns> <column text-field-id="firstName" label="Имя"/> <column text-field-id="lastName" label="Фамилия"/> </columns></table>
Столбцы таблицы задаются внутри элемента <columns>
.
#
ФормаФорма - виджет N2O, представляющий одну запись данных в виде полей с возможностью просмотра или редактирования.
<?xml version='1.0' encoding='UTF-8'?><form xmlns="http://n2oapp.net/framework/config/schema/widget-5.0" name="Моя форма"> <fields> <input-text id="firstName" label="Имя"/> <input-text id="lastName" label="Фамилия"/> </fields></form>
Поля формы задаются внутри элемента <fields>
.
#
Кнопки и действияВ N2O можно вызывать различные действия над виджетами: открытие страниц, ссылок, выполнение запросов на сервер и т.п.
#
Панель кнопокКнопки задаются в теле виджета внутри панели инструментов <toolbar>
:
<table> <toolbar> <button>...</button> <button>...</button> ... </toolbar></table>
Элемент <toolbar>
так же можно задать на странице:
<page> <toolbar> <button>...</button> <button>...</button> ... </toolbar></page>
В этом случае в кнопках необходимо уточнить над каким источником данных они выполняют действия:
<page> <toolbar> <button datasource="main">...</button> </toolbar></page>
Можно задать местоположение панели кнопок через атрибут place
:
<toolbar place="topLeft"> ...</toolbar><toolbar place="bottomRight"> ...</toolbar>
note
Местоположение панели кнопок зависит от реализации React компонента страницы и виджета.
Кнопки можно соединять в группы:
<toolbar> <group> <button>...</button> <button>...</button> ... </group> <group> ... </group></toolbar>
#
КнопкаКнопка - это визуальный элемент, на который можно нажать для выполнения действия. Кнопка может иметь разный размер, цвет, верстку:
<button label="Кнопка"/><button label="Кнопка с иконкой" icon="fa fa-plus"/><button label="Иконка" icon="fa fa-pencil" type="icon"/>
<button label="Главная" color="primary"/><button label="Опасная" color="danger"/><button label="Ссылка" color="link"/>
<sub-menu label="Меню"> <menu-item label="Один">...</menu-item> <menu-item label="Два">...</menu-item></sub-menu>
Кнопка является React компонентом и имеет несколько реализаций:
Виды кнопок
Вид | React компонент | Описание |
---|---|---|
<button> | PerformButton | Кнопка с действием |
<sub-menu> | DropdownButton | Кнопка с вложенным меню |
#
Действие кнопкиКнопки вида <button>
при нажатии выполняют определенное действие над виджетом.
Большинство действий выполняется с помощью библиотеки Redux.
Действия Redux меняют состояние React компонентов и отправляют запросы на сервер.
Виды действий
Вид | Redux действие | Описание |
---|---|---|
<invoke> | n2o/actionImpl/START_INVOKE | Отправка данных формы |
<show-modal> | n2o/modals/INSERT | Открытие модального окна |
<open-drawer> | n2o/overlays/INSERT_DRAWER | Открытие выдвижной панели |
<open-page> | Открытие вложенной страницы | |
<a> | Открытие ссылки | |
<close> | n2o/modals/CLOSE | Закрытие модального окна или возврат на предыдущую страницу |
<refresh> | n2o/widgets/DATA_REQUEST | Обновление данных виджета |
<clear> | n2o/widgets/DATA_REQUEST | Очистка данных виджета |
<copy> | n2o/widgets/DATA_REQUEST | Копирование данных виджета из одной модели в другую |
<print> | n2o/toolbar/PRINT_BUTTON | Печать документа |
Действие можно задать внутри кнопки:
<button label="Изменить"> <invoke operation-id="update"/></button>
Либо в элементе <actions>
в теле виджета:
<table> <actions> <action id="create" label="Создать"> <show-modal page-id="myForm" submit-operation-id="create"/> </action> </actions></table>
На одно и тоже действие виджета можно ссылаться из различных мест, которые могут выполнять действия, например, из кнопок:
<button action-id="create"/>
#
ФилдсетыФилдсеты группируют поля
и другие филдсеты со своей вёрсткой и логикой.
Филдсеты задаются в файлах вида *.fieldset.xml
.
<?xml version='1.0' encoding='UTF-8'?><set xmlns="http://n2oapp.net/framework/config/schema/fieldset-5.0"> ...</set>
Либо можно задать филдсет внутри формы:
<form> <fields> <set> ... </set> </fields></form>
Виды филдсетов
Вид | React компонент | Описание |
---|---|---|
<set> | StandardFieldset | Филдсет без верстки |
<line> | LineFieldset | Филдсет с горизонтальной чертой |
В филдсете поля можно расположить в строку или столбец
с помощью элементов <row>
и <col>
.
<fields> <set> <row> <!-- Первая строка с двумя столбцами --> <col size="8"> ... <!-- Поля первого столбца --> </col> <col size="4"> ... <!-- Поля второго столбца --> </col> </row> <row> ... <!-- Вторая строка --> </row> </set></fields>
Ширина столбца <col>
задается атрибутом size
.
Всего доступно 12 размеров согласно сетке Bootstrap.
Мульти-филдсеты
Существует возможность создавать филдсеты с динамическим числом полей. При нажатии кнопки добавления в филдсет будет добавлено еще одно поле или набор полей. Также имеется возможность удаления полей и копирования.
С помощью {index}
можно управлять нумерацией заголовков дочерних элементов
(Например: "Участник 1", "Участник 2" и т.д.). По умолчанию нумерация с нуля.
Для задания нумерации с единицы воспользуйтесь выражением {(index + 1)}
.
<form> <fields> <multi-set id="members" children-label="Участник {index}" add-label="Добавить участника" can-remove-all="true" remove-all-label="Удалить всех участников" can-copy="true"> ... </multi-set> </fields></form>
#
Поля вводаПоля ввода - это простейшие компоненты N2O, предназначенные для ввода или вывода различных данных. Поля могу содержать заголовок, подсказку, сообщения валидации и многое другое.
Поля перечисляются на форме в элементе <fields>
:
<form> <fields> <input-text id="name" label="Наименование"/> </fields></form>
Либо вкладываются в филдсет:
<line> <input-text id="name" label="Наименование"/></line>
Все поля должны иметь уникальный в рамках виджета идентификатор id
.
По нему происходит (#Связываниес_данными[связывание с данными].
Основные виды полей
Вид | React компонент | Описание |
---|---|---|
<input-text> | InputText InputNumber | Поле ввода текста или чисел |
<output-text> | OutputText | Поле вывода текста |
<checkbox> | Checkbox | Поле чекбокса |
<date-time> | DatePicker | Поле ввода даты и времени |
<select> | Select | Поле выбора из выпадающего списка |
<input-select> | InputSelect | Поле ввода текста с выбором из выпадающего списка |
<radio-group> | RadioGroup | Поле группы радио кнопок |
<checkbox-group> | CheckboxGroup | Поле группы чекбоксов |
<text-area> | TextArea | Многострочное поле ввода |
<input-select-tree> | InputSelectTree | Компонент ввода с выбором в выпадающем списке в виде дерева |
<text> | Text | Компонент текста |
<text-editor> | TextEditor | Компонент редактора текста |
<date-interval> | DateInterval | Компонент ввода интервала дат |
<code-editor> | CodeEditor | Компонент редактора кода |
<file-upload> | FileUpload | Компонент загрузки файлов |
<slider> | Slider | Компонент ползунок |
<time-picker> | TimePicker | Компонент ввода времени |
Описание других видов полей можно посмотреть здесь.
#
ЯчейкаЯчейки - это простейшие компоненты, которые отображают информацию в записях таблицы или списка.
Ячейки встраиваются в столбцы таблицы:
<table> <columns> <column text-field-id="birthday"> <text format="date DD.MM.YYYY"/> </column> </columns></table>
Или в содержимое виджета-списка:
<list> <content> <body text-field-id="birthday"> <text format="date DD.MM.YYYY"/> </body> </content></list>
<switch value-field-id="type"> <case value="type1"> <badge .../> </case> <case value="type2"> <icon .../> </case> ... <default> <text/> </default></switch>
Предоставляют возможность использовать различные виды ячеек в колонке в зависимости от условия.
Основные виды ячеек
Элемент | React компонент | Описание |
---|---|---|
<text> | TextCell | Текстовая ячейка |
<badge> | BadgeCell | Ячейка значок |
<icon> | IconCell | Ячейка иконка |
<link> | LinkCell | Ячейка ссылка |
<checkbox> | CheckboxCell | Ячейка чекбокс |
<toolbar> | ToolbarCell | Ячейка с меню кнопок |