Как создаются приложения в WAB

WEB Application Builder (WAB) – это часть системы быстрой разработки приложений OODM. Типовое создание приложения включает следующие шаги:

  • Создание (физической) базы данных. Это делается средствами конкретной СУБД вне WAB.
  • Создание записи о базе данных и записи приложения в WAB
  • Установка учетной записи суперпользователя
  • Настройка параметров приложения: создание конфигурации, заполнение параметров подключения к базе данных и настройка положения каталогов на WEB-сервере разработки
  • Обновление словаря – это извлечение системой структуры базы данных в WAB
  • Настройка словаря: перевод названий таблиц и колонок, установка связей между таблицами, корректировка типов полей, и т.д.
  • Создание меню приложения
  • Создание форм приложения
  • Генерация приложения
  • Получение дистрибутива и установка на целевой сервер

Создание физической базы данных

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

mysql -u root -p < wab_test.sql

Если пользователь root не имеет пароля, то флажок -p можно опустить. В папку app/connect нужно скопировать файл app/connect/wab_test.php из архива инсталляции. В случае необходимости можно изменить параметры подключения к базе данных и другие параметры.

Создание записей базы данных и приложения

В приложении в перейти в меню Draft/Базы данных, на правой панели создать запись с кодом wab_test и наименованием «Тестовая база продаж»

Перейти в меню Draft/Приложения, на правой панели создать запись с кодом web_test, базой данных «Тестовая база продаж», и наименованием «Тестовое приложение продаж» и заголовком «Продажи».

Раскрыть папку «Тестовое приложение продаж», перейти к «Параметры приложения»

Учетная запись суперпользователя

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

На нижней вкладке «Доступ» нужно ввести имя и пароль для входа в систему.

Конфигурация приложения

На правой панели выбрать «Конфигурация».

Далее требуется создать запись с кодом «test» и наименованием «Тестовая». На вкладке «Параметры» нужно заполнить параметры приложения и подключения к базе данных:

  • Хост – адрес базы данных (обычно localhost)
  • Тип базы данных: mysql
  • Имя базы: wab_test
  • Пользователь: пользователь базы данных (обычно root)
  • Пароль: пароль к базе данных (для подключения к базе данных без пароля не заполняется)
  • Серверная часть: PHP
  • Корень сайта: путь в файловой системе сервера, соответствующий корню сайта
  • Корень приложения: app/wab_test

Ниже приведен пример заполнения для windows при использовании xampp:

Обновление и настройка словаря

Нажать на кнопку «Обновить словарь» - система должна сообщить об успешном выполнении и указании журнала обновления словаря на сервере.

Раскрыть в меню узел базы данных «Тестовая база продаж», затем раскрыть узел «Таблицы»:

Должны появиться таблицы, информация о которых была извлечена из базы данных при «обновлении словаря». Таблица customer – это покупатель, product – продукт / товар, order – заказ, item – элемента заказа.

Далее на вкладке «Таблицы / Представления» нужно сделать перевод в колонке «наименования»; для перевода отдельных колонок нужно в дереве выбирать соответствующую таблицу, а на правой панели на вкладке «Поля» также в колонке «Наименования» сделать перевод. Ниже приведены переводы таблиц и полей:

Таблица «Покупатель»:

Таблица «Элемент продаж»

Таблица «Заказы»

Таблица «Продукты»

Для цен дополнительно определен формат отображения цен (обведено красной рамкой выше) На множестве форма WAB существует кнопка контекстной помощи «Помощь», с помощью которой открывается окно справки:

Контекстная помощь содержит назначение элементов формы и справочник. Так форматы описаны в конце раздела колонок.

