Визуальные компоненты

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-1.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-1.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-1.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-1.0">    <footer left-text="N2O 7.17.0 2013-2021"/></application>

Меню навигации#

Меню навигации задаётся в файлах вида *.menu.xml:

Меню навигации в отдельном файле

<?xml version='1.0' encoding='UTF-8'?><nav xmlns="http://n2oapp.net/framework/config/schema/menu-2.0">  <page page-id="menu1" label="Первая страница"/>  <page page-id="menu2" label="Вторая страница"/>  ...</nav>

Либо перечисляется внутри элементов <nav> и <extra-menu> шапки или боковой панели:

Меню навигации в приложении

<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-1.0">    <header title="Мое приложение">        <nav>          <page page-id="menu1" label="Первая страница"/>          <page page-id="menu2" label="Вторая страница"/>        </nav>    </header>    <sidebar title="Мое приложение">        <extra-menu>          <page page-id="menu1" label="Первая страница"/>          <page page-id="menu2" label="Вторая страница"/>        </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-1.0">    <header title="Мое приложение">        <nav ref-id="myMenu"/>    <sidebar title="Мое приложение">        <extra-menu ref-id="myMenu"/>    </sidebar></application>

Виды меню навигации

Вид	Описание
`<page>`	Ссылка на страницу N2O
`<a>`	Ссылка на произвольную страницу
`<sub-menu>`	Вложенное меню

Страница#

Приложения на N2O состоят из страниц. Страницы задаются в файлах вида *.page.xml. Страницы могут иметь простую или сложную разметку.

Простая страница содержит один единственный компонент-виджет, занимающий всё свободное пространство.

Простая страница

<simple-page xmlns="http://n2oapp.net/framework/config/schema/page-3.0"  name="Моя страница">  <form>...</form><!-- Виджет --></simple-page>

Сложные страницы поделены на регионы, которые могут располагаться в разных областях страницы.

Стандартная страница

<?xml version='1.0' encoding='UTF-8'?><page xmlns="http://n2oapp.net/framework/config/schema/page-3.0"  name="Моя страница">  <regions>    <!-- Регионы -->  </regions></page>

Страница с разметкой регионов

<?xml version='1.0' encoding='UTF-8'?><left-right-page xmlns="http://n2oapp.net/framework/config/schema/page-3.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-3.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-3.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-4.0"       name="Моя таблица">    ...</table>

Можно вкладывать виджеты в страницу:

Виджет внутри страницы

<?xml version='1.0' encoding='UTF-8'?><simple-page xmlns="http://n2oapp.net/framework/config/schema/page-3.0">  <table name="Моя таблица">      ...  </table></simple-page>

Или в регион:

Виджет внутри региона

<?xml version='1.0' encoding='UTF-8'?><page xmlns="http://n2oapp.net/framework/config/schema/page-3.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-4.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-4.0"  name="Моя форма">  <fields>    <input-text id="firstName" label="Имя"/>    <input-text id="lastName" label="Фамилия"/>  </fields></form>

Поля формы задаются внутри элемента <fields>.

Автоматическое сохранение данных формы#

В N2O есть возможность автоматически сохранять данные формы без необходимости нажатия кнопки. Для этого используется действие формы <submit>.

Автоматическое сохранение формы

<?xml version='1.0' encoding='UTF-8'?><form xmlns="http://n2oapp.net/framework/config/schema/widget-4.0"      name="Моя форма">  <fields>    <input-text id="firstName" label="Имя"/>    <input-text id="lastName" label="Фамилия"/>  </fields>  <submit operation-id="update"/></form>

Кнопки и действия#

В N2O можно вызывать различные действия над виджетами: открытие страниц, ссылок, выполнение запросов на сервер и т.п.

Панель кнопок#

Кнопки задаются в теле виджета внутри панели инструментов <toolbar>:

Кнопки виджета

<table>  <toolbar>    <button>...</button>    <button>...</button>    ...  </toolbar></table>

Элемент <toolbar> так же можно задать на странице:

Кнопки страницы

<page>    <toolbar>      <button>...</button>      <button>...</button>      ...    </toolbar></page>

В этом случае в кнопках необходимо уточнить над каким виджетом они выполняют действия:

Виджет над которым произойдет действие кнопки

<page>  <toolbar>    <button widget-id="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	Кнопка с действием
<link>	LinkButton	Кнопка-ссылка на другую страницу
<sub-menu>	DropdownButton	Кнопка с вложенным меню

Действие кнопки#

Кнопки вида <button> при нажатии выполняют определенное действие над виджетом. Большинство действий выполняется с помощью библиотеки Redux. Действия Redux меняют состояние React компонентов и отправляют запросы на сервер.

Виды действий

Вид	Redux действие	Описание
<invoke>	n2o/actionImpl/START_INVOKE	Отправка данных формы
<show-modal>	n2o/modals/INSERT	Открытие модального окна
<open-page>		Открытие вложенной страницы
<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-4.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	Ячейка с меню кнопок