FireMonkey. От простого к сложному #11. Инструменты для работы со стилями (MonkeyStyler, MonkeyRecolor и т.д.).

Все предыдущие статьи из серии «FireMonkey. От простого к сложному» можно найти здесь.

Сегодня я решил вернуться к этой серии постов и рассмотреть, с одной стороны, один из самых интересных, а с другой — один из самых сложных моментов по работе с FireMonkey — работу со стилями. Сложнее и интереснее в FireMonkey, чем работа со стилями, может быть, наверное, только работа с 3D, но этой темы я пока не касаюсь, ограничиваясь исключительно 2D.
То что разработка собственного стиля — это довольно увлекательное занятие, я усвоил ещё когда рассказывал про редактор стилей в VCL. Но, в FireMonkey в понятие «стиль» —  вкладывается на много больший смысл, чем просто «набор изображений и шрифтов».

В качестве небольшого введения к этой статье, я очень рекомендую Вам посмотреть запись вебинара «FireMonkey — Styles» (на русском языке). Просмотр этого вебинара даст нам с Вами основу для дальнейшей работы.

http://www.youtube.com/watch?v=eqrVYWZ8SPk

Итак, основные моменты относительно стилей в FireMonkey могут быть выражены следующим образом:

1. Стиль FMX — это контейнер, содержащий набор объектов FireMonkey, которые могут быть скрыты от разработчика и определяют внешний вид и поведение компонента
2. В качестве контейнера стиля обычно используется TLayout — компонент, который не имеет никакого внешнего вида, который удобно использовать не только при разработке стилей FMX, но и, например, для разработки макета формы приложения, группировки элементов управления и т.д.
3. Стили могут храниться как в отдельных файлах с расширением *.style, так и не посредственно в приложении для чего используется невизуальный компонент TStyleBook.

Сейчас я не буду пересказывать весь вебинар, т.к. все равно, лучше, чем уже есть в видео я врядли расскажу.  Перейду лучше сразу к рассмотрению различных инструментов для работы со стилями.

Концепция стилей в FireMonkey, конечно, интересна, нова и т.д., но, думаю, что не только у меня при работе со стилем FMX возникала мысль «Вот бы такую программу, чтобы можно было без труда менять стиль сразу всех контролов». И сейчас, когда выпущена RAD Studio XE3, мы можем воспользоваться для работы со стилями сразу несколькими инструментами, а именно:

1. Bitmap Style Designer — утилита, входящая в состав XE3
2. Firemonkey Style Equalizer
3. MonkeyRecolor
4. MonkeyStyler

Посмотрим, что это за инструменты и как с помощью них можно быстро изменять стили в FireMonkey. Для примера можно создать приложение FireMonkey HD Application на форме которого разместить несколько стандартных контролов. Например, я далее буду рассматривать работу со стилями, используя приложение вот такого вида:

Bitmap Style Designer

Ранее (в Delphi XE2) этот инструмент носил название «VCL Style Designer» и использовался исключительно для работы со стилями в VCL. В XE3 утилита была переработана и теперь с помощью Bitmap Style Designer мы можем редактировать также и стили для FireMonkey.

В Bitmap Style Designer мы можем создавать следующие проекты стилей:

• VCL or FireMonkey style
• Metropolis UI Style

Когда мы создаем новый стиль, то по умолчанию подгружается битмап вот такого вида:

Из которого впоследствии мы уже «нарезаем» внешний вид элементов управления. В качестве первого примера использования Bitmap Style Designer в качестве редактора стилей для FireMonkey я решил сохранить стиль, создаваемый по умолчанию, в файл *.style и загрузить его в свою программку. Выбрал в главном меню: File—>Save As и указал необходимый формат файла. В результате файл со стилем оказался таким:

