В качестве примера non-code проекта разберём создание простого приложения для учета клиентов, которые пользуются платным абонементом для доступа к библиотеке технической литературы.
Требования заказчика
Цели и задачи
Организация учета платного абонемента библиотеки. Регистрация пользователей. Учет поступившей оплаты. Учет периода доступа.
Среда выполнения
Windows 7 и старше
СУБД
Бесплатная и простая
Количество пользователей
Один
Входные данные
Сведения о клиенте: имя, учетная записи в google, примечание.
Сведения об оплате: дата платежа, сумма платежа
Сведения о доступе: дата начала, дата окончания, включен/выключен.
Выходные данные
Табличное отображение сведений о доступе клиента к библиотеке и оплате этого доступа.
Процесс обработки
Быстрый ввод данных в таблицу. Сортировка по клиенту и датам.
Дополнительные требования
Максимально простая реализация
Анализ требований заказчика
В нашем первом проекте главным требованием будет простота реализации.
Для этого мы создадим единственную таблицу, в которую будем вводить все данные. По сути, мы создадим что-то вроде листа MS Excel, в котором мы будем хранить:
- Имя клиента – фамилия и имя
- Учетная запись Google – адрес для предоставления доступа
- Примечание – дополнительные сведения: страна, язык и т.д.
- Дата платежа – дата оплаты
- Сумма платежа – сумма оплаты
- Дата начала – дата начала доступа
- Дата окончания – дата окончания доступа
- Активность – включен ли доступ
🔨 Внесите данную информацию в проектную документацию.
Выбор СУБД
Исходя из описаний СУБД, которые можно найти в разделе “Обзор возможностей My Visual Database“, лучше использовать SQLite – простую встраиваемую СУБД.
Выбор СУБД для проекта осуществляется кнопкой “База данных” в правом верхнем углу на вкладке “Таблицы базы данных”.
📝 По умолчанию MVDB работает с СУБД SQLite.
Проектирование структуры данных
Как правило, для проектирования структуры данных разработчики используют специальные средства проектирования баз данных, обеспечивающие моделирование данных и генерацию схем баз данных (как правило, на языке SQL). К ним относятся ERwin (Logic Works), S-Designor (SDP) и DataBase Designer (ORACLE).
В MVDB имеется встроенная системе проектирования, которая автоматически создает схемы данных в выбранной СУБД. Она имеет простой и удобный графический интерфейс, а все взаимодействие с базой скрыто от пользователя.
Необходимая базовая информация о структуре хранения и типах данных находится в разделе “Обзор возможностей My Visual Database“.
🔨 Теперь мы можем определиться с типом данных для каждого поля нашего проекта. Данную информацию необходимо внести в документацию проекта.
- Имя клиента – текст
- Учетная запись Google – текст
- Примечание – текст
- Дата платежа – дата
- Сумма платежа – деньги
- Дата начала – дата
- Дата окончания – дата
- Активность – логическое значение
Создание таблицы
🔨 На вкладке “Таблицы базы данных” (1) нажимаем кнопку “Новая таблица” (2). В открывшемся окне вводим название таблицы – sale (продажа) (3) и сохраняем ввод (4).
📝 Для названия таблиц необходимо использовать латинские буквы. Названия должны быть осмысленными и отражать суть данных, которые в ней хранятся.
Для редактирования названия таблицы можно использовать кнопку (1), а если нужно удалить таблицу – кнопку (2).
Добавление полей
🔨 Для добавления поля нажмите кнопку (1). В появившемся списке (2) выберите нужный тип поля (3).
🔨 В открывшемся окне редактирования введите имя поля (1). Убедитесь, что тип поля выбран правильно (2). При необходимости установите флаг “Обязательное” (3) и сохраните результат (4).
☝ Обязательные поля – это поля, в которых пользователь обязан указать конкретное значение. К обязательным полям относятся те, в которых хранятся ключевые свойства объекта (название, стоимость и т.д.). Необязательными могут быть поля с комментариями или поля со свойствами, указывать которые не обязательно.
| Свойство | Поле | Тип | Примечание |
|---|---|---|---|
| Имя клиента | clientName | ТЕКСТ | |
| Учетная запись GMail | ТЕКСТ | ||
| Примечание | comment | ТЕКСТ | |
| Дата платежа | payDate | ДАТА | |
| Сумма платежа | amount | ДЕНЬГИ | |
| Дата начала | fromDate | ДАТА | |
| Дата окончания | toDate | ДАТА | |
| Активность | access | ДА/НЕТ |
📝 Хотя MVDB разрешает вводить имена полей на русском языке, я рекомендую использовать только латинские символы. В дальнейшем это упростит написание SQL-запросов.
Классы и компоненты
Что такое классы и компоненты, а также перечень доступных визуальных компонент находится в разделе “Обзор возможностей My Visual Database“.
В нашем первом проекте нам понадобится только одна форма (TAForm), которая создаётся автоматически при создании проекта. На ней мы разместим необходимые визуальные компоненты и настроим их свойства.
Для отображения табличных данных используем специальный компонент табличного отображения данных (TdbStringGridEx).
Используемые в проекте компоненты
| Кнопка | Название | Компонент | Класс | Описание |
|---|---|---|---|---|
 | Форма | Form | TAForm | Основной элемент интерфейса ОС Windows; контейнер для других элементов |
 | Таблица | Table Grid | TdbStringGridEx | Отображение данных в виде таблицы. Основной компонент для отображения содержимого таблиц базы данных. Можно использовать для ввода данных. |
