Использование технологииИспользование технологииFlex Flex при разработкепри разработке RIARIAДоклад к конференцииДоклад к конференцииUniversITyUniversITy

Вводная часть. Вводная часть. Обзор технологииОбзор технологии Алексей ГончаровАлексей Гончаров

33 RIA-RIA-приложенияприложения

• Работают в броузере или не требуют установки дополнительного ПО

• Работают локально в своей защищённой среде

• Обновляют необходимое ПО до новых версий автоматически

• Кросс-платформенные

• Интегрируют в себе графику, звук, программный код, компоненты для обмена данными с сервером

•Имеют высокую производительность

История версий История версий FlexFlex•Flex 1.0 – Март 2004•Flex 1.5 – Октябрь 2004•Flex 2.0 Alpha – Октябрь 2005•Flex 2.0 Beta 1 – Февраль 2006•Flex 2.0 Beta 2 – Март 2006•Flex 2.0 Beta 3 – Май 2006•Flex 2.0 Final – Июнь 2006•Flex 2.0.1 – Январь 2007•Flex 3.0 Beta 1 – Июнь 2007•Flex 3.0 Beta 2 – Октябрь 2007•Flex 3.0 Beta 3 – Декабрь 2007•Flex 3.0 – Февраль 2008•Flex 4.0 Beta 1 – анонсируется, 2008•Flex 4.0 – анонсируется, 2009

44

Совокупность технологийСовокупность технологий

• ActionScript 3.0 – язык программирования, основанный на стандарте ECMA-262 с новой событийной моделью, реализацией ООП и многим другим

• MXML – язык описания интерфейсов, являющийся подмножеством XML

• E4X – язык для работы с XML, основанный на стандартах ECMAScript

• CSS – каскадные таблицы стилей для описания внешнего вида визуальных элементов управления.

55

GUIGUI в в FlashFlashЭлементы управления вFlash создавались либокак экземпляры символовбиблиотеки, либо каккомпоненты с достаточноскудным набором свойств.ActionScript 2.0 имеетмножество недостатков.

66

GUIGUI в в FlexFlex77

Элементы управления вFlex имеют множествопараметров, могут легкоизменять свой вид спомощью CSS-стилей,используют эффекты имогут быть расширены всоответствии с задачей.

MXML позволяет легко описывать интерфейсы RIA-приложений.

КонтейнерыКонтейнеры88

Контейнеры позволяют управлять положением графических элементов в окне приложения, объединять их в группы, обеспечивают необходимую гибкость при создании «резиновых» интерфейсов.

99 «Резиновый» «Резиновый» GUIGUI

•Контейнеры позволяют легко и быстро создавать «резиновый»интерфейс.•Контейнер может быть дочерним объектом другого контейнера.

1010 Flex Flex как как frameworkframeworkВесь MXML-код преобразуется в ActionScript 3.0, азатем отдаётсякомпилятору.Любой компонентможно создать какс помощью MXML,так и с помощьюActionScript 3.0.

Исходный код всех компонентов входит в Flex SDK.

1111 CSSCSS

С помощью каскадныхтаблиц стилей можноизменять внешний вид элементов управления.CSS внедряются в SWF-файл проекта на этапе его компиляции.

1010 Многообразие компонентовМногообразие компонентов

Взаимодействие Flex Взаимодействие Flex и серверной части проектаи серверной части проекта

Сергей ПавленкоСергей Павленко

1414 WEB 2.0 WEB 2.0 и и RIARIA

- асинхронность запросов

- сохранение состояния между переходами

- большая гибкость приложения

- наличие видео и звука

Основные свойства:

Технологии Технологии WEB 2.0WEB 2.0

• AJAX (класс XMLHttpRequest)

• Flash/Flex

• Silverlight

• JNLP (Java Network Launching Protocol)

• Java FX (Java WEBStart Library)

• Batik (Java SVG Graphic Toolkit)

1515

JavaScript JavaScript и и DOMDOM1616

Тест Тест Acid3Acid3

www.acid3.acidtests.org

1717

Firefox 2.0.0.13Firefox 2.0.0.13

52/100 (изображение сильно отличается от эталонного)

1818

IE 7.0.5730.11IE 7.0.5730.11

-12/100(изображение совсем неразборчивое)

1919

Opera 9.25Opera 9.25

36/100 и вылетает

2020

Safari 3.1Safari 3.1

74/100 (изображение похоже на эталон)

2121

Трудности разработки на Трудности разработки на JSJS

• не следование стандартам W3C разработчиками браузеров

• переносимость кода (кросбраузерность)

• низкая производительность

2222

http://oddhammer.com/actionscriptperformance/set4/23

Flex Flex выводит разработку Вэб-выводит разработку Вэб-приложений на новый уровень приложений на новый уровень легкости разработки и сложности легкости разработки и сложности функционированияфункционирования::

Легкость разработки с Легкость разработки с FlexFlex

• www.buzzword.com

• www.photoshop.com/express

• www.searchme.com

2424

Коммуникационные возможности Коммуникационные возможности FlexFlex

• HTTPServiceHTTPService ( (HTTP GET или POSTHTTP GET или POST))

• WebServiceWebService ( (доступ к службам, описанными WSDL 1.1; SOAPдоступ к службам, описанными WSDL 1.1; SOAP))

• RemoteObjectRemoteObject

• RTMPRTMP ( (Real-Time Messaging ProtocolReal-Time Messaging Protocol))

• SocketsSockets ( (бинарные сокетыбинарные сокеты))

• LocalConnectionLocalConnection ( (локальный обмен даннымилокальный обмен данными))

3535

Эффективность Эффективность AMFAMF

http://www.jamesward.org/census/

3636

Эффективность Эффективность AMFAMF3737

Пример приложения Пример приложения Flex Flex и и AMFAMF

Результат работы

3838

Пример приложения Пример приложения Flex Flex и и AMFAMF

ActionScript класс Product.as

3939

Пример приложения Пример приложения Flex Flex и и AMFAMF

PHP класс Product.php

4040

Пример приложения Пример приложения Flex Flex и и AMFAMF

MXML коннектор

4141

Пример приложения Пример приложения Flex Flex и и AMFAMF

Метод getProductList() класса ProductService

4242

Фреймворки Фреймворки FlexFlex для для Back-EndBack-End

• AMFPHP [http://amfphp.sourceforge.net]

• BlazeDZ [http://opensource.adobe.com/wiki/display/blazeds/BlazeDS]

• SabreAMF [http://www.osflash.org/sabreamf]

• Midnight Coders WebORB [http://www.themidnightcoders.com]

4343

Примеры Flex приложений

4444

Александр ЛевашовАлександр Левашов

www.flauntr.com 4545

www.flauntr.com 4646

Analytic Reporting Suit4747

Analytic Reporting Suit4848

www.whitestonecheese.co.nz 4949

www.asterpix.com 5050

5151

Источник:http://flex.org/showcase/

Докладчики

Алексей Гончаров

Сергей Павленко

Александр Левашов

www.altima.com.ua

Info@altima.com.ua

5252

We are hiring

Web developers

Junior web developers

www.altima.com.ua

job@altima.com.ua

5353