Создание приложения Adobe Air с помощью Flex

В предыдущем уроке мы познакомились с платформой Adobe Air, в которой показано, как создать простое приложение. Помните, что Adobe Air — это среда, которая позволяет веб-разработчикам, обычно занимающимся программированием html / js / flash, создавать настольные приложения. В этом руководстве мы покажем, как создать приложение Adobe Air с Flex, набором технологий с открытым исходным кодом для разработки многофункциональных интернет-приложений.

Шаг 1 — Краткое введение в Flex

Flex — это фреймворк, который позволяет генерировать SWF-файлы. Вы можете спросить: в чем разница с Flash? Помимо различий за кулисами, основным отличием по отношению к Flash является наличие языка разметки под названием MXML. На рисунке ниже показан процесс создания SWF-файла.

Mxml — это язык на основе xml, который выглядит более дружелюбным для дизайнеров, чем Actionscript , и по своей концепции он похож на HTML (с тегами и свойствами). Во время компиляции Mxml транскодируется в Actionscript, который затем включается в окончательный SWF-файл. С этой точки зрения вы можете рассматривать Mxml как абстракцию Actionscript, с которой гораздо проще иметь дело. Flex SDK создан как инструментарий разработки для создания SWF-файлов (те же файлы, созданные с помощью Flash). После некоторой модификации из Adobe Flex теперь можно генерировать и приложения Adobe Air.

Шаг 2 — Установка и настройка Flex SDK

Flex SDK имеет открытый исходный код и может быть загружен здесь . Он содержится в zip-файле, который при раскрытии выглядит следующим образом.

Самые важные файлы, которые мы будем использовать в этом руководстве, находятся в каталоге bin/ . Более конкретно мы будем использовать:

• AMXMLC (компилятор)
• ADL (отладчик / лаунчер)
• ADT (инструмент разработчика)

SDK должен быть настроен для запуска из каждой папки вашего компьютера. Конфигурация очень похожа на конфигурацию Adobe Air, описанную в
предыдущий урок . Я сообщу об этом здесь для удобства. На MacOSX следуйте этому сценарию.

1. Откройте Терминал

   (/ Приложения / Утилиты / Терминал)

2. Введите cd чтобы убедиться, что вы находитесь в своей домашней папке
3. найдите файл с именем .profile или .bash_profile. Если его не существует, создайте его.
4. Найдите строку, похожую на эту: export PATH=$PATH:/usr/bin
5. добавить еще одну строку, как

   это: export PATH=$PATH:/flexsdk/bin

6. если путь к гибкому SDK содержит белый

   пробелы заключают в двойные кавычки (например, «/ my pathtosdk / air»)

7. в моем файле, например, у меня есть следующее

   строка: /Applications/flex_sdk_3/bin

8. Закройте и снова откройте терминал. Или введите source.profile

В Windows это процедура настройки SDK.

1. Щелкните правой кнопкой мыши на Мой компьютер, выберите Свойства
2. Выберите вкладку «Дополнительно» и нажмите кнопку «Переменные среды».
3. Выберите PATH из нижнего списка и добавьте путь к папке sdk в конце, как показано на рисунке.

Чтобы проверить конфигурацию, откройте оболочку и попробуйте ввести следующую команду:

Если результат похож на следующий, SDK установлен правильно.

Шаг 3 — Создание файла описания

Давайте создадим папку, которая будет содержать файлы нашего проекта. Как объяснялось в предыдущем руководстве, приложение Adobe Air должно включать файл описания, в котором описываются функции приложения. Давайте создадим файл с именем MyApplication-descr.xml со следующим содержимым.

Первая строка — это просто объявление формата файла; реальная спецификация начинается со второй строки до конца файла. id встраивает идентификатор приложения. Я добавлю домен своего веб-сайта, чтобы он был уникальным. Тег version указывает номер выпуска. Не забудьте изменить это соответственно, поскольку Вы выпускаете новые версии своего приложения. Тег filename , имя которого может вводить в заблуждение, содержит имя приложения, которое будет отображаться в главном окне приложения, в меню и т. Д. Content указывает первый файл, который будет загружен приложением Air при запуске. Этот файл обычно называют корневым файлом или точкой входа . Мы устанавливаем для свойства visible значение true, чтобы визуализировать
приложение как оно загружено. systemChrome указывает внешний вид окна, в котором размещается ваше приложение. Если вы установите его в качестве стандартного, у приложения будет окно, идентичное окнам операционной системы, которую вы используете. Если вы установите его none Flex
будет использовать собственный Chrome, который в MacOsX выглядит следующим образом.

