Создание простейшего мобильного приложения flex на Flash Builder 4.5

Статья является вольным пересказом статьи Hello World: Build a mobile app in five minutes.
Сейчас можно создавать приложения для Google Android. К июню Adobe обещают выпустить обновление, позволяющее разрабатывать мобильные приложения для BlackBerry Tablet OS и для IOS.
Рассмотрим, как создать мобильное приложение для десктопа и для самого мобильного устройства.

p.s.: тут на днях блоггер падал и эта статья потерялась, пришлось переписать. Боюсь, как бы мысль не ускользнула (чего я там в прошлый раз написал). 

Создание проекта. 
1. Выберем File > New > Flex Mobile Project
2. В пункте Project Location укажем имя проекта HelloWorld.
3. Больше ничего не меняем, тыкаем "Next"

4. В качестве целевой платформы сейчас указан только Google Android. На закладке Application Template можно выбрать один из трех стилей, по умолчанию View-Based Application

5. Следующий шаг необязательный. Выберем вкладку Permissions, здесь указываются разрешенные службы при выполнении приложения на девайсе. Оставим INTERNET. Немного подробнее про разрешения здесь.

6. Кликаем "Next", попадаем на экран Server Settings. Здесь все оставляем как есть и двигаем дальше "Next".

7. Дальше все как обычно, единственное, на что надо обратить внимание, это поле Application ID. Заполнять обязательно уникальным именем. Это имя станет идентификатором приложения.

Теперь все. Тыкаем "Finish".

В папке проекта будут созданы два файла: HelloWorld.mxml (файл приложения - как правило не меняется) и HelloWorldHomeView.mxml (начальный отображаемый экран приложения)

В файл HelloWorldHomeView.mxml после </fx:Declarations> добавим следующий код:

<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="Hello, World!"/>
<s:Button label="Continue" click="button1_clickHandler(event)" styleName="next"/>
</s:VGroup>

<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
navigator.pushView(MyNewView);
}
]]>
 </fx:Script>

Сохраним изменения.
Теперь создадим новый экран MyNewView. Для этого правый клик на папке views (содержащей HelloWorldHomeView.mxml), далее New > MXML Component.

 Задаем имя новому компоненту MyNewView, больше ничего не меняем и тыкаем "Finish":
 
 В файле MyNewView.mxml перед закрывающим тегом </s:View> вставим следующий код:

<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="Success!"/>
<s:Button label="Back" click="button1_clickHandler(event)" styleName="back"/>
</s:VGroup>


<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
navigator.popToFirstView();
}
]]>
  </fx:Script>

Сохраним изменения.

Теперь протестируем приложение сначала на десктопе.
При запуске появится такое окошко, где необходимо указать метод запуска приложения (On desktop) и девайс, для которого все это пишется:

Давим "Run" и получаем рабочую аппликуху:

Вот собственно и всё! Что, ещё что-то? Ах ну-да, надо же еще и на девайсе потестить.

Тестирование на мобильном девайсе.
Устройство с Android должно быть подключено к компу через USB, на компе и девайсе тдолжен быть установлен Adobe AIR с версией не ниже 2.6. Также, на устройстве должен быть включен режим отладки. Для Android 2.2 это можно сделать, запустив Applications > Development и выбрав USB Debugging (Настройки > Приложения > Разработка > Отладка через USB).
Теперь в проекте HelloWorld нажмём на стрелочку рядом с кнопкой Run и выберем Run configurations

Выберем метод запуска "on device" и жмем "Run".
Если видим пустую табличку,

то это значит, что FB по каким-то причинам не распознал устройство. Жмем на ссылку "я не вижу моего подключенного устройства" или идем на русскоязычную страницу "Подключение устройств Google Android" и решаем проблему с подключением.
Вуаля.
Обратите внимание, что приложение называется "HelloWorld-debug". Настало время создания release build.

Упаковка приложения для распространения.
Во Flash Builder выбираем меню "select Project > Export Release Build"
Видим такое окно

Все текстовые поля должны быть правильно заполнены, жмем "Next":

 Здесь нас просят подписать приложение собственным сертификатом. Если его нет, давим "Create" и генерируем новый

 На вкладке Package Contents можно посмотреть на все включенные в сборку активы

 Жмем "Finish"
Приложение должно установиться на устройство и запуститься на нём.

Изменение дизайна кнопок при помощи обложек.
Скачаем архив образца проекта HelloWorld-source.zip и распакуем в какую-либо папку. Во Flash Builder выберем File > Import Flash Builder Project и в диалоге укажем файл HelloWorldSkins.fxp. В Package Explorer появится новый проект HelloWorldSkins. Найдем в нём файл src/(default package)/main.css и перетащим его в аналогичную директорию проекта HelloWorld (src/(default package)). Если спросят, подтвердить. В пакете src создадим новый пакет skins (File > New > Package) и перетащим в него 4 файла:

• BackButtonSkin1.mxml
• BackButtonSkin2.mxml
• NextButtonSkin1.mxml
• NextButtonSkin2.mxml

из одноименного пакета проекта HelloWorldSkins.
В итоге должна получиться такая структура проекта:

В заверешение в файле HelloWorld.mxml перед закрывающим тегом </s:ViewNavigatorApplication> вставим строку:
<fx:Style source="main.css"/>
Сохраняем, запускаем, наслаждаемся.

Если в файле main.css у NextButtonSkin1 и BackButtonSkin1 поменять "1" на "2", то при компиляции приложения увидим другой стиль кнопок.