object TLayout
  object TStyleDescription
    StyleName = 'Untitled'
    Version = '1.0'
    Author = 'Embarcadero Technologies Inc.'
    AuthorEMail = ''
    AuthorURL = 'www.embarcadero.com'
    MobilePlatform = False
    RetinaDisplay = False
    PlatformTarget = ''
  end
  object TImage
    StyleName = 'Untitled1style.png'
    Visible = False
    Bitmap.PNG = {
      89504E470D0A1A0A0000000D49484452000001F4000002A8080600000081720D
      9B0000FFFF4944415478DAEC9D076014D5D6C76F3A24D400D2124A0C98044890
      8E2424B4088840E8790A167C083C1054BE8705117D58780F15040151518AD2A5
      4813100209127A0F2811A583142190501292EFFC2F9975B23BB333BBD965279B
      FBD721BBB3B367EFDD99BDBF39F79E7BAE07131212121212122AF2F250DAF9EE
      {....}
      5F6423EFB0D4E98F22F34EC7FAFAB4CC55A95275F74A2176A02A55AA54A952A5
      AA2E5281AE4A952A55AA54DD055281AE4A952A55AA54DD05FA7F6FD0135B64FE
      BAA10000000049454E44AE426082
    }
  end
{...}
 object TLayout
    StyleName = 'speedbuttonstyle'
    object TSubImage
    DisableInterpolation = False
          BitmapScale = 1
      StyleName = 'background'
      HitTest = False
      Align = alContents
      BitmapMargins.Rect = '(5,5,5,5)'
      SourceLookup = 'Untitled1style.png'
      SourceRect.Rect = '(77,164,104,191)'
      WrapMode = iwStretch
      MarginWrapMode = iwStretch
      object TRectAnimation
        Duration = 0.0001
        Trigger = 'IsMouseOver=False;IsPressed=False;IsFocused=False'
        StopValue.Rect = '(77,164,104,191)'
        PropertyName = 'SourceRect'
      end
      object TRectAnimation
        Duration = 0.0001
        Trigger = 'IsMouseOver=True;IsPressed=False'
        StopValue.Rect = '(77,191,104,218)'
        PropertyName = 'SourceRect'
      end
      object TRectAnimation
        Duration = 0.0001
        Trigger = 'IsMouseOver=True;IsPressed=True'
        StopValue.Rect = '(77,218,104,245)'
        PropertyName = 'SourceRect'
      end
    end

В принципе, все вполне предсказуемо и укладывается в идею стилей FireMonkey: основной контейнер содержит в себе TImage в котором лежит изображение и каждый элемент стиля, использует его для отрисовки самого себя и анимации через TRectAnimation. Естественно, что такой стиль будет «весить» несколько больше за счёт того, что в нем «зашито» изображение, но особой разницы в работе программы быть не должно. Проверим как работает такой стиль в приложении. Для этого:

1. Кидаем на форму приложения компонент TStyleBook, дважды кликаем по нему мышкой и загружаем файл стиля:

2. Жмем «Apple and Close».

3. У главной формы приложения в свойстве StyleBook указываем наш StyleBook1:

Если все сделано верно, то Вы сразу увидите, что стиль применился и форма приложения приняла следующий вид:

На рисунке ниже слева показано работающее приложение со стилем по-умолчанию, а справа — с нашим стилем:

Используя  Bitmap Style Designer мы можем теперь легко перенести любой стиль VCL (*.vsf) в FireMonkey. Для чего необходимо открыть в редакторе необходимый vcl-стиль и просто пересохранить его в формат FireMonkey. Например, я пересохранил в FMX стиль CyanDusk.vsf:

Что касается работы с объектами в Bitmap Style Designer, то в целом она осталась такой же как ранее, поэтому повторяться не буду, а перейду к следующему инструменту для работы со стилями FireMonkey.

Firemonkey Style Equalizer

Firemonkey Style Equalizer — это простенькая утилита от автора блога «The Road To Delphi«, предназначенная для изменения цветовой гаммы стиля FireMonkey. В отличие от всех представленных в этой статье инструментов, Firemonkey Style Equalizer распространяется вместе с исходным кодом.

Скачать FireMonkey Style Equalizer можно по этой ссылке.

Информацию по работе с программой можно почитать в блоге автора.

Ниже представлен небольшой видео-ролик, демонстрирующий работу с программой:

Следует только отметить, что Firemonkey Style Equalizer был написан в Delphi XE2 и, соответственно, после выхода Delphi XE3 с FireMonkey 2.0. некоторые методы FMX были перемещены в другие модули, да и LiveBindings значительно поменялся, поэтому, если Вы решите открыть исходник этой утилиты в XE3, то надо будет внести одну небольшую поправку в исходный код:

unit uFMEqualizer;
{...}
procedure TStyleEqualizer.ChangeHSL(dH, dS, dL: Single);
var
  i : Integer;
  v : TFMStyleLine;
begin
  for i := 0 to FLines.Count-1 do
   if FLines[i].IsColor and (FLines[i].Color<>claNull) then
    begin
      v:=FLines[i];
      v.Color:=({FMX.Types}System.UIConsts.ChangeHSL(v.Color,dH,dS,dL));
      if v.Color<>FMod[i].Color then
        FMod[i]:=v;
    end;
end;

И подправить связи в LiveBindings — о чем Вы увидите сообщение при попытке открыть форму с эквалайзером (uFrmStyleEqualizer.pas). В остальном исходник Firemonkey Style Equalizer рабочий и позволяет понять как можно работать со стилями FireMonkey в Delphi.

MonkeyRecolor

