Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Лекція №5. Візуальне проектування компонентів
У цій лекції ви ознайомитеся з програмою для візуального проектування користувача інтерфейсу the jucer і навчитеся створювати власні компоненти на основі стандартних.
Мета лекції: Навчитися створювати власні компоненти з використанням технології візуального проектування
Задавати розміри і положення дочірніх віджетів щодо батьківського компонента - заняття не з легких. Для полегшення цього завдання в Juce включений спеціальний інструмент, вже згадувана раніше програма the jucer, призначена для візуального проектування створюваного компоненту і включених до нього дочірніх віджетів з наступною генерацією C + + коду. Тим самим, бібліотека Juce включає зручний інструмент швидкої розробки додатків (rapid application development, RAD).
Вихідні тексти the jucer знаходяться в папці juce / extras / the jucer. Перейдіть в підпапку build і зберіть цю програму для вашої платформи. Робота з the jucer однакова для версій Juce 1.53 і 2.0.
Запустіть the jucer і виберіть у меню File> New Component.
З'явиться віджет з вкладками, що відображає інформацію про створюваний компонент (за замовчуванням ім'я нового компонента NewJucerComponent; зрозуміло, варто дати йому більш осмислену назву, що відображає його функцію в програмі). На вкладці Class в списку General class settings можна задати ім'я класу компоненту (class name), назву компонента (component name), якщо воно відрізнятиметься від назви класу, батьківський клас / класи (parent classes), параметри конструктора (constructor params), початкові розміри віджета (initial width і initial height), а також вибрати у випадаючому списку fixed size, чи будуть розміри віджета підлаштовуватися під розміри компонента-контейнера або головного вікна (Resize component to fit workspace) або ж створюваний компонент буде з незмінними розмірами (Keep component size fixed- рис. 5.1).
Рис. 5.1. Програма the jucer. Редагування властивостей класу компонента
На вкладці Subcomponents ми, власне, можемо спроектувати зовнішній вигляд нашого компонента, розміщуючи на його поверхні різні віджети і редагуючи їх властивості у списку праворуч (рис. 5.2). Біле поле з координатною сіткою - це, власне, і є заготовка нашого майбутнього компонента, на який можна додавати стандартні або призначені для користувача віджети за допомогою контекстного меню. У ньому доступні наступні стандартні компоненти: Text Button (кнопка з текстом), Toggle Button (радіокнопка), Slider (повзунок), Label (ярлик), Text Editor (поле введення), Combo Box (випадаючий список), Group Box (груповий блок ), Hyperlink Button ("кнопка" - гіперпосилання), Viewport (полі перегляду), Tabbed Component (компонент з вкладками), Tree View (деревоподібний список), Image Button (кнопка з зображенням).
Рис. 5.2. Редагування властивостей дочірніх (стандартних) компонентів проектованого компонента-контейнера в програмі the jucer.
Крім того, контекстне меню дозволяє редагувати колір фону віджета. Виберіть у меню пункт "Edit background graphics". Раніше додані віджети стануть недоступними для редагування, а праворуч відобразиться єдина властивість, background. Клацніть по полю введення (за замовчуванням в ньому відображається код білого кольору, FFFFFFFF), а потім виберіть у діалоговому вікні потрібний колір фону. Щоб закрити вікно, натисніть мишею по вільному простору панелі "Class Properties". Для завершення вибору кольору фону та повернення до редагування властивостей компонентів виберіть у контекстному меню пункт "Edit sub-component layout".
Редаговані властивості доданого дочірнього компонента (віджета) стають доступні в полі праворуч при виділенні компонента мишею (рис. 5.2). Більшість цих властивостей інтуїтивно зрозумілі, і для людини, що хоча б у невеликій мірі володіє англійською мовою, не складе труднощів у них розібратися.
Основною властивістю дочірніх компонентів є "member name" - ім'я об'єкта класу віджета. Властивість "name" призначено для потреб відлагодження і може бути пустим.
Геометрія віджета задається властивостями його координат: x і y - відстань у пікселях від верхньо-лівого кута компонента-контейнера, width - ширина і height - довжина дочірнього компонента. За замовчуванням усі координати задаються в абсолютних цифрах. Задавати геометрію дочірніх віджетів подібним чином має сенс у тому випадку, якщо розміри батька під час роботи програми залишаються незмінними. В іншому випадку розміри повинні бути відносними розмірів контейнера і один одного.
Розглянемо це на прикладі, представленому на рисунку 5.2. Додамо на поле проектування компонента 3 ярлика (Label), 2 випадних списку (Combo Box), 1 груповий блок (Group Box), 3 радіокнопки (Toggle Button) і 1 поле введення (Text Editor). Для вирівнювання субкомпонентів по лівому краю батька встановіть значення властивості x ярликів, випадаючих списків і групового блоку в однакове абсолютне значення (наприклад, 8). Значення властивості y буде приростати на розмір самих компонентів і обраного нами розміру між ними.
Координата x поля введення буде відносна розміру компонента-контейнера. Для того, щоб задати режим її обчислення, слід натиснути кнопку mode поряд з полем властивості компонента (рис. 5.2). Після натискання на кнопку з'являється меню, в якому слід вибрати пункт "Percentage of width of parent". При цьому в полі властивості x Text Editor з'явиться відповідне число - відсоток.
Для того, щоб довжина і ширина поля введення змінювалися при розтягуванні компонента-контейнера, аналогічним чином змінимо властивості width і height: для першого виберемо в меню "Percentage of width of parent", а для другого, відповідно, "Percentage of height of parent" .
Щоб між полем введення і іншими віджетами не залишався занадто великий зазор при зміні горизонтальних розмірів контейнера, задамо їх ширину відносно ширини Text Editor. Виділяючи послідовно компоненти, розташовані по лівому краю поля проектування, натискайте кнопку mode поряд з полем їх властивості width і вибирайте в меню Relative to> Relative to pFontViewer (class: TextEditor). Передбачається, що значення властивості member name поля введення задано як pFontViewer.
Значення властивості y компонентів, розташованих ліворуч, задамо в абсолютних цифрах, оскільки їх висота при розтягуванні вікна програми мінятися не буде.
Вибравши в меню the jucer "View> Test component ...", можемо побачити нашу компоновку в дії і переконатися, що все працює, як було задумано.
Перейшовши на вкладку "Code Preview" the jucer, можна подивитися згенерований програмою код.
Вибравши в меню File> Save, збережемо створений компонент; при цьому the jucer згенерує його заголовний файл (*. H) і файл реалізації (*. Cpp).
Файл реалізації створеного компонента можна відкрити для редагування в the jucer повторно; при цьому у вкладці Subcomponents відкриється раніше створена компоновка. Це досягається включенням в код реалізації спеціальних коментарів, що містять необхідні метадані, які розпізнаються the jucer. Ці коментарі мають такий вигляд:
/ / [UserButtonCode_textButton] - add your button handler code here ..
/ / [/ UserButtonCode_textButton] #
Власний код програміст може (і повинен) вставляти між цими коментарями. Будь-які зміни, зроблені в іншому місці, будуть втрачені при наступному збереженні компонента в the jucer.
Крім того, the jucer дозволяє легко додавати в код програми бінарні ресурси. Найчастіше це зображення.
Для використання будь-якого графічного файлу в створюваному компоненті необхідно перейти на вкладку Resources the jucer'а і натиснути на кнопку "Add new resource ...". У діалоговому вікні вибираємо потрібне зображення. Файл додається до списку (при необхідності його можна перезавантажити, натиснувши кнопку "Reload"; при збереженні компонента бінарні дані з нього переводяться у форму звичайного масиву C + + (static const unsigned char) і вставляються в код. В класі компонента автоматично створюється змінна класу Image * , яка ініціалізується в конструкторі даними з цього масиву. Цю зміну можна використовувати в коді програми для доступу до даних ресурсу.
Маючи набір графічних файлів, завантажених у вигляді ресурсів, можна їх використовувати для зміни фону створюваного компоненту. Це робиться в редакторі фонової графіки the jucer. Раніше ми вже його використовували для зміни кольору фону компонента. Редактор можна викликати, як ми це робили раніше, через контекстне меню або (що простіше) перейти на вкладку Graphics програми the jucer. Додамо фонове зображення, яке буде відображатися під нашими віджетами. Виберемо з контекстного меню пункт "New Image". Задамо розміри об'єкта класу Image наступним чином: x - 0, y - 0, width - Percentage of width of parent, 100%, height - Percentage of height of parent, 100%. Тим самим зображення займе всю доступну площу компонента. У випадаючому списку "image source" відображаються всі графічні файли, додані раніше в компонент в якості ресурсів. Якщо цього не було зроблено, то можна додати новий, вибравши в списку, що випадає пункт "- create a new image resource -".
Після вибору необхідного ресурсу зображення відображається на компоненті (рис. 5.3).
Рис. 5.3. Додавання фонового зображення в компонент, що редагується в the jucer
Крім зображень, в контекстному меню редактора фонової графіки можна вибрати різні графічні примітиви: прямокутник (Rectangle), прямокутник із закругленими кутами (Rounded Rectangle), еліпс (Ellipse), градієнт (Path), а також текст (Text). Для кожного елемента можна задавати прозорість, заливку кольором або у вигляді лінійного або радіального градієнта, а також заповнювати фігури зображеннями (властивість fill mode> Image Brush; у випадаючому списку fill image вибирається відповідне зображення з ресурсів). Контрольні точки градієнтів можна перетягувати мишею.
Генерований код малювання фону компонента поміщається в метод paint () його класу. Вивчивши його, легко зрозуміти логіку операцій малювання в Juce.
Висновки
Для швидкої розробки власних компонентів в Juce використовується програма для їх візуального проектування, the jucer. Вона дозволяє редагувати властивості суб й генерувати на основі заданих налаштувань код на мові C + +. Згенеровані вихідні тексти можуть бути як відредаговані вручну, так і відкриті в the jucer з можливістю огляду і повторного візуального редагування суб. Для того, щоб мати таку можливість, необхідно зберігати згенеровані метадані в коді.