Міністерство освіти і науки україни Національний університет “Львівська політехніка”

ВІЗУАЛЬНЕ ПРОЕКТУВАННЯ ЗАСТОСУВАНЬ В MS Visual C++ 2010

Інструкція

до лабораторної роботи № 2 з курсу

“Основи програмування”

для базового напрямку “Програмна інженерія”

Затверджено

На засіданні кафедри

програмного забезпечення

Протокол № від

ЛЬВІВ – 2011

1. Мета роботи

Мета роботи – ознайомитися з основними принципами та прийомами візуального проектування інтерфейсу користувача в інтегрованому середовищі Microsoft Visual C++ 2010.

2. Теоретичні відомості

Інтегроване середовище програмування Microsoft Visual C++ 2010 (MS VC++) призначене для розробки прикладних програм (застосувань) Windows різного типу. Переважна більшість таких застосувань має розвинутий графічний інтерфейс користувача, який складатєься з вікон, візуальних елементів керування, меню, тощо. Однією з основних переваг сучасних середовищ програмування, таких як MS VC++, є можливість легко і швидко розробляти графічний інтерфейс користувача за допомогою так званих візуальних конструкторів. Розглянемо детальніше основи роботи з таким візуальним конструктором в MS VC++.

Після запуску MS VC++ на стартовій сторінці вибиремо команду створення нового проекту (New Project). У випадку, якщо середовище налаштоване таким чином, що стартова сторінка не з’являється після запуску, цю ж дію можна також виконати через команду головного меню File->New->Project або через відповідну кнопку на панелі інструментів. У діалогову вікні для створення нового проекту (див. рис.1) послідовно виконати дії в зазначеному порядку.

Рис.1. Створення Windows-застосування на основі шаблону Windows Forms Application

Після виконання цих дій робоча область головного вікна середовища MS VC++ буде мати вигляд, зображений на рис.2. З цього рисунку видно, що середовище MS VC++ автоматично додало в наш проект цілий набір файлів (див. вікно Solution Explorer робочої області) і відразу відкрило вікно візуального конструктора, в якому знаходиться об’єкт, який називається форма. Форма – це центральний елемент візуального програмування. Вона може являти собою головне вікно програми, підлегле вікно, діалогове вікно тощо. На ній розміщуються різноманітні візуальні елементи керування (типовими і найбільш поширеними серед них є текстове поле вводу та командна кнопка), які називають також візуальними компонентами. Існують також і невізуальні компоненти, наприклад, таймери, і компоненти зв’язку з базами даних.

Рис.2. Робоча область після створення застосування типу Windows Forms Application

За замовчуванням нова форма є порожньою. Для розміщення візуальних елементів керування на формі використовується панель інструментів Toolbox, яка може перебувати в одному з двох станів відображення: згорнутому у вигляді кнопки (як показано на рис.2) та у вигляді прикріпленого вікна.

Рис.3. Панель інструментів Toolbox

Для відображення панелі інструментів Toolbox , яка знаходиться в згорнутому стані достатньо навести курсор миші на кнопку, яка її представляє (вона знаходиться в крайній правій полосі і має заголовок Toolbox написаний вертикально). Сама панель інструментів Toolbox має вигляд зображений на рис.3. Як тільки курсор миші вийде за межі панелі інструментів, вона автоматично згорнеться назад до вигляду кнопки. Такий режим відображення панелі інструментів Toolbox корисний у випадку якщо ми хочемо зекономити місце на екрані. Для того щоб задати режим відображення панелі інструментів Toolbox у вигляді прикріпленого вікна, потрібно клікнути на кнопці прикріплення (див. рис.3). У цьому випадку панель Toolbox буде постійно відображатися на екрані. Самі візуальні елементи керування, які нам потрібно буде розмістити на нашій формі знаходяться або в групі All Windows Forms (всі елементи керування) або в групі Common Controls, вміст яких можна відобразити шляхом кліку мишкою на кнопочці з символом + перед назвою групи (див. рис. 4).

