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

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

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

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

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

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

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

1. Головне вікно – вікно «Клієнти»:

Додаю на форму Form1 Panel1.

На Panel1 розміщую DBGrid1 – для відображення таблиці Клієнти, в властивостях встановлюю DataSource = «bd_work->Klient_data»; DBNavigator1 – для управління таблицею, в властивостях встановлюю DataSource = «bd_work->Klient_data»; StatusBar1 – створюю TStatusPanel[0](для виведення підказок при наведенні мишею на певний компонент), в властивостях встановлюю AutoHint = true, ShowHint = true; MainMenu1 – підключаю форму до нього в подіях встановлюю Menu = bd_work->Menu_klient, в ньому створюю кнопки та приписую до них назви; ToolBar1 – панель швидкого доступу, на якій створюю 5 кнопок, в подіях встановлюю HotImages = bd_work->ImageList1, Images = bd_work->ImageList1; Panel2(Button1 – для фільтрації по полю Edit1, який орієнтується на атрибут вибраний в ComboBox1; ComboBox1 – для вибору фільтрації по «Код клієнта» або «Прізвище та ім’я» або «Категорія» або «Код вчителя» або зняття фільтрації; Edit1 – текстове поле для введення певних символів для фільтрації по таблиці Клієнти). Результат створеної форми показано в додатку 2 рис.1.

2. Вікно «Вчителі»:

Додаю на форму Tech Panel1.

На Panel1 розміщую DBGrid1 – для відображення таблиці Вчителі, в властивостях встановлюю DataSource = «bd_work->Tech_data»; DBNavigator1 – для управління таблицею, в властивостях встановлюю DataSource = «bd_work->Tech_data»; StatusBar1 – створюю TStatusPanel[0](для виведення підказок при наведенні мишею на певний компонент), в властивостях встановлюю AutoHint = true, ShowHint = true; MainMenu1 – підключаю форму до нього в подіях встановлюю Menu = bd_work->Menu_tech, в ньому створюю кнопки та приписую до них назви; ToolBar1 – панель швидкого доступу, на якій створюю 5 кнопок, в подіях встановлюю HotImages = bd_work->ImageList1, Images = bd_work->ImageList1; Panel2(Button1 – для фільтрації по полю Edit1, який орієнтується на атрибут вибраний в ComboBox1; ComboBox1 – для вибору фільтрації по «Код вчителя» або «Прізвище та ім’я» або «Код паспорту» або «Телефонний номер» або зняття фільтрації; Edit1 – текстове поле для введення певних символів для фільтрації по таблиці Вчителі). Результат створеної форми показано в додатку 2 рис.2.

3. Вікно «Транспорт»:

Додаю на форму transp Panel1.

На Panel1 розміщую DBGrid1 – для відображення таблиці Транспорт, в властивостях встановлюю DataSource = «bd_work->transp_data»; DBNavigator1 – для управління таблицею, в властивостях встановлюю DataSource = «bd_work->transp_data»; StatusBar1 – створюю TStatusPanel[0](для виведення підказок при наведенні мишею на певний компонент), в властивостях встановлюю AutoHint = true, ShowHint = true; MainMenu1 – підключаю форму до нього в подіях встановлюю Menu = bd_work->Menu_transp, в ньому створюю кнопки та приписую до них назви; ToolBar1 – панель швидкого доступу, на якій створюю 5 кнопок, в подіях встановлюю HotImages = bd_work->ImageList1, Images = bd_work->ImageList1; Panel2(Button1 – для фільтрації по полю Edit1, який орієнтується на атрибут вибраний в ComboBox1; ComboBox1 – для вибору фільтрації по «Код транспорту» або «Модель» або «Кількість кінських сил» або «Об’єм двигуна» або зняття фільтрації; Edit1 – текстове поле для введення певних символів для фільтрації по таблиці Транспорт). Результат створеної форми показано в додатку 2 рис.3.

4. Вікно «Додавання / Видалення даних»:

Додаю на форму regedit Panel1.

На Panel1 розміщую PageControl1 на якому міститься 3 вкладки – Клієнти (розміщує в собі PageControl2 на якому міститься 2 вкладки – Додавання даних(містить в собі Label1->Caption = «Введіть код клієнта», Label2->Caption = «Введіть прізвище та ім’я клієнта», Label3->Caption = «Введіть категорію клієнта», Кнопку «Ок» - для підтвердження додавання даних в таблицю «Клієнти»), Видалення даних(містить в собі Label1->Caption = «Введіть код клієнта», Label2->Caption = «Введіть прізвище та ім’я клієнта», Label3->Caption = «Введіть категорію клієнта», Кнопку «Ок» - для підтвердження видалення даних в таблиці «Клієнти»)), Вчителі(розміщує в собі PageControl3 на якому міститься 2 вкладки – Додавання даних(містить в собі Label1->Caption = «Введіть код вчителя», Label2->Caption = «Введіть прізвище та ім’я вчителя» , Label3->Caption = «Введіть код паспорту вчителя» , Label4->Caption = «Введіть телефон вчителя», Кнопку «Ок» - для підтвердження додавання даних в таблицю «Вчителі»), Видалення даних(містить в собі Label1->Caption = «Введіть код вчителя», Label2->Caption = «Введіть прізвище та ім’я вчителя» , Label3->Caption = «Введіть код паспорту вчителя» , Label4->Caption = «Введіть телефон вчителя», Кнопку «Ок» - для підтвердження видалення даних в таблиці «Вчителі»)), Транспорт(розміщує в собі PageControl4 на якому міститься 2 вкладки – Додавання даних(містить в собі Label1->Caption = «Введіть код транспорту», Label2->Caption = «Введіть модель транспорту», Label3->Caption = «кількість кінських сил», Label4->Caption = «Об’єм двигуна (см3)», Кнопку «Ок» - для підтвердження додавання даних в таблицю «Транспорт»), Видалення даних(містить в собі Label1->Caption = «Введіть код транспорту», Label2->Caption = «Введіть модель транспорту», Label3->Caption = «кількість кінських сил», Label4->Caption = «Об’єм двигуна (см3)», Кнопку «Ок» - для підтвердження видалення даних в таблиці «Транспорт»)). Результат створеної форми показано в додатку 2 рис.4.

