Разработка форм и отчётов

Визуальные компоненты - основные элементы пользовательского интерфейса. Основными визуальными компонентами являются регионы - контейнеры элементов и средства вывода данных. Основным контейнером элементов является форма (см. FORM), основным средством вывода данных - отчёт (см. REPORT).

Регионы и компоненты

Компоненты страницы делятся на два типа: визуальные и невизуальные. К невизуальным относятся процессы, валидации и динамические события, в данном разделе будут рассмотрены визуальные, в числе которых:

  1. Верхнее меню и меню навигации слева. Компоненты глобальной страницы, настройки которых определяются на уровне приложения и не меняются от страницы к странице.

  2. Регионы - контейнеры элементов. Могут содержать в себе поля для ввода, кнопки и другие регионы, либо непосредственно выводить данные в виде отчётов, графиков и других способов предоставления информации. Являются основными компонентами страницы.

  3. Прикрепляющиеся к регионам элементы можно разбить на следующие группы:

  • Элементы ввода.

  • Элементы выбора.

  • Кнопки.

Расположение компонентов на странице

../_images/com_s.png

Для региона обязательным параметром является положение на странице.

В XRAD представлен выбор из пяти вариантов расположения:

  • верх (top). Здесь удобно расположить регион типа “хлебные крошки”, либо другой вариант заголовка страницы

  • лево (left). Хороший вариант расположить навигационную панель, дерево объектов, либо форму фильтров.

  • центр (body). Здесь регионы с основными содержимым страницы: отчёты, формы ввода и т.д.

  • право (right). Удобный вариант для панели дополнительных инструментов.

  • низ (footer). На страницах вида модальное окно здесь располагаются кнопки.

Выбор варианта расположения происходит в момент создания региона на левой панели дерева объектов в конструкторе. В последующем регион можно переместить в другую область страницы, поменяв ему в параметрах свойство “местоположение”(Position).

На рисунке продемонстрированы варианты расположения регионов на странице относительно друг друга и глобальных визуальных компонентов:

../_images/location.png

Расположение компонентов на сетке

Визуальные компоненты страницы - регионы и элементы формы (элементы ввода, выбора и кнопки формы) располагаются в сетке из 12 колонок.

Сетка для регионов верхнего уровня (в качестве родителя указана страница) определяет положение региона внутри области расположения, для вложенных регионов сетка определяет положение внутри родительского региона, как и для элементов формы.

../_images/nets.png

В конструкторе XRAD положение компонента на сетке регулируется следующими параметрами:

  • Диапазон столбцов (Column Span). Принимает значение от 1 до 12, либо Automatic. Указывает количество ячеек сетки, занимаемых компонентом. По умолчанию значение 12 для регионов и Automatic для элементов формы.

  • Начать новую строку (Start New Row). Переключатель, принимающий значение true / false. Указывает на то, должен ли компонент занять указанное количество ячеек слева начиная с новой строки, или должен продолжить строку, вслед за предыдущим компонентом по порядку, определяющемуся свойством последовательность.

../_images/comparam.png

В одной строке сетки не может быть заполнено более 12 ячеек. В случае, если сумма диапазонов столбцов для компонентов без переноса строки превысит 12, сохранить страницу не получится. В случае, если сумма компонентов одной строки составит менее 12, оставшиеся ячейки составят свободное пространство.

Параметры регионов

В таблице данного раздела перечислены все параметры регионов. В зависимости от вида региона, их набор может различаться.

Параметр

Тип

Описание

Имя

Текст

Имя региона. Определяет отображение региона в дереве объектов и настройках других компонентов, а также выводится в заголовке региона на странице приложения.

Тип

Список

Тип региона. Определяет набор параметров и наличие особых атрибутов региона, отображение региона на странице приложения.

Последовательность

Число

Порядковый номер региона. Определяет положение региона на сетке внутри области расположения / родительского региона.

Родительский регион

Список

В списке на выбор - страница и регионы, не являющиеся дочерними для данного. В случае выбора страницы, регион будет отрисован внутри области расположения, иначе внутри выбранного региона.

Позиция

Список

Выбор области расположения региона. Подробнее см. Расположение компонентов на странице

Тип

Список

Тип региона. Определяет набор параметров и наличие особых атрибутов региона, отображение региона на странице приложения.

Диапазон столбцов

Число

Выбор Automatic, либо число 1-12. Указывает количество ячеек сетки, занимаемых регионом. По умолчанию 12. Подробнее см. Расположение компонентов на сетке

Начать новую строку

Переключатель

Определяет положение на сетке по вертикали. Подробнее см. Расположение компонентов на сетке

Настройки темы

Окно настроек

Настройка темы региона

Классы компонентов

Текст

Классы дочерних компонентов внутри региона

Классы css

Текст

Классы css региона

Показать заголовок

Переключатель

Определяет, будет ли отображено имя региона в заголовке и визуальная область заголовка (важно для позиции кнопок - “в заголовке”)

Складной

Переключатель

Определяет, будет ли регион сворачиваемым

Активен

Переключатель

Определяет, будет ли регион свёрнут по умолчанию. Параметр доступен только если “Складной” = “да”

Статический идентификатор

Текст

Задаёт идентификатор для региона для дальнейшего обращения к нему из jsAPI

Источник - Тип

Список