MonkeyRecolor — это ещё одна бесплатная утилита для изменения цветовой гаммы стиля FireMonkey. В отличие от предыдущего инструмента, MonkeyRecolor обладает более продвинутыми функциями по работе с цветовой палитрой стиля.

Скачать MonkeyRecolor можно с сайта разработчика.

После установки в директории с общими документами появится поддиректория MonkeyRecolor, содержащая исходный код приложения.

Итак, запускаем приложение и видим демо-форму с различными элементами управления:

Теперь заходим в главном меню: File—>MonkeyRecolor

Здесь мы можем:

1. загрузить/сохранить стиль и изменить его цветовую палитру
2. сохранить созданную в MonkeyRecolor цветовую схему в отдельный файл, чтобы потом её можно было быстро применять к другим стилям.

MonkeyStyler

В отличие от двух предыдущих инструментов для работы со стилями FireMonkey, MonkeyStyler — это полноценный инструмент для работы со стилями, с помощью которого можно:

1. Работать с несколькими файлами стилей одновременно
2. Копировать различные элементы стиля
3. Управлять свойствами элементов с помощью инспектора свойств (похожего на Object Inspector Delphi)
4. Просматривать поведение элемента, не сохраняя при этом файл стиля

Самый простой способ создать свой стиль для какого-либо элемента управления или вообще для всего приложения — это скопировать какой-нибудь «родной» стиль, предоставляемый Embarcadero и внести в него какие-либо изменения. После чего создать новый файл *.style и использовать его в своей программе.

В MonkeyStyler это делается очень просто. К примеру, я захотел создать свой стиль для TButton, основываясь на стиле Light.Style. Запускаем MonkeyStyler, загружаем файл со стилем и в списке выбора элементов стиля ищем стиль кнопки:

Теперь мы можем тут же в окне просмотра включить/выключить различные компоненты стиля (например, эффекты) посмотреть как работает этот элемент управления:

Скопируем этот стиль в другой файл. Для этого просто жмем кнопку «Copy Element To…» и в открывшемся окне задаем параметры копирования:

Жмем «Ok» и элемент стиля переносится в новый файл <Untitled>:

Теперь мы можем работать с этим элементов как угодно, не боясь при этом испортить уже имеющийся файл и, в случае необходимости, возвращаясь к основному файлу стиля не перезагружая программу (файл Lite.Style все так же доступен в списке).

К примеру, я изменил внешний вид кнопки немного изменив заливку у TRectangle:

После этого я сохранил получившийся стиль в файл «MyButton.style» и загрузил его в StyleBook:

Одной из интересных возможностей MonkeyStyler является «живой» просмотр стиля в наших приложениях. Для этого вместе с MonkeyStyler поставляется несколько модулей, содержащих необходимые классы и методы для обеспечения связи между MonkeyStyler и приложением, а в Wiki на сайте разработчика подробно описано, что и как необходимо сделать, чтобы обеспечить «живой просмотр».

К информации с Wiki можно только добавить следующее:

1. Чтобы живой просмотр заработал необходимо вначале запустить MonkeyStyler и только затем — тестовое приложение. Пробовал запускать наоборот — функция не заработала.
2. Везде, где у объекта StylerComms используются имена файлов необходимо использовать полные имена, включающие путь

В целом, работа с MonkeyStyler мне показалась достаточно удобной и простой. Понравилась функция «живого просмотра» стиля. Думаю, что  если FireMonkey наберет достаточную популярность у разработчиков, то MonkeyStyler также будет пользоваться успехом.

Если же говорить в целом про все рассмотренные выше инструменты, то:

• Bitmap Style Designer выгодно использовать там где необходимо перенести стиль в FireMonkey, например из VCL. При переносе стилей из VCL в FMX я не заметил каких-либо артефактов у элементов управления — всё переносится грамотно. Недостаток у стиля, созданного с Bitmap Style Designer, как я упоминал, размер. Но с этим ничего не поделаешь — надо ведь где-то png-хранить.
• Firemonkey Style Equalizer и MonkeyRecolor — удобно использовать в том случае, если нам нет необходимости изменять состав элементов в стиле и добавлять в стиль что-либо свое, но необходимо откорректировать цветовую палитру. Лучшего решения, чем эти два инструмента, пока не встретил.
• MonkeyStyler — удобно использовать для создания собственных стилей. От стандартного редактора стиля в Delphi MonkeyStyler отличает удобная работа с группой файлов — быстрое копирование элементов из одного файла в другой, переименование и т.д. и, конечно же, «живой просмотр» стилей.

Если Вы знаете ещё какие-либо инструменты для работы со стилями FireMonkey, то отписывайтесь в комментариях — добавлю их к статье.