« Назад

Мета: Навчитися створення форм і елементів управління

Хід роботи

Створення нового GUI-проекту: name

Виберіть команду Project/New меню задач. Потім заповніть діалогове вікно Project Settings так, як показано на рис. 1. Натисніть кнопку Create, і перед вами з’явиться вікно дерева проекту (рис. 2).

Компіляція і запуск програми

Для того щоб скомпілювати програму, виберіть команду Build / Build меню завдань, як показано на рис. 3. Для запуску програми виберіть команду Build / Execute, і на екрані з'явиться вікно, зображене на рис. 4. Все, що від вас вимагається для того, щоб вийти з програми, - натиснути кнопку у вигляді хрестика, яка знаходиться у верхньому правому кутку вікна або виберіть пункт File / Exit меню програми.

Рис. 1. Налагодження проекту

Рис. 2. Дерево проекту

Рис. 3. Компановка проекту

Рис. 4. Пустий додаток

Форми

Форма — це вікно, на якому можна розмістити такі компоненти, як кнопки, що запускають дії, поля редагування, які можна використовувати для введення тексту, і полотна, на яких можна малювати.

Створення форми: folder/name

Для того щоб створити форму виберіть команду меню File/New in New Package (рис. 5). Виділіть пункт Form на левій панелі діалогового вікна Create Project Item і заповніть його так, як показано на рис. 6. Нова форма називається query.

Рис. 5. Додавання нової сутності до дерева проекту

Рис. 6. Створення нової форми

Так як ви вибрали пункт New in New Package, Visual Prolog створить форму в пакеті з такою ж назвою. Після натискання на кнопку Create діалогового вікна Create Project Item, IDE покаже вам прототип нової форми (рис. 7). Ви можете змінити розміри вікна, зробивши його більшим за прототип. Для цього потрібно клацнути мишкою і, утримуючи нижній правий куточок, тягнути за нього так же, як ви це робите, коли змінюєте розміри звичайного вікна.

Рис. 7. Зміна розмірів форми

Включення пункту меню: File/New

Коли ви запускали пустий додаток, то помітили, що пункт меню File/New відключений. Для того щоб включить його, натисніть на елемент TaskMenu.mnu дерева проекту (рис. 8). Потім розгорніть дерево, яке з’явиться в нижній частині діалогового вікна TaskMenu, і приберіть галочку з поля Disabled, відповідного пункту меню &New/tF7, як показано на рис. 9.

Рис. 8. Дерево проекту / меню задач

Рис. 9. Включення елемента меню задач

Додавання коду до елементу дерева проекту. Експерт коду

Для того щоб додати код до елементу File/New виділіть елемент TaskWindow.win дерева проекту правою кнопкою миші, і перед вами відкриється контекстне меню. Виберіть пункт Code Expert (рис 10).

 

Рис. 10. Перехід в Code Expert

Рис. 11. Dialog and Window Expert

Слідуючи рис. 11, натисніть на елемент, показаний нижче:

Натисніть кнопку Add (орієнтуючись на рис. 11) або двічі клацніть в області id_file_new -> onFileNew.

В результаті відкриється текстовий редактор, який містить наступний фрагмент коду:

clauses

onFileNew(_Source, _MenuTag).

Скомпілюйте програму, а потім змініть цей фрагмент так:

clauses

onFileNew(W, _MenuTag) :- X = query::new(W), X:show().

Знову скомпілюйте програму, вибравши команду Build/Build. Запустивши програму, ви побачите, що коли ви вибираєте пункт меню File/New, створюється нова форма.

Рис. 12. Нова форма

Приклад 1. Створення GUI–проекту для обчисдення факторіалу

Головне меню

Меню, показане на рис. 4, є головним меню інтегрованого середовища

розробки VIP IDE. Позначення A/B вказує на один із його пунктів.

Наприклад, використайте пункт меню Project/New, для того щоб створити новий проект. В результаті відкриється діалогове вікно Project Settings, в якому є шість вкладинок: General, Directories, Build Options, Version Information, File Templates и Run Options. У більшості випадків потрібно заповнити тільки вкладку General:

Коли в тексті буде написано:

Створіть новий GUI-проект: factorial

