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

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.

Для написания кода приложения «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. Нажмите кнопку «Отладка» на главной панели инструментов

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

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

   Просмотр полноразмерных изображений

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

Теперь можно упаковать приложение «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.