MVM. Начало

Глаза боятся, а руки делают

Русская пословица

Так как моё главное жизненное правило подразумевает практическую проверку любых теоретических утверждений и предположений, я решил приступить к реализации новой визуальной среды разработки: My Visual Multibase (MVM).

Среда для среды

И начать придется с выбора инструмента разработки. Но для меня этот вопрос очевиден: Delphi 10.4 Community Edition. И вот почему:

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

По своей сути My Visual Multibase – это специализированный редактор, подготавливающий сценарные файлы для их воспроизведения в различных операционных системах и средах: Windows, iOS, Android и Web-сервер. Ключевая особенность этого редактора – минимализация времени разработки и модификации приложений за счет использования графического интерфейса, максимальная поддержка концепции no-code и low-code разработки.

Редактор я планирую создавать как кросс-платформенное приложение для Windows и iOS. А вот полноценную работу с редактором в Andriod я пока плохо представляю. Хотя, если ориентироваться на то, что часть функциональности (а для простых проектов – все 100%) можно будет создавать в режиме no-code, то логично предусмотреть версию для планшетов. Но есть проблема: некоторые элементы интерфейса весьма специфичны в Android и их применение для десктопных устройств будет выглядеть забавно. И на реализацию этого может уйти много времени. Поэтому на первых порах редактор будет работать только на Windows и iOS.

Интерфейс

Для главного меню я решил использовать компонент TMenuBar. Хотя параметры шрифта меню по-прежнему нельзя настроить, но можно менять высоту панели. Не удержался и поиграл с новыми свойствами формы: Fill.Kind и Fill.Gradient.

Элементы управления планирую размещать на фреймах, а сами фреймы накидывать на главную форму по мере необходимости. Таким образом получится MDI, к которому я так привык в своих приложениях, созданных в My Visual Database. Нужно немного подумать над реализацией навигатора форм. Имеющийся TTabControl не имеет достаточных настроек (хочу разместить навигатор внизу), но имеет встроенный механизм сдвига вкладок, если они не помещаются в одну строку. Как вариант, попробую TToolBar + TButton, а вопрос с переполнением решу автоматическим увеличением размера панели навигатора, как это сделано в программе IBExpert.

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

Архитектура

Если говорить о классической архитектуре приложения (MVC), то контроллером будет форма с набором действий в TActionList, вьювером – экземпляр класса TTreeView. А вот модель придется создать вручную. Задача модели – хранить свойства элемента и предоставлять сведения о том, как элементы связываются между собой. Сведения о фактической структуре проекта будут храниться в элементах дерева (TTreeNode), которые связываются с контейнером данных (TNode) через свойство TTreeNode.Data.

TNode

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

  // TNode - базовый класс
  // +- TProjectNode - проект
  // +- TGroupNode - группы
  // |  +- TTablesGroupNode - группы таблиц
  // |  +- TRoleGroupNode - группы ролей
  // |  +- TFormsGroupNode - группы форм
  // |  +- TMenuGroupNode - группа элементов меню
  // |  +- TReportGroupNode - группа отчетов
  // +- TDataNode - таблицы
  // |  +- TEditDataNode - редактируемые таблицы
  // |  +- TReadOnlyDataNode - справочные нередактируемые таблицы
  // +- TFormNode - формы
  // |  +- TTableFormNode - табличная форма
  // |  |  +- TDetailTableFormNode - табличная форма детализации
  // |  +- TEditFormNode - форма редактирования
  // |  +- TSystemFormNode - специальная (системная) форма
  // +- TMenuNode - пункт меню
  // |  +- TActionNode - действие
  // |  +- TOpenFormNode - отображение формы
  // +- TPropertyNode - поле таблицы
  // +- TReportNode - отчет
  // +- TRoleNode - роль
Code language: Delphi (delphi)

Базовый класс TNode содержит основной функционал контейнера для хранения свойств и логики построения дерева проекта. Остальные классы имеют свою специализацию и набор уникальных настраиваемых свойств, например TProjectNode хранит настройки проекта, а TReportNode – настройки для генерации отчета.

Файл проекта

Основной файл проекта – текст в формате XML. Были мысли использовать для хранения SQLite, чтобы хранить все данные проекта в одном файле, но решил отдать предпочтение текстовому файлу, к которому в дальнейшем скорей всего придется добавить дополнительные папки для хранения графических ресурсов.

