Delphi XE2. Знакомство с FireMonkey.

 

А при создании FireMonkey HD Application - вот так:

 

 

Но это только на первый взгляд. В действительности же все намного сложнее, если копать глубже. Например, если посмотреть модуль в котором содержится класс TButton для VCL-приложения, то мы увидим Vcl.StdCtrls (или просто StdCtrls для Delphi XE и ниже), а описание того же TButton для FireMonkey содержится уже в FMX.Controls. И всё, что роднит две казалось бы одинаковые кнопки - это только родительский класс TComponent - дальше всё другое. И эти отличия Вы почувствуете сразу же как только бросите кнопку на форму и посмотрите в Object Inspector.

 

FireMonkey по сравнению со старой доброй VCL дает нам на порядок больше возможностей для разработки красивых интерфейсов, создания анимации и т.д.
Вот, к примеру, возьмем туже кнопку TButton и прикинем сколько нам надо написать кода, чтобы при наведении курсора мыши на кнопку она меняла свою высоту, а после того как курсор будет убран высота бы возвращалась к своему первоначальному значению и при этом анимация была бы плавной, с небольшой задержкой? Задача, на самом деле простенькая, но как говориться,  "время - деньги" и хотелось бы сделать такую анимацию максимально быстро. С FireMonkey для решения этой задачи Вам даже не придется писать для этого какой-либо код - всё можно сделать, используя Object Inspector. Смотрите.
1 . Бросаем на форму кнопку TButton.
2. Переходим в Object Inspector и находим свойство Height. Можете заметить, что по-мимо того, что рядом с этим свойством появился новый значок, показывающий, что для свойства можно определить какой-либо эффект, также в Object Inspector'e появился и список выбора в котором можно выбрать вид анимации:

 

 

3. Выбираем в списке первый тип анимации - "Create New TFloatAnimation" и задаем в Object Inspector следующие значения свойств анимации:
Duration = 0,5
Enabled = True
Inverse = True
StartValue = 22
StopValue = 50
Trigger = IsMouseOver=true
TriggerInverse = IsMouseOver=false
4. Жмем F9 и любуемся только что созданной анимацией. При наведении курсора мыши на кнопку высота кнопки плавно изменяется пока не достигнет значения 50 пикселей, а после того как курсор убран высота кнопки с той же задержкой возвращается в первоначальное значение. И никакого кода. В запущенном приложение кнопка будет вести себя вот так:

 

 

На создание такой анимации у меня ушло чуть больше времени, чем длится выше представленный видео-ролик. Теперь разберемся, что мы сделали.

Во-первых, стоит отметить, что все элементы управления в FireMonkey (FMX) - это контейнеры, т.е. в любой компонент FMX можно встроить другой. И эту особенность FireMonkey Вы могли легко заметить, когда создавали свою "живую" кнопку:

 

Здесь мы создали для TButton новый дочерний компонент - анимацию. Никто вам не запретит, если захотите, взять и встроить в кнопку TButton вторую надпись в виде TLabel или хоть TPaenel. Такая вот интересная особенность.

Во-вторых, что касается свойств анимации. Для анимации TFloatAnimation можно использовать следующие свойства:

• AnimationType - определяет тип воспроизведения анимации.
• AutoReverse - определяет будет ли анимация воспроизводится автоматически в обратную сторону, когда значение свойства достигнет своего конечного значения (StopValue)
• Delay - задержка в секундах после которой начнется воспроизведение анимации
• Duration - продолжительность анимации в секундах.
• Interpolation - тип интерполяции, используемой для расчёта промежуточных значений свойства. Для простых анимаций достаточно линейной интерполяции (itLinear)
• Inverse - определяет будет ли анимация воспроизводиться в обратном направлении
• Loop - определяет будет ли анимация зациклена.
• PropertyName - имя свойства для которого применяется анимация
  StartFromCurrent - определяет будет ли анимация воспроизводиться с текущего значения свойства или от заданного в StartValue
• StartValue и StopValue - начальное и конечное значение свойства.
• Trigger - событие после которого запустится процесс анимации
• TriggerInverse - событие после которого анимация пройдет в обратном направлении.
• TFloatAnimation - это самый широко используемый в FireMonkey тип анимации.