На Windows (XP / Vista) это очень похоже. Основным отличием является расположение кнопок изменения размера / закрытия.

В этом уроке мы создадим приложение со стандартным Chrome. Свойство transparent указывает, является ли главное окно приложения прозрачным, тогда как строки 11 и 12 указывают начальную ширину и высоту окна при отображении на рабочем столе.

Шаг 4 — Написание актуального кода

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

Тег WindowedApplication содержит все ваше приложение, аналогично тегу <html> для веб-страниц. Название свойства определяет строку, которая будет отображаться в верхней части приложения. Флекс содержит огромный список графических компонентов. Полный список компонентов доступен здесь . Давайте теперь поместим кнопку в нашем окне.

Как вы можете видеть, способом, очень похожим на html, вы открываете тег ( Button ) и определяете функции компонента через атрибуты. В этом случае мы определяем текст, который будет отображаться на кнопке через свойство label (строка 3). Теперь мы добавим некоторое действие к кнопке.

Как вы можете видеть, мы можем встроить код ActionScript, напоминающий JavaScript, который позволяет определять то, что обычно называют «логикой» нашей программы (строки 3-11). В пятой строке мы импортируем Alert
компонент, который является своего рода всплывающим окном. Затем мы определяем функцию (строка 7). Связанное действие — показать окно Alert, содержащее сообщение «Hello» (строка 8). Чтобы прикрепить код по нажатию кнопки, мы просто заполняем атрибут нажатия кнопки названием функции (строка 12).

Шаг 5 — Компиляция и тестирование

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

Оболочка должна вернуть сообщение вроде этого:

Сообщение содержит предупреждение, которое, в отличие от ошибки, не требует исправления. Компилятор просто предлагает проверить код и «улучшить» его. Для правильного запуска приложения и для целей данного руководства нет необходимости его исправлять. Теперь мы готовы протестировать наше приложение. Из того же каталога мы вводим следующую команду:

(Обратите внимание, что мы передаем XML-файл дескриптора, а не MXML с реальным кодом). Мы должны увидеть следующее окно.

Если мы нажмем кнопку, предупреждение будет отображено правильно.

Шаг 6 — Стилизация приложения

Вероятно, вы недовольны стандартным цветом / макетом Flex SDK. Вы можете стилизовать ваше приложение Air с помощью CSS, как вы делаете со своими html-страницами. Конечно, есть различия по сравнению со стандартным CSS W3C, но идея и синтаксис почти одинаковы. Давайте, например, заменим на белую метку всех кнопок в нашем приложении. Мы вставляем фрагмент CSS в наш файл mxml, как на рисунке
ниже (строки 3-7).

Чтобы иметь представление о стилевых возможностях Flex, перейдите по этой ссылке .

Шаг 7 — Создание распространяемого файла

Последний шаг для создания нашего первого приложения — это упаковка распространяемого файла, который будет установлен на другие машины. Сначала нам нужен сертификат. Для получения более подробной информации о необходимости сертификата, пожалуйста, обратитесь к
предыдущий урок (шаг 7). Здесь мы сообщим только о команде для создания самозаверяющего сертификата, необходимого для сборки распространяемого пакета.

Окончательное приложение будет распространяться в виде файла .air, который можно создать с помощью следующей команды.

Параметр keystore указывает файл, содержащий сертификат, сгенерированный выше.
После этого нам нужно указать имя файла .air, который мы хотим сгенерировать, описание
application (содержится в MyApplication-descr.xml) и корневой файл, созданный ранее (MyApplication.swf). Эта команда запросит у вас пароль, который вы указали при создании сертификата. Теперь вы можете распространять полученный файл MyApplication.air среди своих пользователей. Напомните им, что они должны установить Air Installer .