Кроме «наименований» поля содержат следующие значимые колонки:

  • Тип – как правило, система сама устанавливает в словаре корректный тип при обновлении. В нашем случае был изменен тип поля «Завершен?» таблицы заказов со строчного типа на двоичный. Если в таблице базе данных изменен тип колонки, то при обновлении словаря тип не будет изменен – это нужно сделать вручную.
  • Внешняя таблица – ссылка на другую таблицу. Система по названиям автоматически определяет ссылки между таблицами. Так для поля customer_id таблицы заказов order система обнаружила, что есть таблица customer и на нее сделала ссылку. При ручной установке данного поля следует отметить флажок «Заморожено?» у поля – в этом случае обновление из словаря не будет обновлять настройки данного поля.
  • Комбо-таблица – как правило, представление, ограничивающее выпадающий список для полей - см. ниже «Имя?», «Комбо?».
  • Обязательное? – отмечено, если в базе данных обязательно.
  • Умолчание? – отмечено, если базе данных есть значение по умолчанию для колонки.
  • Первичный ключ? – отмечено, если в базе данных колонка входит в первичный ключ.
  • Имя? – поле является источником для выпадающих списков в интерфейсе. Так в таблице продуктов поле «Наименование» отмечено данным флажком, а поле product_id таблицы заказов отмечено флажком «Комбо?» и ссылается на таблицу продуктов.
  • Комбо? – если отмечено, то значение в данное поле вводится из справочника, который указан в поле «Внешняя таблица» - см. «Имя?» выше.

Создание меню

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

При создании нужно заполнять имена переменных (это javascript-имена в приложении), заголовок, поле пиктограммы, а также поле «Порядок» - оно определяет порядок меню в приложении. Поле пиктограмм может быть выбрано из списка встроенных пиктограмм (путь в архиве дистрибутива app/isc_app/images), или подготовить свои пиктограммы – их нужно будет поместить в папку приложения на сервере app/wab_test/images.

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

Для меню Продукты и Покупатели необходимо создать наборы вкладок с помощью кнопки «Создать вкладку» на вкладке «Свойства узла»:

После нажатия кнопки должна заполниться поле «Вкладка» формы.

Далее, развернув в меню узел справочника (Покупатели, например), нужно встать на узел вложенной вкладки и на правой панели на вкладке «Формы» создать записи формы:

Здесь в таблице форм:

  • Имя переменной – имя переменной формы в javascript
  • Заголовок – заголовок вкладки
  • Порядок – номер порядка; имеет смысл если на вкладке несколько элементов – в этом случае в приложении на вкладке элементы появятся в порядке, указанном в данном поле
  • Иконка – пиктограмма на вкладке – как правило совпадает с пиктограммой меню

Далее добавляем поля на форму, выбрав в меню слева форму, а справа вкладку «Элементы меню» и нажав на вкладку «Добавить все поля»:

Запретим редактирование идентификатора customer_id скроем его c помощью колонок «Редактируем?» и «Скрыт?», а также упорядочим поля с помощью колонки «Порядок полей»:

Генерация и запуск приложения

Для генерации приложения нужно воспользоваться кнопкой «Генерировать» вкладки «Конфигурация» меню «Параметры приложения»:

Система должна сообщить об успешной генерации и указать, где находится на сервере журнал генерации.

После этого можно войти в приложение, набрав [server]/app/wab_test , где server – адрес сервера:

Вводим логин и пароль, установленный ранее для суперадминистратора (test / 12345678)

Приложение имеет меню и формы для ввода покупателей и продуктов:

Изменение цветовой оболочки.

Перейдем на вкладку «Свойства приложения» и изменим стиль на «Enterprise Blue»

Это цветовая оболочка используется для самого WAB-приложения. Выполним генерацию приложения и откроем заново приложение – цвета приложения должны поменяться. Если этого не произошло, требуется обновление / сброс кэша приложения (в windows chrome комбинация клавишей Shift+F5):

Связанные формы

Данные заказов и элементов («позиций») заказов: каждый элемент должен быть привязан к заказу. Поэтому для ввода нужно иметь главную форму заказа, и подчиненную с элементами. Для этих целей создадим набор вкладок для элемента меню «Заказы», с помощью макета разделим 13 панель на 2 части. В верхней части разместим форму таблицы заказов, а в нижней создадим вкладку «Позиции», на которой разместим форму элементов заказов.

На свойствах узла «Заказы» создаем вкладки «Свойства узла» с помощью кнопки «Создать вкладку», в меню откроем меню «Заказы». Если элемент меню не имеет элемент «+» для раскрытия узла, можно воспользоваться контекстным меню – правой кнопкой мышки:

В нем выбрать «Обновить» - информация в меню обновится и появится узел набора вкладок:

Далее добавляем макет (он разделит экран на верхнюю и нижнюю панель):

