Firemonkey. От простого к сложному #1.

С выходом XE2 у владельцев сайтов и блогов, посвященных Delphi появилось масса возможностей для работы над своими проектами. Новая версия Delphi преподнесла нам массу новинок о которых по крупному не сказал разве, что самый ленивый владелец онлайн-ресурса. Кого-то заинтересовала разработка под х64 и он рассказал об этой возможности Delphi XE2 в своем блоге, другого — VCL Styles и он рассмотрел в блоге основные моменты работы со стилями…да мало ли кто и что рассказывал. Но новых, не рассмотренных возможностей, компонентов, модулей всё равно остается огромное количество. И получается такой, если не феномен, то информационный вакуум: вроде бы пишется ежедневно большое количество статей, выкладывается видео, ведутся дискуссии на форумах, а цельной картинки по теме нет.

Вот, например, новая платформа Firemonkey. Про неё рассказывают практически ежедневно, но в основном опять же по-крупному — как создать крутой 3D-эффект, как совместить 2D и 3D и т.д., а основы работы с Firemonkey практически нет. Даже Help Update 3 для RAD Studio особенно не помогает, т.к. через раз вместо полезной информации по компоненту встречаются фразы типа «Embarcadero Technologies does not currently have any additional information. Please help us document this topic by using the Discussion page!«. А с другой стороны (со стороны владельцев онлайн-ресурсов)…с чего начинать выгоднее, лучше, быстрее? Начинать с основ типа «берем мышкой компонент, укладываем на форму, пишем begin/end» вроде бы бесполезно — есть Wiki, какая-никакая справка. Будешь писать сразу про тонкости использования платформы — поймут только профессионалы да и то не все, а только те, кто «в теме». Так с чего начать? Я решил рискнуть и пойти от простого к сложному, чтобы то, о чём я буду рассказывать поняли даже те, кто только-только начинает работать в Delphi. Может получится, а может и заглохнет тема. Посмотрим. Но в любом случае польза, думаю, от такой работы будет как для читателей блога, так и для меня — я ведь тоже только начинаю свое знакомство с Firemonkey.>

Firemonkey — это платформа для разработки визуально привлекательных приложений, использующая возможности графического процессора. Используя эту платформу можно разрабатывать приложения сразу для Mac OS X, Win32,  Win64 и iOS (при компиляции приложений для iOS используется компилятор Free Pascal).

Основные возможности платформы:

• Кросс-платформенная разработка
• Использование 2D и 3D графики
• Мощный движок для работы с векторной графикой
• Быстрое сглаживание векторной графики в режиме реального времени
• WYSIWYG дизайнеры и редакторы свойств
• Расширенный интерфейс GUI-движка (окна, кнопки, текстовые поля, списки и т.д.)
• Современные стили оформления (skins)
• Примитивы для 2D-графики, а также встроенный набор кистей, геометрии, и анимаций
• Расширенный набор анимаций, которые рассчитываются в фоновом потоке с автоматической коррекцией кадров
• Растровые эффекты (тени, размытия и т.д.)
• Гибкие схемы и компоновки форм и других элементов управления
• Использование слоев для форм
• Поддержка Unicode
• Работа с JPEG, PNG, TIFF, GIF
• Поддержка разработки мультиязычных приложений (с использованием компонента TLang).

Как видно из диаграммы, общего совсем не много. Даже самый простейший компонент в FMX может очень сильно отличаться от своего аналога в VCL. Кроме того, благодаря поддержки слоев формы и отличной от VCL организации всей структуры библиотеки, в FMX каждый компонент может быть контейнером для другого компонента — можно бросить на кнопку компонент Label и кнопки станет родителем этой метки, можно разместить компоненты в несколько слоев на форме и т.д. Благодаря такой возможности можно создавать самые разнообразные по своей структуре приложения. Ну, а чтобы хотя бы примерно, представить себе, чего можно достичь, используя Firemonkey, можете глянуть вот такой небольшой ролик, автором которого является Всеволод Леонов:

Раздел 1. Компоненты Firemonkey

1. Свойства компонентов в FMX

Свойство Align
Это свойство, как и ранее, заставляет компонент менять некоторые из своих размеров и положение при изменении размеров компонента-родителя, но в Firemonkey свойство Align теперь имеет тип TAlignLayout,  стало по-богаче и теперь может принимать следующие значения:

alNone — как и ранее, указывает на то, что автоматического позиционирования компонента не происходит.

alTop — компонент заполняет верхнюю часть родителя, сохраняя при этом свою высоту (Height).

alLeft — компонент автоматически растягивается по левой части родителя, сохраняя при этом свою ширину (Width)

