Визуальное проектирование компонентов
Кроме того, контекстное меню позволяет редактировать цвет фона виджета. Выберите в меню пункт "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).
Помимо изображений, в контекстном меню редактора фоновой графики можно выбрать различные графические примитивы: прямоугольник (Rectangle), прямоугольник с закругленными углами (Rounded Rectangle), эллипс (Ellipse), градиент (Path), а также текст (Text). Для каждого элемента можно задавать прозрачность, заливку цветом либо в виде линейного или радиального градиента, а также заполнять фигуры изображениями (свойство fill mode > Image Brush; в выпадающем списке fill image выбирается соответствующее изображение из ресурсов). Контрольные точки градиентов можно перетаскивать мышью.
Генерируемый код рисования фона компонента помещается в метод paint() его класса. Изучив его, легко понять логику операций рисования в Juce.
Краткие итоги
Для быстрой разработки собственных компонентов в Juce используется программа для их визуального проектирования, the jucer. Она позволяет редактировать свойства субкомпонентов и генерировать на основе заданных настроек код на языке C++. Сгенерированные исходные тексты могут быть как отредактированы вручную, так и открыты в the jucer с возможностью обзора и повторного визуального редактирования субкомпонентов. Для того, чтобы иметь такую возможность, необходимо сохранять сгенерированные метаданные в коде.
Упражнение
С помощью the jucer создайте компонент с внешним видом как у примера из "Разработка собственных компонентов" (см. рис. 4.1). Добавьте графический файл в бинарные ресурсы создаваемого компонента и сделайте добавленный рисунок фоновым изображением. Включите код компонента в проект и откомпилируйте программу.