Заголовок и пиктограмму обычно копируют из меню.

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

Заголовок и пиктограмма «верхней» формы обычно копируется из меню. Следует обратить внимание на поле «Порядок» - оно должно быть меньше, чем у элемента, который должен находиться снизу (это набор вкладок для элементов заказа – он будет создан далее).

Добавляем поля в форму:

Добавляем набор вкладок для макета:

Следует обратить внимание на значение колонки «Порядок» - оно должно быть больше, чем у формы заказов – в этом случае заказы будут сверху, элементы заказов – снизу.

Добавляем форму элементов заказов (позиций):

Добавляем колонки позиций:

Запрещаем пользователю изменять колонку заказа order_id и скрываем ее – это поле будет устанавливаться системой.

Теперь свяжем форму заказов и форму элементов заказов по order_id. Для этого перейдем в меню к главной форме заказов, выберем вкладку «Зависимые формы» справа, и введем зависимость:

Генерируем приложение – теперь появилась возможность для ввода заказов и элементов.

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

Сравним структуру приложения и заданные в генераторе приложения:

Верхний уровень «Заказы» - меню. К нему присоединен набор вкладок orderNodeTabset – в приложении это область справа от меню. Далее макет orderLayout делит правую часть на две части: форма заказов orderGrid и набор вкладок «itemTabset», на которой расположена форма позиций itemGrid.

Таким образом, в генераторе приложения создается что-то похожее на «Документ», аналогичный WEB-документу. Однако он состоит из меню, наборов вкладок, макетов, форм. Вкладки и макеты могут чередоваться в дереве «документа», форма – всегда последний элемент в иерархии. Форму, однако, не нужно привязывать одновременно к набору вкладок и макету, - положение такой формы в дереве станет неоднозначным.

Вычисляемые колонки

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

 

На вкладке Запрос / условия, кроме данных по позициям запроса, подсчитано произведение цены на количество. Для возможности доступа к новой колонке price ее нужно создать на вкладке «Поля» и указать, что это виртуальная колонка:

При создании виртуальных колонок нужно также проставлять колонке «Активная?». Также для колонки указан формат отображения.

В форму позиций заказа добавляем колонку цены, запрещая ее редактирования пользователем.

Генерируем приложение, и убеждаемся, что в приложении появилась цена:

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

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

Строка агрегации

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

Флажки «Активно?», «Виртуальное?» у представления должны быть отмечены. В запросе использована макропеременная {where}, которая указывает место наложения фильтра. Т.е. если пользователь наложит фильтр, то он попадет «внутрь» запроса. Также следует иметь в виду, что фильтрация будет происходить для order_sum, поэтому для таблицы item в запросе введен синоним order_sum.

Чтобы вручную не вводить поля, можно воспользоваться кнопкой «Скопировать поля из таблицы»:

После выполнения операции нужно удалить ссылки и отметки комбо, а также вместо колонки product_id сделать колонку «product_name». Это название колонки в таблице item ссылочной таблице product, которые видит пользователь в выпадающем списке. Это сделано для того, чтобы «Итого» отобразилось в комбо-колонке продукта таблицы позиций item. Если бы это была простая строка, то в представлении агрегации поле нужно было назвать как в исходной таблице.

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

После генерации приложения можно убедиться, что итоговая строка появляется в таблице позиций:

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

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

Установка приложения заключается в создании дистрибутива и установке его новый сервер, развертывание базы данных средствами СУБД, а также в создании и настройке файла конфигурации web_test.php.

Дистрибутив может быть получен с помощью кнопки «Дистрибутив» на вкладке «Конфигурация»:

Система подготовит архив для установки на WEB-сервер.

Установка приложения на сервер заключается в распаковке архива в корневую папку WEBсервера. Требования к WEB серверу те же, что и к самому приложению быстрой разработки приложений WAB (за исключением python – для работы нашего приложения он не нужен).

База данных разворачивается самостоятельно.

Также требуется создать файл app/connect/wab_test.php в корневом каталоге WEB-сервера и настроить его (в основном, это заключается в настройке параметров подключения к базе данных). Таким образом, можно скопировать этот файл с сервера разработки, поместить на развертываемый сервер и внести в него коррективы.