Определяет тип источника данных. Применим для регионов типа HTML. На выбор два варианта:

  • Статический. В поле исходный текст потребуется ввести текст HTML.

  • SQL. В поле SQL потребуется ввести запрос к БД.

Источник - Исходный текст

Область текста

Текст в формате HTML. Применим для регионов типа HTML с выбранным типом источника - Статический

Источник - SQL

Область текста

Запрос к БД. Формат вывода определяется типом региона и его атрибутами. Параметр применим для следующих видов регионов:

Источник - Исходный вход

Текст / Окно конструктора

Задаёт список входных параметров для запроса SQL в поле источник - SQL. Применим для видов регионов, для которых существует параметр Источник - SQL (см. строку выше). Для каждой переменной подстановки в запросе должен быть определён входящий параметр. Может принимать значения глобальных переменных и элементов ввода и выбора страницы. Можно ввести как текстом, так и выбрать в конструкторе

Источник - список

Список

Привязывает список к региону. На выбор будут представлены все созданные в приложении списки (см. Управление списками). Параметр применим для следующих видов регионов:

Условия отображения - Тип

Список

Определяет тип условия отображения региона на странице. По умолчанию - Always. В зависимости от типа потребуется указать дополнительные параметры условия. Для Always и Never дополнительных условий не потребуется.

Условия отображения - Первое условие

Область текста

Запрос в формате SQL. Параметр применим для следующих типов условий:

  • Exists (SQL query returns at least one row). Если запрос вернул хотя бы одну строку, регион будет отображен на странице.

  • NOT Exists (SQL query returns no rows). Если запрос не вернул ни одной строки, регион будет отображён на странице.

Условия отображения - Выражение SQL

Область текста

Логическое выражение на языке SQL. Если выражение вернёт значение истина, регион будет отображён на странице. Параметр применим для типа условия SQL Expression.

Условия отображения - Первый вход

Текст / Окно конструктора

Задаёт список входных параметров для запроса SQL в поле “Первое условие”, либо “Выражение SQL”. Для каждой переменной подстановки в запросе должен быть определён входящий параметр. Может принимать значения глобальных переменных и элементов ввода и выбора страницы. Можно ввести как текстом, так и выбрать в конструкторе. Применим для типов условий:

  • Exists (SQL query returns at least one row).

  • NOT Exists (SQL query returns no rows).

  • SQL Expression

Условия отображения - Элемент

Текст / Окно конструктора

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

  • Value of Item / Column in Expression 1 Is NOT NULL. Регион будет отображён, если значение элемента не NULL.

  • Value of Item / Column in Expression 1 != Zero. Регион будет отображён, если значение элемента не равно 0.

  • Value of Item / Column in Expression 1 Is NULL. Регион будет отображён, если значение элемента NULL.

  • Value of Item / Column in Expression 1 Is NULL or Zero. Регион будет отображён, если значение элемента NULL, или равно нулю.

  • Value of Item / Column in Expression 1 = Zero. Регион будет отображён, если значение элемента равно 0.

  • Value of Item / Column in Expression 1 Is NOT null and the Item / Column Is NOT Zero. Регион будет отображён, если значение элемента не NULL и не равно нулю.

Форма (FORM)

Для создания элементов ввода на странице разработчику предлагается воспользоваться регионом с типом компонента “Форма”. Данный тип предлагает функционал по созданию разнообразных элементов ввода пользовательской информации.

Создание компонента на странице

Для создания формы проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - FORM.

../_images/form.png

Элементы формы

После создания региона с типом «Form» разработчику становится доступен функционал по наполнению формы элементами ввода. Для создания нового элемента формы необходимо выделить в дереве пункт “Элементы формы”, принадлежащий необходимому региону, нажать правой кнопкой мыши и выбрать пункт выпадающего меню “Создать элемент”.

Основные атрибуты элемента

Рассмотри основные атрибуты, которые присутствуют вне зависимости от типа элемента ввода

Имя

Для идентификации элемента необходимо указать его имя. Имя должно быть уникальным в разрезе заданной страницы. Для корректной работы приложения настоятельно рекомендуется указывать префикс в формате: PXXX. Где XXX - номер текущей страницы. При создании нового элемента ввода на форме, имя будет заполнено автоматически, с правильно сформированным префиксом. Имя также будет выступать в роле идентификатора элемента в HTML

Тип

Необходимо указать тип элемента. По умолчанию проставляется в элемент типа “Текст”. См. далее для описания типов элементов.

Последовательность

Поле определяет последовательность отображения элемента ввода в данном регионе. Необходимо указать целочисленное значение. При создании нового элемента поле заполняется автоматически - инкрементируя значение на 10 от предыдущего элемента

Регион

Определяет регион которому принадлежит элемент ввода, можно выбрать регион только с типом FORM

Начать новую строку

Указывает необходимость перенести элемент на новую строку внутри сетки региона

Диапазон столбцов

Указывает количество занимаемых столбцов внутри сетки региона

Ярлык

Указывает ярлык элемента

Требуемое значение

Определяет необходимость наличия значения внутри элемента при обработке результата ввода. Если значение не было указано пользователю будет отправлено сообщение об ошибке, с требованием заполнить значение для заданного элемента.

Максимальная длина

Определяет максимальное возможное значение длины элемента в символах. Действует для типов элементов, где ожидается ввод с клавиатуры.

Заполнитель

