Розділ ііі. Створення додатку Розробка інтерфейсу
Запускаємо The Jucer і вибираємо у меню File> New Component. З'явиться віджет з вкладками, що відображає інформацію про створюваний компонент. На вкладці Class в списку General class settings задаємо ім'я класу компоненту (class name), назву компонента (component name), якщо воно відрізнятиметься від назви класу, батьківський клас / класи (parent classes), параметри конструктора (constructor params), початкові розміри віджета (initial width і initial height), а також вибрати у випадаючому списку fixed size, чи будуть розміри віджета підлаштовуватися під розміри компонента-контейнера або головного вікна (Resize component to fit workspace) або ж створюваний компонент буде з незмінними розмірами (рис.3.1).
Рис.3.1. Програма The Jucer. Редагування властивостей класу компонента
На вкладці Subcomponents спроектовуємо зовнішній вигляд нашого компонента, розміщуючи на його поверхні різні віджети і редагуючи їх властивості у списку праворуч (рис.3.2). Біле поле з координатною сіткою – це і є заготовка нашого майбутнього компонента, на який можна додавати стандартні або призначені для користувача віджети за допомогою контекстного меню. У ньому доступні наступні стандартні компоненти: Text Button (кнопка з текстом), Toggle Button (радіокнопка), Slider (повзунок), Label (ярлик), Text Editor (поле введення), Combo Box (випадаючий список), Group Box (груповий блок ), Hyperlink Button ("кнопка" - гіперпосилання), Viewport (полі перегляду), Tabbed Component (компонент з вкладками), Tree View (деревоподібний список), Image Button (кнопка з зображенням). Крім того, контекстне меню дозволяє редагувати колір фону віджета (у меню пункт "Edit background graphics").
Рис.3.2. Редагування зовнішнього вигляду компоненту в програмі The Jucer
Отже, створюємо головну форму яка складається з 4-х ImageButton , 3
-х TextEditor та TextButton(які дубльовані 4 рази ). При цьому вони накладаються один на одного. На про дубльовані елементи встановлюємо setVisible(false); - таким чином вони з’являються лише тоді коли буде потрібно.
Наприклад, при натиск на картинку setVisible n(false), а елементи які відповідають за другу картинку setVisible(true).
Зміст TextEditor(Коментарії) залежить від имя та коментарію залишеного в двох нищих TextEditor (Ваще имя и Отзыв)
TextButton зберігає імя та коментарій
Приклад реалізації роботи додатку
Запускаємо файл «gg.exe», який знаходиться у головному каталозі проекту - Gallery\Builds\VisualStudio2010\Debug\Gallery.exe. одразу ж відкривається перше Картинна галерея:
В строку пишем імя(нікнейм) та коментарій до картинки(тиснемо кнопку «Добавить коментарий»):
Натискаемо на картинку и відкриваеться інша картинка
Останій стайд переходить до першого і всі коментарії збережені
Висновок
Juce являє собою багатоплатформовий інструмент для розробки графічного інтерфейсу користувача, а також універсальну бібліотеку класів для вирішення різних завдань. Компоненти, що входять до складу Juce, забезпечують попиксельну ідентичність інтерфейсу створюваних програм під різними операційними системами. Основне призначення Juce - створення програм з оригінальним зовнішнім виглядом, не залежних від зовнішніх бібліотек, а також додатків для обробки звуку. До складу Juce входять допоміжні програми: Introjucer для створення проектів та the jucer, що відповідає за візуальне проектування компонентів.
The Jucer дозволяє редагувати властивості компонентів й генерувати на основі заданих налаштувань код на мові C++. Згенеровані вихідні тексти можуть бути як відредаговані вручну, так і відкриті в the jucer з можливістю огляду і повторного візуального редагування компонентів.
В даній курсовій роботі за допомогою кросплатформної бібліотеки Juce на мові С++ було створено платформнонезалежний додаток – Галерею з коментаріями. Для коректної роботи був використаний метод setVisible (bool shouldBeVisible), що дозволяє відображати або ховати вікно для доступу користувача, та стандартні віджети такі як Text Editor (поле введення), Text Button (кнопка з текстом), ImageButton(кнопка з зображенням) та Label (ярлик).