Flash Builder Burrito

Начало года - мертвый сезон - время апгрейдов и апдейтов.

Windows 7 и весь свежий софт уже стоят, пора обновить рабочие инструменты.

Первый главный инструмент Flash Professional CS5 стоит, и вполне себе устраивает. После CS3, прогресс явно ощутим.

А вот Flash Builder, несмотря на достаточное количество нововведений, не сильно удивил. Инструментарий для кодера остался на том же уровне. Потуги создать видимость деятельности за счет нового представления веток классов в Package Explorer, честно говоря, не впечатлили.

Однако, судя по многочисленным анонсам, светлое будущее уже настает, и это - Adobe Flash Builder "Burrito". Большинство анонсов этого продукта датируется октябрем прошлого года, а значит, за три месяца мексиканская шаурма уже достаточно подрумянилась, чтобы ее попробовать.

Пока нет разделения версий самостоятельного продукта и плагина для Eclipse. Есть просто ссылка для скачивания. Однако, в Release Notes, описание установки плагина Eclipse есть. Проверим позже.

Итак, качаем и ставим.

И вот у нас появилась в коллекции продуктов от Adobe папочка "Adobe Flash Builder Burrito". Действительно, release notes не обманули. Есть каталог "utilities", в котором лежит инсталлятор плагина Eclipse. Это уже хорошо.

Забавно, в меню "Пуск>Все программы" ярлык упал прямо в корень. Запуск. Нас сразу крупно оповестили, что: либо вводи серийник, либо 60 дней знакомься. Что ж, будем надеяться что за это время выпустят новую версию и продлят нам срок.

Ой. при установке я выбрал русский язык и, видимо, зря это сделал. Половина пунктов меню на русском, остальное на родном. При осмотре интерфейса и создании проекта в голову лезли противоречивые мысли - хорошо оно или плохо, этот частично русский. В итоге пришел к однозначному мнению - для диалогов и тулбаров русский совсем не годится, ибо, многословен и многобуквен. Хотя, как не странно, казусов не обнаружил. Переведено всё грамотно. Конечно, фраза "Проводник пакетов", возможно, кого-нибудь и может смутить, но только не нашего брата flех-разработчика. В итоге, пришел к мнению переустановить английскую версию.

Кстати, как только я создал проект для Flax SDK 3.5 (ибо планирую еще как минимум год делать приложения под FP9.0), он уже содержал ошибку - не найдена локаль ru_RU. Достаточно в настройках компилятора заменить в строке дополнительных параметров -locale ru_RU на locale en_US.

А теперь - попробуем установить плагин Eclipse. Eclipse у меня последний на сегодня, 32-х битный, 3.6.1 Helios. Там же установлен Flex Builder 3 Plugin. Посмотрим заодно, как они подружатся.

Итак, находим инсталлятор плагина: C:\Program Files (x86)\Adobe\Adobe Flash Builder Burrito\utilities\FB_Burrito_Plugin_Utility.exe. Наученные опытом, выбираем английский язык.

Выбираем папку с Eclipse. По завершении процесса установки, следуем рекомендациям и делаем модификации в eclipse.ini:

-Xms256m

-Xmx512m

-XX:MaxPermSize=256m

-XX:PermSize=64m

Теперь смотрим. При запуске Eclipse получаем экран ошибок. Это наш Flex 3 дал о себе знать. Да, это была плохая идея. Увы, надо удалить Flex 3 и заново всё установить. В общем, совсем прощаемся с Flex3...

Итак, JRE переустановлено, Eclipse распакован, повторяю установку. Кстати, Eclipse по умолчанию руссифицирован. Кому такой расклад не привычен - меняем интерфейс на английский - добавляем в eclipse.ini:

-Duser.language=en

-Duser.country=US

(Спасибо 33 коровам! И, кстати это спасает проект от ошибки неверной локали).

Итак, у нас функционирует пробная 60-дневная версия Flash Builder Burrito. Работает пока нормально, сейчас ее поднастрою и попробую в деле.

* * *

