Ultimate ++: використання компоновок

Відео: Overwatch: All 21 Ultimate Abilties

Розміщувати віджети, задаючи їх координати вручну, вкрай незручно. Для полегшення цього процесу в ThelDE є візуальний редактор компоновок (Layout Editor). Компонування віджетів описуються файлами з розширенням lay. Вони являють собою автоматично генерується код на С ++, що використовує численні спеціальні макроси і включається прямо в код програми директивами #include. Створимо файл компонування для програми. Для цього клацнемо правою кнопкою миші на списку файлів нашого пакета, виберемо Insert package directory file (s) і введемо ім`я нового файлу: demol.lay. Файл компонування відразу ж відкривається в візуальному редакторі, який тепер займає місце редактора коду. В режимі візуального редактора зліва знаходиться редактор властивостей віджетів, а праворуч - поле для їх розміщення (поки і те, і інше порожньо). Викличемо контекстне меню у верхньому вікні колонки властивостей, виберемо Add new layout і введемо ім`я, наприклад main (див. Рис. Нижче). В одному lay-файлі може перебувати безліч компоновок з різними іменами, але нам знадобиться тільки одна для головного вікна.

Тепер в області редагування з`явилося сіре поле форми. Клацнувши по ньому правою кнопкою миші, можна вибрати віджет з контекстного меню і помістити його на форму. Потрібно зауважити, що далеко не всі віджети U ++ доступні з цього меню, однак можна вставити будь-який (навіть створений користувачем) віджет за допомогою опції User Class. Віджети можна перетягувати і міняти їх розміри. Кожен віджет має чотири «якоря», що тягнуться до сторін екрану. Ті з них, які відображаються суцільними лініями означають, що відстань від краю елемента до відповідного краю форми фіксоване (віджет «прив`язаний» до краю), а ті, які відображаються пунктиром, означають, що воно може змінюватися. Скажімо, якщо кнопка «прив`язана» і зліва, і справа, то вона буде розтягуватися при зміні розмірів вікна. Цей механізм використовує «під капотом» вже знайомі нам методи вказівки логічних координат, однак їх тепер не потрібно прописувати вручну. Редаговані властивості віджетів включають їх назва (ім`я змінної), напис (або значення для полів вводу), шрифт і вирівнювання тексту.


Створимо компоновку програми так, щоб вийшло щось схоже на рис. вище.

Важливо, щоб імена віджетів збігалися з тими, що вже є в програмі. Макроси в lay-файлі самі відповідають за створення віджетів і їх розміщення, так що робити це вручну більше не потрібно. Приберемо з класу MyWindow визначення всіх змінних віджетів (рядки, починаючи з EditDouble vall, val2-), а з конструктора класу приберемо всі рядки Add (..).

Тепер потрібно використовувати в програмі створену компоновку. Це вимагає трьох простих кроків. Перед визначенням класу вставляємо рядки:

Перший рядок містить lay-файл, а друга завантажує необхідний бібліотечний файл для роботи з компонування.




Наступним кроком міняємо предка нашого класу MyWindow c TopWindow на Withmain. Шаблонний клас Withmain створений автоматично і визначено в lay-файлі. Саме в ньому і оголошені тепер всі наші віджети. Його ім`я складається з слова With і імені нашої компонування - main. Якщо компоновок кілька, то для кожної буде створено свій клас. Якщо ми вирішимо, що повинні наслідувати не клас TopWindow, а якийсь інший, то потрібно поміняти тільки параметр шаблонного класу, не зачіпаючи сам файл компоновок.

Нарешті, останній крок - розмістити створені в lay-файлі віджети в вікні. Для цього в початок конструктора вставляється наступний рядок:

CtrlLayout (* this) -

---

Усе! Тепер програму можна скомпілювати і переконатися, що вона працює аналогічно попередньому варіанту. Зауважте, що логіка програми повністю відокремлена від візуального дизайну - можна як завгодно змінювати компоновку, використовувати lay-файли або розміщувати віджети вручну - на логіці це ніяк не відбивається. Повний текст програми виглядає тепер так:

#include

using namespace Upp;
#define LAYOUTFILE
#include
class MyWindow: public Withmain

{
public:
typedef MyWindow CLASSNAME;
MyWindow () {
CtrlLayout (* this);
Title ( "Hello world!") .MinimizeBox (). MaximizeBox () .Sizeable (). SetRect (0, 0, 300, 230);
// Заповнюємо список операцій
operation.Add ( "+") .Add ( ";"). Add ( "*") .Add ( "/") .SetIndex (0) - // Реагуємо на натискання кнопки compute lt; lt; = THISBACK (on _ click) - // Реагуємо на вибір операції operation lt; lt; = THISBACK (on _ click);
}
void on _ click () {
// Як в попередньому варіанті
}
};
GUI _APP_ MAIN {MyWindow w- w.Run ();
}
Домогтися такого лаконізму в інших наборах інструментів практично неможливо.