Значение для краткой подсказки по ожидаемому вводу

Маска ввода

Определяет формат ввода информации в поле. Для форматирования пользовательского ввода используйте следующие идентификаторы:

  • 9 — цифровой символ

  • a — символ буквы

  • *— буквенно-цифровой символ

Настройки JS

Определяет дополнительные настройки элемента ввода. См. подробности далее

Тип настроек по умолчанию

Выберите значение по умолчанию. Тип определяет откуда брать значение. Доступные значения:

  • Статический - введите значение по умолчанию, которое будет отображаться, если значение сессии для данного элемента не задано

  • SQL - введите sql выражение которое вернет значение для элемента

  • Элемент - значение будет взять из значения элемента приложения, записанного в сессию.

Условия отображения

Определяет условия вывода элемента на форму

Только чтение

Определяет условия вывода элемента, как доступного только для чтения

Типы элементов

Для выбора типа элемента доступны следующие значения:

Тест

Элемент для текстового ввода пользовательской информации. Дополнительные настройки (Настройки JS) включают в себе возможность отправки формы на сервер по нажатию на Enter.

Текстовая область

Элемент для текстового ввода многострочного значения. Дополнительных настроек не имеет

Числовой

Элемент для числового ввода. Дополнительные настройки включают в себя настройку следующих параметров:

  • Знак разделителя десятичной части.

  • Знак разделителя разрядов числа.

  • Минимальное и максимальное значение числа

  • Количество знаков после запятой

  • Отправку формы по нажатию на Enter

При обработке значения введенного пользователем в данное поле необходимо приводить указанное значение к числовому, используя функцию to_number.

Скрытый

Элемент который не будет отображаться на форме. Используется для передачи параметров на форму

Дата

Элемент для выбора значения типа дата и время. Дополнительные настройки включают в себя:

  • Возможность выбора даты

  • Возможность выбора времени

  • Минимальная и максимальная дата для выбора

  • Отправку формы по нажатию на Enter

При обработке значения введенного пользователем в данное поле необходимо приводить указанное значение к типу даты, используя функцию to_date/ to_timestamp.

Радиокнопки

Элемент для отображения радиокнопок. Для задания списка значений используйте выражения типа SQL, которое вернет два столбца. Первый столбец будет содержать отображаемое на форме значение радиокнопки, второй столбец будет содержать значение передаваемое обработчику форму.

Флажки

Элемент для выбора значений по флажкам. Также как для радиокнопок необходимо задать список значений используя SQL выражение. Дополнительные настройки:

  • Разделитель - определяет формат разделителя значений, которые будут переданы в базу в виде строки.

  • Колонки - количество колонок на которое будут разделены значения флажков.

Переключатель

Элемент для отображения переключателя значения. Работает также как радиокнопки, отличием является визуальное оформление. Также как для радиокнопок необходимо задать список значений используя SQL выражение. Дополнительные настройки отсутствуют.

Автозаполнение

Элемент типа список с возможностью автозаполнения. При вводе значения будет производить поиск по доступным значениям списка, отфильтровывая результат возможных значений. Для заполнения элемента конечному пользователю необходимо выбрать значение из отфильтрованного списка. Также как для радиокнопок необходимо задать список значений используя SQL выражение. Дополнительные настройки отсутствуют.

Пароль

Элемент для ввода пароля. Введенный символы автоматически заменяются на знак * , по требованию пользователя информация может быть отображена по нажатию на кнопку рядом с элементом.

WYSIWYG

Элемент отображается в виде редактора WYSIWYG

Ввод файла

Элемент для загрузки пользовательских файлов. Настройки элемента задают:

  • Высота блока - определяется высоту области drag and drop.

  • Mime типы - задаёт ограничение по загружаемым типам файлов. Типы файлов должны быть указаны как mime-type через запятую. При указании значения “any” - снимает ограничение по типам.

  • Текст подсказки - задаёт текст подсказки для пользователя

  • Макс. размер файла - определяет максимально допустимый размер файла

  • Макс. кол-во файлов - определяет максимальное количество файлов.

Для обработки загруженных файлов XRAD создаёт временную таблицу в схеме pg_temp, используя следующее выражение: CREATE TEMP TABLE IF NOT EXISTS pg_temp.xrad_files (name text, file_name text, file_mime text, file_content bytea). Колонка name будет содержать значение из элемента ввода файла, переданное на сервер. При загрузке нескольких файлов значение элемента будет передано в виде строки, в которой значения будут разделены знаком двоеточия (:)

Отчет (REPORT)

Основной регион для вывода данных в виде таблицы. Формируется на основе sql-запроса к базе данных postgres.

Создание компонента на странице

Для создания отчёта проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - REPORT.

  4. Введите запрос к БД в после источник данных SQL.

  1. В случае наличия переменных подстановки в запросе, укажите входящие параметры.

Столбцы отчёта сгенерируются автоматически.

Настройка компонента

Доступны настройки трёх уровней: параметры региона, атрибуты отчёта и параметры столбцов репорта. Рассмотрим подробнее каждую группу.

Атрибуты отчёта

Группа специальных атрибутов, характерных для данного вида регионов.

Атрибут

Тип

Описание

Включить поиск

Переключатель

Добавляет элемент поиска по отчёту. Текстовое поле ввода и выпадающий список с возможностью выбрать столбцы репорта для поиска по ним