Поработал на Burrito (Flex SDK 3.5). Нововведения пока не оказали значительного влияния на рабочий процесс. Столкнулся с несколькими глюками:

1. Старая болезнь билдера, когда при запуске дебага, процесс повисает на ожидании подключения к дебаггеру. Побеждается просто - поставить "Запуск от имени администратора" на эклипс, и, на всякий пожарный, на дебаговый FP.
2. Путаница при переименовывании классов. Сильно мешает при клонировании классов, когда копипастишь класс, потом его переименовываешь. Я так и не понял откуда растет баг, но раньше такого небыло.

Зато работа с темплейтами автокомплита кода порадовала. При работе в редакторе, нажимаем CTRL+SPACE+SPACE, и получаем варианты для быстрой вставки.

* * *

Серьезный баг, здорово мешает работе.

Если пользоваться автокомплитом (content assist) во flex-коде, довольно часто окно с выбором вариантов подвисает, затем подвисает и вся оболочка. Что бы вернуться к работе нужно закрыть Eclipse и снова запустить.

Code-behind или mx:Script?

До некоторого времени, я выносил объемный AS-ккод из MXML-компонентов, используя тег <mx:Script/>:
<mx:Script source="includes/ComponentName.as"/>
Каких-либо логических недостатков такого метода я не наблюдал, однако столкнулся с постоянной глючностью автокомплита AS-редактора FlexBuilder. И вот, когда меня в конец это достало, решил взять на вооружение способ Code-behind.

Про Code-behind пишут следующее:
Code Behind
Building components by using code behind
Code-Behind in Flex 2
Code-behind gotcha in Flex Builder for AIR apps
Советы новичкам

В кратце, суть проста - наш MXML компонент ComponentName не базируется напрямую на основном компоненте, например, Canvas, а на компоненте-"прослойке" ComponentNameClass (также используется суффикс -Base). Код этого компонента размещается в ComponentNameClass.as. Его класс является потомком класса того самого основного компонента (Canvas) и содержит весь необходимый AS-код.

Все компоненты, которые имеются в ComponentName.mxml и к которым нужен доступ, должны быть объявлены в ComponentNameClass.as как public. Методы и обработчики событий - public или protected.

Вообще, конечно, это очень правильный подход. Только напрягает пара фактов - нужно возиться с объявлением класса и объявлять все компоненты, с которыми необходимо иметь дело в as-файле. Если, к примеру, я вдруг передумаю использовать в MXML вместо LinkButton (а он уже объявлен так в AS-компоненте) простой Button, получу ошибку - необходимо везде сделать замену. Выход - объявлять их дальних предков или вообще интерфейсы.

А вот интересно - есть ли средства автоматизации этого процесса? Что-то типа команды "Create Code-behind Class" или при создании MXML-компонента подобная галочка. Я не нашел...

Первый законченый проект на Flex. Грабли и впечатления.

Вот закончен еще один проект. И отличие его от предыдущих - это чистый Flex-проект построенный на MXML-верстке.

О проекте

Вкратце - результат проедставляет собой презентацию-каталог (оффлайн, версия для CD/DVD и версия для TouchScreen), в котором основной элемент - интерактивная карта России, разделенная на регионы. По клику на регионы осуществляется его увеличение и вывод городов. По клику на город, выводится панель со списком типов объектов (презентуемых заказчиком). По клику на тип объекта, открывается список самих объектов с фото-превьюшками и описаниями. По клику на описание объекта выводится более подробное описание с теми же фото-превьюшками, по клику на которые показывается крупное фото. Кроме того - два доп-раздела "О компании" и "Контакты".

На flash-разработку проекта я выделил две недели, т.е. в реальных условиях менее 10 рабочих дней.

На распутье

Сначала возникло желание делать проект на моем старом (правильнее сказать - устаревшем) но отработанном презентационном движке AS2. Но структура проекта совсем не похожа на послайдовку, поэтому возник соблазн сделать презентацию другим способом, и полностью задействовать Flex.

Дизайн-макет, на первый взгляд, показался довольно сложным, но глаз уже уловил, насколько выигрышно было бы использовать Flex-верстку. Верстать и программировать динамические списки, поставляемые выборками из XML-базы, "ручками" на AS2 - тоска.