вам потрібно ввійти в діалогове вікно Project Settings (вибравши команду меню Project/New середовища розробки) і заповнити вкладинку General так, як описано вище (робіть це MU-TATIS MUTANDIS1, так як на вашому комп’ютері може не бути вільного місця на диску C, або ви захочете помістити свою програму в іншу директорію, ніж C:\vispro).

Дерево проекту

Найпростіший спосіб навігації по файлам і ресурсам — вибрати відповідний елемент дерева проекту:

Якщо клацнути по папці лівою кнопкою миші, вона розкриється, і з'явиться її зміст. А якщо клацнути по елементу дерева проекту правою кнопкою миші, то відкриється спливаюче меню, як показано вище на малюнку. Якщо потрібно увійти в експерт коду і додати фрагмент коду до TaskWindow.win, то це можна зробити наступним чином:

За допомогою експерта коду додайте код до TaskWindow/TaskWindow.win

Для того щоб це виконати, зверніться до дерева проекту і зробіть наступне:

- відкрийте папку TaskWindow, якщо вона була закрита.

- правою кнопкою миші клацніть по елементу TaskWindow.win дерева проекту, щоб розгорнулось спливаюче меню виду:

Edit

Attribute

Delete

Code Expert

File Properties…

- у ньому виберіть пункт Code Expert.

Експерт коду

Експерт коду також має форму дерева.

У відповідності зі своєю назвою, експерт коду використовується для вставки коду або фрагментів коду у велику кількість файлів проекту. Для того щоб увійти в нього, натисніть правою кнопкою миші на елемент дерева проекту, до якого ви хочете додати код, а потім виберіть пункт Code Expert контекстного меню.

Для форм існує більш короткий шлях в експерт коду. Якщо ви клацнете лівою кнопкою миші по елементу .frm в дереві проекту, з’явиться прототип форми, разом з вікном Properties і двома панелями компонент, одна з яких використовується для створення елементів управління, а друга — для схеми оформлення. Якщо ви відкриєте вкладинку Events окна Properties, то побачите список подій.

На формах присутні такі компоненти , як кнопки і поля редагування . У верхній частині діалогового вікна Properties розташований список, що розкривається для вибору цих компонентів. Якщо ви виберете один з цих компонентів і перейдете на вкладку Events, то отримаєте список подій, відповідних цьому компоненту.

Для того щоб пройти через дерево експерта коду і досягти місця, в яке ви хочете вставити код, клацайте лівою кнопкою миші по відповідним гілкам дерева. Якщо ви хочете, щоб експерт коду додав прототип для листка дерева, клацніть по ньому і натисніть кнопку Add, яка з'явиться в нижній частині діалогового вікна. Потім знову клацніть на листок, щоб дістатися до коду.

Якщо необхідно: за допомогою експерта коду додати фрагмент коду (рис. 7).

clauses

onFileNew(W, _MenuTag) :- S= query::new(W), S:show(W).

Для TaskWindow.win/Code Expert/Menu/TaskMenu/id_file/id_file_new, потрібно виконати наступні кроки:

- Дерево проекту. Відкрийте папку TaskWindow дерева проекту, клацніть правою кнопкою миші по TaskWindow.win, щоб відкрити контекстне меню, і виберіть пункт Code Expert (рис. 10).

- Експерт коду. Виберіть Menu → TaskMenu → id_file → id_file_new і натисніть кнопку Add для створення прототипу коду. Двічі клацніть в області id_file_new→onFileNew. Орієнтуйтеся по рис. 10, 11. Додайте вказаний вище код у файл TaskWindow.pro.

Створення елемента проекту

Для додавання нового елемента в дерево проекту виберіть пункт File/New in New Package меню середовища, якщо ви хочете помістити елемент всередині пакету, який буде мати таку ж назву. У випадку, якщо ви хочете помістити елемент в існуючий пакет, використовуйте пункт меню File/New in Existing Package.

Уважно слідкуйте за тим, щоб новий елемент або новий пакет потрапили в потрібну папку. У наведеному нижче прикладі пакет, що містить форму query, створюється в корні проекту factorial. Завжди вибирайте імена, які щось означають. Наприклад, якби пакет містив елементи комп'ютерної графіки, ви могли б назвати його can-vasFolder. Якби він містив форми для запитів, хорошим ім'ям було б formCon-tainer, і так далі. У нашому прикладі:

