Создание первого настольного приложения Flex AIR с помощью Flash Builder

Чтобы быстро на практике продемонстрировать, как работает Adobe® AIR®, используйте эти инструкции по созданию и упаковке простейшего SWF-приложения AIR «Hello World» с помощью Adobe® Flash® Builder.

Загрузите и установите Flash Builder, если это еще не сделано. Кроме того, следует загрузить и установить последнюю версию среды Adobe AIR, которая доступна на веб-сайте www.adobe.com/go/air_ru.

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

Flash Builder включает инструменты, необходимые для разработки и упаковки приложений AIR.

В начале для создания приложений AIR во Flash Builder или Flex Builder выполняется тот же шаг, что и при создании других проектов приложений Flex: определяется новый проект.

  1. Запустите Flash Builder.

  2. Выберите «Файл» > «Создать» > «Проект Flex».

  3. Введите AIRHelloWorld в качестве имени проекта.

  4. Приложения AIR считаются типом приложений во Flex. Существует два типа.

    • Веб-приложения, которые запускаются в Adobe® Flash® Player.

    • Настольные приложения, которые запускаются в Adobe AIR.

    Выберите тип настольных приложений.

  5. Для создания проекта нажмите «Готово».

Проекты AIR изначально состоят из двух файлов: основного файла MXML и файла приложения XML (также называется файлом дескриптора приложения). В последнем файле определены свойства приложения.

Дополнительные сведения см. в разделе Разработка приложений AIR в программе Flash Builder.

Написание кода приложения AIR

Для написания кода приложения «Hello World» выполняется правка файла приложения MXML (AIRHelloWorld.mxml), который открывается в редакторе. (Если файл не открыт, используйте навигатор проекта, чтобы открыть его.)

Приложения Flex AIR для настольного компьютера заключены в тег WindowedApplication в MXML. Тег WindowedApplication в MXML создает простое окно, включающее простейшие элементы управления окна, такие как строка заголовка и кнопка закрытия окна.

  1. Добавьте атрибут title к компоненту WindowedApplication и назначьте ему значение "Hello World":

    ?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
    </s:WindowedApplication>
  2. Добавьте в приложение компонент Label (поместите его внутрь тега WindowedApplication). Задайте для свойства text компонента Label значение "Hello AIR" и установите ограничения макета, чтобы обеспечить центрирование элемента, как показано на следующем рисунке:

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
     
        <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
    </s:WindowedApplication>
  3. Добавьте следующий блок стиля сразу после открытия тега WindowedApplication и перед тегом только что введенного компонента Label.

    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style>

Эти настройки стиля применяются ко всему приложению и визуализируют фон окна в немного прозрачный серый цвет.

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

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       title="Hello World"> 
     
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

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

  1. На панели навигатора Flex найдите файл дескриптора приложения в исходном каталоге проекта. Если проект назван AIRHelloWorld, этот файл будет называться AIRHelloWorld-app.xml.

  2. Дважды щелкните файл дескриптора приложения, чтобы отредактировать его в среде Flash Builder.

  3. В коде XML найдите закомментированные строки для свойств systemChrome и transparent (в свойстве initialWindow). Удалите комментарии. (Удалите разграничители комментариев "<!--" и "-->".)

  4. Задайте для свойства systemChrome текстовое значение none, как в следующем примере:

    <systemChrome>none</systemChrome>
  5. Задайте для свойства transparent текстовое значение true, как в следующем примере:

    <transparent>true</transparent>
  6. Сохраните файл.

Проверка приложения AIR

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

  1. Нажмите кнопку «Отладка» на главной панели инструментов

    Также можно выбрать в меню «Запуск» > «Отладка» > AIRHelloWorld.

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

  2. С использованием свойств horizontalCenter и verticalCenter элемента управления Label текст размещается в центре окна. Перемещайте или изменяйте размер окна также, как в любом другом приложении для настольного компьютера.

Примечание. Если приложение не компилируется, наудите и исправьте ошибки в синтаксисе или написании введенного кода. Ошибки и предупреждения отображаются в среде Flash Builder с помощью представления «Проблемы».

Упаковка, подписывание и выполнение приложения AIR

Теперь можно упаковать приложение «Hello World» в файл AIR для распространения. Файл AIR — это архивный файл, содержащий файлы приложения, к которым относятся все файлы в папке bin данного проекта. В этом простом примере такими файлами являются SWF- и XML-файлы приложения. Пакет AIR распространяется среди пользователей, которые затем используют его для установки приложения. Обязательным шагом в этом процессе является цифровая подпись приложения.

  1. Убедитесь, что приложение правильно скомпилировано и работает как предполагалось.

  2. Выберите «Проект» > «Экспорт сборки выпуска».

  3. Убедитесь, что указан проект AIRHelloWorld и приложение AIRHelloWorld.mxml.

  4. Выберите «Экспорт в виде подписанного пакета AIR». Нажмите кнопку «Далее».

  5. Если имеется существующий цифровой сертификат, нажмите «Обзор», чтобы перейти к нему и выбрать его.

  6. Если необходимо создать новый самозаверяющий цифровой сертификат, выберите «Создать».

  7. Введите необходимую информацию и нажмите «ОК».

  8. Нажмите кнопку «Готово», чтобы создать пакет AIR с названием AIRHelloWorld.air.

Теперь можно установить и запустить приложение из навигатора проектов в среде Flash Builder или из файловой системы, дважды щелкнув соответствующий файл AIR.