Опыт работы с Flex за плечами уже есть, AS3 освоен. Но имеют место сомнения: "А вдруг упрусь в какую-нибудь проблему или глюк, и сроки полетят?" "Сроки жесткие, может быть лучше по-старинке, AS2?" "Зато уверенность, стабильность и предсказуемость". После часа раздумий, решился рискнуть - Flex.

За работу

Моя рабочая платформа - Flex Builder 3 Plug-in for Eclipse.

Настало время применить теорию на практике. Для начала, "порезал" макет, подготовил все "ассеты" и начал верстать экраны.

Взаимодействие пользователя представляет собой сложную систему состояний экрана. Решил использовать систему состояний Flex (states). И сделать это так - сначала сверстать все элементы приложения в базовом состоянии, а потом создать ряд состояний для каждого этапа работы приложения, в которых скрывать/открывать и трансформировать элементы.

При верстке проблем не возникло. Очень напоминает верстку сайтов. При помощи стилей можно творить чудеса - использовать скины даже не потребовалось. Всё необходимое было сверстано совсем без затыков за один-два дня. Впечатления самые положительные.

Параллельно, моим коллегой готовилась флэшка с картой. Клип с картой подгружается компонентом mx:SWFLoader. Сначала мы решили сделать ее в виде большого таймлайна, и навигация по карте осуществлялась бы командами gotoAndPlay(""). Выбор такого решения (конечно не очень удачного) был обусловлен желанием сделать карту в виде видео-ролика с 3D-эффектами. В итоге сроки свели задачу к простой флэш-анимации :). Позже стало ясно, что способ тайм-лайновой анимации совсем не интересен и карту анимировали программно Tween-ом.

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

Зашивание проекта в Zinc особых трудностей не составило. Zinc спокойно интегрируется во Flex-проект. Использовались основные объекты глобального класса mdm:
mdm.Application - для получения директории, из которой запускается приложение,
mdm.Application.Library - для работы с библиотекой приложения.
mdm.FileSystem - для тестирования наличия файлов.

В итоге, хочется сказать, что проект завершился успешно. Скорость разработки на Flex превзошла мои ожидания, и сэкономленное время позволило дополнительно отладить и отточить приложение (переделать анимацию интерактивной карты коренным образом). Впечатления от работы с Flex остались самые положительные, и я рад, что рискнул.

* * *

Ниже изложено несколько нехороших ситуаций:

Неверно спроектированная верстка

Дизайн-макет был разработан на разрешение 1600х1200 - для TouchScreen. Позже, когда приложение было уже на этапе отладки, выяснилось, что нужна еще одна версия - предназначенная для распространения на CD/DVD, а значит, под меньшее разрешение. Пришлось срочно переверстать новую версию под 1024х768. Если бы я изначально заложился под трансформируемую верстку (благо, во Flex эта возможность реализована превосходно), лишней работы делать бы не пришлось. И версии можо было бы не плодить. На будущее - нужно изначально закладываться на гибкую верстку - стоит того.

Внедрение шрифта формата .OTF

При внедрении шрифта возникла следующая проблема. Мне необходимо внедрить шрифт MyriadPro. Это TrueType-шрифт формата .OTF.
Код внедрения в стили:

@font-face
{
font-family: MyriadPro;
font-weight: normal;
src: url("Assets/Fonts/MyriadPro-Regular.otf");
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E, /* Punctuation and Symbols */
U+00FC-U+00FD, /* UE */
U+0410-U+042F, /* Cyrillic Upper-Case */
U+0430-U+0451; /* Cyrillic Lower-Case */
}

В окне FB Design шрифт отображается некорректно, выдает ошибку транскодирования: "Exception during transcoding: Font for alias 'MyriadPro' with plain weight was not found at: ...MyriadPro-Regular.otf ..." И то же самое для версии "bold".
Однако, при компиляции проекта ошибки нет и в приложении шрифт отображается корректно на разных компьютерах. Отнес это к проблемам (читай - глюкам) средства визуальной разработки FB.

