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

Vlad

Вот сегодня WPF мне и вспомнился при работе c FireMonkey. И пусть меня простят сторонники WPF, но FireMonkey лично для меня показалась более простой и удобной использовании. Есть, конечно, и проблемы, но о проблемах мы ещё поговорить успеем, а пока просто познакомимся с тем, какие возможности открываются перед нами при использовании FireMonkey.

В принципе о том, что FireMonkey - это потомок библиотеки VGScene от KSDev, думаю, многие уже знают. Если нет, то можете почитать сообщение на сайте KSDev где сообщается о том, что интеллектуальная собственность KSDev приобретена Embarcadero. Что тут можно сказать? Наверное то, что я искренне рад тому, что разработки нашего соотечественника нашли такое мощное применение в Embarcadero и были воплощены в виде FireMonkey.

Что касается Delphi XE2, то теперь помимо простых приложений VCL Application нам стали доступны следующие виды приложений:

  • FireMonkey HD Application - 2D-приложение
  • FireMonkey 3D Application  - приложение с 3D-графикой
  • FireMonkey HD iOS Application - 2D-приложение приложение для iOS
  • FireMonkey 3D iOS Application - 3D-приложение приложение для iOS

Следуя простому правилу "Не знаешь как работать с 2D-графикой - не суйся в 3D" я решил вначале посмотреть, что представляет из себя HD Application. А раз у меня нет iPad'а (я на него только коплю =)), то приложение будем создавать для Windows.
Итак, запускаем Delphi XE2, создаем новый проект: "File -> New -> FireMonkey HD Application". Всё, что можно заметить сразу после создания нового проекта - это немного изменившийся вид главного окна в дизайнере и, на первый взгляд, чуть-чуть другой состав палитры компонентов. То есть при создании VCL Application IDE выглядит так:

 
А при создании 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 месяца и, если эта платформа приживется (а я очень на это надеюсь), то в ближайшем будущем мы увидим обновления и платформа станет ещё мощнее и удобнее в использовании.

Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=27281