Skip to main content

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

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Ячейка с меню кнопок