Эффект появления/скрытия и states

Пришлось повозиться с эффектом mx:Fade, используемого для появления/скрытия некоторых компонентов.

По началу я предположил, что если я создам эффекты Fade (один для появления и другой для скрытия) и укажу его для некоторых компонентов в стилях showEffect и hideEffect, то при смене состояния, при изменении свойства visible, компоненты будут плавно появляться/исчезать. Как бы не так. При формировании состояния, выполняются (тупо, без каких либо перепроверок и оптимизаций) все действия - начиная с базовых состояний. Если в базовом состоянии visible устанавливается в false, а в текущем, базирующемся на нем, в true, то будет выполнено два действия со всеми вытекающими последствиями. Если Fade-скрытие еще не успело завершится, а уже вызывается Fade-появление, то последнее будет просто проигнорировано. Короче - полный разлад и совсем не адекватный результат. То же самое относится и к другим видам эффектов.

Для анимации такого рода необходим другой прием. При использовании transitions всё сразу встало на свои места. Конечно, это принесло другие сложности, но зато эффект появления/скрытия работает как часы.

Маскирование контента SWFLoader

Проблема связана со следующей особенностью. Клип интерактивной карты в процессе работы приложения может трансформироваться (трансформируемый клип расположен в главном таймлайне загружаемой флэшки). Но он должен отображаться в строго отведенной прямоугольной области. Казалось бы, чего проще - поместить его в Box, у которого horizontalScrollPolicy="off" verticalScrollPolicy="off" clipContent="false". Не работает. Причем странно - пока клип карты перемещается, границы отсекаются. Как только клип останавливается, всё что вылезает за пределы области появляется.

Пришлось накладывать маску программно, высчитывая координаты и размер области.

Воспроизведение FLV

В самом конце столкнулись со следующей проблемой. Презентация начинается с видео-заставки. Заставка - файл FLV, который подгружается в mx:VideoDisplay. Проблема заключалась в том, что компонент отказался воспроизводить внешнее видео, если презентация находится на удаленном сервере (с этим то всё ясно - включена опция -use-network=false), или на сменном носителе - записанная на CD/DVD (а вот это - критично).

К сожалению, FLV нельзя внедрить посредством @Embed. Но это может сделать Zinc, чем я немедленно воспользовался. Но такое решение не самое красивое. В дальнейшем придется выяснить, почему не воспроизводится FLV со сменных носителей, и как этого избежать. Возможно, необходимо установить параметры безопасности, а может быть проблема связана с задержками доступа к CD/DVD приводу в связи с чем, что-то рассинхронизировалось в приложении.

Adobe Flex Builder 3. Ставим вторую бету под Eclipse

Заходим на Adobe Flex Builder 3 Public Beta 2 и качаем.
Любопытно - триальный срок обнулится или нет?...
Запускаем flexbuilder3_b2_win_plugin_101107.exe.

Оставляем директорию по умолчанию.
Говорит что нерекомендует поверх старой ставить. Забиваем.

Получаем в конце такое окно с сообщением, которое нам поможет действовать дальше.
Действуем по инструкции.

Eclipse перезагрузился, Flexbuilder опять работает! Триальный период обновился до 60 дней.

Flex Builder. Окно Navigator

Добавил в окне Navigator в проект файл Fla. Чтобы он открывался, надо выбрать во всплывающем меню Open width > Other >External Programs > Flash Document.

В проекте, новые папки с рессурсами (swf) синхронизируются с одноименными папками в каталоге bin, которые создаются автоматически. Синхронизируются они как-то непонятно. Причем, если это сделать принудительно - перетащить мышкой - выдается ошибка. Однако, если в папке всё удалить и обновить (Refresh), произойдет синхронизация, и содержимое папки в проекте скопируется в папку в bin.

FlexBuilder. Как быстро добавить Import для класса в тексте кода

Поставить курсор на конец имени класса, нажать Ctrl+Space и затем ввод. Если в списке только один возможный класс, ввод нажимать даже не потребуется.

