Элементы управления экранных форм

Материал из Lexema.ru
Перейти к: навигация, поиск

Экранные формы (ЭФ) являются компонентом Lexema.ru, с которым непосредственно работают конечные пользователи системы. Экранная форма состоит из множества различных элементов управления (контролов, виджетов, компонентов), имеющих разное назначение и выполняющих разные функции. ЭФ имеет древовидную иерархическую структуру, некоторые её элементы являются контейнерами и содержат дочерние элементы (например, группа LayoutGroup, "аккордеон" Expander, панель вкладок Tabs).

В дерево элементов экранной формы могут быть добавлены следующие компоненты:

  • RootItem - корневой элемент экранной формы
  • Toolbar - панель инструментов
    • кнопки панели инструментов
      • SaveToolbarItem - сохранение текущего документа
      • CloseToolbarItem - закрытие текущего документа
      • SaveCloseToolbarItem - сохранение и закрытие текущего документа
      • NewDocumentToolbarItem - создание нового документа
      • DeleteToolbarItem - удаление документа
      • UndoToolbarItem - отмена последнего действия
      • RedoToolbarItem - повторение действия
      • ReportToolbarItem - вывод отчёта
      • SelectPeriodToolbarItem - выбор расчётного периода
      • CalculationToolbarItem - произвольные вычисления
      • SaveAndNewToolbarItem - сохранение текущего документа и создание нового
      • ToolbarPopupButton - кнопка для отображения встроенной экранной формы во фрейме
  • LayoutForm - контейнер для всех основных визуальных компонентов формы (за исключением панели инструментов)
  • BootstrapLayout - контейнер для разметки формы с использованием адаптивных ("резиновых") групп (BootstrapLayoutGroup) набора инструментов Twitter Bootstrap
  • PopupContainer - контейнер для отображения вложенных экранных форм в отдельном фрейме
  • Gis -
  • LayoutGroup - контейнер для группировки логически связанных элементов управления
  • BootstrapLayoutGroup - аналог LayoutGroup, позволяющий создавать группы элементов, адаптирующиеся к ширине страницы ("резиновый" дизайн)
  • Tabs - контейнер, позволяющий создавать несколько групп элементов, переключение между которыми осуществляется с помощью вкладок
  • Expander - контейнер, позволяющий сворачивать и разворачивать группу элементов управления ("аккордеон")
  • break -
  • widget -
  • HtmlBox - блок, позволяющий вводить произвольный HTML-код
  • NavigationBar - контейнер для нескольких групп элементов, которые можно разворачивать и сворачивать
  • JqxMenu -
  • DragDrop -
  • DocumentsMenu -
  • Map -
  • Grid - таблица, позволяющая редактировать содержимое ячеек
  • AnalyticalGrid - таблица, предназначенная только для отображения значений
  • Pivot - элемент для отображения сводных таблиц
  • Tree -
  • TextBox - поле для ввода текста общего назначения
  • NumberInput - поле для ввода числовых значений (целых и дробных)
  • DateTimeInput - поле для выбора даты
  • MaskedInput - маскированное поле для ввода
  • Input -
  • Memo - многострочное поле для ввода текста
  • AutoCompleteAddressTextBox -
  • CheckBox - флажок (переключатель)
  • JqxRadioButton -
  • Button - кнопка
  • GlyphButton - кнопка с изображением
  • JqxRepeatButton -
  • JqxToggleButton -
  • Link - гипер-ссылка
  • Image - изображение из БД
  • CustomImage -
  • FileUpload - элемент для загрузки файлов
  • Chart - элемент для отображения графиков и диаграмм
  • Rating -
  • Lookup - выпадающий список
  • DropDownList -
  • PagableLookup - выпадающий список с возможностью постраничного отображения

RootItem

Корневой элемент экранной формы (ЭФ), является родительским контейнером для всех дочерних элементов, не визуальный. Свойства:

  • id - уникальный идентификатор блока формы (тега div)
  • title - заголовок ЭФ, отображается в заголовке окна браузера, а так же в качестве названия вкладки страницы Lexema.ru

В RootItem могут быть добавлены следующие дочерние элементы:

  • LayoutForm
  • BootstrapLayout
  • Toolbar
  • PopupContainer
  • Gis

