Перейти к содержанию

Создание формы#

С помощью VSCode откроем проект.

В каталоге source/forms создайте два файла:

ControlsForm.js - описание логики работы формы

ControlsForm.xml - макет формы

Наименование формы формируется по правилу «Уникальное имя в проекте» + «Form».

В ControlsForm.xml вставьте шаблон макета формы: (Шаблон макета формы ControlsForm.xml) и сохраните изменения.

1
2
3
4
5
6
<Form writeRoles='Super' title='Элементы управления'>
  <ToolBar>
  </ToolBar>
  <Layout type='bootstrap' >
  </Layout>
</Form>

В ControlsForm.js вставьте шаблон документа:(Шаблон описания логики работы формы ControlsForm.js) и сохраните изменения.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { Form } from 'ecosoft-lexema8'; // импорт компонентов из библиотеки ecosoft-lexema8
import template from './ControlsForm.xml'; // импорт макета документа
 
export default class ControlsForm extends Form {
  
  // макет документа
  static get template(){
    return template;
  }
}

Добавим права доступа на форму и сразу объявим ее в меню. Для этого в документе units.json вставьте следующий код:  (Шаблон units.json) и сохраните изменения.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
[
  {
    "caption": "Моя группа",
    "name": "MyGroup",
    "views": [
      {
        "caption": "Элементы управления",
        "key": "ControlsForm",
        "form": "./forms/ControlsForm"
      }
    ]
  }
]

В данном примере мы создали папку «Моя группа», внутри пункт «Элементы управления» с ссылкой на нашу новую форму.

Теперь запустим сервер разработки (в консоли, находясь в корневом каталоге проекта):

1
npm run dev

Если всё сделано верно, проект соберется и запустится локальный сервер разработки.

Откройте страницу в браузере: http://localhost:3337/# . Откройте меню.

Нажмем на «Элементы управления», откроется форма.

Теперь займёмся расположением на ней элементов управления.

Тулбар#

ToolBar (Тулбар) - элемент управления с кнопками (панель управления).

Добавим в панель управления кнопку «Закрыть», которая будет закрывать форму (аналог крестику на вкладке).

В макет формы ControlsForm.xml в ToolBar добавим строку: (Добавление в панель управления кнопки “Закрыть”)

1
<Tool id="toolBarItemExit" caption="Закрыть" image="current-theme/images/leftNavBar/close.png" clicked='toolBarItemExit_clicked'/>

Tool – элементы ToolBar. Может содержать вложенные Tool-ы.

В ControlsForm.js в класс добавим реализацию функции toolBarItemExit_clicked кнопки «Закрыть» (Добавление реализации функции toolBarItemExit_clicked):

1
2
3
toolBarItemExit_clicked() {
    this.close();
  }

Сохраним изменения. После сборки проекта проверим изменения.

На форме должна появиться кнопка “Закрыть”, при нажатии на которую форма закроется.

Теперь добавим на форму базовые элементы управления.

Базовые элементы управления#

Все элементы управления на форме должны быть внутри тэга Layout в макете формы.

Сделаем вывод в текстовое поле выбранной даты по нажатию на кнопку.

Добавим следующие элементы:

Группа

Текстовое поле

Кнопка

Дата

В ControlsForm.xml в Layout добавьте строки:(Добавление элементов управления в макет формы)

1
2
3
4
5
6
7
<Group caption='Параметры' id='gr1' editorWidth='12' showBorder='true'>
      <DateTimeInput caption='Дата' id='DateTimeInput1' format='dd.MM.yyyy HH:mm' bindingMode='date' width='100%' captionWidth='1' editorWidth='2' />
      <Button value='Print' id='ButtonPrint' captionWidth='0' editorWidth='1' width='100%' clicked='ButtonPrint_clicked' />
    </Group>
    <Group caption='Результат' id='gr2' editorWidth='12' showBorder='true'>
      <TextBox id='TextBox1' captionWidth='0' editorWidth='6' width='100%' />
    </Group>

Сохраните изменения. После сборки форма должна выглядеть так:

Теперь добавим реализацию 'ButtonPrint_clicked' кнопки «Print»: (Реализация функции 'ButtonPrint_clicked' )

1
2
3
ButtonPrint_clicked() {
    this.controls.TextBox1.value = this.controls.DateTimeInput1.value;
  }

Сохраним изменения и проверим результат. Откройте форму и протестируйте: выберите дату, нажмите на «Print», должно получиться:

Давайте придадим результату более удобный вид и добавим проверку на undefined у поля даты: (Добавление проверки на undefined и предоставление результату удобного вида)

1
2
3
4
5
this.controls.TextBox1.value = 
this.controls.DateTimeInput1.value ? 
`${this.controls.DateTimeInput1.value
.toLocaleDateString('ru-ru')} 
${this.controls.DateTimeInput1.value.toTimeString()}`: '';

Результат:

Уже лучше, но информация с часовым поясом нам не нужна. Давайте обрежем строку с временем:(Исключение строки с временем)

1
this.controls.TextBox1.value = this.controls.DateTimeInput1.value ? `${this.controls.DateTimeInput1.value.toLocaleDateString('ru-ru')} ${this.controls.DateTimeInput1.value.toTimeString().substr(0, 8)}`: '';

Сохраним изменения и проверим результат.

Отлично. Помимо стандартных элементов управления существуют более сложные (список, таблица, чарт), но с ними познакомимся в следующих уроках.