Flex Builder. Заметки на разные темы

С увеличением числа классов, становится неудобно переключаться по табам окон. Удобнее выбирать в окне Navigation.

Иногда удивляет забота система проверки ошибок: соображает что надо ругаться когда в конструкторе есть параметр, а super с этим параметром я не вызвал. Обязательный параметр - еще б не ругался.

Хорошо проектировать структуру классов на MS Visio, используя Software > UML Model Diagram (US Units). С (Metric) не получилось повернуть документ в альбомное положение.

Создал объектную структуру используя в основном UML Static Structure. С именами классов, методами и свойствами не стал заморачиваться. Хотя, по идее, можно вообще всё сразу спроектировать, но я еще до такой крутизны не дорос.

Хорошо придерживаться принципа - семейства классов, которые наследуются от абстрактного класса определять в отдельный Pacage, вложенный в основной.

Можно загрузить SWF и иметь доступ к клипам, размещенным в нем. Для этого привести Loader.content к DisplayObjectContainer и пройти в цикле используя getChildAt.

Ключевое слово super - в теле конструктора вызывает конструктор предка. Если в конструкторе явно не вызывать super(); то конструктор предка будет выполнен до первого оператора в теле конструктора. Это может быть полезно для выполнения каких-либо действий до вызова конструктора предка.
В остальных методах класса, super позволяет вызывать версии методов предка - super.parentMethod();

Contrl+Shift+D - вставляет блок комментариев. Если курсор над функцией, добавляет спец-параметры @return, @param.

Shift+F2 - Eclipse SDK Help - удобно быстро вызывать подсказку для любого слова на котором стоит курсор.

Продолжаем изучать FlexBuilder 3

Знакомиться с Flex, будем по документации, публикуемой здесь нашими уважаемыми передовиками Flash-производства.
Статья о введении во Flex Builder 2 дает общее понятие о Flex.

Создание компонента во Flash CS3 IDE

Создаем новый Fla для AS3.
Добавляем компонент Flex Component Kit - про него вкратце я писал здесь. Создаем символ "_name_". Вызываем команду Make Flex Component. Получаем в Output: "Component "_name_" is ready to be used in Flex." В свойствах Linkage символа произошли изменения - символ предназначен для экспорта в ActionScript. В свойствах публикации отмечаем Export SWС. Публикуем.
Добавляем в свойствах проекта ActionScript Build Path > Library path > Add SWC наш компонент. Теперь в коде можно использовать класс нашего символа "_name_".

Возникла проблема с обновлением компонента. Если просто его скопировать поверх старого, при компиляции Flex - проекта ничего не изменится. Если файл компонента "перетащить" в папку проекта в окне Flex, компонент успешно обновляется.

Заметки по работе с проектом во Flex

Проекты отображаются в окне "Navigator". При закрытии, проекты не исчезают, а сворачиваются в папочки. При удалении, предлагается сохранить содержимое проекта или удалить его с диска.

Создавая папку в проекте, она создается на диске в папке проекта. После перетаскивания файлов в папки проекта, файлы копируются.

Организация проектов порой не радует. При удалении проекта с удалением файлов, Flex удаляет вообще все файлы в одноименной папке. Ужас. Для того, чтобы открыть существующий AS проект, надо создать новый проект с тем же именем, однако все настройки удалятся.

Не получается все файлы проекта хранить в одной папке: файлы, не относящиеся к Flex-разработке, нежелательно хранить в папке Flex-проекта - появляется предупреждение о том, что папки с источниками являются вложенными в папку Flex-проекта. А WorkSpace подразумевает, что в нем находятся только Flex-проекты. Можно, конечно использовать разные WorkSpace. По-видимому, придется разделять место размещение Flex-проектов и исходных материалов для Flex-разработки. Вопрос где лучше - в пределах WorkSpace или где-то в другой директории.

Каждый Workspace имеет свою конфигурацию. Например, набор проектов, перспектива, настройки интерфейса, snippet-ы и др.

В Eclipse есть понятие Perspective - конфигурация интерфейса, соответствующая определенному виду разработки. В частности - перспектива Flex Development.

