2. Розробка інтерфейсу програми

2.1 Кроки розробки призначених для користувача інтерфейсів

Для проектування інтерфейсу додатку знадобилося дізнатись інформацію про користувача, проаналізувати його рівень комп’ютерних знань та вмінь. Я проаналізувала можливих користувачів, які будуть користуватися додатком та вивела інформацію в окрему таблицю, табл.2.1

Табл. 2.1 - Характеристика користувача

Характеристика	Градації
Рівень знань і досвід
Комп’ютерна грамотність	Середній. Користувач повинен володіти елементарними навиками користування комп’ютером
Системний досвід	Середній
Досвід роботи з подібними програмами	Середній
Освіта	Закінчена середня освіта
Рівень читання	12 років в школі
Машинопис	135 слів за хвилину
Фізичні характеристики користувача
Вік	Молодий, середнього віку, літній
Стать	Чоловіча, жіноча
Розвиненість рук	Лівша, правша, володіє однаково обома руками
Фізичні вади	Бажано без фізичних вад
Характеристики завдань і роботи користувача
Спосіб використання цієї програми	Ознайомлення з інформацією, яка в ній знаходиться

2.2 Проектування інтерфейсу

Проектування інтерфейсу виконано в середовищі C++Builder 6, в такому процесі:

1) Вікно головної форми КП «ВодГео»:

Додаю на Form1 MainMenu, ToolBar, StatusBar,Memo1;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 11 кнопок, для швидкого доступу до інших вікон. Додаю на форму ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. У властивості Lines компонента Memo1 прописую «Інструкцію для користувача». Зберігаю результати, додаток 2.

2) Вікно «Клієнти «КП ВодГео»:

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 11 кнопок, для швидкого доступу до інших вікон. Додаю на форму ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource2таким чином з’єднавши їх з таблицею «Клієнти». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, додаток 2.

3) Вікно «Працівники «КП ВодГео»»

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 11 кнопок, для швидкого доступу до інших вікон. Додаю на форму ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource2таким чином з’єднавши їх з таблицею «Клієнти». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, додаток 2.

4) Вікно «Договори «КП ВодГео»»

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 11 кнопок, для швидкого доступу до інших вікон. Додаю на форму ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource2таким чином з’єднавши їх з таблицею «Клієнти». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, додаток 2.

5) Вікно «Філіали «КП ВодГео»»

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 11 кнопок, для швидкого доступу до інших вікон. Додаю на форму ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource2таким чином з’єднавши їх з таблицею «Клієнти». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, додаток 2.

6) Вікно «Квитанції «КП ВодГео»»

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 11 кнопок, для швидкого доступу до інших вікон. Додаю на форму ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource2таким чином з’єднавши їх з таблицею «Клієнти». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, додаток 2.

7) Вікно звіту договорів.

Додаю на форму QuickRep, TitleBand1, DetailBand1, QRLabel1, QRDBText1.

У властивостях QuickRep змінюю DataSet на DataModule2->ADOTable4 (тим самим прив'язую таблицю «Договори»). На TitleBand1 додаю 3 QRLabel1 та у властивості Caption прописую назви стовпців в звіті. На DetailBand1 додаю 3 QRDBText1 та змінюю властивість DataSet на DataModule2->ADOTable4 та DataField на потрібну назву таблиці. Натискаю Preview і переглядаю створений звіт, додаток 2.

8) Вікно звіту створених квитанцій.

Додаю на форму QuickRep, TitleBand1, DetailBand1, QRLabel1, QRDBText1, QRExpr1.

У властивостях QuickRep змінюю DataSet на DataModule2->ADOTable5 (тим самим прив'язую таблицю «Квитанції»). На TitleBand1 додаю 3 QRLabel1 та у властивості Caption прописую назви стовпців в звіті. На DetailBand1 додаю 3 QRDBText1 та змінюю властивість DataSet на DataModule2->ADOTable5 та DataField на потрібну назву таблиці. Натискаю на QRExpr1 і у властивості Expression створюю формулу для обчислення загальної суми за день (SUM(ADOTable1.Сума)). Натискаю Preview і переглядаю створений звіт, додаток 2.

9) Вікно довідки по роботі з програмою.

Додаю на форму Panel, Image, Memo.

На Panel додаю Image, і у властивості Picture додаю картинку (логотип компанії). У властивостях компонента Memo змінюю Lines-> «текст довідки по роботі з програмою». Зберігаю створену форму, додаток 2.

10) Вікно довідки про програмою.

Додаю на форму Panel, Image, Memo.

На Panel додаю Image, і у властивості Picture додаю картинку (логотип компанії). У властивостях компонента Memo змінюю Lines-> «інформацію про розробника та версію». Зберігаю створену форму, додаток 2.