Включить разбиение на страницы

Переключатель

Добавляет пангинации - возможность просматривать страницы далее первой

Включение заголовков

Переключатель

Добавляет заголовки столбцам отчёта

Шаблон

Список

Задаёт базовый шаблон отчёта. На текущий момент существует два варианта шаблонов:

  • Стандарт

  • Столбец - значение

Ограничение строк

Число

Устанавливает количество строк отчёта на одну страницу пангинации

Сообщение об отсутствии данных

Область текста

Позволяет указать текст, который будет выведен на экран в случае, если запрос к БД не вернул данных

Шаблоны отчета

Окно настроек

Позволяет выбрать шаблон отчета, как шаблон по умолчанию. По нажатию открывается окно со списком шаблонов отчета. Шаблон формируется каждый раз когда пользователь задаёт новый фильтр отбора, сортировку или подсветку. Разработчик может выбрать один из таких шаблонов как шаблон по умолчанию, после чего данный вид отчета будет открываться всем пользователям.
../_images/attribute.png

На рисунке видно как отражаются настройки в атрибутах отчёта, на его отображение на странице.

Параметры региона

Отличительной особенностью региона типа “Отчёт” является необходимость обязательного заполнения поля Источник данных - SQL. Запрос, на основе которого формируется список колонок репорта, и выбираются данные для вывода на форму. более подробно обо всех параметрах региона в п. Параметры регионов.

Параметры столбцов

Сгенерированный список столбцов отобразится в дереве объектов сразу после успешной валидации запроса в поле Источник данных SQL. Каждый из столбцов является самостоятельным объектом с индивидуальными параметрами. В таблице перечислен полный набор параметров компонента столбец отчёта.

Параметр

Тип

Описание

Имя столбца

Текст (только чтение)

Наименование столбца. Определяется алиасом столбца запроса источника данных. Поле не редактируется в настройках параметров - оно всегда соответствует наименованию столбца в запросе. Ссылка на значение столбца происходит по этому полю.

Тип

Список

Определяет набор параметров столбца и его поведение при выводе на страницу. Может принимать следующие значения:

  • Текст. Простой вывод значения информации из БД.

  • Ссылка. Позволяет нажатием на элемент внутри ячейки столбца перенаправить пользователя на другую страницу, либо вызвать динамический скрипт.

  • Скрытый. Столбец репорта будет скрыт в пользовательском интерфейсе. Его значение (например, для передачи в параметры ссылки) будет всё ещё доступно

  • Флажок. Столбец представляет собой группу чекбоксов для множественного выбора значений отчёта.

Связанный элемент

Текст / Окно конструктора

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

Заголовок

Текст

Заголовок столбца для вывода в пользовательском интерфейсе на странице приложения

Последовательность

Число

Определяет порядок столбцов при выводе в интерфейс. По умолчанию равен порядку столбцов в запросе при первой генерации. При добавлении столбца в запрос в дальнейшем, новому будет присвоен последний номер, вне зависимости от позиции в запросе.

Выравнивание

Переключатель

Выравнивание текста-содержимого столбца. По левому краю, по центру, или по правому краю

Связь

Текст / Окно конструктора

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

Значок ссылки

Текст

Позволяет выбрать иконку для вывода в ячейке столбца. Вместо текста ссылки можно также передать значение строки репорта - такой подход позволяет выбрать картинку внутри sql-запроса. Параметр применим для Тип столбца - Ссылка.

Ширина

Текст

Фиксирует ширину столбца.

Формат маски

Текст

Форматирует вывод наложением маски по правилам форматирования SQL-функции to_char.

Включить сортировку

Переключатель

Разрешает сортировать строки по значению столбца.

Поиск по столбцам

Переключатель

Разрешает осуществлять поиск по значению столбца, если поиск включен в атрибутах отчёта.

Выражение HTML

Область текста

Позволяет определить формат вывода в виде HTML. Можно сослаться на значение столбца репорта.

Условия отображения - Тип

Список

Определяет тип условия отображения столбца отчёта. По умолчанию - Always. В зависимости от типа потребуется указать дополнительные параметры условия. Для Always и Never дополнительных условий не потребуется.

Условия отображения - Первое условие

Область текста

Запрос в формате SQL. Параметр применим для следующих типов условий:

  • Exists (SQL query returns at least one row). Если запрос вернул хотя бы одну строку, столбец будет отображен в отчёте.

  • NOT Exists (SQL query returns no rows). Если запрос не вернул ни одной строки, столбец будет отображен в отчёте.

Условия отображения - Выражение SQL

Область текста

Логическое выражение на языке SQL. Если выражение вернёт значение истина, столбец будет отображен в отчёте. Параметр применим для типа условия SQL Expression.

Условия отображения - Первый вход

Текст / Окно конструктора

Задаёт список входных параметров для запроса SQL в поле “Первое условие”, либо “Выражение SQL”. Для каждой переменной подстановки в запросе должен быть определён входящий параметр. Может принимать значения глобальных переменных, элементов ввода и выбора страницы. Можно ввести как текстом, так и выбрать в конструкторе. Применим для типов условий:

  • Exists (SQL query returns at least one row).

  • NOT Exists (SQL query returns no rows).

  • SQL Expression.

Условия отображения - Элемент