- Створіть новий пакет в корні дерева проекту factorial (рис. 13). Нехай імя пакету буде formcontainer.

Рис. 13. Створення нового пакету

- Створіть нову форму (query) внутрі пакету formcontainer. Для цього виділіть папку, відповідну цьому пакету в дереві проекту, і виберіть пункт File/New in Existing Package меню задач. Для того щоб при виборі File/New in Existing Package вікно помістилося в цей пакет, ви повинні упевнитися, що папка пакету вже виділена.

Коли ви створюєте форму, IDE показує вікно Form Window (рис. 14). Ви можете змінити розміри вікна і додати поле редагування (edit_ctl) і кнопку (factorial_ctl), як показано на рис. 14. Ви також можете дістатися до діалогового вікна Form Window, двічі клацнувши лівою кнопкою миші по імені форми в дереві проекту.

Рис. 14. Форма з полем редагування

Якщо ви двічі клацнете по елементу ProjectTree/TaskMenu.mnu, то отримаєте діалогове вікно, яке було показано на рис. 9. Ви можете розгорнути дерево цієї специфікації меню, клацаючи по його гілкам, як говорилося раніше. Вам також може знадобитися включити який-небудь пункт меню. Можна також створити новий пункт меню, як показано нижче на малюнку, де було натиснуто на кнопку (піктограму) під назвою New Item і створено елемент Drawing Tools, заповнивши поле, що з’явилося. Як видно з рисунку, новий пункт меню створюється спочатку включеним. Символ & в записі &File означає, що клавіша F є акселератором. Давайте створимо новий проект з нуля, щоб подивитися, чи здатні ми це зробити при меншій кількості ілюстрацій і перевірити, чи вийшов у нас короткий опис Visual Prolog- проекту:

- Створіть новий GUI проект: factorial

- Додайте новий пакет до дерева проекту: factorial/formcontainer.

- Створіть нову форму: forms/query. Додайте в неї поле редагування (з назвою edit_ctl) і кнопку (з назвою factorial_ctl), як показано на рис. 14.

- Включіть пункт меню TaskMenu File/New.

потім додайте наступний код:

clauses

onFileNew(W, _MenuTag) :- S= query::new(W), S:show().

Для TaskWindow.win/Menu/TaskMenu/id_file→id_file_new→onFileNew.

- Побудуйте додаток, для того щоб вставити в проект нові класи.

Сотворення нового класу: folder/name

Для того щоб створити новий клас і помістити його в пакет formcontainer, виділіть папку formcontainer в дереві проекту і виберіть пункт File/New in Existing Package меню середовища. Потім виберіть елемент Class в діалоговому вікні Create Project Item і введіть fn у якості імені класу в полі Name. Переконайтесь, що галочка в полі Create Objects прибрана. Коли ви натиснете кнопку Create, Visual Prolog покаже файли fn.pro і fn.cl, які містять прототип класу fn. Наша задача — додати функціональності до цих файлів, замінивши їх вміст кодом. Потім побудуйте додаток ще раз, щоб переконатися, що Visual Prolog додав в проект клас fn.

Вміст поля редагування

Visual Prolog - порівняно з іншими мовами пропонує найлегший доступ до елементів управління. Для полегшення цього процесу IDE зберігає ідентифікатор поля редагування у факті-змінної. Для того щоб переконатися, наскільки це зручно, відкрийте форму query.frm, натиснувши на цей елемент дерева проекту:

У діалоговому вікні Properties виберіть зі списку елемент button:factorial_ctl, відкрийте вкладинку Event, клацніть по елементу ClickResponder списка подій і додайте до коду для кнопки factorial_ctl наступний фрагмент:

Побудуйте і запустіть додаток.

Код програми для обчислення факторіалу

Рис.15. Результат обчислення факторіалу

Контрольні питання

1. Яким чином створюється новий GUI - проект?

2. Що називається формою?

3. Як створити нову форму?

4. Яким чином можна включити пункт меню File / New?

5. Для чого потрібен Code Expert?

6. Як додати код елемента до дерева проекту?