Создание простого web-приложения (телефонная книга за 10 минут без использования программирования)

Данный пример является переводом скринкаста http://dvelum.ru/cookbook_screencast_phonebook.html в формат статьи.

В этом рецепте мы познакомимся с основными возможностями системы, посмотрим различные интерфейсы. Создадим модуль для административной панели «Телефонная книга»,  сделаем это без использования программирования. Телефонная книга будет содержать записи имен, фамилий и номеров телефонов. Контакты разделим на группы при помощи словарей.

Создание объекта ORM (работа с базой данных)

Разработку начнем с базы данных (создание объектов ORM), для этого зайдем в административную панель, интерфейс управления  ORM.

Создадим новый объект, для этого нажмем кнопку «Add Object» / «Добавить объект» и заполним форму в открывшемся окне:

  • укажем, что хотим хранить историю изменений (History log);
  • имя объекта – phonebook;
  • заголовок – Phone Book;
  • имя таблицы базы данных – phonebook;
  • выберем тип хранилища данных MyIsam (Table engine).

Сохраним объект нажатием кнопки  «Save» / «Сохранить».

После сохранения нового объекта, необходимо добавить в него поля, в которых будут храниться данные. Для этого перейдем во вкладку «Fields» / «Поля», заметим, что автоматически создано системное поле  id  - это идентификатор объекта, настройки системных полей нельзя изменять .

Добавим поле first_name, в котором будет храниться имя. Укажем его заголовок и тип поля (строка переменной длинны (varchar), 255 символов). Отметим на форме, что поле поисковое и обязательное для заполнения.

Поисковые поля используются фильтрами данных. Поиск по таким полям производится на основе специального запроса, применяющего SQL- конструкцию  LIKE.

По такому же принципу создадим поля для фамилии и номера телефона:

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

Нажатием на кнопку  «Dictionaries» / «Словари» откроем интерфейс управления словарями.

Создадим новый словарь, назовем его phone_group и добавим в него несколько записей (наименования групп), например, home, work, friends.

Закроем интерфейс управления словарями. Вернемся к редактированию полей объекта.

Добавим недостающее поле, в котором будет храниться ссылка на значение словаря. Назовем его group, тип поля будет «ссылка на словарь».

На этом работа с базой данных закончена. Можно перейти к созданию интерфейса.

Воспользуемся встроенным механизмом автогенерации интерфейса. Создадим интерфейс для нового объекта, для этого перейдем в раздел «Modules configuration»  / «Модули административной панели», в правом углу нажмем кнопку «Create Module» / «Создать модуль».

Остается выбрать объект, для которого будет сгенерирован модуль, и нажать кнопку «Create»/ «Создать».

* В списке объектов показываются только те, для которых еще не создан одноименный контроллер.

При генерации нового модуля создается контроллер, проект интерфейса  и action js-файл. Модуль вносится в список доступных в системе, группе текущего пользователя назначаются полные права доступа к модулю, модуль вносится в основное меню административной панели.

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

Интерфейс создан, осталось проверить и сохранить.

После обновления страницы, интерфейс появится в меню.

Зайдем в созданный модуль, попробуем создать запись в телефонной книге:

Список записей:

Обратите внимание, можно отредактировать запись и увидеть, что хранится история изменений:

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

Все должно работать.

Доработка интерфейса

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

В этом нам поможет дизайнер интерфейсов.

Открываем соответствующий раздел и загружаем проект, который нам сгенерировала система. Проект будет называться, так же как и объект – phonebook:

Чтобы убрать колонку id в списке записей телефонной книги заходим в свойства dataGrid и удаляем соответствующее поле (двойной клик по элементу в дереве  Panels  перегружает  панель  Properties,  расположенную ниже дерева).

В панели свойств присутствует кнопка быстрого доступа к колонкам таблицы, нажимаем ее, открывается окно управления колонками таблицы. Этот интерфейс позволяет манипулировать колонками таблицы. Слева представлена древовидная структура колонок, по умолчанию она скрыта, для того чтобы ее развернуть необходимо кликнуть на левую панель. Дерево позволяет сортировать колонки, так же возможно вложение колонок друг в друга. Кроме этого интерфейс позволяет настраивать редакторы ячеек, изменять свойства колонок, добавлять элементы  Action Column.

Чтобы создать фильтр для таблицы, добавим компонент Store filter, назовем его groupFilter:

Поместим его рядом с кнопкой добавления элемента, разделим их сепаратором (для этого перетянем элемент дерева на позицию под сепаратором sep1 Toolbar_Separator):

Изначально фильтр представляет собой текстовое поле для ввода. Сделаем его выпадающим списком. Чтобы изменить тип, заходим в свойства компонента фильтра и изменяем тип поля фильтра. Указываем тип поля Adapter, тип адаптера – адаптер словаря.

Указываем для адаптера словарь phone_group и сохраняем:

Добавим заголовок для поля фильтра. Назовем его groupLabel, поместим его рядом с компонентом фильтра и укажем текст Group:

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

Для этого изменим свойство фильтра Show all, поставим значение true. Таким образом, выведем дополнительную запись в выпадающем списке:

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

Фильтр будет удаленный (фильтрация будет происходить на стороне сервера). Указываем хранилище и поле фильтрации group:

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

PS: Если внимательно протестировать приложение, можно заметить, что в списке контактов в колонке  Group  отображается ключ словаря, а не его значение. Чтобы исправить ситуацию нужно назначить рендерер для колонки. Как создавать собственные рендеры мы разберем в другом примере.