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

Коли ви працюєте з|із| Qt Designer, вам потрібно мати чітке уявлення про те, як виглядатиме ваша майбутня програма. На мал. 8 показаний зовнішній вигляд програми SigCreate по закінченню розробки. Віджети розташовані|схильні| у вікні так, щоб допомогти користувачу ввести|запровадити| інформацію в потрібні поля введення. При розробці програми спробуйте поглянути на інтерфейс очима користувача. Робіть|чиніть| все так, щоб використання програми не представляло|уявляло| складнощів.

Мал. 8. Графічний інтерфейс нашого додатка

Наша програма створюватиме підпис для електронних листів і відображати|відображувати| її на екрані. Користувачу потрібне буде своє ім'я, e-mail і вибрати один з трьох коментарів. При натисненні кнопки Create! створений підпис повинен показуватися в елементі управління MultiLineEdit. Вийти з програми можна, натиснувши|натискуючи| кнопку Cancel (Мал. 8).

У правій частині|частці| вікна Qt Designer знаходиться|перебуває| редактор властивостей, в якому показані різні параметри створеної вами форми. Перший рядок показує ім'я форми: Form1. Клацніть|лусніть| по полю введення і змініть|поміняйте| це ім'я на SigCreateDlg. Це задає ім'я класу діалогу, тому потрібно ввести|запровадити| осмислене ім'я.

Тепер ви знаєте, як змінюються властивості виджетов|: потрібно клацнути|луснути| на імені властивості і в полі введення праворуч від імені змінити|поміняти| значення. Змініть|поміняйте| властивість Caption на "SigCreateDlg v 0.1"

Мал. 9. Вікно редактора властивостей

5.5. Додавання|добавка| виджетов|

Спершу|для початку| ми вставимо текст у верхній частині|частці| вікна нашої програми, як на мал. 4. Цей текст пояснює користувачу, як працювати з|із| програмою. Такий тип виджета| називається Label. Щоб додати|добавити| його на форму, виконайте|проробіть| наступне|слідуюче|:

У панелі ToolBox виберіть Common Widgets => TextLabel або виберіть пункт меню Tools => Display => TextLabel;

Курсор над формою придбає|набуде| форму хрестика. Точно так, як і ви б робили|чинили| це в програмі для малювання, намалюйте на формі прямокутник. Буде створений виджет| Label з|із| деяким текстом всередині|усередині|;

Щоб змінити|поміняти| цей текст, двічі клацніть|лусніть| на виджете| і замість "TextLabel1" введіть|запровадьте| "This program will create an email signature for you. Just fill in the boxes and hit the Create! button". Потім, щоб включити вирівнювання тексту по центру, натисніть|натискуйте| кнопку Align Center (заздалегідь виділивши весь текст - прим. пер.). До речі, заразом|одностайно| можна виділити слово Create! жирним шрифтом. Для цього натисніть|натискуйте| кнопку з|із| буквою|літерою| "B" (Мал. 10).

Мал. 10 Вікно редактора тексту

Нарешті|урешті|, змініть|поміняйте| розмір виджета|, перетягуючи маленькі квадратики по його краях. Розташуйте виджет| точно в центрі, перетягуючи його мишею. Ці операції — всього лише тимчасові заходи, пізніше ми навчимося елегантнішому способу розташування виджетов|.

Мал. 11 Зовнішний вигляд вікна про додаток

Так само можна додати|добавити| будь-який виджет|, підтримуваний в Qt Designer: виберіть його в панелі виджетов|, "намалюйте" його на формі і, нарешті|урешті|, змініть|поміняйте| його властивості і розміри.

У Qt Designer є цікава концепція: одні виджеты| можуть містити|утримувати| в собі інші. Зараз ми використовуємо це, щоб створити поля введення усередині рамки. На мал. 8 ви бачите, що декілька виджетов| знаходяться|перебувають| усередині рамки. Цей виджет| називається Group Box. Спочатку ми створимо рамку, вибравши в панелі виджетов| Containers => Group Box або меню Tools->Containers->GroupBox. Створіть рамку прямо під тільки що створеним написом|надписом|. Змініть|поміняйте| заголовок рамки, вибравши параметр title в редакторі властивостей. Введіть|запровадьте| як значення цього параметра "Details". Зверніть увагу на знак "+" зліва від параметра title. Це означає, що у|в,біля| цього параметра є ще додаткові властивості, які теж|також| можна змінити|поміняти|.

Коли ви створите рамку (тобто виджет| GroupBox), помістите усередині неї три виджета| Label. У вікні Object Explorer (меню Window => Views => Object Explorer) ви відмітите|помітите|, що написи|надписи| стали дочірніми об'єктами рамки (див. нижче на мал. 12).

Змініть|поміняйте| текст в написах|надписах|, двічі клацнувши|луснувши| по ним.

Мал. 12. Вкористання рамки Group Box/

Тепер створимо поля введення тексту. У них користувач вводитиме|запроваджуватиме| своє ім'я і адресу. Ми використовуємо простий тип поля введення: виджет| QLineEdit. Він дозволяє користувачу ввести|запровадити| тільки|лише| один рядок тексту. Додайте|добавте| два таких виджета|: для введення імені користувача і його адреси. Виберіть пункт меню Tools => Input => LineEdit і розташуєте виджет| поряд з|поряд із| написом|надписом| 'Your name:'. Аналогічно створіть поле введення адреси.

Користувач повинен буде вибрати коментар з|із| випадного списку (виджет| ComboBox) з|із| трьома пунктами. Клацніть|лусніть| на значку ComboBox або виберіть пункт меню Tools => Input => ComboBox. Помістіть випадний список поряд з|поряд із| написом|надписом| Comment. Двічі клацніть|лусніть| на ньому, щоб викликати|спричинити| діалог, в якому ви можете додавати|добавляти| пункти списку. Натисніть|натискуйте| кнопку 'New Item' і введіть|запровадьте| який-небудь|будь-який| дотепний вислів|висловлювання| в поле введення справа. Так само створіть ще два пункти списку і натисніть|натискуйте| кнопку OK.

Якщо потрібно, змініть|поміняйте| розмір виджетов|, щоб вони були акуратно розташовані|схильні|.

До цього моменту ми не звертали увагу на імена тих, що додаються|добавляються| виджетов|. Щоб ми могли згодом звертатися|обертатися| до виджетам| з|із| коду, потрібно вказати їх ім'я. Написи|надписи| (label) не проводять|виробляють,справляють| ніяких|жодних| дій, тому давати їм ім'я необов'язково. А ось|от| іншим виджетам|, наприклад, полям введення, ми зараз привласнимо ім'я, оскільки нам потрібно буде прочитувати введений|запроваджений| в них текст. Не забудьте, що імена повинні бути осмисленими. Змінити|поміняти| ім'я виджета| можна, вибравши властивість name, першу в списку редактора властивостей. Верхнє поле введення тексту ми назвемо|накликатимемо| nameBox, а то, яке під ним — mailBox. Випадному списку привласніть ім'я commBox.

Нарешті|урешті|, ми створимо напис|надпис| 'Generated Signature', під нею — виджет| TextEdit (Tools => Input => TextEdit) з|із| ім'ям sigBox, куди виводитиметься створений програмою підпис, і два виджета| PushButton (кнопки 'Create!' і 'Cancel'). Розташуйте їх внизу форми. Привласнювати їм імена необов'язково, але|та| якщо хочте, зробіть це.

Збережіть форму. Тепер ви можете побачити, як вона виглядатиме при запуску програми, вибравши пункт меню Preview => Preview Form.

Мал. 13: Вид форми перед створенням|створінням| макету