Текст / Окно конструктора

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

  • Value of Item / Column in Expression 1 Is NOT NULL. Столбец будет отображён, если значение элемента не NULL.

  • Value of Item / Column in Expression 1 != Zero. Столбец будет отображён, если значение элемента не равно 0.

  • Value of Item / Column in Expression 1 Is NULL. Столбец будет отображён, если значение элемента NULL.

  • Value of Item / Column in Expression 1 Is NULL or Zero. Столбец будет отображён, если значение элемента NULL, или равно нулю.

  • Value of Item / Column in Expression 1 = Zero. Столбец будет отображён, если значение элемента равно 0.

  • Value of Item / Column in Expression 1 Is NOT null and the Item / Column Is NOT Zero. Столбец будет отображён, если значение элемента не NULL и не равно нулю.

Дерево (TREE)

Регион для вывода древовидной структуры данных.

В качестве источника данных используется рекурсивный запрос.

../_images/xsquared.png

Создание компонента на странице

Для создания дерева проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “лево”.

  3. Укажите тип региона - TREE.

  4. Введите запрос к БД в после источник данных SQL.

  1. В случае наличия переменных подстановки в запросе, укажите входящие параметры.

Настройка компонента

Доступны настройки двух уровней: параметры региона и атрибуты дерева. Общие настройки параметров региона описаны в п. Параметры регионов Здесь рассмотрим собственные атрибуты дерева

Атрибут

Тип

Описание

Столбец PK

Список

Идентификатор узла. Из выпадающего списка необходимо выбрать выбрать один из столбцов запроса.

Столбец FK

Список

Идентификатор родительского узла. Из выпадающего списка необходимо выбрать один из столбцов запроса.

Столбец заголовка

Список

Отображаемый заголовок узла. Из выпадающего списка необходимо выбрать один из столбцов запроса.

График (CHART)

Регионы типа “График” служат для графического представления численных данных в виде диаграмм.

В системе представлено три типа диаграмм:

  • Кольцевая диаграмма

  • Столбчатая диаграмма

  • Гистограмма

Создание компонента на странице

Для создания диаграммы проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - CHART.

  4. Введите запрос к БД в после источник данных SQL.

  1. В случае наличия переменных подстановки в запросе, укажите входящие параметры.

  1. В дереве объектов щёлкните правой кнопкой мыши по строчке “серии” под атрибутами компонента, и в выпадающем меню нажмите “Создать серию”

Настройка компонента

Доступны настройки трёх уровней: параметры региона, атрибуты диаграммы и параметры серии. Рассмотрим подробнее каждую группу.

Атрибуты диаграммы

Группа специальных атрибутов, характерных для данного вида регионов.

Атрибут

Тип

Описание

Диаграмма - Тип

Список

Определяет внешний вид диаграммы. Доступны для выбора три варианта:

  • Столбчатая - Вертикальная (рис. 1)

  • Столбчатая - Горизонтальная (рис. 2)

  • Кольцевая (рис. 3)

Колонка категории

Список

Определяет какой из столбцов запроса к БД содержит значение для категории диаграммы. Значения серий должны быть сгруппированы по категориям.

Динамическая загрузка

Переключатель

Если установлен, то диаграмма не будет строиться без явного вызова из динамического события. Иначе загружается при открытии страницы.

Ширина

Число

Определяет ширину для компонента

Высота

Число

Определяет высоту для компонента

Рис 1 - Вертикальная диаграмма

Рис. 2 - Гистограмма

Рис. 3 - Кольцевая диаграмма

Параметры региона

Отличительной особенностью региона типа “График” является необходимость обязательного заполнения поля Источник данных - SQL. Более подробно обо всех параметрах региона в п. Параметры регионов.

Параметры серий

Параметр

Тип

Описание

Имя

Текст

Определяет отображаемое имя серии. Для дерева объектов и для отображения на диаграмме в приложении. Поскольку в графиках типа кольцевая диаграмма серия одна, для этого типа имя серии отобразится только в дереве объектов.

Последовательность

Число

Определяет порядок серий при выводе в интерфейс. Поскольку в графиках типа кольцевая диаграмма серия одна, отобразится в приложении только первая из них.

Колонка значений

Список

Из выпадающего списка необходимо выбрать выбрать один из столбцов запроса, содержащий значение типа numeric, для вывода значения в серию.

Условия отображения - Тип

Список

Определяет тип условия отображения серии. По умолчанию - Always. В зависимости от типа потребуется указать дополнительные параметры условия. Для Always и Never дополнительных условий не потребуется.

Условия отображения - Первое условие

Область текста

Запрос в формате SQL. Параметр применим для следующих типов условий:

  • Exists (SQL query returns at least one row). Если запрос вернул хотя бы одну строку, серия будет отображена на графике.

  • NOT Exists (SQL query returns no rows). Если запрос не вернул ни одной строки, серия будет отображена на графике.

Условия отображения - Выражение SQL

Область текста

Логическое выражение на языке SQL. Если выражение вернёт значение истина, серия будет отображена на графике. Параметр применим для типа условия SQL Expression.

Условия отображения - Первый вход

Текст / Окно конструктора

Задаёт список входных параметров для запроса SQL в поле “Первое условие”, либо “Выражение SQL”. Для каждой переменной подстановки в запросе должен быть определён входящий параметр. Может принимать значения глобальных переменных, элементов ввода и выбора страницы. Можно ввести как текстом, так и выбрать в конструкторе. Применим для типов условий:

  • Exists (SQL query returns at least one row).

  • NOT Exists (SQL query returns no rows).

  • SQL Expression