5. Вікно «Auto_zvit»:

Додаю на форму Auto_zvit QuickRep1

На QuickRep1 розміщую QRBand1(QRLabel1 – в властивостях встановлюю Caption = «Код транспорту»; QRLabel2 – в властивостях встановлюю Caption = «Модель»; QRLabel3 – в властивостях встановлюю Caption = «Кількість кінських сил», QRLabel4 – в властивостях встановлюю Caption = «Об’єм двигуна (см3)»), QRBand2(QRDBText1 – в властивостях встановлюю DataSet = bd_work->Auto_table, DataField = «Код транспорту»; QRDBText2 – в властивостях встановлюю DataSet = bd_work->Auto_table, DataField = «Модель» ; QRDBText3 – в властивостях встановлюю DataSet = bd_work->Auto_table, DataField = «Кількість кінських сил»; QRDBText4 – в властивостях встановлюю DataSet = bd_work->Auto_table, DataField = «Об’єм двигуна»); QRLabel5 – в властивостях встановлюю Caption = «Транспорт». Властивість компоненту QuickRep1 встановлюю DataSet = bd_work->Auto_table, властивість компоненту QRBand2 встановлюю BandType = rbDetail. Результат створеної форми показано в додатку 2 рис.5.

6. Вікно «Teach_zvit»:

Додаю на форму Teach_zvit QuickRep1

На QuickRep1 розміщую QRBand1(QRLabel1 – в властивостях встановлюю Caption = «Код вчителя»; QRLabel2 – в властивостях встановлюю Caption = «Код паспорту»; QRLabel3 – в властивостях встановлюю Caption = «Код транспорту» , QRLabel4 – в властивостях встановлюю Caption = «Прізвище та ім’я» , QRLabel5 – в властивостях встановлюю Caption = «Телефонний номер»), QRBand2(QRDBText1 – в властивостях встановлюю DataSet = bd_work->Teach_table, DataField = «Код вчителя»; QRDBText2 – в властивостях встановлюю DataSet = bd_work->Teach_table, DataField = «Код паспорту» ; QRDBText3 – в властивостях встановлюю DataSet = bd_work->Teach_table, DataField = «Код транспорту» ; QRDBText4 – в властивостях встановлюю DataSet = bd_work->Teach_table, DataField = «Прізвище та ім’я» ; QRDBText5 – в властивостях встановлюю DataSet = bd_work->Teach_table, DataField = «Телефонний номер»), QRLabel5 – в властивостях встановлюю Caption = «Вчителі». Властивість компоненту QuickRep1 встановлюю DataSet = bd_work->Teach_table, властивість компоненту QRBand2 встановлюю BandType = rbDetail. Результат створеної форми показано в додатку 2 рис.5.

7. Вікно «ZVIT_klienti»:

Додаю на форму ZVIT_klienti QuickRep1

На QuickRep1 розміщую QRBand1(QRLabel1 – в властивостях встановлюю Caption = «Код клієнта»; QRLabel2 – в властивостях встановлюю Caption = «Прізвище та ім’я»; QRLabel3 – в властивостях встановлюю Caption = «Дата вступу»; QRLabel4 – в властивостях встановлюю Caption = «Термін навчання»; QRLabel5 – в властивостях встановлюю Caption = «Код вчителя»; QRLabel6 – в властивостях встановлюю Caption = «Категорія»), QRBand2(QRDBText1 – в властивостях встановлюю DataSet = bd_work->Klient_table, DataField = «Код клієнта»; QRDBText2 – в властивостях встановлюю DataSet = bd_work->Klient_table, DataField = «Прізвище та ім’я» ; QRDBText3 – в властивостях встановлюю DataSet = bd_work->Klient_table, DataField = «Дата вступу» ; QRDBText4 – в властивостях встановлюю DataSet = bd_work->Klient_table, DataField = «Термін навчання»; QRDBText5 – в властивостях встановлюю DataSet = bd_work->Klient_table, DataField = «Код вчителя»; QRDBText6 – в властивостях встановлюю DataSet = bd_work->Klient_table, DataField = «Категорія»;), QRLabel7 – в властивостях встановлюю Caption = «Клієнти». Властивість компоненту QuickRep1 встановлюю DataSet = bd_work->Klient_table, властивість компоненту QRBand2 встановлюю BandType = rbDetail. Результат створеної форми показано в додатку 2 рис.5.

8. Вікно «Про нас» :

Додаю на форму Me Panel1.

На Panel1 розміщую Label1 – в властивостях Caption = «http://radiotex.org.ua/»; Label2 – в властивостях Caption = «© 2015 made by Gylionenko V. D.». Результат створеної форми показано в додатку 2 рис.6.

9. Вікно «Довідка» :

Додаю на форму Help Panel1.

Ha Panel1 розміщую Label1 – в властивостях встановлюю Caption = «Autoscool (version: 1.0)»; Label2 – в властивостях встановлюю Caption = «Програма призначена для:»; Label3 – в властивостях встановлюю Caption = «зберігання;»; Label4 – в властивостях встановлюю Caption = «редагування;»; Label5 – в властивостях встановлюю Caption = «видалення даних;»; Label6 – в властивостях встановлюю Caption = «фільтрація та пошук даних»; Результат створеної форми показано в додатку 2 рис.7.