Небольшое, но важное введение

В этой статье речь пойдет о том, как можно разрабатывать приложения в Delphi для интерфейса Metro UI. MetroUI — это новый графический интерфейс, который был добавлен в Windows 8 в качестве альтернативы привычному оконному интерфейсу.

Для работы с MetroUI вам понадобиться версия Delphi, включенная в Rad Studio XE3. Загрузить ПО можно на официальном сайте. Разработчики дают 17 дней испытательного срока бесплатно.

Создание нового проекта

Работа в Delphi начинается с создания нового проекта. Для этого вызовите команду главного меню File>New>FireMonkey Metropolis UI Application. Обратите внимание, что именно FireMonkey, а на VCL. Разработка приложений на VCL тоже возможна, однако новые возможности реализованы в этой библиотеке гораздо хуже, чем в FireMonkey. Если Вы ранее еще ни разу не работали с FireMonkey, то это неплохой повод научиться. На практике работать с ней не труднее, чем с VCL.

Первое, чем Вас поприветствует новый проект — это окном для выбора шаблона приложения. Доступны 3 варианта:

• Blank Metropolis UI Application — пустая форма с выпадающей панелью снизу по нажатию Escape. На панели кнопка закрытия формы и еще ряд дополнительных, не работающих кнопок.
• Grid Metropolis UI Application — форма, похожая на начальный экран Windows 8: набор плиток, прокручиваемый по горизонтали. При клике по плитке открывается другая форма с текстом.
• Split Panel Metropolis UI Application — форма, разделенная на панели, каждая со своей прокруткой.

Выберите наиболее подходящую в Вашей ситуации и нажмите OK.

Выбор темы оформления

После создания появиться черная форма с одним единственным, не визуальным компонентом TStyleBook. Этот компонент на подобие Alpha Meneger будет устанавливать для Ваших элементов управления Windows 8 стиль. Давайте попробуем его настроить: для этого сделайте по нему двойной клик. Отобразиться форма, похожая вот на эту:

Слева отображаются все стили, уже загруженные в Ваше приложения. Если попробуете среди них покопаться, то найдете там все возможные Windows 8 кнопки, панели, выпадающие списки и другие элементы. По умолчанию загружена «черная» тема. При желании Вы можете загрузить другие стили. Для этого нажмите кнопку Load… Появиться диалог выбора файла. Вам нужен путь C:\Users\Public\Documents\RAD Studio\10.0\Styles. Здесь 10.0 — это номер Вашей версии. В этой папке находится три темы:

• MetropolisUIBlack.Style
• MetropolisUIBlue.Style
• MetropolisUIDark.Style
• MetropolisUIGreen.Style

Все остальные файлы в папке — это тоже темы, но не для Windows 8. Выбрав подходящие стили нажмите кнопку Apply and Close.

Применение стилей

Теперь попробуем воспользоваться выбранными стилями. Перенесите кнопку TButton на форму. В инспекторе объектов найдите свойство StyleLookup. В нем есть полный перечень доступных стилей оформления кнопки. Часть из них на этом скриншоте:

Подобным же способом Вы можете оформить и другие элементы управления (выпадающие списки, флажки и.т.д.).

AppBar

Выпадающая панелька, включенная во все шаблоны называется AppBar. Ее очень удобно использовать в огромном количестве случаев. Ее можно без проблем использовать и в своем приложении. Если посмотрите в структуру формы, то найдете там компонент ToolBarHolder. Он и отвечает за панель.. Первым делом выберите его и установите свойство Visible в True так, чтобы Вы смогли его редактировать. Панель покажет себя. Далее после редактирования установите Visible обратно в false для нормальной работы элемента.

Панель появляется при нажатии Escape анимировано. Это достигается элементом ToolBarPopupAnimation. Если посмотреть на его свойства можно найти много интересного. Так, например, если установить Interpolation в ItBounce, то панелька будет отскакивать от своего нормального положения, а после возвращаться обратно.

Теперь посмотрим, как создать свою собственную панель. Для этого:

• Поместите компонент TLayout под именем Layout1.
• Задайте его свойство Align в alTop для верхней панели, alLeft для левой или alRight для правой
• Укажите ширину width для левой или правой панелей или высоту height для верхней.
• Разместите компонент TToolBar внутри Layout1.
• Задайте компоненту TToolBar свойства width, height и align аналогично компоненту Layout1.
• Поместите на TToolBar содержимое панели.
• Укажите у TLayout свойcтво Visible в False.

Теперь Вы можете отобразить или скрыть панель просто меняя свойство False у элемента Layout1. Прикрутить анимацию к нашей панели так же не сложно.

Дополнительные элементы

Помимо старых элементов в FireMonkey появилось множество новых Winodws 8 элементов. Вот некоторые из них:

• TExpander — спойлер (выпадающая панель).
• TSwitch — переключатель

Анимация загрузки

Еще одна характерная черта Winodws 8 — это своеобразная анимация загрузки. Ее можно использовать и в Delphi. Для этого:

• Добавьте на форму элемент TAniIndicator.
  
• Установите его свойство StyleLookup.
• Установите свойство Enabled в true.

Теперь Вы можете запустить приложение и любоваться падающими шариками.

Создание новой формы

Для создания новой формы нужно вызвать команду меню File>New>Other. Выбрать категорию Delphi Projects>Delphi Files и выбрать FireMonkey Metropolis UI Form. Новая форма будет построена по пустому шаблону (только панель). Переключение между формами осуществляется так же, как и в VCL.