Рис.4. Панель інструментів Toolbox з конкретними елементами керування

Саме розміщення візуальних компонент на формі здійснюється методом перетягування. Для цього потрібно спочатку знайти і вибрати (кліком лівої кнопки миші) потрібну компоненту на панелі інструментів Toolbox, а потім мишкою вказати на формі місцерозташування цієї компоненти. Під час цього процесу часто виникає необхідність у зміні розмірів елементів керування на формі. Для цього можна використати, так звані, анкерні точки, які мають вигляд квадратиків на контурі візуальної компоненти. Коли курсор миші попадає на ці анкерні точки і він набуде вигляду двонаправленої стрілки (вліво-вправо) слід натиснути ліву копку миші, і не відпускаючи її переміщати мишу в потрібному напрямку до тих пір поки візуальна компонента не набуде необхідного розміру. Для переміщення візуальної компоненти в інше місце на формі слід навести на неї курсор миші (форма курсору зміниться на хрестик з двох двонаправлених стрілок), клікнути лівою кнопкою миші і утримуючи її перемістити мишу в потрібному напрямку.

Виконаємо послідовно описані вище дії для розміщення елементів керування типу Button (командна кнопка), Label (мітка) та TextBox (текстове поле вводу) на нашій формі, так, щоб вона набула вигляду зображеному на рис.5.

Рис.5. Форма з розміщеними на ній візуальними компонентами

Наступним кроком в процесі візуального проектування графічного інтерфейсу користувача є надання значень необхідним властивостям візуальних компонент. Кожна візуальна компонента являє собою програмний об’єкт, який створюється автоматично середовищем під час його розміщення на формі. Кожний такий об’єкт характеризується станом та поведінкою. Стан об’єкту визначається набором властивостей (property), які описують різні аспекти відображення та зовнішнього вигляду об’єкту. Наприклад, текст який відображається на кнопці задається властивістю під іменем Text, ширина кнопки (у пікселя) – властивістю Width, а її висота – властивістю Height. Список всіх можливих властивостей конкретного об’єкту та їх значень відображається у вікні Properties. Це вікно можна відобразити за допомогою команди головного меню View->Other Windows->Properties Windows або за допомогою кнопки з стандартної панелі інструментів. Вікно Properties , аналогічно вікну Toolbox, також може відображатися або в згорнутому вигляді, або у вигляді прикріп­ле­ного вікна. Конкретний вміст вікна Properties залежить від того який елемент керування на формі перебуває в активному стані (вибраний користувачем). Так, наприклад, на рис.6 наведено вміст цього вікна для елементу керування типу Button. Як видно з цього рисунку, вікно Properties містить перелік всіх властивостей вибраного елементу керування, які згруповані за функціональною ознакою. Інформація про властивості відображається у двох колонках: ліва колонка містить ім’я властивості, права- значення цієї властивості. Щоб змінити існуюче значення властивості (або задати нове значення) слід клікнути мишею у відповідному рядку, і у правій колонці ввести (вибрати) потрібне значення.

Кожна візуальна компонента має декілька десятків властивостей. Деякі з них є спільними (однаковими) для всіх компонент, деякі – суто індивідуальними. Для нашої програми задамо значення властивостей так як показано у табл.1. Результатом цього має бути форма, остаточний зовнішній вигляд якої зображено на рис.7.

Таблиця 1. Значення деяких властивостей елементів керування

Компонента	Властивість	Призначення	Значення
Button	Text	Задає текст напису на кнопці	Click on me
Button	FontBold	Задає параметр форматування “жирність шрифту” тексту	True
Label	Text	Задає текст мітки	Enter your name
Label	FontBold	Задає “жирність шрифту”	True
Form	Text	Задає текст, що виводиться в заголовку	Hello Application

Рис.6. Вікно Properties для кнопки

Рис.7. Остаточний вигляд форми

