Skip to main content

Страницы

Тип метаданных

page

Библиотека компонентов

http://n2oapp.net/framework/config/schema/page-4.0

Настройки

# Показывать заголовок
n2o.api.page.show_title=false

Виды страниц

<simple-page>

Страница с единственным виджетом.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
nameСтрокаНаименование страницыБерётся из виджета
titleСтрокаЗаголовок страницы
html-titleСтрокаЗаголовок вкладки браузераНаименование страницы
routeСтрокаURL страницыФормируется из идентификатора страницы
modal-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
modelresolve edit filter multi datasourceМодель данных страницыresolve

Тело
Виджет
<breadcrumbs> - Хлебные крошки

Пример

<?xml version='1.0' encoding='UTF-8'?>
<simple-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
name="Моя страница">
<breadcrumbs>...</breadcrumbs>
<form>...</form>
</simple-page>

<page>

Страница с регионами.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcСтрокаReact компонент страницы
nameСтрокаНаименование страницы
titleСтрокаЗаголовок страницы
html-titleСтрокаЗаголовок вкладки браузераНаименование страницы
routeСтрокаURL страницыФормируется из идентификатора страницы
modal-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
datasourceСсылка на источник данныхИдентификатор источника данных страницы
modelresolve edit filter multi datasourceМодель данных страницыresolve

Тело
<regions> - Регионы страницы
<datasources> - Источники данных страницы
<toolbar> - Меню управляющих кнопок страницы
<actions> - Встроенные действия страницы
<breadcrumbs> - Хлебные крошки
<events> - События страницы

Пример

<?xml version='1.0' encoding='UTF-8'?>
<page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
name="Моя страница">
<breadcrumbs>...</breadcrumbs>
<regions>...</regions>
<actions>...</actions>
<toolbar>...</toolbar>
<datasources>...</datasources>
<events>...</events>
</page>

<regions>

Регионы страницы.

Тело
Список элементов регионов

<left-right-page>

Страница с двумя регионами.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcСтрокаReact компонент страницы
nameСтрокаНаименование страницы
titleСтрокаЗаголовок страницы
html-titleСтрокаЗаголовок вкладки браузераНаименование страницы
routeСтрокаURL страницыФормируется из идентификатора страницы
modal-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
datasourceСсылка на источник данныхИдентификатор источника данных страницы
modelresolve edit filter multi datasourceМодель данных страницыresolve

Тело
<left> - Регион слева
<right> - Регион справа
<datasources> - Источники данных страницы
<toolbar> - Меню управляющих кнопок страницы
<actions> - Встроенные действия страницы
<breadcrumbs> - Хлебные крошки
<events> - События страницы

Пример

<?xml version='1.0' encoding='UTF-8'?>
<left-right-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
name="Моя страница">
<datasources>...</datasources>
<actions>...</actions>
<toolbar>...</toolbar>
<left>...</left>
<right>...</right>
</left-right-page>

<left>

Регионы для left-right-page.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
widthСтрокаШирина региона. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px

Тело
Список регионов
Список виджетов

Пример

<left width="40%">...</left>
<right width="60%">...</right>

<top-left-right-page>

Страница с тремя регионами.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcСтрокаReact компонент страницы
nameСтрокаНаименование страницы
titleСтрокаЗаголовок страницы
html-titleСтрокаЗаголовок вкладки браузераНаименование страницы
routeСтрокаURL страницыФормируется из идентификатора страницы
modal-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
scroll-top-buttontrue falseПоказывается ли кнопка скролла в начало страницыfalse
datasourceСсылка на источник данныхИдентификатор источника данных страницы
modelresolve edit filter multi datasourceМодель данных страницыresolve

Настройки

# Показывается ли кнопка скролла в начало страницы
n2o.api.page.top_left_right.scroll_top_button=false

Тело
<top> - Регион сверху
<left> - Регион слева
<right> - Регион справа
<datasources> - Источники данных страницы
<toolbar> - Меню управляющих кнопок страницы
<actions> - Встроенные действия страницы
<breadcrumbs> - Хлебные крошки
<events> - События страницы

Пример

<?xml version='1.0' encoding='UTF-8'?>
<top-left-right-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
name="Моя страница">
<datasources>...</datasources>
<actions>...</actions>
<toolbar>...</toolbar>
<top>...</top>
<left>...</left>
<right>...</right>
</top-left-right-page>

<top>

<left>

<right>

Регионы для top-left-right-page.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
widthСтрокаШирина региона. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
fixedtrue falseЗафиксирован ли регион. Фиксироваться может максимум 2 региона из 3false
offsetЧислоОтступ от верхней границы при фиксировании

Настройки

# Зафиксирован ли регион
n2o.api.page.top_left_right.region.fixed=false

Тело
Список регионов
Список виджетов

Пример

<top fixed="true" offset="100">...</top>
<left width="40%">...</left>
<right fixed="true" width="60%" offset="100">...</right>

<searchable-page>

