Форма#

Форма представляет собой область на которой располагаются контролы и которая реализует определенную логику работы. Каждая форма регистрируется в системе под своим уникальным именем. Описание формы состоит из двух файлов: XML-файла разметки и JS-файла описания логики, реализованного в виде модуля, возвращаемого класс (наследника от Form или BaseForm). Эти файлы должны располагаться в каталоге проекта forms. Регистрация формы в системе (и если надо в меню) происходит в файле units.json.

Ознакомиться с подробностями работы механизма вёрстки форм и основными правилами вёрстки можно в статье Верстка экранных форм.

Макет формы#

Макет – это xml-файл, который содержит описание структуры документы, он содержит описание всех располагаемых на ней контролов.

Структура макета:

<Form >
  <ToolBar >
    описание кнопок в заголовке документа.
  </ToolBar>
  <PopupContainer>
    Описание вложенных форм, которые будут открываться в всплывающем окне.
  </PopupContainer>
  <Layout type='bootstrap' >
    Описание контролов в документе.
  </Layout>
</Form>

Свойства Form:

Наименование	Тип	Описание
title	строка	Заголовок формы

Права доступа#

Каждому элементу в макете можно настроить права доступа, настраиваются права добавлением свойств элементы формы:

Наименование	Тип	Описание
denyRoles	список через запяту	Роли, которым запрещен доступ к элементу (невидим)
readRoles	список через запяту	Роли, которым разрешено только видеть элемент и его содержимое
writeRoles	список через запяту	Роли, которым разрешен полный доступ к элементу.

Для доступа к форме ее корневой элемент (From) должен содержать право доступа. Права наследуются вниз по иерархии.

Пример:

1 2	`<Form writeRoles="super" title='Компания' > …`

Заголовок (тулбар)#

Содержит описание кнопок (Tool) в заголовке документа.

Рисунок 1 - Кнопки заголовка формы.

Свойства контрола Tool:

Наименование	Тип	Описание
id	строка	Уникальный идентификатор (имя) контрола.
caption	строка	Заголовок контрола
image	строка	Путь к картинке на кнопке
clicked	строка	Имя функции реализации события нажатия на элемент.
hint	строка	Тест всплывающей подсказки, которая появляется при наведении на контрол.
enabled	bool	Доступность контрола
visible	bool	Видимость контрола

Всплывающее окно#

Блок PopupContainer содержит описание всплывающих окон (PopupWindow), каждое из которых открывает внутри себя вложенную форму (NestedForm).

Более детальное описание будет в последующих блоках.

Содержимое формы#

Блок содержит описание контролов, которые будут расположены непосредственно на форме.

Свойства Layout:

Наименование	Тип	Описание
type	строка	Тип разметка. Принимает значение bootstarap или classic.

При bootstarap разметке ширина контролов на форме относительная (разделена на 12 столбцов на экран) и контролы располагаются слева на право

При classic разметке ширина задаётся в пикселях и процентах (как обычные HTML размеры), и контролы располагаются сверху вниз.

В большинстве форм на проектах используется bootstarap разметка.

Класс формы#

Класс описывается в отдельном js файле, содержит параметры формы и реализацию логики её работы.

Структура фала:

import { Form } from 'ecosoft-lexema8';
import template from './Form.xml';
export default class Form1 extends Form {
  static get template() {
    return template;
  }
}

Класс должен быть наследником Form, который импортируется из библиотеки классов Лексемы, а также должен переопределять свойство template, возвращая ссылку на файл макета формы.

Регистрация формы в системе#

Для того, что бы Лексема знала о существовании формы и зарегистрировала его под каким-то именем, надо описать ее в так называемых юнитах в файле units.json (по сути файл содержит массив объектов - юнитов).

Пример:

[
  {
    "name": "beginner",
    "caption": "Начальный уровень",
    "roles": [
      "super"
    ],
    "views": [
      {
        "key": "analyticalForm",
        "caption": "Аналитическая форма",
        "form": "./beginner/analyticalForm"
      }
    ]
  }
]

Юниты также используются для разделения кода приложения на логические блоки (chunks), которые позволяют уменьшить размер загружаемых данных при работе клиента и для разделения права доступа.

После создания файлов новой формы необходимо добавить её в соответствующий юнит приложения. Для этого необходимо отредактировать файл units.json:

добавить описание нового юнита;
в массив объектов views нового юнита добавить объект с описанием новой формы.

Свойства юнита:

Наименование	Тип	Описание
name	строка	Уникальное имя юнита.
caption	строка	Заголовок
roles	[строка]	Массив ролей, обладатели которых будут иметь доступ к данному юниту. Если не задан, то юнит будет доступен всем пользователям
views	[объект]	Массив объектов, каждый из которых является описанием представления ("остановки" маршрута view), либо описанием юнита (позволяет создать древовидную структуру).

Свойства views:

Наименование	Тип	Описание
key	строка	ключ представления
caption	строка	текст заголовка, под которым данное представление будет фигурировать в интерфейсе навигации. Если не задан, то представление не будет отображаться в меню документов
creation	bool	флаг, отвечающий за отображение иконки для создания документа из меню. Учитывается только для форм-наследников класса Registry. По умолчанию значение false
form	путь	1. класс формы, связанной с данным представлением 2. если модуль, содержащий класс, экспортирует его по умолчанию (export default class MyForm), то в качестве значения свойства form достаточно передать путь к модулю (например, "form": "./forms/myForm") 3. если класс импортируется из библиотеки, то, в большинстве случаев, он экспортируется под каким-то конкретным именем, и должен быть импортирован с помощью второго варианта (например, "form": ["SearchForm", "ecosoft-lexema8-app-lib"])

Добавление в меню#

Помимо регистрации формы в системе юниты отвечают за формирование ссылки на форму в меню системы. Для этого должно быть заполнено свойство caption. В меню юнит выглядит как каталог, а содержащиеся в нём формы – как пункты меню. Пример:

Рисунок 2 - Отображение формы в меню

Пример:

[
  {
    "name": "chocolate",
    "caption": "Про шоколад",
    "roles": [
      "super"
    ],
    "views": [
      {
        "key": "ingredientRegistry",
        "caption": "Ингредиенты",
        "form": "./forms/vi/chocolate/ingredientRegistry",
        "creation": true
      },
      {
        "key": "chocolateRegistry",
        "caption": "Шоколад",
        "form": "./forms/vi/chocolate/chocolateRegistry",
        "creation": true
      },
      {
        "key": "searchForm",
        "caption": "Поиск",
        "form": [
          "searchForm",
          "myAppLib"
        ]
      },
      {
        "key": "ingredientForm",
        "form": "./forms/vi/chocolate/ingredientForm"
      },
      {
        "key": "chocolateForm",
        "form": "./forms/vi/chocolate/chocolateForm"
      },
      {
        "name": "справочники",
        "caption": "справочники",
        "roles": [
          "super"
        ],
        "views": [
          {
            "key": "kindRegistry",
            "caption": "Виды",
            "form": "./forms/vi/chocolate/kindRegistry",
            "creation": true
          },
          {
            "key": "kindForm",
            "form": "./forms/vi/chocolate/kindForm"
          }
        ]
      }
    ]
  }
]