MVM. Start

Eyes are scared, but hands are working

Russian proverb

Since my main rule of life implies practical verification of any theoretical statements and assumptions, I decided to start implementing a new visual development environment: My Visual Multibase (MVM).

Environment for environment

And you will have to start by choosing a development tool. But for me this question is obvious: Delphi 10.4 Community Edition. And that’s why:

• My many years of practical experience in developing applications in the Delphi environment
• Ability to create non-commercial projects without buying a license
• Ability to create multi-platform applications

At its core, My Visual Multibase is a specialized editor that prepares script files for playback on various operating systems and environments: Windows, iOS, Android, and the Web server. The key feature of this editor is the minimization of development time and modification of applications through the use of a graphical interface, maximum support for the concept of no-code and low-code development.

I plan to create the editor as a cross-platform application for Windows and iOS. But I still have a hard time imagining full-fledged work with the editor in Andriod. Although, if we focus on the fact that part of the functionality (and for simple projects – all 100%) can be created in no-code mode, then it is logical to provide a version for tablets. But there is a problem: some interface elements are very specific to Android and their application for desktop devices will look funny. And this can take a long time to implement. Therefore, at first, the editor will only work on Windows and iOS.

Interface

For the main menu, I decided to use the TMenuBar component. Although the menu font settings are still not customizable, you can change the height of the panel. I could not resist and played with the new shape properties: Fill.Kind and Fill.Gradient.

I plan to place controls on frames, and throw the frames themselves on the main form as needed. This will give you the MDI that I’m so used to in my applications built in My Visual Database. You need to think a little about the implementation of the form navigator. The existing TTabControl does not have sufficient settings (I want to put the navigator at the bottom), but it has a built-in mechanism for shifting tabs if they do not fit on one line. As an option, I’ll try TToolBar + TButton, and I’ll solve the overflow issue by automatically increasing the size of the navigator panel, as is done in the IBExpert program.

However, I fell into a trap: instead of starting with the project editor, I started implementing the classes that will be used in the final application, and this is, to put it mildly, out of time. So the beautiful blue gradient goes into the bin, and comes to the fore…

Architecture

If we talk about the classic application architecture (MVC), then the controller will be a form with a set of actions in TActionList, the viewer will be an instance of the TTreeView class. But the model will have to be created manually. The purpose of a model is to store the properties of an element and provide information about how the elements are related to each other. Information about the actual structure of the project will be stored in the tree elements (TTreeNode), which are associated with the data container (TNode) through the TTreeNode.Data property.

TNode

A separate class is created for each node type in the project tree. At the moment the class hierarchy looks like this:

// TNode - base class
// +- TProjectNode - project
// +- TGroupNode - groups
// | +- TTablesGroupNode - table groups
// | +- TRoleGroupNode - role groups
// | +- TFormsGroupNode - form groups
// | +- TMenuGroupNode - group of menu items
// | +- TReportGroupNode - report group
// +- TDataNode - tables
// | +- TEditDataNode - editable tables
// | +- TReadOnlyDataNode - non-editable reference tables
// +- TFormNode - forms
// | +- TTableFormNode - table form
// | | +- TDetailTableFormNode - table detail form
// | +- TEditFormNode - edit form
// | +- TSystemFormNode - special (system) form
// +- TMenuNode - menu item
// | +- TActionNode - action
// | +- TOpenFormNode - form display
// +- TPropertyNode - table field
// +- TReportNode - report
// +- TRoleNode - role
Code language: Delphi (delphi)

The TNode base class contains the main functionality of the container for storing properties and logic for building the project tree. The remaining classes have their own specialization and a set of unique custom properties, for example, TProjectNode stores project settings, and TReportNode – settings for generating a report.

Project file

The main project file is text in XML format. There were thoughts to use SQLite for storage in order to store all the project data in one file, but I decided to give preference to a text file, to which in the future I will most likely have to add additional folders for storing graphic resources.

The structure of an XML document is simple. After reading the XML Syntax Rules, I decided that it makes no sense to use a special component for reading / writing, you can implement the necessary algorithms yourself. By the way, My Visual Database stores information about application forms in this format.

In principle, XML could be edited with a standard editor such as the MindFusion XML Viewer, but the goal of the My Visual Multibase editor is not only to minimize project creation and editing time, but also to learn how to use the editor through an intuitive interface, and using Drag’n’Drop technologies as the main editing method.

<?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)

Editor

The TTreeView class is well suited for displaying a tree. The project tree is displayed in the central part, on the right – elements (bricks) from which you can build a tree, and a table with the properties of the selected element.

Tree editing is possible in three ways:

• By dragging nodes from the element tree to the project tree
• Buttons on the toolbar
• Context menu

By using a TActionList to store and manage the availability of actions, this functionality required very little code and two action lists, one for the main actions and one for adding items to the tree.

TTabSet at the top of the form serves to filter elements by category, which makes it easier to perceive the project with a large number of elements. For example, when you select the Tables tab, only the items for editing project table details remain available.

What’s next?

• Registration of project documentation in the form of a PDF document
• Elaboration of the class hierarchy, in particular – the descendants of TDataNode and TPropertyNode to complete the possibilities for editing project tables
• Testing (applications are accepted for the closed beta testing group)
• Obtaining feedback from all persons interested in this project

I got the patience to observe through binoculars the flight paths of solid objects into my garden.