Страница с поисковой строкой.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcСтрокаReact компонент страницы
nameСтрокаНаименование страницы
titleСтрокаЗаголовок страницы
html-titleСтрокаЗаголовок вкладки браузераНаименование страницы
routeСтрокаURL страницыФормируется из идентификатора страницы
modal-sizesm lgРазмер модального окна, если страница открыта в модальном окне
show-titletrue falseПоказывать заголовок страницы?false
datasourceСсылка на источник данныхИдентификатор источника данных страницы
modelresolve edit filter multi datasourceМодель данных страницыresolve

Настройки

#Триггер вызова поиска (CHANGE, ENTER, BUTTON)
n2o.api.page.searchable.trigger=CHANGE
#Задержка поиска при CHANGE тригере
n2o.api.page.searchable.throttle-delay=1000

Тело
<search-bar> - Поисковая строка
<regions> - Регионы страницы
<datasources> - Источники данных страницы
<toolbar> - Меню управляющих кнопок страницы
<actions> - Встроенные действия страницы
<breadcrumbs> - Хлебные крошки
<events> - События страницы

Пример

<?xml version='1.0' encoding='UTF-8'?>
<searchable-page xmlns="http://n2oapp.net/framework/config/schema/page-4.0"
name="Моя страница">
<search-bar/>
<regions>...</regions>
<actions>...</actions>
<toolbar>...</toolbar>
</page>

Поисковая строка.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
classCSS классКласс компонента
placeholderСтрокаПодсказка для ввода
datasourceСсылка на источник данныхИдентификатор источника данных, в котором производится поискГлавный виджет страницы
search-filter-idСтрокаИдентификатор фильтра!
search-paramСтрокаПараметр поискаИдентификатор виджета + Идентификатор фильтра (table_name)

Пример

<search-bar button-label="Искать" datasource="main" search-filter-id="name"/>

Источники данных страницы

<datasources>

Тело
Источники данных

Меню управляющих кнопок

<toolbar>

Меню управляющих кнопок

Настройки

# Значение по умолчанию аттрибута place группы кнопок в тулбаре страницы
n2o.api.page.toolbar.place=bottomRight

Пример

<page>
<toolbar place="topLeft" generate="submit, close">
<group>...</group>
<button>...</button>
<sub-menu>...</sub-menu>
</toolbar>
</page>

Встроенные действия

<actions>

Список действий над объектом.

Тело
<action> - Действие страницы

Пример

<actions>
<action>...</action>
<action>...</action>
<action>...</action>
</actions>

<action>

Действие страницы.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
idСтрокаИдентификатор действия!
nameСтрокаНаименованиеВычисляется по операции объекта
routeСтрокаURL действияФормируется из идентификатора действия
iconКласс иконкиИконка действияВычисляется, если id действия из списка стандартных действий.
hotkeyСочетание клавишГорячая клавиша вызоваВычисляется, если id действия из списка стандартных действий. Например, для save горячая клавиша Enter.
visibletrue falseВидимость действияtrue
enabledtrue falseДоступность действияtrue
modelresolve edit filter multi datasourceМодель, на которой выполнится действиеresolve
datasourceСсылка на источник данныхИдентификатор источника данных для выполнения действия

Тело
Обработчики действий

Пример

<action
id="save">
<close/>
<invoke
operation-id="update"
model="edit"
confirm="false"/>
<open-page page-id="test"/>
</action>

Настройки

# Добавление навигационной цепочки на страницу
n2o.api.page.breadcrumbs=true

Тело
<crumb> - Хлебная крошка

note

При отсутствии дочерних элементов хлебные крошки страницы будут построены в режиме по умолчанию

Пример

<breadcrumbs>
<crumb label="Первая страница" path="/"/>
<crumb label="Вторая страница" path="/test"/>
<crumb label="Третья страница"/>
</breadcrumbs>

<crumb>

Хлебная крошка.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
labelСтрокаНазвание хлебной крошки!
pathСтрокаПуть для перехода по хлебной крошке

Пример

<crumb label="Домашняя страница" path="/"/>

События страницы

<events>

События, отслеживаемые на странице.

Пример

<events>
<on-change>...</on-change>
<on-change>...</on-change>
</events>

Тело
<on-change> - Событие изменения модели данных

<on-change>

Событие изменения модели данных.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор события
field-idСтрокаПоле источника данных, в котором будут отслеживаться измененияПо умолчанию изменения будут отслеживаться во всех полях модели
modelresolve edit filter multi datasourceМодель источника данных, в которой будут отслеживаться измененияresolve
datasourceСсылка на источник данныхИсточник данных, в котором будут отслеживаться изменения
action-idСсылка на действие страницыДействие страницы, которое будет вызвано при изменении данных

Настройки

# Тип события <on-change> на клиенте
n2o.api.page.event.on_change.type=OnChange

Тело
Обработчики действий

Пример

<on-change datasource="ds2" field-id="name">
<invoke>...</invoke>
<alert>...</alert>
</on-change>