Adobe Flex Новая технология для создания RIA на базе Flash-платформы Константин Ковалев RIA-разработчик - презентация

1 Adobe Flex Новая технология для создания RIA на базе Flash-платформы Константин Ковалев RIA-разработчик

2 Константин Ковалев Новая? Macromedia Flex 1.0 (март 2004) Flash Player 7, ActionScript 2 Macromedia Flex 1.5 (октябрь 2004) Flash Player 7, ActionScript 2 Macromedia Flex 2.0 public alpha 1 (октябрь 2005) Flash Player 8.5, ActionScript 3 Adobe Flex 2.0 (28 июня 2006) Flash Player 9 Adobe Flex (5 января 2007) Flash Player 9

3 Константин Ковалев Революционные особенности Flex 2 Возможность создания приложений без необходимости компиляции на сервере Бесплатный SDK Новая виртуальная машина Новая среда разработки на базе Eclipse Новый язык программирования ActionScript 3 Ориентирована на традиционных разработчиков

4 Константин Ковалев Насыщенные Интернет- приложения (RIA) Термин введен Macromedia в марте 2002

5 Константин Ковалев Adobe Flex 2 – мощная среда для создания RIA Объединение группы технологий на базе Flash- платформы Flex – это DSL для GUI (Брюс Эккель)

6 Константин Ковалев Продукты в составе Flex

7 Константин Ковалев Поддержка стандартов XML (MXML) ECMA-262, edition 4 (ActionScript 3) E4X (ECMAScript for XML из ECMA ed.) CSS, level 1 (CSS1) Событийная модель W3C DOM Level 3 Events specification J2EE (Adobe LiveCycle Data Services)

8 Константин Ковалев Flash Player 9 Альфа-версия появилась в октябре 2005 (как Flash Player 8.5) Релиз в июне 2006 Вес плеера по-прежнему в районе 1M (примерно на 300K больше Flash Player 8) Повышенная производительность

9 Константин Ковалев Встроенная поддержка классов Строгая типизация + динамика Ошибки времени исполнения Реорганизованный API + новые API JIT-компилятор Введены примитивные типы int и uint Регулярные выражения var example:RegExp = /(\d)abc(\d*)/g; либо var example:RegExp = new RegExp ("(\d)abc(\d*)", "g"); Проект Tamarin ActionScript 3

10 Константин Ковалев Display List API «Классовый» подход: var aButton:Button = new Button (); вместо var aButton:MovieClip = aBox.attachMovie (button, button, 0); Возможность смены родителя var aButton:Button = new Button (); aBox.addChild (aButton); aContainer.addChild(aButton);

11 Константин КовалевE4X Простота и наглядность Так же прост, как XPath и SQL Простая запись XML Получение списка продуктов либо Получение всех продуктов на букву F == 0) var myXML:XML = myXML.company +=

12 Константин Ковалев Наследование Объявление стилей в CSS-файлах, в MXML- классах, внутри MXML- тэгов Runtime CSS Стили компилируются внутрь swf СкинизацияCSS Panel { font-family: Times, "_serif"; font-size: 24; }.areaStyle { color: #FF00FF; font-size: 12; border-style:none; }

13 Константин Ковалев .panelButton { top: 10; bottom: 40; left: 10; right: 60;}.panelArea { bottom: 10; horizontal-center: -25;}.panelButton { top: 10; bottom: 10; left: 90; right: 10;}.panelArea { top: 10; left: 10;} Позиционирование с помощью CSS

14 Константин Ковалев Декларативная форма Расширяемость Data binding Встраивание блоков кода Встраивание CSS Модульность Мощный фрэймворк компонент Контейнеры MXML-файл ActionScript-классMXML

15 Константин Ковалев public class MyApp extends mx.core.Application { private var myText:TextArea; private var myButton:Button; public function MyApp(){ layout = "vertical"; myText = new TextArea (); addChild(myText); myText.editable = false; myText.width = 300; myText.height = 200; myButton = new Button (); addChild(myButton); myButton.label = "Нажми меня!"; myButton.addEventListener("click", onButtonClick); } private function onButtonClick (event:MouseEvent):void { myText.text += 'Еще раз\n' } MXML: что проще? VS

16 Константин Ковалев Москва Санкт-Петербург Новосибирск Владивосток MXML: расширяемость Компонент:Приложение:

17 Константин Ковалев Москва Санкт-Петербург Новосибирск Владивосток MXML: data binding Компонент:Приложение:

18 Константин Ковалев MXML: модульность Компонент:Подкомпонент: Москва Санкт-Петербург Новосибирск Владивосток

19 Константин Ковалев [Event (name="cityChange", type="flash.events.Event")] MXML: события Компонент:Приложение:

20 Константин Ковалев Code behind Код:Разметка: package com.riapriority.rit2007 { import flash.events.MouseEvent; import mx.containers.Box; import mx.controls.Alert; import mx.controls.Button; import mx.controls.TextInput; import mx.events.FlexEvent; import mx.utils.StringUtil; public class LoginFormBase extends Box { public var yourName:TextInput; public var submitButton:Button; public function LoginFormBase() { addEventListener(FlexEvent.CREATION_COMPLETE, onComplete); } private function onComplete (event:FlexEvent):void { submitButton.addEventListener(MouseEvent.CLICK, onSubmit); } private function onSubmit (event:MouseEvent):void { var message:String = StringUtil.substitute ("Превед, {0}!", yourName.text); Alert.show(message); }

21 Константин Ковалев Компоненты и контейнеры Расширяемые (MXML и ActionScript) Datagrid, Tree, List, TileList, HorizontalList,... Tab, Accordion, Menu,... RichText Editor, Sliders,... ToggleButton, PopupButton,... Медиа-компоненты Charting Components Panel, VBox, HBox, VDividedBox, HDivideBox, Form, Tile, Grid, … Валидаторы, Форматтеры, Эффекты, Состояния, Dragndrop, Модули, RSL, Resource Bundles +

22 Константин Ковалев Клиентская библиотека Сервер на базе J2EE HTTP/S, AMF, RTMF/S Server Data Pushing Компиляция swf на сервере Удаленный вызов процедур (RPC) Publish/Subscribe Messaging CRUD Кластеризация Бесплатно для 1 CPU, $6,000 (до 100 пользователей), $20,000 (без ограничений) Adobe LiveCycle Data Services

23 Константин Ковалев Flash vs Flex

24 Константин Ковалев Q&A RIA-разработчик