Форма (TAForm)
Форма – это основной визуальный компонент операционной системы Windows. Любая программа с графическим пользовательским интерфейсом имеет хотя бы одну форму. Приложения, создаваемые в MVDB, также имеют как минимум одну форму, которая добавляется в проект автоматически при его создании. Остальные формы добавляются с помощью кнопки , расположенной на панели инструментов.
В нашем случае форма уже существует. Переключаемся на просмотр формы (1). В списке компонент кликаем по компоненту формы (2) или кликаем по самой форме в рабочем окне. При этом отображается заполненная таблица свойств компонентов (3). Свойств много, но пока нас интересуют только несколько главных свойств.
🔨 Задайте значения ключевым свойствам формы:
| Свойство | Значение | Примечание |
|---|---|---|
| Name | frmMain | Имя формы |
| Caption | MyLibrary | Заголовок формы. По умолчанию совпадает с именем формы |
| Sizeable | True | Форма с изменяемым размером |
| Width | 800 | Ширина формы по умолчанию |
| Height | 600 | Высота формы по умолчанию |
Свойство Name
Это свойство есть у всех компонент. Оно является идентификатором компонента, используется при настройке свойств и написании скриптов.
Идентификаторы —- имена объектов и конструкций программы (меток, констант, типов, переменных, типов, процедур, функций, объектов, модулей, программ, полей в записях и т.д.).
Имя может иметь любую длину, однако в языке Pascal, который лежит в основе проекта MVDB, различимыми являются только первые 63 символа. Имя состоит из буквы, за которой могут следовать буквы, цифры или символ подчеркивания. Имя может начинаться с символа подчеркивания. Имена безразличны к регистру клавиатуры.
MVDB поддерживает кириллические (по сути – на любом языке, т.к. редактором поддерживается Unicode) имена для компонент, однако рекомендуется использовать английские слова (существительные в единственном числе, для кнопок – глаголы) и сокращения: они более короткие; при наборе скриптов не нужно будет постоянное переключать язык; если всегда использовать один язык, то не будет путаницы с буквами, имеющими сходное написание (“О”, “H”, “Р” и др.).
Выбор имени желательно осуществлять в соответствии с логической или физической сущности именуемого объекта, что облегчает понимание программы и служит признаком хорошего стиля программирования. К хорошему стилю также относится использование префиксов в именах компонентов, которые соответствуют классу компонента. Префикс названия должен быть фиксированной длины, оптимально – 3 символа. Обычно используют название класса, удаляя из него гласные.
| Класс | Префикс | Примечание |
|---|---|---|
| TAForm | frm | Форма (англ. form) |
| TdbStringGridEx | tgr | Таблица отображения данных ( англ. table grid) |
📝 Хотя это соглашение является частью внутреннего стандарта разработчика, такой стиль оформления проекта говорит о его профессионализме.
Каждая форма должна иметь уникальное имя. Остальные компоненты также должны иметь уникальные имена в пределах одной формы, то есть на разных формах могут быть компоненты с одинаковыми именами, а на одной – нет. Это связано со способом обращения к компонентам из скриптов, о чем я расскажу позже, а пока нужно запомнить данное правило уникальности. Впрочем, если вы его забыли, то MVDB поправит вас – программа не допускает ввода одинаковых имен компонентов на одной форме и выдает сообщение об ошибке.
☝ Нельзя в качестве имени использовать ключевые слова языка Pascal. Хотя редактор свойств не выдаст ошибку при вводе такого слова, в дальнейшем это может привести к невозможности использования скриптов для доступа к компоненту с таким именем.
📝 Особенность ввода имени в редакторе свойств MVDB состоит в том, что в отличии от остальных свойств, которые сохраняются сразу по мере их ввода, новое имя компонента не сохранится пока вы не нажали клавишу “Enter”.
🔨 Присвоим свойству Name значение frmMain и перейдём к настройке других свойств.
Свойства Top, Left, Width, Height
Эти свойства есть у всех визуальных компонентов. Они определяют положение компонента на форме и его размер. Для формы они также определяют её размер и положение на экране компьютера. В общем случае свойства Top и Left определяют положение относительно контейнера, в котором находится компонент.
Контейнер – это компонент, который может содержать в себе другие компоненты. Контейнер также называют родительским компонентом по отношению к остальным компонентам, находящимся внутри контейнера.
Чтобы увидеть структуру вложенности компонентов (1), вызовите всплывающее меню (2) и выберите пункт “Дерево”
В частности, форма является контейнером для остальных компонентов, находящихся на ней, а экран является контейнером для форм.
| Свойство | Описание |
|---|---|
| Left | Определяет положение компонента относительно левой части родительского компонента |
| Top | Определяет положение компонента относительно левой части родительского компонента |
| Width | Определяет ширину компонента |
| Height | Определяет высоту компонента |
Положение и размеры задаются в пикселях.
Пиксель (англ. Pixel – точка) – это наименьшая (элементарная) единица двумерного изображения на экране.
Одной их характеристик любого дисплея является его разрешение в пикселях. Современные дисплеи имеют разрешение 1024х768 и более. При проектировании любой программы необходимо учитывать разрешение дисплея конечного пользователя.
Зададим значения свойств формы: Width = 800, Height = 600. Свойства формы Top и Left недоступны в редакторе, а приложение по умолчанию запускается по центру экрана, что на данном этапе нас вполне устраивает.
Современные стандарты дисплеев
| Стандарт | Разрешение |
|---|---|
| XGA | 1024×768 |
| XGA+ | 1152×864 |
| WXGA | 1280×800 |
| WXGA+ | 1440×900 |
| SXGA | 1280×1024 |
| SXGA+ | 1400×1050 |
| WSXGA | 1600×1024 |
| WSXGA+ | 1680×1050 |
| UXGA | 1600×1200 |
| HDTV | 1920×1080 |
| UXGA | 1920×1200 |
| QXGA | 2048×1536 |
| QSXGA | 2560×2048 |
| QSXGA-W | 3840×2400 |
Учитывая данные обстоятельства, желательно, чтобы форма вашего приложения могла менять свой размер. Для этого задействуем следующее свойство.
Свойство Sizeable
Данное свойство отвечает за то, можно ли будет менять размер формы, потянув за её край.
| Значение | Описание |
|---|---|
| False | По умолчанию. Размер формы определяется свойствами Width и Height и их нельзя поменять после запуска программы. |
| True | Размер формы при запуске программы определяется свойствами Width и Height, размер можно изменить, потянув за край формы. |
📝 Это свойство добавлено для удобства, на самом деле при его изменении меняются другие свойства формы, отвечающие за способность к изменению размера (BorderStyle, BorderIcons).
Таблица (TdbStringGridEx)
🔨 Добавим на форму таблицу. Для этого сначала нужно кликнуть по панели компонентов на кнопку , а затем – на форму.
Настройте свойства таблицы:
| Свойство | Значение | Примечание |
|---|---|---|
| Name | tgrSale | |
| Editable.AllowCreate | True | Разрешает создание записей непосредственно в таблице |
| Editable.AllowEdit | True | Разрешает редактирование записей непосредственно в таблице |
| Editable.AllowDelete | True | Разрешает удаление записей непосредственно в таблице |
| Left | 0 | Левая граница таблицы |
| Top | 0 | Верхняя граница таблицы |
| Width | 800 | Ширина таблицы |
| Height | 600 | Высота таблицы |
| Anchors | [All] | Изменяет размер таблицы при изменении родительского компонента |
Группа свойств Editable
Компонент Table Grid можно использовать не только для отображения табличных данных, но и для их ввода, редактирования и удаления. За это отвечает группа свойств Editable. Раскройте группу свойств:
По умолчанию все они установлены в значение Fаlse, то есть возможность редактирования отключена. При установке значения в True активируются определенные возможности изменения данных:
| Свойство | Возможность |
|---|---|
| AllowCreate | Разрешить добавление данных |
| AllowCreateEmpty | Разрешить добавление пустой строки, если это не противоречит настройке обязательных полей. |
| AllowEdit | Разрешить редактирование данных |
| AllowDelete | Разрешить удаление данных |
| SecondClickEdit | Режим редактирования данных включается после повторного клика по ячейке. |
В режиме редактирования у таблицы в верхней части появляется пустая строка, в которую можно вводить новые данные.
Для редактирования данных достаточно выбрать редактируемую ячейку, кликнув по ней.
Для удаления данных выберите строку и нажмите на клавиатуре клавишу “Delete”.
Свойство Settings
Это свойство отвечает за настройки, связанные с отображением данных. Его настройка заменяет написание сотен строк кода и составление SQL-запросов. Это один из ключевых элементов MVDB, реализующий принципы визуального программирования.
🔨 В свойствах формы, в строке Settings кликните на надписи [Настройка]. Откроется окно настройки, в котором необходимо выполнить несложную последовательность действий:
- Выберите таблицу, данные из которой нужно отобразить – sale
- Выберите поле, которое нужно отобразить
- Нажмите кнопку для переноса выбранного поля в список полей табличного компонента
- К колонке “Заголовок” введите желаемое текстовое значение – отображаемое название колонки. Повторите действия 2-4 для всех полей.
- Выберите опцию “Показать все записи из таблицы
- Сохраните настройки
📝 Чтобы удалить ненужное для отображения поле, нажмите кнопку (7), а для изменения порядка отображения полей используйте кнопки со стрелками (8).
☝ Если после настройки полей табличного компонента вы отредактируете названия полей в самой таблице, необходимо зайти в настройки табличного компонента, удалить уже неактуальные данные и добавить новые поля. Запомните, что My Visual Database не редактирует эти настройки автоматически, и, если вы забудете сделать соответствующие исправления, ошибка проявится только при запуске приложения.
Свойство Anchors (якоря)
Якоря – это свойства визуального компонента, которые “привязывают” его к краям родительского элемента-контейнера, на котором расположен данный компонент. Таким образом, привязанный край компонента сохраняет расстояние до такого же края родительского компонента при любом изменении размера родительского компонента.
Для редактирования свойства Anchors используется специальное окно, в котором необходимо отметить активные якоря:
| Свойство | Примечание |
|---|---|
| Left | Привязать левый край компонента |
| Top | Привязать верхний край компонента |
| Right | Привязать левый край компонента |
| Bottom | Привязать нижний край компонента |
По умолчанию компонент получает привязку к левому и верхнему краю.
В редакторе свойств выбранные привязки отображаются через запятую.
Для иллюстрации на квадратной форме размещена цветная квадратная панель. Результат трансформации при изменении размера контейнера поможет вам выбрать нужный тип привязки компонента. Различные вариант привязок приведены в таблице ниже.
| Якоря | Расположение компонента | Трансформация |
|---|---|---|
| [Left, Top] |  | Компонент остаётся на своём месте относительно левого верхнего угла формы. Размеры не меняются. |
| [Right, Bottom] |  | Компонент привязывается к правому нижнему углу формы. Размеры не меняются. Этот тип привязки часто используют для кнопок формы редактирования. |
| [Right, Top] |  | Компонент привязывается к правому верхнему углу формы. Размеры не меняются. |
| [Left, Bottom] |  | Компонент привязывается к левому нижнему углу формы. Размеры не меняются. Этот тип привязки используют для дополнительных кнопок формы редактирования. |
| [Left, Top, Right] |  | Компонент привязан к верхней части, растягивается по горизонтали, высота не меняется. Используется для панелей инструментов. |
| [Left, Right, Bottom] |  | Компонент привязан к нижней части, растягивается по горизонтали, высота не меняется. Используется для статусной строки в нижней части экрана. |
| [Top, Right, Bottom] |  | Привязан к правой части, растягивается по вертикали, ширина не меняется. Используется для боковых панелей (фильтры). |
| [Left, Top, Bottom] |  | Привязан к левой части, растягивается по вертикали, ширина не меняется. Используется для боковых панелей (меню, фильтры). |
| [All] |  | Размер компонента меняется пропорционально изменения размера контейнера. Часто используется, если нужно заполнить весь контейнер. |
| [] |  | Выравнивать компонент по центру контейнера. Размер не меняется. |
| [Left] |  | Привязывается к левому краю, выравнивается по вертикали, размер не меняется. |
| [Top] |  | Привязывается к верхнему краю, выравнивается по горизонтали, размер не меняется. |
| [Right] |  | Привязывается к правому краю, выравнивается по вертикали, размер не меняется. |
| [Bottom] |  | Привязывается к нижнему краю, выравнивается по горизонтали, размер не меняется. |
| [Left, Right] |  | Привязывается к левому и правому краю, выравнивается по вертикали, размер не меняется. |
| [Top, Bottom] |  | Привязывается к нижнему и верхнему краю, выравнивается по горизонтали, размер не меняется. |
Подведение итогов
За несколько минут вы создали приложение для работы с базой данных читателей, освоив основные приёмы визуального программирования:
- размещение на форме визуальных компонентов,
- настройка свойств визуальных компонентов в редакторе свойств.
Вы познакомились с основой проектирования приложений и создали пакет проектной документации: требования заказчика, техническое задание и описание проекта (если вы пропустили эту часть практической работы, рекомендую её сделать сейчас).
Вы узнали, что означают понятия компоненты и классы, лежащие в основе объектно-ориентированного программирования.
Вы начали изучение свойств компонентов формы и табличного представления.
Теперь нужно усилить наши теоретические знания и закрепить практический успех. Для этого мы будем наращивать функциональность нашей программы за счет применения новых компонентов, а также более детального изучения свойств использованных компонентов. Также мы будем изучать все виды программирования: визуальное, структурное, компонентное и объектно-ориентированное. А в первую очередь необходимо изучить теорию реляционных отношений.