Закрепляем полученные знания о дополнительных компонентах и принципах проектирования пользовательского интерфейса, дорабатываем проект “Библиотека” v.4.1
Требования заказчика
Доработать проект Библиотека v.4.1:
- сделать красиво
Проектирование
На этот раз ничего проектировать не придется, доработка носит исключительно творческий характер. Конечно, такая ситуация вряд ли произойдёт в реальной жизни, хотя вполне возможны случаи, когда заказчики не могут точно сказать, что же им не нравится в дизайне приложения. Поэтому вы, как разработчик, должны действовать на опережение и некоторый план по доработкам нам все же понадобится.
- На формах редактирования добавить подписи для полей ввода.
- Выделить заголовки таблиц, чтобы они не сливались с содержимым
- Изменить вид курсора при наведении на кнопки
- Формы справочников сделать с изменяемым размером
- На форме редактирования автора добавить отображение списка книг
- Добавить фирменный логотип на главную форму
- Добавить дизайнерские элементы в оформлении
Делаем красиво
На главной форме меняем цвет BgColor = $00FEEFED, у таблицы устанавливаем стиль заголовка таблицы HeaderStyle = hsOffice2010, добавляем изображение с прозрачным фоном в формате PNG, а в качестве логотипа используем символ юникод U+1F56E 🕮.
🔨 Настройте свойства компонентов для формы frmMain
| Свойство | frmMain | tgrBook | Картинка | Метка |
|---|---|---|---|---|
| Name | imgBottom | labLogo | ||
| BgColor | $00FEEFED | |||
| Caption | 🕮 | |||
| HeaderStyle | hsOffice2010 | |||
| Font.Size | 30 | |||
| Font.Color | $00A00000 | |||
| Left | 0 | 744 | ||
| Top | 360 | -8 | ||
| Width | 800 | 49 | ||
| Height | 36 | |||
| Anchors | [Left,Right,Bottom] | [Top,Right] | ||
| Pictture | <Картинка> | |||
| Center | True |
С формами справочников frmAuthor и frmGenre проделываем аналогичные операции: меняем цвет формы, меняем стиль заголовка таблицы и меняем свойство формы Sizeable = True.
На форме редактирования книги в нижней части добавим панель, окрашенную в наш “фирменный” цвет. На эту панель перенесем кнопки “Сохранить” и “Отменить”. Над полями ввода данных разместим метки с подписями. Цвет меток можно сделать приглушённым (clGray).
Пользуясь случаем напоминаю, что для просмотра изображения в его полном размере достаточно кликнуть по элементу хранения изображения в базе. В результате появляется отдельное окно просмотра загруженного изображения.
🔨 Настройте свойства компонентов для формы efmBook
Здесь я не буду по традиции публиковать таблицу со свойствами компонентов. Во-первых их много, во-вторых мне кажется, что вы уже достаточно хорошо управляетесь мышкой, чтобы расставлять компоненты на глаз. Отмечу лишь, что для того, чтобы сменить цвет выпадающих списков на белый необходимо сменить свойство Style = csDropDown. А чтобы панель была без фаски, установите её свойство BevelWidth = 0.
На форме редактирования жанра добавьте панель для кнопок и поменяйте стиль заголовка таблицы. Не забудьте про метки.
Форму редактирования автора efmAuthor сделайте из двух частей/вкладок: на первой разместите поля для ввода имени и даты рождения, а также добавьте таблицу с произведениями автора, которые есть в библиотеке. А на второй вкладке расположится расширенный редактор, в котором отображается биография.
☝ Не забываем давать компонентам осмысленные названия
📝 Таблицу для отображения книг автора можете скопировать с формы efmGenre
Подведение итогов
Представления о красоте и в частности о красоте пользовательского интерфейса всё время меняются, но я надеюсь, что основные принципы проектирования интерфейса были соблюдены.
Теперь снова можно сосредоточиться на функциональности приложения, а именно – на системе фильтрации и поиска данных.