Условия отображения - Элемент

Текст / Окно конструктора

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

  • Value of Item / Column in Expression 1 Is NOT NULL. Серия будет отображена, если значение элемента не NULL.

  • Value of Item / Column in Expression 1 != Zero. Серия будет отображена, если значение элемента не равно 0.

  • Value of Item / Column in Expression 1 Is NULL. Серия будет отображена, если значение элемента NULL.

  • Value of Item / Column in Expression 1 Is NULL or Zero. Серия будет отображена, если значение элемента NULL, или равно нулю.

  • Value of Item / Column in Expression 1 = Zero. Серия будет отображена, если значение элемента равно 0.

  • Value of Item / Column in Expression 1 Is NOT null and the Item / Column Is NOT Zero. Серия будет отображена, если значение элемента не NULL и не равно нулю.

Карточки (CARDS)

Регион для графического представления списка в виде карточек. Карточки имеют собственный цвет, картинку, а также ссылку на страницу, или скрипт.

Рис. 1 - Карточки

Создание компонента на странице

Для создания региона проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - CARDS.

  4. Укажите список в поле Источник - Список.

Создание элемента списка

Для вывода карточки на компоненте необходимо добавить элемент в список, привязанный к региону.

  1. В списке создайте новый элемент.

  2. В настройках элемента введите:

  • последовательность - численный порядок элемента, определяющий его позицию;

  • CSS Класс иконки - иконка для карточки;

  • лейбл - отображаемый заголовок;

  • ссылка - ссылка на страницу или скрипт при клике на карточку;

  • атрибут 2 - RGB -цвет карточки в формате #ffffff

Подробнее о работе со списками в п. Управление списками.

Настройка компонента

Доступны настройки двух уровней: параметры региона и атрибуты. Рассмотрим подробнее каждую группу.

Атрибуты

Регион типа CARDS имеет два специальных атрибута

Атрибут

Тип

Описание

Тема

Список

Шаблон, определяющий отображение карточек. На выбор три варианта:

  • Блочная. (Рис.1)

  • Функциональная. (Рис.2)

  • Базовая. (Рис.3)

Колонки

Список

Количество карточек в ряд. В случае если элементов в списке больше, чем указанное здесь число, карточки расположатся в несколько рядов. Принимает значение от одного до двенадцати.

Рис. 2 - Функциональная тема

Рис. 3 - Базовая тема

Параметры региона

Отличительной особенностью региона типа “Карточки” является необходимость обязательного заполнения поля Источник данных - Список. Более подробно обо всех параметрах региона в п. Параметры регионов.

HTML

Регион для вывода HTML. Используется как для вывода текста, так и для произвольных элементов, вроде картинок, видео и т.п.

Создание компонента на странице

Для создания региона проделайте следующие шаги:

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

Рис. 2 - Исходный текст

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новые регион в позиции “центр”.

  3. Укажите тип региона - HTML.

  4. Введите текст кода HTML в поле исходный текст, или запрос к БД в после источник данных SQL.

Настройка компонента

Помимо необходимости выбора источника, остальные параметры компонента стандартные для региона. Подробнее с полным списком параметров региона можно ознакомиться в п. Параметры регионов.

Контейнер для кнопок (BUTTONS)

Регион для размещения кнопок.

Создание компонента на странице

Для создания региона проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите MODAL.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “низ”.

  3. Укажите тип региона - BUTTONS.

Настройка компонента

Параметры региона стандартны, подробнее с полным списком параметров можно ознакомиться в п. Параметры регионов.

Кнопки

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

Параметры кнопок

Параметр

Тип

Описание

Имя

Текст

Имя кнопки

Ярлык

Текст

Надпись на кнопке

Последовательность

Число

Определяет порядок расположения кнопки на родительском регионе в рамках местоположения и позиции.

Родительский регион

Список

Определяет регион, на котором кнопка будет отображена

Местоположение

Список

Способ определения позиции кнопки. Для всех родительских регионов, кроме формы имеет одно значение на выбор - REGION. Всего вариантов три:

  • REGION. Вариант по умолчанию. Кнопка располагается в рамках региона на выбранной позиции по заданному порядку относительно других кнопок позиции.

  • ITEM. Применимо при родительском регионе типа FORM. Позиция кнопки определяется относительно привязанного элемента по заданному порядку среди других кнопок той же позиции того же связанного элемента.

  • FORM. Применимо при родительском регионе типа FORM. Кнопка располагается на форме, порядок определяется порядком среди других элементов формы

Позиция

Список

Определяет относительное расположение кнопки. Применимо для вариантов местоположения REGION и ITEM. Для местоположения REGION доступны следующие варианты (см. Рис. 1):

  • Bottom Fluid. Кнопка растянется на всю ширину вдоль нижней границы региона.

  • Bottom Left. Кнопка расположится под основным содержимым региона в левой части.

  • Bottom Right. Кнопка расположится под основным содержимым региона в правой части.

  • Left Body. Кнопка расположится слева от основного содержимого в теле региона.

  • Right Body. Кнопка расположится справа от основного содержимого в теле региона.

  • Top Left. Кнопка расположится в левой части заголовка региона перед его названием. Отобразится только если включен параметр региона “Показать заголовок”.

  • Top Right. Кнопка расположится в правой части заголовка региона. Отобразится только если включен параметр региона “Показать заголовок”.