Toolbar

Панель инструментов, служит для отображения кнопок. Существует ряд предопределённых кнопок, которые могут быть добавлены на панель, каждая кнопка имеет специфический значок и предназначена для выполнения определённой функции. При автоматической генерации элементов при создании формы некоторые кнопки панели инструментов создаются автоматически, также для них генерируются обработчики событий с соответствующим программным кодом. Исключение составляет кнопка CalculationToolbarItem, предназначения для выполнения произвольных программных сценариев-вычислений, которые создаются прикладным разработчиком.

SaveToolbarItem

Кнопка для сохранения документа. Обработчик события ItemClick, как правило, содержит следующий код:

L8.System.SaveDocument();

Данный код может быть дополнен, к примеру, проверкой корректности данных, введённых в поля формы.

CloseToolbarItem

Кнопка для закрытия документа. Обработчик события ItemClick, как правило, содержит следующий код:

L8.System.CloseDocument();

SaveCloseToolbarItem

Кнопка для сохранения и закрытия документа. Обработчик события ItemClick, как правило, содержит следующий код:

L8.System.SaveAndCloseDocument();

NewDocumentToolbarItem

Кнопка для создания нового документа. В большинстве случаев используется в реестре документов. Обработчик события ItemClick, как правило, содержит следующий код:

L8.System.CreateDocument(L8.System.LinkedViewModel);

L8.System.LinkedViewModel - это наименование связанной экранной формы, кот. вводится в соответствующем поле ЭФ.

DeleteToolbarItem

Кнопка для удаления одного или нескольких выделенных документов. В большинстве случаев используется в реестре документов. Обработчик события ItemClick, как правило, содержит следующий код:

L8.System.DeleteRegistryDocument();

UndoToolbarItem

Кнопка для отмены последнего действия при редактировании документа.

RedoToolbarItem

Кнопка для повтора последнего действия при редактировании документа.

ReportToolbarItem

Кнопка для вывода отчёта, может применяться как в документах, так и в реестрах. Код обработчика нажатия на эту кнопку пишется прикладным разработчиком вручную. Пример кода приведён ниже:

// считывание значений параметров из полей формы
var costFromParam = L8.View.NumberInput1.value,
    costToParam = L8.View.NumberInput2.value,
    isActualParam = L8.View.CheckBox1.value;

// открытие отчёта    
L8.System.openReport({name:'TestModelReport', 
    parameters:[{costFrom: costFromParam, costTo: costToParam, isActual: isActualParam}]});

Подробнее процесс создания кода открытия отчёта описан в соответствующем разделе статьи "Создание отчёта на основе запроса".

SelectPeriodToolbarItem

Кнопка для отображения диалога вывода расчётного периода. В большинстве случаев используется в реестре документов. Обработчик события ItemClick, как правило, содержит следующий код:

L8.System.selectDatePeriod.openDialog();

CalculationToolbarItem

Кнопка для запуска произвольных вычислений. Соответствующий JS-код должен быть записан в обработчике нажатия на кнопку (ItemClick).

SaveAndNewToolbarItem

Кнопка для сохранения текущего и создания нового документа. Обработчик события ItemClick, как правило, содержит следующий код:

L8.System.SaveAndNewDocument();

ToolbarPopupButton

Кнопка для отображения/скрытия всплывающего фрейма, содержащего элементы управления другой формы. Для корректной работы данного механизма необходимо наличие в форме элементов PopupContainer, PopupWindow и NestedForm.

Процесс подключения встроенной во фрейм экранной формы описан в ...

LayoutForm

BootstrapLayout

PopupContainer

Gis

LayoutGroup

BootstrapLayoutGroup

Tabs

Expander

break

widget

HtmlBox

NavigationBar

JqxMenu

DragDrop

DocumentsMenu

Map

Grid

AnalyticalGrid

Pivot

Tree

TextBox

NumberInput

DateTimeInput

MaskedInput

Input

Memo

AutoCompleteAddressTextBox

CheckBox

JqxRadioButton

Button

GlyphButton

JqxRepeatButton

JqxToggleButton

Link

Image

CustomImage

FileUpload

Chart

Rating

Lookup

DropDownList

PagableLookup