Достаточно посмотреть на другие свойства элементов управления, поддающиеся анимации, чтобы убедиться в этом. Однако этот тип анимации не единственный. На вкладке Animations палитры компонентов Вы можете найти ещё несколько типов анимации для Ваших приложений. Например, можно сделать плавное изменение цвета какого-либо элемента на форме, используя TColorAnimation. Ниже представлен небольшой видео-ролик, демонстрирующий применение TColorAnimation для компонента TCalloutRectangle:

 

Анимацию для цвета я задал зацикленную, т.е. свойство Loop выставлено в значение True, а свойства Trigger и TriggerInverse оставил пустыми.
Кроме анимаций Вы также можете применять также для своих элементов на форме различные эффекты типа размытия, тени и т.д. Например, на рисунке ниже показан элемент TCalloutRectangle с наложенным на него эффектом тени:

 

И даже более того - для эффектов Вы также можете создавать различные информации =) В общем возможностей создать красивый и интерфейс приложения - масса.
Ну и в заключении пара слов про стили. Как вы могли заметить, в представленных выше роликах форма приложения выглядит ровно так какой мы её видели в VCL. В Delphi XE2 для приложений VCL Applications стали доступны стили оформления, которые можно настроить, например, выбрав в меню Project - Options - Application - Apperance. Выбор стиля выглядит так:

 

Так вот, FireMonkey дает намного больше возможностей по изменению стиля приложения, чем при использовании обычной VCL. В силу того, что каждый элемент в FireMonkey - это контейнер, мы в силах самостоятельно изменить стиль отрисовки любой части элемента - бордюра, заднего фона, выбрать толщину рамки и т.д. Всё это можно сделать, используя, опять же визуальный редактор. Для примера изменим задний фон для формы.  Наши бействия будут следующими:
1. Кидаем на форму компонент TStyleBook
2. В свойства формы StyleBook указываем StyleBook1.
3. Дважды кликаем по компоненты в результате чего откроется окно дизайнера:

 

 

Чтобы загрузить стиль по умолчанию необходимо нажать кнопку Load Default. Теперь самое интересное. Каждый элемент в дереве стиля определят стиль для какой-либо части компонента. Например, за стиль кнопки отвечает элемент buttonstyle за задний фон элемента - backgroundstyle и т.д.
4. Для цвета формы выбираем в дереве backgroundstyle и в Object Inspector изменяем цвет, например, на красный.
5. Жмем кнопку Apply и смотрим на форму в дизайнере:

 

Чтобы указать какому-либо элементу его уникальный стиль, ему необходимо указать значение свойства StyleLookup. К примеру, Вы можете применить тот же стиль backgroundstyle  для кнопки или вообще создать свою уникальную кнопку используя элементы с вкладок Shapes, Layouts, Animations и Effects палитры компонентов.
   

 Резюмируя все вышесказанное, можно сказать, что FireMonkey - это достаточно удобный фрейморк для создания красивых, информативных и удобных приложений - хотите создавайте элементы управления с анимацией, хотите - с эффетами, срабатывающими по какому-либо событию, полностью перерисовывайте стиль оформления компонентов и т.д. На ряду с этим FireMonkey достаточно прост в использовании - можно строить красивый интерфейс приложения не написав ни одной строчки кода (хотя никто не запрещает вам, если необходимо - делать тоже самое в коде приложения).

 

    Не буду лукавить и скажу, что по ходу написания статьи я также столкнулся и с некоторыми проблемами в работе. Например, не всегда удавалось с первого раза открыть дизайнер стиля у TStyleBook. Мелочь, но тем не менее присутствует. Или в случае с анимацией мне так и не удалось повесить нормально на эффект TShadow анимацию TFloatAnimation - вроде бы и срабатывает анимация, но только не по событию, а только в зацикленом режиме. Были найдены и другие проблемы о которых разработчики писали в своих блогах и на форумах. Однако не стоит забывать, что FireMonkey ещё не исполнилось и 1 месяца и, если эта платформа приживется (а я очень на это надеюсь), то в ближайшем будущем мы увидим обновления и платформа станет ещё мощнее и удобнее в использовании.