Для местоположения ITEM варианта два (см. Рис. 2):

  • Left of Item. Кнопка прикрепится к левой границе элемента ввода.

  • Right of Item. Кнопка прикрепится к правой границе элемента ввода.

Элемент

Список

Определяет элемент ввода, к которому будет прикреплена кнопка. Применимо для местоположения ITEMи

Диапазон столбцов

Список

Выбор Automatic, либо число 1-12. Указывает количество ячеек сетки, занимаемых кнопкой на форме. Подробнее см. п. Расположение компонентов на сетке Применимо для местоположения FORM (см. Рис. 3).

Начать новую строку

Переключатель

Определяет положение на сетке по вертикали. Подробнее см. п. Расположение компонентов на сетке. Применимо для местоположения FORM (см. Рис. 3).

Действие

Список

Поведение при нажатии на кнопку. На выбор четыре варианта:

  • Отправить страницу. Отправляет форму на сервер, передаёт в процесс равный параметру статический идентификатор кнопки. Подробнее см. п. Процессинг страницы

  • Перенаправление на Страницу. направляет на страницу, указанную в поле связь.

  • Определяется динамическим действием. Вызывает динамическое действие Click. Подробнее см. в разделе Динамические процессы.

  • Открыть раскрывающийся список. Нажатие на кнопку вызовет контекстное меню, содержание которого определяется привязанным списком.

Связь

Текст / Окно конструктора

Позволяет задать ссылку на другую страницу, вызвать динамический скрипт, либо настроить в конструкторе ссылку на страницу внутри приложения. Применимо для действия “Перенаправление на Страницу”.

Источник - Список

Список

Определяет список, отображаемый в контекстом меню. Подробнее см. п. Управление списками. Применимо для действия “Открыть раскрывающийся список”.

Классы

Текст

Перечень классов кнопки. Здесь определяется цвет кнопки, иконка и пр. (см. Рис. 3).

Статический идентификатор

Текст

Идентификатор кнопки, передаваемый в переменную REQUEST при нажатии на неё.

Условия отображения - Тип

Список

Определяет тип условия отображения кнопки. По умолчанию - Always. В зависимости от типа потребуется указать дополнительные параметры условия. Для Always и Never дополнительных условий не потребуется.

Условия отображения - Первое условие

Область текста

Запрос в формате SQL. Параметр применим для следующих типов условий:

  • Exists (SQL query returns at least one row). Если запрос вернул хотя бы одну строку, кнопка будет отображена.

  • NOT Exists (SQL query returns no rows). Если запрос не вернул ни одной строки, кнопка будет отображена..

Условия отображения - Выражение SQL

Область текста

Логическое выражение на языке SQL. Если выражение вернёт значение истина, кнопка будет отображена. Параметр применим для типа условия SQL Expression.

Условия отображения - Первый вход

Текст / Окно конструктора

Задаёт список входных параметров для запроса SQL в поле “Первое условие”, либо “Выражение SQL”. Для каждой переменной подстановки в запросе должен быть определён входящий параметр. Может принимать значения глобальных переменных, элементов ввода и выбора страницы. Можно ввести как текстом, так и выбрать в конструкторе. Применим для типов условий:

  • Exists (SQL query returns at least one row).

  • NOT Exists (SQL query returns no rows).

  • SQL Expression

Условия отображения - Элемент

Текст / Окно конструктора

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

  • Value of Item / Column in Expression 1 Is NOT NULL. Кнопка будет отображена, если значение элемента не NULL.

  • Value of Item / Column in Expression 1 != Zero. Кнопка будет отображена, если значение элемента не равно 0.

  • Value of Item / Column in Expression 1 Is NULL. Кнопка будет отображена, если значение элемента NULL.

  • Value of Item / Column in Expression 1 Is NULL or Zero. Кнопка будет отображена, если значение элемента NULL, или равно нулю.

  • Value of Item / Column in Expression 1 = Zero. Кнопка будет отображена, если значение элемента равно 0.

  • Value of Item / Column in Expression 1 Is NOT null and the Item / Column Is NOT Zero. Кнопка будет отображена, если значение элемента не NULL и не равно нулю.

Отображение кнопок

На рисунках ниже представлены варианты отображения кнопок в зависимости от выбранных местоположения и позиции, а также основных классов.

Рис. 1 - Выбор позиции для местоположения REGION

Рис. 2 - Выбор позиции для местоположения ITEM

Рис. 3 - Выбор цвета кнопки, местоположение FORM.

Навигационная панель (PAGE NAVIGATION)

Регион для размещения навигационной панели на странице на основе списка. Элементы списка отобразятся в виде области с иконкой, заголовком-ссылкой и описанием.

Рис. 1 - Навигационная панель

Создание компонента на странице

Для создания навигационной панели проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - Page Navigation.

  4. Укажите список в поле Источник - Список.

Создание элемента списка

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

  1. В списке создайте новый элемент.

  2. В настройках элемента введите:

  • последовательность - численный порядок элемента, определяющий его позицию;

  • CSS Класс иконки - иконка для карточки;

  • лейбл - отображаемый заголовок;

  • ссылка - ссылка на страницу или скрипт при клике на заголовок в навигационной панели;

  • атрибут 1 - Описание элемента под заголовком.