Таким чином, процес візуального проектування графічного інтерфейсу користувача полягає у визначенні, які візуальні елементи керування необхідні для реалізації поставленої задачі, їх розміщенні на формі та заданні значень необхідних властивостей. Цей процес називається проектуванням тому, що ми в дійсності не написали жодного рядка програмного коду, увесь необхідний програмний код генерувався автоматично самим середовищем. Однак цього коду недостатньо для того, щоб наша програма виконувала хоч якісь дії. Якщо її зараз запустити на виконаня (команда головного меню Debug->Start Debugging), то можна побачити, що навіть клік по кнопці не приводить до жодних дії і не викликає жодної реакції. Можна сказати, що наша програма є “мертвою”. Щоб її “оживити” нам потрібно написати деякий додатковий програмний код, який власне і буде реалізовувати функціональність програми.

Найчастіше такий програмний код поміщається в так звані функції обробки подій елементів керування. Як Ви вже знаєте, візуальні компоненти, такі як об’єкти, характери­зуються станом і поведінкою. Як правило, поведінка описує реакцію візуальної компоненти на певні дії користувача. Наприклад, користувач може клікнути по командній кнопці на формі, що має викликати певну реакцію кнопки, яка відповідає алгоритму програми. Причому, програмний код цього алгоритму повинен виконуватися лише після настання цієї події (клік по кнопці). Для цього цей програмний код прив’язується до елементу керування типу Button у вигляді функції обробки події Click. Оскільки функції обробки подій тісно пов’язані з формою на якій розміщені візуальні компоненти, то їх програмний код поміщається в спеціальний файл, який називається модуль форми. Цей файл в середовищі MS VC++ створюється автоматично під час додавання нової форми в проект і він має назву Form1.h, де Form1 – це ім’я самої форми (в нашому випадку). Щоб переглянути вміст цього файлу потрібно клікнути правою кнопкою миші на формі у вікні візуального конструктора і в контекстно-залежному меню, що з’явиться, вибрати команду View Code, як показано на рис. 8.

Рис.8. Відкриття модуля форми, який містить програмний код

Після цього відкриється вікно редактора програмного коду, в якому можна переглянути і відредагувати програмний код форми (див. рис.9). Зверніть увагу, що в модулі форми вже є досить багато рядків програмного коду, які були автоматично згенеровані самим середовищем MS VC++ під час візуального проектування форми. Але в цьому коді Ви не знайдете функції обробки події Click нашої командної кнопки. Її потрібно створити самостійно. Для цього слід повернутися у вікно візуального редактора (через ярличок Form1.h [Design] і двічі клікнути лівою кнопкою миші по командній кнопці.

Рис.9. Вікно редактора програмного коду модуля форми

Середовище MS VC++ створить заготовку функції-обробника події Click в модулі форми і автоматично відкриє вікно редактора програмного коду в тому місці, де розташована ця функція, як показано на рис.10. Ця функція містить лише заголовок, який складається з імені функції button1_Click та списку формальних параметрів (те що знаходиться в круглих дужках після імені функції), але її тіло є порожнім (пустий рядок між парою фігурних дужок {}). Саме тут слід вписати програмний код, який буде визначати, які дії має виконати наша програм після того, як користувач клікне мишою по кнопці. В нашому випадку ми хочемо просто вивести привітання користувачу у спеціальному діалоговому вікні MessageBox. Для цього слід набрати такий програмний код в тілі функції обробки події button1_Click:

MessageBox::Show("Hello "+this->textBox1->Text+" !",

"My first Windows Forms Applications",

MessageBoxButtons::OK, MessageBoxIcon::Asterisk);

Результат має бути таким, як показано на рис.11. Після цього можна запустити програму на виконанння. У вікні програми, яке з’явиться на екрані слід ввести своє ім’я в текстовому полі вводу і натиснути на кнопку з написом Click on me (див рис.12). В результаті має з’явитися діалогове вікно з привітанням, як показано на рис. 13.

Рис.10. Заготовка функції-обробника події Click командної кнопки

Рис.11. Програмний код функції-обробника події Click командної кнопки

Рис. 12. Вікно програми в роботі

Рис. 13. Результат виконання програми