Eclipse добавляет инструменты, которых нет в Flex Builder. Например, это быстрая вставка шаблонов кода Snippets.

Полезно использовать Tasks (напоминания) и Bookmarks (закладки).
Интересная команда - Source > Organize imports - убирает лишние импорты. Но не добавляет требуемых. Требуемые добавляются при выборе соответствующего класса из списка подсказки.
Тут же - команда Refactor - Позволяет заменить имя переменной или функции по всему коду. Еще - вставка разнокалиберных комментариев.

Установка Flex Builder 3 и его плагин под Eclipse

Ставлю Flex Builder Plugin под Eclipse.
Запускаем инсталлятор. Единственное что смутило - спросил установить дебаг-версии плагинов FlashPlayer 9, а я только сегодня поставил свежие версии. Интересно, они поверх встали?.. (Да, поверх.)
Всё установилось. Спрашивает, хочу ли я прочитать инструкции по установке расширений Coldfusion для Flex Builder 2 (почему то 2). Смотрим. ColdFusion MX 7.0.2 у меня не установленно, так что не вижу смысла читать дальше. Запомним на будущее они лежат здесь: C:\Program Files\Adobe\Flex Builder 3 Plug-in\ColdFusion Extensions for Flex Builder\Installing the ColdFusion Extensions for Flex Builder Moxie.htm
Запускаю из меню Пуск. Спрашивает где будет папка для workspace. Создаю, указываю.

Окошко Welcome весьма привлекательно.
Создаем новый проект - выбрал Flex project. Даю название, тип сервера - никакой. Версия Flex SDK - по умолчанию Flex Moxie M2. Можно задать еще ряд параметров. Оставим пока всё как есть. Таак. началось. Спрашивает серийный номер... Интересненько. Нажал Purchase, на что после нескольких ошибок в дисководе F, выкинуло на сайт. Странно, что никаких намеков на Flex там нет. По-видимому заглушка на будущее. Ладно. Тогда "Try". Ну вот, собственно мы видим наш Flex Development.

Ладно, закрываем пока. На месте нашего проекта создалось множество файлов и папок, причем, проект уже скомпилировался и появились несколько версий SWF.

Попробуем-ка теперь установить Flex Builder таким как он есть.

Запускаем. Инсталлятор задает все аналогичные вопросы. В итоге получаем всё то же самое, внешнее различие незначительно – заключается в дизайне виджетов и расположении иконок. Позже обнаруживаются и другие различия.
Сравниваю. Пока склоняюсь к дальнейшей работе на Eclipse.

Беру пример из движка Fisix, выбираю New ActionScript Project. Добавляю размещение SWC в разделе Project > Properties > ActionScript Build Path > Library path > Add SWC,
копирую в корень проекта файл AS-кода, ставлю Set As Default Application.
Наше приложение отлично работает. Даже работает trace в окне Console.

Подсказки работают (принудительно - Ctrl+Space). Работают адекватно только если файл открыт в рамках проекта. Help работает превосходно.
С нормальной подсветкой пока глухо. Попробуем поискать плагины.

Flex Builder 3.0, Eclipse

Сегодня скачал Flex Builder 3.0 и Flex Builder Plugin для Eclipse с labs.adobe.com. Пусть будут. Разберемся что лучше. Тем и будем пользоваться.

Кстати, качаем последний релиз Eclipse. На сайте, в разделе Downloads предлагается несколько вариантов этой платформы, заточенных под разные направления программирования.
Интересно - с OSFlash идет ссылка на другой раздел. Ага. OSFlash нас призывает пользоваться Web Tools Platform. Точно - в разделе Downloads справа в меню есть такая ссылка. Слева тоже есть просмотр всех проектов By project, в котором находим WST - Web Standards Tools. А вот здесь новости проекта.

Ну всё. Качаем отсюда. Качаем wtp-all-in-one-sdk-win32 - всё в одном. Итальянский линк качается лучше. Запускаем. Впечатлило! Но ничего не понятно. Пока. Для начала поставим под это дело Flex. Но это в следующей серии.