alRight — компонент автоматически растягивается по правой части родителя, сохраняя при этом свою ширину (Width)

alBottom — компонент «прижимается» к нижней части компонента-родителя, сохраняя при этом свою высоту (Height)

alMostTop, alMostBottom, alMostLeft, alMostRight — указывают на то, что компонент будет располагаться всегда выше, ниже, левее или правее своих соседей.

alClient — компонент заполняет собой всю доступную клиентскую область родителя.

alContents — компонент растягивается по всему родительскому компоненту, заполняя собой всё пространство, игнорируя при этом позиционирование своих «соседей».

alCenter — компонент выравнивается по центру своего родителя, сохраняя при этом свои линейные размеры (Height и Width) и при изменении размеров компонента-родителя автоматически позиционируется в центр.

alVertCenter — компонент выравнивается вертикально по центру родителя и при этом растягивается по всей доступной ширине компонента-родителя. Доступным для изменения размером остается только высота (Height)

alHorzCenter — как и в случае с alVertCenter компонент позиционируется по центру своего родителя, но при этом занимает всю доступную высоту. Изменяемой остается ширина (Width) компонента.

alHorizontal, alVertical — компонент занимает всю доступную (не занятую другими компонентами) ширину (alHorizontal) или высоту (alVertical) родителя, но при этом, в отличие от alHorzCenter и alVertCenter  не позиционируется по центру.

alScale — расположение во горизонтали и вертикали определяется пользователем, однако при изменении линейных размеров компонент-родителя компонент также изменяет свои размеры.

alFit — аналогично alVertCenter компонент занимает всю доступную ему высоту родителя, но при изменении линейных размеров родителя компонент также изменяет свои размеры, пробуя сохранить заданные пропорции

alFitLeft, alFitRight — компонент «прижимается» к левой или правой части родителя и при изменении размеров компонента-родителя также изменяет свои линейные размеры, сохраняя ранее заданные пропорции.

Как можно видеть из описания всех возможных вариантов свойства Align, это свойство в FMX по функциям похоже сразу два свойства из VCL: Align и Anchors. Поэтому в компонентах, относящихся к FMX отсутствует свойство Anchors.

Свойство DesignVisible: boolean

Так как Firemonkey — это платформа для создания как 2D,так и 3D-приложений, то при создании приложений с достаточно «навороченным» интерфейсом подчас бывает трудно представить себе расположение элементов на форме относительно друг друга, поэтому свойство DesignVisible служит для того, чтобы в режиме Design-Time скрывать как сам компонент для которого изменяется свойство, так и всех его потомков. На рисунке ниже представлена форма с панелькой которая имеет различные значения свойства DesignVisible:

Свойство EnableDragHighlight: boolean

Если это свойство равно True, то при перетаскивании компонента он будет подсвечиваться, как показано на рисунке ниже:

Свойства Height и Width: single

Да, теперь свойства высоты и ширины компонента можно задавать дробными значениями. Благодаря этому в Firemonkey можно плавные анимации различных компонентов на форме.

Свойство Opacity: single

Это свойство используется для задания степени прозрачности компонента и изменяется в пределах от 0 до 1.  На рисунке ниже представлена форма на которой панели (TPanel) имеют различные значения свойства Opacity:

Свойство Position: TPosition

У компонентов FMX вместо свойств Left и Top появилось новое свойство — Position, которое задает расположение элемента по осям (X,Y) на форме, а также его угол поворота (RotationAngle).

На рисунке ниже представлены панели у которых заданы различные значения поля X в Position, но одинаковые значений Y и RotationAngle (10 градусов)

Свойство RotationCenter: TPosition

Свойство RotationCenter задает расположение центра поворота компонента. По умолчанию это свойство имеет значения (X = 0,5; Y=0,5), т.е. оси поворота проходят через центр объекта. На рисунке ниже представлена панель у которой ось поворота вынесена за пределы границ самой панели:

 Свойства StyleLookup и StyleName: string

Эти свойства используются для определения собственного стиля отрисовки компонента. 

Вот пожалуй тот набор свойств компонентов в Firemonkey, к которым в будущем мы будем периодически возвращаться и которые будем использовать в своих приложениях. Сегодня я рассмотрел то, что можно назвать одним словом — «элементарщина», но иногда и без таких элементарных знаний бывает тяжеловато браться за изучение чего-то нового. Мы обязательно продолжим разговор про Firemonkey, т.к. платформа эта достаточно перспективная и интересная. В дальнейшем я планирую всё-таки добраться до вопросов связывания компонентов в FMX через LiveBindings и рассмотреть работу со списками, БД и т.д….лишь бы хватило на всё времени. В общем, оставайтесь с нами — будет интересно =).