Статья будет полезна тем, кто хочеть познакомиться с Flex и его интеграцией с PHP, оценить плюсы и минусы использование этого решения в продакшен. Хочу заметить выступление почти двух годичной давности, однако многое (практически все=) до сих пор актуально.
PHP&Flex, «новая» альтернатива для создания Rich Internet Applications
Главной тенденцией последних лет в области разработки веб приложений является все большее и большее качественное улучшение и усложнение пользовательских интерфейсов. Для привлечения пользователей, необходимо делать все более удобные, быстрые и качественные интерфейсы. Совершенствуются текущие технологии, появляются и новые. Один из ярких представителей в нише построения RIAs является семейство продуктов Adobe Flex. Данный материал является обзорным по этой новой технологии и призван дать общее понимание принципов и идей заложенных в Flex и его связке с PHP. Также мы постарались максимально насытить эту статью ссылками на более подробное описание рассматриваемых тем, чтобы облегчить дальнейшее изучение.
Что такое Flex?
Adobe Flex 2 – это решение, позволяющее разрабатывать RIAs на основе родственной Flash технологии. Описание интерфейса, и не только, основано на диалекте XML – MXML. Описание клиентской логики на ActionScript3 (далее AS3). В результате компиляции MXML транслируется в обычный AS код, который передается компилятору mxmlc для получения swf фаила.
Flex состоит из нескольких продуктов:
Adobe Flex Builder – IDE основанная на eclipse. Позволяет быстро разрабатывать AS3 и MXML. Обладает мощным инструментом визуального проектирования интерфейсов. Подсветка синтаксиса и подсказки, встроенный Debbuger, help и многое другое.
Adobe Flex framework and SDK – основанный на компонентах фреймворк. Содержит огромное количество расширяемых компонент, позволяющих разрабатывать интерфейсы любой сложности. Бесплатный. Идет в комплекте с Flex Builder
Adobe Flex Charting – библиотека, позволяющая создавать всевозможные интерактивные диаграммы и графики. Платная
Adobe Flex Data Services – набор серверных компонент, отвечающих за быстрый и удобный обмен данными между Flex и JAVA приложениями.
Краеугольным камнем все этого является набора, является Flash Player (для работы с Flex приложениями нужна 9-ая версия). Главным преимуществом плеера является то, что его работа не зависит от платформы или браузера! Простота установки в купе с его потрясающе маленькими размерами (1.1М) способствует его повсеместному распространению.
Разработка приложений на Flex
Как уже говорилось выше, проектирование интерфейсов осуществляется посредством описания их тегами MXML. Например,
MXML также используется для декларативного связывания данных, определения обработчиков событий, эффектов, связи с удаленными источниками данных и описания структур данных.
Интерфейсные компоненты делятся на два вида:
• Controls, Navigators – элементы интерфейса. Такие как Button, DataGrid, Tree, ProgressBar…
• Containers – области, содержащие различные контролы и определяющие их расположение на экране. Такие как Hbox, Vbox, Panel, Grid…
На рис. 1 наглядно показано структура Flex приложений:
Помимо визуальных компонент, существуют другие вспомогательные компоненты для построения интерфейсов:
• Validators and Formatters – проверка и форматирование текста. Такие как RegExpvalidator, CreditCardvalidator, DateFormatter…
• Effects – визуальная или звуковая анимация элемента, которая происходит за некоторый промежуток времени (в миллисекундах). Такие как, всевозможные появления, движения, поворот, увеличение, звуковые… Набор эффектов действительно впечатляет!
• View States – состояния интерфейса. Каждое состояние характеризуется различным набором компонент. Вы можете переключаться между состояниями, задавать различные эффекты на переключение.
Полный список всех интерфейсных компонент с примерами Вы можете найти на http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
Надо заметить, что построение интерфейсов возможно не только с помощью MXML тегов, его еще можно описывать посредством AS кода. На самом деле, для Flex это абсолютно равносильные способы, все зависит только от Ваших задач и предпочтений. Это объясняется тем, что каждый MXML тег соответствует либо классу, либо их свойствам. Т.е. когда Вы пишите:
<mx:Button label=”Test”/>
Вы создаете экземпляр класса Button и инициализируете у него свойство label.
Важной особенностью MXML является его расширяемость. Вы можете создавать собственные теги (читаем компоненты) и далее их использовать также как и стандартные, визуально проектировать интерфейсы на их основе.
Пример:
<andry:CustomButton label=”Click Me”/>
и
Наподобие CSS в HTML, при разработке Flex приложений также можно определять стили. Каждый визуальный компонент имеет собственный набор параметров стиля, позволяющий менять многие аспекты его отображения. Стили можно изменять в runtime. Для определения стилей компания Adobe разработала Flex Style Explorer, в котором Вы можете создавать собственные стили, визуально наблюдая, как каждый из параметров влияет на отображение. Есть и альтернативный вариант. Для продвинутого скининга предлагаю ознакомиться с этой статьей. Про разделение труда между дизайнерами и программистами можно почитать тут.
MXML имеет много аспектов применения, некоторые из них мы, вкратце, рассмотрели. Однако для описания логики Flex приложения необходимо использовать ActionScript.
ActionScript является объектно-ориентированным языком программирования, основанным на драфте 4 ECMAScript (ECMA-262). Основные особенности языка:
• Наследование
• Интерфейсы
• Модульность
• Спецификаторы доступа
• Типизация переменных, свойств и параметров (во время компиляции)
• Статические члены
• Приведение типов
• Reflection API
• Динамические классы (runtime добавление методов и свойств)
• ECMAScript for XML (E4X). Основано на стандарте ECMA-357. В отличии от стандартного парсинга XML, E4X транслирует XML в нативные, для конкретного языка, типы данных, что значительно облегчает работу с XML.
• DOM3 модель событий
И многое другое. Конечно же, вся мощь AS3 определяется его фреймворком, который обладает весьма богатыми возможностями – продвинутое управление событиями, коллекциями… огромное количество компонент включено впечатляющую иерархию классов Flex Framework.
Вы можете использовать ActionScript в Ваших Flex приложениях, добавляя блоки кода с помощью <mx:Script> тега или, включая внешние ActionScript файлы. Вы также можете импортировать внешние файлы классов или целые пакеты для использования в MXML приложении. Flex извлекает ActionScript и создаёт файл класса, который затем связывается с конечным SWF файлом. Компоненты, созданные в ActionScript, могут содержать графические элементы, определять свою бизнес логику или расширять имеющиеся Flex компоненты. Они могут наследоваться от любых доступных в Flex компонентов.
Другие аспекты разработки Flex приложений
При принятии решения о разработки приложения основываясь на том или ином продукте, мы оцениваем не только возможности языка, мы также должны оценивать количество, а главное качество, программных продуктов, способствующих принятому процессу разработки ПО.
Безусловно, каждое программное обеспечение должно быть документировано. Определенным «стандартом» документирования кода стали комментарии в стиле JavaDoc. Разработчики Adobe не стали отходить от этого стиля и сделали ASDoc. К сожалению, забыв встроить его поддержку в билдер.
Естественно, ПО нужно тестировать и, желательно, не только руками. Для тестирования Flex приложений существует три проекта:
• Mercury QuickTest Professional для функционального, приемочного тестирования.
• FlexUnit для модульного тестирования. К сожалению, пока еще достаточно сырой.
• Flex Stress Testing Framework для нагрузочного тестирования.
Хорошим стилем при разработке ПО является применение паттернов проектирования. Это улучшает архитектуру системы, помогает другим разработчикам быстрее разбираться в ней. В мире Flex, заслужил популярность в этой области архитектурный фреймворк Cairngorm, который является легковесной коллекцией паттернов проектирования. Качество и популярность это фреймворка, сподвигло к предстоящему включению его в новую версию Flex Framework.
Для взаимодействия ActionScript и JavaScript можно использовать Flex-Ajax Bridge, который позволяет работать с AS из JS и обратно. Также данная библиотека будет полезна и для более плавного перехода с JS на AS.
Кратко затрону новый продукт компании Adobe – Apollo (сейчас AIR). Основная его задача – позволить веб разработчикам создавать полноценные desktop приложения. Как заявляют разработчики, приложения можно будет писать на Flex, HTML&JavaScript, PDF. Недавно вышла первая альфа, в которой уже доступны функции работы с файловой системой. Возможно, будет поддержка windows API и баз данных. Первый релиз намечен на конец года.
Конечно, список полезных программным продуктов этим не ограничивается. Если Вы пользуетесь в повседневной разработке еще какими-то продуктами, попробуйте найти их аналоги самостоятельно.
HTML&JavaScript vs MXML&ActionScript
Не смотря на категоричность заголовка этого раздела, авторы не считают эти подходы к разработке веб приложений взаимоисключающими и даже наоборот.
Все таки, для начала обратимся к сравнению:
У Flex приложений есть два основных недостатка (распространенность и размер swf файла), которые не дают возможности полностью заменить связку HTML&JavaScript. А надо ли?! Я думаю что нет, и дело тут не только в этих недостатках. HTML&JavaScript уже давно зарекомендовал себя как стандарт для веб разработок. Написано огромное количество сайтов, софта, интеграции… И главное, в этом случае теряется идеология всемирной паутины – это набор связанных ссылками страниц. Это не тоже самое, что набор приложений, которые должны обладать достаточной степенью интерактива и динамики. Где тут граница, спросите Вы. Я думаю, что решать Вам.
На данный момент, как мне кажется, существуют три области применения Flex приложений
• Корпоративные приложения. Все большую популярность, на enterprise рынке, приобретают веб интерфейсы, обладающие очевидными преимуществами. Flex идеально подходит для этой области. Он позволяет быстро и легко создавать интерактивные, динамичные, красивые веб приложения. А красота и функционал интерактивных векторных графиков, должна поразить просто каждого.
• Веб интерфейсы обычных пользовательских приложений. Компания Adobe планируется выпуск online версии photoshop, догадайтесь на чем она будет. Уже сейчас есть online версии офиса… С выходом Apollo, разрабатывать такие приложения станет еще проще.
• Сайты, порталы… Конечно же, не всегда нужно делать весь сайт на Flex. Подумайте, какой функционал попадает под RIA и реализуйте его отдельно в виде Flex приложения, вы всегда легко можете взаимодействовать с не флешовой частью.
Лучше один раз увидеть, чем сто раз услышать
Наиболее впечатляющим компонентом, который я видел в последнее время, является FlexBook. Идея заключается в том, что перед Вами обычная книга, которую Вы можете листать, мышкой, в произвольном порядке. Каждая страница может содержать любые Flex компоненты (на рис. 2 просто картинка с текстом и фоном), а в случае Apollo и HTML. Вот уже поистине веб страницы.
Google Finance. Хороший пример применения интерактивных графиков в крупных системах.
Yahoo Maps. Отличный пример применения Flex приложений на сайтах с высокой нагрузкой.
Picnik. Думаю, посмотрев на этот сайт, Adobe решила делать online версию photoshop. Не смотря на то, что система еще в бете, она обладает весьма впечатляющим функционалом по обработке и редактированию изображений.
Фреймворки для связки PHP и Flex
Общее описание
Основная роль рассматриваемых фреймворков – это обмен данными между приложением на Flex и серверной частью.
На самом деле, существуют несколько способов получения данных от PHP:
• Использовать фреймворки, которые сериализуют данные в формат AMF. Компонент RemoteObject
• SOAP запросы. Компонент WebService
• Просто использовать GET и POST запросы. Компонент HTTPService
• Сокеты (в том числе и бинарные)
Поддерживаются различные протоколы RTMP/RTMPS(для передачи мультимедиа), HTTP, HTTPS, TCP… А используя бинарные сокеты, Вы можете написать код, который позволяет взаимодействовать с разного рода протоколами.
Обмениваться данными, Вы также можете в разных форматах, наиболее популярными являются:
• AMF (Action Message format). Бинарный формат.
• XML
• JSON
Остановимся подробнее на формате AMF. Данный формат используется Flash Player-ом для эффективного взаимодействия между Flash приложениями и сервером. В нем, в компактном виде, закодированы RPC (Remote Procedure Call) и данные, что гораздо более эффективно, чем пересылка XML. Есть две версии формата AMF0 и AMF3. Первый, используется в AS1 и AS2. Второй, поддерживается исключительно AS3 и более эффективен, чем AMF0.
Сравнение фреймворков
Мы будем рассматривать три основных фреймворка — AMFPHP, WEBORB, SabreAMF (сейчас уже есть ZendAMF ). Все они позволяют использовать RPC. Все Фреймворки бесплатны.
Нужно отметить, что в целом основные вещи делаются одинаково. Выделим моменты, которые являются общими для всех фреймворков:
1. Поддержка AMF3. На клиенте используется стандартный <mx:RemoteObject> компонент. Т.е. не важно какой из трех фреймворков Вы используете на сервере, в Flex приложении методы работы будут одинаковы.
2. Сопоставление классов (mapping) между Flex и PHP.
3. Поддрежка PHP5
AMFPHP
Преимущества:
1. Поддержка php_amf extension, что в разы увеличивает производительность фреймворка. Так как кодирование объектов реализовано на C++, что делает AMFPHP самым быстрым RPC фреймворком для Flash.
2. Удобная поддержка разных кодировок
3. HTML браузер для служб. Позволяет тестировать и отлаживать серверный код без использования Flex. С помощью браузера можно получить результаты и скорость выполнения методов.
4. Встроенные средства авторизации
5. Работает под PHP4/PHP5 и не требует никаких дополнительных библиотек
6. Ведение логов запросов/ответов
7. Поддержка JSON
8. Поддержка XMLRPC
9. Интегрирована во многие фреймворки (Drupal, WordPress…)
10. Простота установки
Минусы:
1. Недостаточно документации.
2. Ведется одним человеком (Patrick Mineault).
3. Необходимы дополнительные действия для сопоставления классов.
4. Не поддерживает E_STRICT, понятно почему.
WEBORB
Преимущества:
1. Разрабатывается компанией WebORB, которая разрабатывает аналогичные продукты под .NET, JAVA, Ruby.
2. Полностью автоматически осуществляет сопоставление классов
3. Встроенные средства авторизации
4. Ведение логов
5. Простота установки
Минусы:
1. Очень мало документации
2. Не удобная работа с кодировками
3. Не поддерживает PHP4
4. Нет HTML браузера для служб
SabreAMF
Преимущества:
1. Легковесен, делает только самое необходимое.
Минусы
1. Практически нет документации.
2. Поддерживается одним человеком.
3. Нет средств авторизации.
4. Нет HTML браузера для служб.
5. Не поддерживает PHP4.
6. Нет ведения логов.
7. Для установки и настройки, необходимо выполнить несколько непрозрачных шагов, которые по кускам описаны в разных местах.
8. Не удобная работа с кодировками
Выбор одного из фреймворков, конечно же, остается за Вами. Но по мне так он очевиден. AMFPHP самый опытный боец и пока наголову выше всех остальных. WEBORB обладает хорошим потенциалом, благодаря своей линейке продуктов. Отметим, что у WEBORB планируется платная enterprise версия для PHP. Судьба SabreAMF под вопросом.
Работа с фреймворками
Настройка Flex Builder для работы с фреймворками.
Создаем новый проект, например, «dummy» во Flex Builder. В корне проекта создаем конфигурационный файл services-config.xml для служб:
Затем показываем компилятору, где лежит конфигурационный файл. Для этого смотрим диалоговое окно свойств проекта и в свойствах компилятора (Flex Compiler) указываем директиву –services. Как на рисунке 6.
Рис. 6
Приведенный файл работает со всеми тремя фреймворками.
В случае использования WebORB, файл необходимо поместить в каталог weborb/WEB-INF/Flex/services-config.xml.
Установка фреймворков.
Установка AMFPHP и WebORB проста и незатейлива. Нужно все лишь скачать их дистрибутивы и распаковать их на сервере, например в корневой каталог. После чего сразу можно начинать работу, поместив свои файлы в каталог services фреймворка.
А вот с установкой и настройкой SabreAMF могут быть проблемы, в виду скудной документации. Необходимо установить пакет SabreAMF при помощи pear установщика, а затем воспользоваться мануалом с сайта Adobe, по настройке SabreAMF. Скачать мануал.
Все примеры без проблем работают под всеми тремя фреймворками, нужно лишь скопировать их туда.
Кодировка.
В AMFPHP предусмотрена работа с различными кодировками. Все, что нужно сделать, это выбрать библиотеку, которая будет перекодировать сообщения и кодировки. Кодировка устанавливается в файле gateway.php в корне фреймворка. Найдите строку $gateway->setCharsetHandler(«utf8_decode», «ISO-8859-1», «ISO-8859-1»); и замените на необходимые вам параметры. Флеш работает кодировкой utf-8.
Во всех остальных фреймворках, подобной функции замечено не было, и поэтому перекодировку нужно будет делать вручную.
Пример простого получения данных из БД.
Flex:
dummy.mxml
PHP:
Users.php
Пример сопоставления классов (class mapping):
WebORB полностью автоматически осуществляет сопоставление классов.
Для AMFPHP необходимы некоторые настройки:
1. Все сопоставляемые классы должны содержать свойство
$_explicitType, с указанием типа объекта.
В нашем примере $_explicitType = «dummy.vo.UserVO»;
2. Необходимо указать, где находятся сопоставляемые классы в файле globals.php в корне фреймворка. Для нашего примера я установил $voPath = $servicesPath. Это необходимо для корректного сопоставления классов передаваемых из Flex приложения.
Flex:
Создадим класс UserVO и сохраним его в папке vo:
UserVO.as
Для того чтобы класс сопоставлялся с классами на сервере, необходимо указать, как он называется там с помощью указания метаданных [RemoteClass(alias=”класс”)].
Теперь создадим подобный класс на сервере и сохраним его в папке vo:
UserVO.php
dummy.mxml
И немножко подправим Users.php.
PHP:
Users.php
Для передачи аргументов серверу нужно лишь указать их в соответствующей последовательности при вызове метода. Например, создадим нового пользователя.
Flex:
dummy.mxml
PHP:
Users.php
Полезные ссылки
www.adobe.com/products/flex — собственно отправная точка, официальный сайт производителя.
flex.org — множество материалов по Flex. Очень рекомендую ознакомиться с, приведенными там, ссылками на блоги разработчиков и не только.
www.cflex.net — статьи, библиотеки.
www.quietlyscheming.com/blog — блог Ely Greenfield-а. Выкладывает потрясающие компоненты с исходниками.
Группы:
groups.yahoo.com/group/flexcoders
groups.yahoo.com/group/flexcomponents
groups.google.com/group/ruflex?lnk=srg&hl=ru
video.onflex.org — видео материалы по Flex технологиям.
PHP&Flex, «новая» альтернатива для создания Rich Internet Applications
Главной тенденцией последних лет в области разработки веб приложений является все большее и большее качественное улучшение и усложнение пользовательских интерфейсов. Для привлечения пользователей, необходимо делать все более удобные, быстрые и качественные интерфейсы. Совершенствуются текущие технологии, появляются и новые. Один из ярких представителей в нише построения RIAs является семейство продуктов Adobe Flex. Данный материал является обзорным по этой новой технологии и призван дать общее понимание принципов и идей заложенных в Flex и его связке с PHP. Также мы постарались максимально насытить эту статью ссылками на более подробное описание рассматриваемых тем, чтобы облегчить дальнейшее изучение.
Что такое Flex?
Adobe Flex 2 – это решение, позволяющее разрабатывать RIAs на основе родственной Flash технологии. Описание интерфейса, и не только, основано на диалекте XML – MXML. Описание клиентской логики на ActionScript3 (далее AS3). В результате компиляции MXML транслируется в обычный AS код, который передается компилятору mxmlc для получения swf фаила.
Flex состоит из нескольких продуктов:
Adobe Flex Builder – IDE основанная на eclipse. Позволяет быстро разрабатывать AS3 и MXML. Обладает мощным инструментом визуального проектирования интерфейсов. Подсветка синтаксиса и подсказки, встроенный Debbuger, help и многое другое.
Adobe Flex framework and SDK – основанный на компонентах фреймворк. Содержит огромное количество расширяемых компонент, позволяющих разрабатывать интерфейсы любой сложности. Бесплатный. Идет в комплекте с Flex Builder
Adobe Flex Charting – библиотека, позволяющая создавать всевозможные интерактивные диаграммы и графики. Платная
Adobe Flex Data Services – набор серверных компонент, отвечающих за быстрый и удобный обмен данными между Flex и JAVA приложениями.
Краеугольным камнем все этого является набора, является Flash Player (для работы с Flex приложениями нужна 9-ая версия). Главным преимуществом плеера является то, что его работа не зависит от платформы или браузера! Простота установки в купе с его потрясающе маленькими размерами (1.1М) способствует его повсеместному распространению.
Разработка приложений на Flex
Как уже говорилось выше, проектирование интерфейсов осуществляется посредством описания их тегами MXML. Например,
<WebService id="ws" wsdl="some.wsdl">
<Button label="Get Data" click="ws.getData()">
<DataGrid dataProvider=”{ws.getData.result}”>
<LineChart dataProvider=”{ws.getData.result}”>
MXML также используется для декларативного связывания данных, определения обработчиков событий, эффектов, связи с удаленными источниками данных и описания структур данных.
Интерфейсные компоненты делятся на два вида:
• Controls, Navigators – элементы интерфейса. Такие как Button, DataGrid, Tree, ProgressBar…
• Containers – области, содержащие различные контролы и определяющие их расположение на экране. Такие как Hbox, Vbox, Panel, Grid…
На рис. 1 наглядно показано структура Flex приложений:
Помимо визуальных компонент, существуют другие вспомогательные компоненты для построения интерфейсов:
• Validators and Formatters – проверка и форматирование текста. Такие как RegExpvalidator, CreditCardvalidator, DateFormatter…
• Effects – визуальная или звуковая анимация элемента, которая происходит за некоторый промежуток времени (в миллисекундах). Такие как, всевозможные появления, движения, поворот, увеличение, звуковые… Набор эффектов действительно впечатляет!
• View States – состояния интерфейса. Каждое состояние характеризуется различным набором компонент. Вы можете переключаться между состояниями, задавать различные эффекты на переключение.
Полный список всех интерфейсных компонент с примерами Вы можете найти на http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
Надо заметить, что построение интерфейсов возможно не только с помощью MXML тегов, его еще можно описывать посредством AS кода. На самом деле, для Flex это абсолютно равносильные способы, все зависит только от Ваших задач и предпочтений. Это объясняется тем, что каждый MXML тег соответствует либо классу, либо их свойствам. Т.е. когда Вы пишите:
<mx:Button label=”Test”/>
Вы создаете экземпляр класса Button и инициализируете у него свойство label.
Важной особенностью MXML является его расширяемость. Вы можете создавать собственные теги (читаем компоненты) и далее их использовать также как и стандартные, визуально проектировать интерфейсы на их основе.
Пример:
<andry:CustomButton label=”Click Me”/>
и
package{
import mx.controls.Button;
public class CustomButton extends Button{
public function CustomButton(){
super();
}
}
}
Наподобие CSS в HTML, при разработке Flex приложений также можно определять стили. Каждый визуальный компонент имеет собственный набор параметров стиля, позволяющий менять многие аспекты его отображения. Стили можно изменять в runtime. Для определения стилей компания Adobe разработала Flex Style Explorer, в котором Вы можете создавать собственные стили, визуально наблюдая, как каждый из параметров влияет на отображение. Есть и альтернативный вариант. Для продвинутого скининга предлагаю ознакомиться с этой статьей. Про разделение труда между дизайнерами и программистами можно почитать тут.
MXML имеет много аспектов применения, некоторые из них мы, вкратце, рассмотрели. Однако для описания логики Flex приложения необходимо использовать ActionScript.
ActionScript является объектно-ориентированным языком программирования, основанным на драфте 4 ECMAScript (ECMA-262). Основные особенности языка:
• Наследование
• Интерфейсы
• Модульность
• Спецификаторы доступа
• Типизация переменных, свойств и параметров (во время компиляции)
• Статические члены
• Приведение типов
• Reflection API
• Динамические классы (runtime добавление методов и свойств)
• ECMAScript for XML (E4X). Основано на стандарте ECMA-357. В отличии от стандартного парсинга XML, E4X транслирует XML в нативные, для конкретного языка, типы данных, что значительно облегчает работу с XML.
• DOM3 модель событий
И многое другое. Конечно же, вся мощь AS3 определяется его фреймворком, который обладает весьма богатыми возможностями – продвинутое управление событиями, коллекциями… огромное количество компонент включено впечатляющую иерархию классов Flex Framework.
Вы можете использовать ActionScript в Ваших Flex приложениях, добавляя блоки кода с помощью <mx:Script> тега или, включая внешние ActionScript файлы. Вы также можете импортировать внешние файлы классов или целые пакеты для использования в MXML приложении. Flex извлекает ActionScript и создаёт файл класса, который затем связывается с конечным SWF файлом. Компоненты, созданные в ActionScript, могут содержать графические элементы, определять свою бизнес логику или расширять имеющиеся Flex компоненты. Они могут наследоваться от любых доступных в Flex компонентов.
Другие аспекты разработки Flex приложений
При принятии решения о разработки приложения основываясь на том или ином продукте, мы оцениваем не только возможности языка, мы также должны оценивать количество, а главное качество, программных продуктов, способствующих принятому процессу разработки ПО.
Безусловно, каждое программное обеспечение должно быть документировано. Определенным «стандартом» документирования кода стали комментарии в стиле JavaDoc. Разработчики Adobe не стали отходить от этого стиля и сделали ASDoc. К сожалению, забыв встроить его поддержку в билдер.
Естественно, ПО нужно тестировать и, желательно, не только руками. Для тестирования Flex приложений существует три проекта:
• Mercury QuickTest Professional для функционального, приемочного тестирования.
• FlexUnit для модульного тестирования. К сожалению, пока еще достаточно сырой.
• Flex Stress Testing Framework для нагрузочного тестирования.
Хорошим стилем при разработке ПО является применение паттернов проектирования. Это улучшает архитектуру системы, помогает другим разработчикам быстрее разбираться в ней. В мире Flex, заслужил популярность в этой области архитектурный фреймворк Cairngorm, который является легковесной коллекцией паттернов проектирования. Качество и популярность это фреймворка, сподвигло к предстоящему включению его в новую версию Flex Framework.
Для взаимодействия ActionScript и JavaScript можно использовать Flex-Ajax Bridge, который позволяет работать с AS из JS и обратно. Также данная библиотека будет полезна и для более плавного перехода с JS на AS.
Кратко затрону новый продукт компании Adobe – Apollo (сейчас AIR). Основная его задача – позволить веб разработчикам создавать полноценные desktop приложения. Как заявляют разработчики, приложения можно будет писать на Flex, HTML&JavaScript, PDF. Недавно вышла первая альфа, в которой уже доступны функции работы с файловой системой. Возможно, будет поддержка windows API и баз данных. Первый релиз намечен на конец года.
Конечно, список полезных программным продуктов этим не ограничивается. Если Вы пользуетесь в повседневной разработке еще какими-то продуктами, попробуйте найти их аналоги самостоятельно.
HTML&JavaScript vs MXML&ActionScript
Не смотря на категоричность заголовка этого раздела, авторы не считают эти подходы к разработке веб приложений взаимоисключающими и даже наоборот.
Все таки, для начала обратимся к сравнению:
| HTML&JavaScript | MXML&ActionScript | |
| Кросбраузерность | Ненавистный бич JavaScript! Достаточно много усилий требуется для обеспечения этой функции. С HTML дела обстоят также не лучшим образом. Полностью идентичная работа во всех браузерах. Кем разрабатывается Есть стандарты. Есть разработчики браузеров. Есть ощущение, что живут они в разных мирах. Поддерживается и активно развивается компанией Adobe System. Функционал языка Не побоюсь этого слова, на доисторическом уровне. Динамика внедрения нового функционала в язык просто ужасает. Хоть как-то спасают только фреймворки. Что касается HTML, то, естественно, он обладает большим встроенным функционалом. |
На несколько порядков опережает JavaScript. К слову, компании Adobe и Mozilla пока только планируют привести JS к стандарту ECMAScript (ECMA-262), который уже сейчас реализован в AS. Мощь языка определяется также и его фреймворком, функционал которого опережает любой из JS фреймворков. Размер приложений Относительно не велик Достаточно большой. Связано с необходимостью включать в Flex приложения функционал фреймворка. И именно поэтому Flash Player имеет такие маленькие размеры (1.1М). |
| Распространенность | Повсеместно. Огромное количество всевозможных материалов, софта и специалистов | набирает обороты (надо заметить, большими темпами). Относительно небольшое количество специалистов. |
| Индексация поисковыми системами | Кроме специфичных Ajax-приложений. Все зависит от разработчика. | Индексируется только статический текст и ссылки. Слабая индексация объясняется, как правило, высоким уровнем динамичности Flex приложений. Для улучшения индексации рекомендую ознакомиться с этой статьей. Из недавнего интервью с гуглом стало понятно, что они (скорее всего, совместно с Adobe) планируют улучшить индексацию в ближайшее время. (уже есть!) |
| Скорость разработки RIAs | Низкая. Связано с отсутствием полноценной среды разработки и отладки JS приложений, а также со сложностью самих решений. | Достаточно высокая. Не смотря на то, что среда разработки пока далека от совершенства, она все же позволяет делать многие вещи просто и быстро. А визуальная среда проектирования, помогает быстро создавать достаточно симпатичные интерфейсы, даже не обладая особыми навыками дизайнера и верстальщика. |
У Flex приложений есть два основных недостатка (распространенность и размер swf файла), которые не дают возможности полностью заменить связку HTML&JavaScript. А надо ли?! Я думаю что нет, и дело тут не только в этих недостатках. HTML&JavaScript уже давно зарекомендовал себя как стандарт для веб разработок. Написано огромное количество сайтов, софта, интеграции… И главное, в этом случае теряется идеология всемирной паутины – это набор связанных ссылками страниц. Это не тоже самое, что набор приложений, которые должны обладать достаточной степенью интерактива и динамики. Где тут граница, спросите Вы. Я думаю, что решать Вам.
На данный момент, как мне кажется, существуют три области применения Flex приложений
• Корпоративные приложения. Все большую популярность, на enterprise рынке, приобретают веб интерфейсы, обладающие очевидными преимуществами. Flex идеально подходит для этой области. Он позволяет быстро и легко создавать интерактивные, динамичные, красивые веб приложения. А красота и функционал интерактивных векторных графиков, должна поразить просто каждого.
• Веб интерфейсы обычных пользовательских приложений. Компания Adobe планируется выпуск online версии photoshop, догадайтесь на чем она будет. Уже сейчас есть online версии офиса… С выходом Apollo, разрабатывать такие приложения станет еще проще.
• Сайты, порталы… Конечно же, не всегда нужно делать весь сайт на Flex. Подумайте, какой функционал попадает под RIA и реализуйте его отдельно в виде Flex приложения, вы всегда легко можете взаимодействовать с не флешовой частью.
Лучше один раз увидеть, чем сто раз услышать
Наиболее впечатляющим компонентом, который я видел в последнее время, является FlexBook. Идея заключается в том, что перед Вами обычная книга, которую Вы можете листать, мышкой, в произвольном порядке. Каждая страница может содержать любые Flex компоненты (на рис. 2 просто картинка с текстом и фоном), а в случае Apollo и HTML. Вот уже поистине веб страницы.
Google Finance. Хороший пример применения интерактивных графиков в крупных системах.
Yahoo Maps. Отличный пример применения Flex приложений на сайтах с высокой нагрузкой.
Picnik. Думаю, посмотрев на этот сайт, Adobe решила делать online версию photoshop. Не смотря на то, что система еще в бете, она обладает весьма впечатляющим функционалом по обработке и редактированию изображений.
Фреймворки для связки PHP и Flex
Общее описание
Основная роль рассматриваемых фреймворков – это обмен данными между приложением на Flex и серверной частью.
На самом деле, существуют несколько способов получения данных от PHP:
• Использовать фреймворки, которые сериализуют данные в формат AMF. Компонент RemoteObject
• SOAP запросы. Компонент WebService
• Просто использовать GET и POST запросы. Компонент HTTPService
• Сокеты (в том числе и бинарные)
Поддерживаются различные протоколы RTMP/RTMPS(для передачи мультимедиа), HTTP, HTTPS, TCP… А используя бинарные сокеты, Вы можете написать код, который позволяет взаимодействовать с разного рода протоколами.
Обмениваться данными, Вы также можете в разных форматах, наиболее популярными являются:
• AMF (Action Message format). Бинарный формат.
• XML
• JSON
Остановимся подробнее на формате AMF. Данный формат используется Flash Player-ом для эффективного взаимодействия между Flash приложениями и сервером. В нем, в компактном виде, закодированы RPC (Remote Procedure Call) и данные, что гораздо более эффективно, чем пересылка XML. Есть две версии формата AMF0 и AMF3. Первый, используется в AS1 и AS2. Второй, поддерживается исключительно AS3 и более эффективен, чем AMF0.
Сравнение фреймворков
Мы будем рассматривать три основных фреймворка — AMFPHP, WEBORB, SabreAMF (сейчас уже есть ZendAMF ). Все они позволяют использовать RPC. Все Фреймворки бесплатны.
Нужно отметить, что в целом основные вещи делаются одинаково. Выделим моменты, которые являются общими для всех фреймворков:
1. Поддержка AMF3. На клиенте используется стандартный <mx:RemoteObject> компонент. Т.е. не важно какой из трех фреймворков Вы используете на сервере, в Flex приложении методы работы будут одинаковы.
2. Сопоставление классов (mapping) между Flex и PHP.
3. Поддрежка PHP5
AMFPHP
Преимущества:
1. Поддержка php_amf extension, что в разы увеличивает производительность фреймворка. Так как кодирование объектов реализовано на C++, что делает AMFPHP самым быстрым RPC фреймворком для Flash.
2. Удобная поддержка разных кодировок
3. HTML браузер для служб. Позволяет тестировать и отлаживать серверный код без использования Flex. С помощью браузера можно получить результаты и скорость выполнения методов.
4. Встроенные средства авторизации
5. Работает под PHP4/PHP5 и не требует никаких дополнительных библиотек
6. Ведение логов запросов/ответов
7. Поддержка JSON
8. Поддержка XMLRPC
9. Интегрирована во многие фреймворки (Drupal, WordPress…)
10. Простота установки
Минусы:
1. Недостаточно документации.
2. Ведется одним человеком (Patrick Mineault).
3. Необходимы дополнительные действия для сопоставления классов.
4. Не поддерживает E_STRICT, понятно почему.
WEBORB
Преимущества:
1. Разрабатывается компанией WebORB, которая разрабатывает аналогичные продукты под .NET, JAVA, Ruby.
2. Полностью автоматически осуществляет сопоставление классов
3. Встроенные средства авторизации
4. Ведение логов
5. Простота установки
Минусы:
1. Очень мало документации
2. Не удобная работа с кодировками
3. Не поддерживает PHP4
4. Нет HTML браузера для служб
SabreAMF
Преимущества:
1. Легковесен, делает только самое необходимое.
Минусы
1. Практически нет документации.
2. Поддерживается одним человеком.
3. Нет средств авторизации.
4. Нет HTML браузера для служб.
5. Не поддерживает PHP4.
6. Нет ведения логов.
7. Для установки и настройки, необходимо выполнить несколько непрозрачных шагов, которые по кускам описаны в разных местах.
8. Не удобная работа с кодировками
Выбор одного из фреймворков, конечно же, остается за Вами. Но по мне так он очевиден. AMFPHP самый опытный боец и пока наголову выше всех остальных. WEBORB обладает хорошим потенциалом, благодаря своей линейке продуктов. Отметим, что у WEBORB планируется платная enterprise версия для PHP. Судьба SabreAMF под вопросом.
Работа с фреймворками
Настройка Flex Builder для работы с фреймворками.
Создаем новый проект, например, «dummy» во Flex Builder. В корне проекта создаем конфигурационный файл services-config.xml для служб:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="remoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<default-channels>
<channel ref="my-amf"/>
</default-channels>
<destination id="users">
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://localhost/amfphp_1.9/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
<!---<endpoint uri="http://localhost/weborb/weborb/index.php" class="flex.messaging.endpoints.AMFEndpoint"/>-->
<!---<endpoint uri="http://localhost/sabreamf/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>-->
</channel-definition>
</channels>
</services-config>
Затем показываем компилятору, где лежит конфигурационный файл. Для этого смотрим диалоговое окно свойств проекта и в свойствах компилятора (Flex Compiler) указываем директиву –services. Как на рисунке 6.
Рис. 6
Приведенный файл работает со всеми тремя фреймворками.
В случае использования WebORB, файл необходимо поместить в каталог weborb/WEB-INF/Flex/services-config.xml.
Установка фреймворков.
Установка AMFPHP и WebORB проста и незатейлива. Нужно все лишь скачать их дистрибутивы и распаковать их на сервере, например в корневой каталог. После чего сразу можно начинать работу, поместив свои файлы в каталог services фреймворка.
А вот с установкой и настройкой SabreAMF могут быть проблемы, в виду скудной документации. Необходимо установить пакет SabreAMF при помощи pear установщика, а затем воспользоваться мануалом с сайта Adobe, по настройке SabreAMF. Скачать мануал.
Все примеры без проблем работают под всеми тремя фреймворками, нужно лишь скопировать их туда.
Кодировка.
В AMFPHP предусмотрена работа с различными кодировками. Все, что нужно сделать, это выбрать библиотеку, которая будет перекодировать сообщения и кодировки. Кодировка устанавливается в файле gateway.php в корне фреймворка. Найдите строку $gateway->setCharsetHandler(«utf8_decode», «ISO-8859-1», «ISO-8859-1»); и замените на необходимые вам параметры. Флеш работает кодировкой utf-8.
Во всех остальных фреймворках, подобной функции замечено не было, и поэтому перекодировку нужно будет делать вручную.
Пример простого получения данных из БД.
Flex:
dummy.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
//обрабатываем результат
private function resultHandler(event:ResultEvent):void
{
dg.dataProvider = event.result;
}
//обрабатываем ошибки
private function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString,"Error");
}
]]>
</mx:Script>
<mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true" destination="users" source="dummy.Users"/>
<mx:DataGrid id="dg" x="10" y="40" width="746" height="500">
</mx:DataGrid>
<mx:Button x="10" y="10" label="Загрузить данные" click="ro.getUsers()"/>
</mx:Application>
PHP:
Users.php
<?php
class Users {
public function __construct()
{
mysql_connect(“localhost”,”root”,”password”);
mysql_select_db(“db_name”);
}
public function getUsers()
{
$users = array();
$query = mysql_query("select * from users");
while ($row = mysql_fetch_object($query))
{
$users[] = $row;
}
return $users;
}
}
?>
Пример сопоставления классов (class mapping):
WebORB полностью автоматически осуществляет сопоставление классов.
Для AMFPHP необходимы некоторые настройки:
1. Все сопоставляемые классы должны содержать свойство
$_explicitType, с указанием типа объекта.
В нашем примере $_explicitType = «dummy.vo.UserVO»;
2. Необходимо указать, где находятся сопоставляемые классы в файле globals.php в корне фреймворка. Для нашего примера я установил $voPath = $servicesPath. Это необходимо для корректного сопоставления классов передаваемых из Flex приложения.
Flex:
Создадим класс UserVO и сохраним его в папке vo:
UserVO.as
package vo
{
[RemoteClass(alias="dummy.vo.UserVO")]
public class UserVO
{
public var userId:int;
public var userName:String;
}
}
Для того чтобы класс сопоставлялся с классами на сервере, необходимо указать, как он называется там с помощью указания метаданных [RemoteClass(alias=”класс”)].
Теперь создадим подобный класс на сервере и сохраним его в папке vo:
UserVO.php
<?php
class UserVO
{
public $_explicitType = "dummy.vo.UserVO";
public $userId;
public $userName;
}
?>
dummy.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import vo.UserVO;
private var user:UserVO;
//обрабатываем результат
private function resultHandler(event:ResultEvent):void
{
//теперь мы получим массив из UserVO
dg.dataProvider = event.result;
}
//обрабатываем ошибки
private function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString,"Error");
}
]]>
</mx:Script>
<mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true" destination="users" source="dummy.Users"/>
<mx:DataGrid id="dg" x="10" y="40" width="700" height="500">
</mx:DataGrid>
<mx:Button x="10" y="10" label="Загрузить данные" click="ro.getUsers()"/>
</mx:Application>
И немножко подправим Users.php.
PHP:
Users.php
<?php
class Users {
//добавим UserVO класс
require_once(“vo/UserVO.php”);
public function __construct()
{
mysql_connect(“localhost”,”root”,”password”);
mysql_select_db(“db_name”);
}
public function getUsers()
{
$users = array();
$query = mysql_query("SELECT user_id, user_name FROM users");
while ($row = mysql_fetch_object($query))
{
$user = new UserVO();
$user->userId = $row->user_id;
$user->userName = $row->user_name;
$users[] = $user;
}
return $users;
}
}
?>
Для передачи аргументов серверу нужно лишь указать их в соответствующей последовательности при вызове метода. Например, создадим нового пользователя.
Flex:
dummy.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import vo.UserVO;
private var user:UserVO;
//обрабатываем результат
private function resultHandler(event:ResultEvent):void
{
//теперь мы получим массив из UserVO
dg.dataProvider = event.result;
}
//обрабатываем ошибки
private function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString,"Error");
}
//создаем нового пользователя
private function createNewUser():void
{
var newUser:UserVO = new UserVO();
newUser.userName = uName.text;
ro.createNewUser(newUser);
}
]]>
</mx:Script>
<mx:RemoteObject id="ro" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true"
destination="users" source="dummy.Users"/>
<mx:DataGrid id="dg" x="10" y="40" width="600" height="500">
</mx:DataGrid>
<mx:Button x="10" y="10" label="Загрузить данные" click="ro.getUsers()"/>
<mx:Panel x="618" y="40" width="279" height="155" layout="absolute" title="Добавить пользователя">
<mx:Form x="10" y="10">
<mx:FormItem label="Имя:" required="true">
<mx:TextInput id="uName"/>
</mx:FormItem>
</mx:Form>
<mx:Button x="89" y="83" label="Добавить" click="createNewUser()"/>
</mx:Panel>
</mx:Application>
PHP:
Users.php
<?php
class Users {
//добавим UserVO класс
require_once(“vo/UserVO.php”);
public function __construct()
{
mysql_connect(“localhost”,”root”,”password”);
mysql_select_db(“db_name”);
}
public function getUsers()
{
$users = array();
$query = mysql_query("SELECT user_id, user_name FROM users");
while ($row = mysql_fetch_object($query))
{
$user = new UserVO();
$user->userId = $row->user_id;
$user->username = $row->user_name;
$users[] = $user;
}
return $users;
}
public function createNewUser (UserVO $newUser)
{
mysql_query("INSERT INTO users SET user_name = '" . $newUser->userName . "'");
return $this->getUsers();
}
?>
Полезные ссылки
www.adobe.com/products/flex — собственно отправная точка, официальный сайт производителя.
flex.org — множество материалов по Flex. Очень рекомендую ознакомиться с, приведенными там, ссылками на блоги разработчиков и не только.
www.cflex.net — статьи, библиотеки.
www.quietlyscheming.com/blog — блог Ely Greenfield-а. Выкладывает потрясающие компоненты с исходниками.
Группы:
groups.yahoo.com/group/flexcoders
groups.yahoo.com/group/flexcomponents
groups.google.com/group/ruflex?lnk=srg&hl=ru
video.onflex.org — видео материалы по Flex технологиям.