Подробнее о работе со списками в п. Управление списками.

Настройка компонента

Помимо необходимости указания списка-источника, остальные параметры компонента стандартные для региона. Подробнее с полным списком параметров можно ознакомиться в п. Параметры регионов.

Вкладки (TABS)

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

Создание компонента на странице

Для создания региона проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - TABS.

  4. Создайте один, или несколько дочерних регионов, заполните им поле заголовок.

Настройка компонента

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

На вкладках отобразятся заголовки дочерних регионов, даже если для самих регионов заголовок отключен.

Рис. 1 - Вкладки

Календарь (CALENDAR)

Регион для отображения данных с меткой времени в виде интерактивного календаря.

Создание компонента на странице

Для создания календаря проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - CALENDAR.

  4. Введите запрос к БД в после источник данных SQL.

  1. В случае наличия переменных подстановки в запросе, укажите входящие параметры.

Рис. 1 - Календарь

Настройка компонента

Доступны настройки двух уровней: параметры региона и атрибуты календаря. Общие настройки параметров региона описаны в п. Параметры регионов

В данном разделе рассмотрим собственные атрибуты календаря.

Атрибут

Тип

Описание

Колонка с заголовком

Список

Один из столбцов источника данных SQL можно назначить в качестве заголовка отображаемого на календаре события.

Колонка с началом периода

Список

Один из столбцов источника данных SQL можно назначить в качестве времени начала отображаемого на календаре события.

Колонка с окончанием периода

Список

Один из столбцов источника данных SQL можно назначить в качестве времени окончания отображаемого на календаре события.

CSS колонка

Список

Один из столбцов источника данных SQL можно назначить для определения стиля отображаемого на календаре события.

Высота

Число

Размер компонента по вертикали

Представления

Множественный выбор

Перечень доступных уровней представления календаря. Выбранные варианты будут предложены пользователю в интерфейсе компонента. Список представлений:

  • Год

  • Месяц

  • Неделя

  • День

  • Повестка дня

Отображать время

Переключатель

Если установлен, отображаться будет не только дата, но и время события.

Показывать подсказку

Переключатель

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

Отображать выходные

Переключатель

Если установлен, будут отображаться все дни недели.

Ссылка на просмотр

Текст / Окно конструктора

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

Чат (CHAT)

Регион для вывода чатов.

Создание компонента на странице

Для создания чата проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - CHAT.

  4. Введите запрос к БД в после источник данных SQL.

  1. В случае наличия переменных подстановки в запросе, укажите входящие параметры.

Рис. 1 - Чат

Настройка компонента

Помимо необходимости выбора источника, остальные параметры компонента стандартные для региона. Подробнее с полным списком параметров региона можно ознакомиться в п. Параметры регионов.

Обертка (WRAPPER)

Основной контейнер для регионов. Используется для группировки и зонирования дочерних регионов.

Создание компонента на странице

Для создания региона проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “центр”.

  3. Укажите тип региона - WRAPPER.

Рис. 1 - Группировка разнотипных регионов

Настройка компонента

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

Визард (WIZARD)

Регион для графического представления последовательности действий на основе списка.

Создание компонента на странице

Для создания региона проделайте следующие шаги:

  1. Войдите в среду разработки XRAD

  2. Выберите пункт “Страницы” на верхней панели управления

  3. Нажмите “Создать страницу”

  4. Введите атрибуты страницы:

  1. Номер страницы - целочисленное положительное число, которое идентифицирует страницу

  2. Название - введите название страницы

  3. Вид - шаблон представления страницы. Для примера укажите SIDEBAR.

  1. После создания откроется редактор страниц.

  2. Создайте новый регион в позиции “верх”.

  3. Укажите тип региона - WIZARD.

  4. Укажите список в поле Источник - Список.

  5. Повторите действие для нескольких страниц, которым будут сопоставлены элементы из того же списка.

Создание элемента списка

Для прикрепления страницы необходимо добавить элемент в список, привязанный к региону.

  1. В списке создайте новый элемент.

  2. В настройках элемента введите:

  • последовательность - численный порядок элемента, определяющий его относительную позицию на визарде;

  • лейбл - отображаемый заголовок;

  • ссылка - ссылка на страницу;

  • условие для активного состояния - укажите здесь номер страницы, чтобы ползунок визарда передвинулся на соответствующую позицию при нахождении на ней.

Подробнее о работе со списками в п. Управление списками.

Рис. 1 - Визард

Настройка компонента

Доступны настройки двух уровней: параметры региона и атрибуты визарда. Общие настройки параметров региона описаны в п. Параметры регионов

В данном разделе рассмотрим собственные атрибуты визарда.

Атрибут

Тип

Описание

Разрешить переход по нажатию

Переключатель

Определяет, будет ли осуществляться переход на связанную страницу при клике на узле визарда.

Отображать шаги

Список

Доступны несколько вариантов отображения заголовков шагов визарда:

  • Все. Заголовки каждого элемента списка будут отображаться на визарде

  • Текущий. На визард будет выведен только заголовок текущего шага, остальные будут безымянными узлами.

  • Никогда. На визард не будут выводиться заголовки узлов.

Направление

Список

Пространственная направленность визарда. На выбор два варианта:

  • Горизонтально

  • Вертикально