Структура XML документа простая. Прочитав “Правила синтаксиса XML“, я решил, что использовать для чтения/записи специальный компонент не имеет смысла, реализовать нужны алгоритмы можно своими руками. Кстати, в My Visual Database в этом формате хранится информация о формах приложения.

В принципе, XML можно было бы редактировать с помощью стандартного редактора, такого, как MindFusion XML Viewer, но цель редактора My Visual Multibase – не только минимизировать время создания и редактирования проекта, но и время обучения использования редактора за счет интуитивно понятного интерфейса, а также использования технологий Drag’n’Drop как основного способа редактирования.

<?xml version="1.0" encoding="unicode"?>
<TProjectNode ID="0" Name="Мой проект" NodeState="Editable" LastID="22" >
  <TTablesGroupNode ID="1" Name="Таблицы" NodeState="Fillable" >
    <TTablesGroupNode ID="21" Name="Общие" NodeState="Editable,Fillable,Removable,Movable" >
      <TEditDataNode ID="22" Name="Мои данные" NodeState="Editable,Fillable,Removable,Movable" >
      </TEditDataNode>
    </TTablesGroupNode>
  </TTablesGroupNode>
  <TFormsGroupNode ID="2" Name="Формы" NodeState="" >
    <TFormsGroupNode ID="3" Name="Пользовательские" NodeState="Fillable" >
    </TFormsGroupNode>
    <TFormsGroupNode ID="4" Name="Системные" NodeState="" >
      <TSystemFormNode ID="5" Name="Главная" NodeState="" >
      </TSystemFormNode>
      <TSystemFormNode ID="6" Name="Загрузка приложения" NodeState="" >
      </TSystemFormNode>
      <TSystemFormNode ID="7" Name="О программе" NodeState="" >
      </TSystemFormNode>
      <TSystemFormNode ID="8" Name="Аутентификация" NodeState="" >
      </TSystemFormNode>
      <TSystemFormNode ID="9" Name="Смена пароля" NodeState="" >
      </TSystemFormNode>
    </TFormsGroupNode>
  </TFormsGroupNode>
  <TMenuGroupNode ID="10" Name="Меню" NodeState="Fillable" >
    <TMenuGroupNode ID="11" Name="Журналы" NodeState="Editable,Fillable,Removable,Movable" >
      <TActionNode ID="12" Name="Выход" NodeState="Removable,Movable" >
      </TActionNode>
    </TMenuGroupNode>
    <TMenuGroupNode ID="13" Name="Справочники" NodeState="Editable,Fillable,Removable,Movable" >
    </TMenuGroupNode>
    <TMenuGroupNode ID="14" Name="Параметры" NodeState="Editable,Fillable,Removable,Movable" >
      <TOpenFormNode ID="15" Name="Смена пароля" NodeState="Removable,Movable" >
      </TOpenFormNode>
    </TMenuGroupNode>
    <TMenuGroupNode ID="16" Name="Помощь" NodeState="Fillable,Removable,Movable" >
      <TActionNode ID="17" Name="Справка" NodeState="Removable,Movable" >
      </TActionNode>
      <TOpenFormNode ID="18" Name="О программе" NodeState="Removable,Movable" >
      </TOpenFormNode>
    </TMenuGroupNode>
  </TMenuGroupNode>
  <TReportGroupNode ID="19" Name="Отчеты" NodeState="Fillable" >
  </TReportGroupNode>
  <TRolesGroupNode ID="20" Name="Роли" NodeState="Fillable" >
  </TRolesGroupNode>
</TProjectNode>
Code language: PHP (php)

Редактор

Для отображения дерева хорошо подходит класс TTreeView. В центральной части отображается дерево проекта, справа – элементы (кирпичики), из которых можно строить дерево, и таблица со свойствами выбранного элемента.

Редактирование дерева возможно тремя способами:

• Перетаскиванием узлов из дерева элементов в дерево проекта
• Кнопками на панели инструментов
• Контекстным меню

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

TTabSet в верхней части формы служит для фильтрации элементов по категориям, что облегчает восприятие проекта при большом числе элементов. Например, при выборе вкладки “Таблицы” остаются доступными только элементы для редактирования сведений о таблицах проекта.

Что дальше?

• Оформление проектной документации в виде PDF документа
• Проработка иерархии классов, в частности – наследников TDataNode и TPropertyNode для завершения возможностей редактирования таблиц проекта
• Тестирование (принимаются заявки в закрытую группу бета-тестирования)
• Получение обратной связи от всех заинтересованных в данном проекте лиц

Набрался терпения наблюдать в бинокль за траекториями полётов твердых предметов в мой огород.