1 / 24

Adobe Flex

Adobe Flex. Новая технология для создания RIA на базе Flash- платформы. Константин Ковалев RIA- разработчик http://www.riapriority.com/ constantiner@riapriority.com. Новая?. Macromedia Flex 1.0 (март 2004) Flash Player 7, ActionScript 2

adair
Download Presentation

Adobe Flex

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adobe Flex Новая технология для создания RIA на базе Flash-платформы Константин Ковалев RIA-разработчик http://www.riapriority.com/ constantiner@riapriority.com

  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 2.0.1 (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-357 2 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. ActionScript 3 • Встроенная поддержка классов • Строгая типизация + динамика • Ошибки времени исполнения • Реорганизованный API + новые API • JIT-компилятор • Введены примитивные типы int и uint • Регулярные выражения var example:RegExp = /(\d)abc(\d*)/g; либо var example:RegExp = new RegExp ("(\d)abc(\d*)", "g"); • Проект Tamarin

  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 var myXML:XML = <companies> <company name="Adobe"> <products> <product name="Flex"/> <product name="Flash"/> <product name="Apollo"/> </products> </company> </companies> • Простота и наглядность • Так же прост, как XPath и SQL • Простая запись XML • Получение списка продуктов myXML..product.@name либо myXML.company.products.product.@name • Получение всех продуктов на букву “F” myXML..product.(@name.indexOf('F') == 0) myXML.company += <company name="Macromedia"> <products> <product name="Flex"/> <product name="Flash"/> <product name="Central"/> </products> </company>

  12. CSS • Наследование • Объявление стилей в CSS-файлах, в MXML-классах, внутри MXML-тэгов • Runtime CSS • Стили компилируются внутрь swf • Скинизация <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Style> Panel { font-family: Times, "_serif"; font-size: 24; } .areaStyle { color: #FF00FF; font-size: 12; border-style:none; } </mx:Style> <mx:Panel title="Hello!"> <mx:Button fontSize="18" label="Button" /> <mx:TextArea styleName="areaStyle" text="Hello, World!" /> </mx:Panel> </mx:Application>

  13. Позиционирование с помощью CSS <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Style source="layout.css"/> <mx:Panel width="50%" height="50%" layout="absolute«title="Hello!"> <mx:Button styleName="panelArea" label="Button" /> <mx:TextArea styleName="panelButton" text="Hello, World!" /> </mx:Panel> </mx:Application> .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;}

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

  15. MXML: что проще? publicclass MyApp extends mx.core.Application { privatevar myText:TextArea; privatevar myButton:Button; publicfunction 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); } privatefunction onButtonClick (event:MouseEvent):void { myText.text += 'Еще раз\n' } } <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:TextArea editable="false" id="myText" width="300" height="200" /> <mx:Button id="myButton" label="Нажми меня!" click="myText.text += 'Еще раз\n'" /> </mx:Application> VS

  16. MXML: расширяемость Компонент: Приложение: <?xml version="1.0" encoding="utf-8"?> <!-- com.riapriority.rit2007.CityList.mxml --> <mx:ComboBox dataProvider="{cityList}" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:ArrayCollection id="cityList"> <mx:String>Москва</mx:String> <mx:String>Санкт-Петербург</mx:String> <mx:String>Новосибирск</mx:String> <mx:String>Владивосток</mx:String> </mx:ArrayCollection> </mx:ComboBox> <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rit2007="com.riapriority.rit2007.*" layout="vertical"> <rit2007:CityList /> </mx:Application>

  17. MXML: data binding Компонент: Приложение: <?xml version="1.0" encoding="utf-8"?> <!-- com.riapriority.rit2007.CityList.mxml --> <mx:ComboBox dataProvider="{cityList}" creationComplete="dispatchEvent(new Event ('change'))" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ [Bindable (event="change")] publicfunctionget currentCity ():String { return selectedItem as String; } ]]> </mx:Script> <mx:ArrayCollectionid="cityList"> <mx:String>Москва</mx:String> <mx:String>Санкт-Петербург</mx:String> <mx:String>Новосибирск</mx:String> <mx:String>Владивосток</mx:String> </mx:ArrayCollection> </mx:ComboBox> <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rit2007="com.riapriority.rit2007.*" layout="vertical"> <rit2007:CityList id="cityList" /> <mx:Label text="{cityList.currentCity}" /> </mx:Application>

  18. MXML: модульность Компонент: Подкомпонент: <?xml version="1.0" encoding="utf-8"?> <!-- com.riapriority.rit2007.CityList.mxml --> <mx:ComboBox dataProvider="{cityList}" creationComplete="dispatchEvent(new Event ('change'))" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rit2007="com.riapriority.rit2007.*"> <mx:Script> <![CDATA[ [Bindable (event="change")] publicfunctionget currentCity ():String { return selectedItem as String; } ]]> </mx:Script> <rit2007:CityListData id="cityList" /> </mx:ComboBox> <?xml version="1.0" encoding="utf-8"?> <mx:ArrayCollection xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:source> <mx:String>Москва</mx:String> <mx:String>Санкт-Петербург</mx:String> <mx:String>Новосибирск</mx:String> <mx:String>Владивосток</mx:String> </mx:source> </mx:ArrayCollection>

  19. MXML: события Компонент: Приложение: <?xml version="1.0" encoding="utf-8"?> <!-- com.riapriority.rit2007.CityList.mxml --> <mx:ComboBox dataProvider="{cityList}" creationComplete=" onChange()" change=" onChange()" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rit2007="com.riapriority.rit2007.*"> <mx:Metadata> [Event (name="cityChange", type="flash.events.Event")] </mx:Metadata> <mx:Script><![CDATA[ privatefunctiononChange ():void { dispatchEvent(new Event ("cityChange"));} [Bindable (event="cityChange")] publicfunctionget currentCity ():String { return selectedItem as String; }]]></mx:Script> <rit2007:CityListDataid="cityList" /> </mx:ComboBox> <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rit2007="com.riapriority.rit2007.*" layout="vertical"> <mx:Labelid="cityLabel" text="{cityList.currentCity}" /> <rit2007:CityList id="cityList" cityChange="labelBlur.play()“/> <mx:Blurid="labelBlur" target="{cityLabel}" blurXFrom="50“blurXTo="0" /> </mx:Application>

  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; publicclass LoginFormBase extends Box { public var yourName:TextInput; public var submitButton:Button; publicfunction LoginFormBase() { addEventListener(FlexEvent.CREATION_COMPLETE, onComplete); } privatefunction onComplete (event:FlexEvent):void { submitButton.addEventListener(MouseEvent.CLICK, onSubmit); } privatefunction onSubmit (event:MouseEvent):void { var message:String = StringUtil.substitute ("Превед, {0}!", yourName.text); Alert.show(message); } } } <?xml version="1.0" encoding="utf-8"?> <LoginFormBase direction="vertical" xmlns="com.riapriority.rit2007.*" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Form defaultButton="{submitButton}"> <mx:FormItem label="Имя:" required="true"> <mx:TextInput id="yourName" /> </mx:FormItem> <mx:FormItem label=""> <mx:Button id="submitButton" label="Подтвердить"/> </mx:FormItem> </mx:Form> </LoginFormBase>

  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, … + Валидаторы, Форматтеры, Эффекты,Состояния, Drag’n’drop, Модули, RSL, Resource Bundles

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

  23. Flash vsFlex

  24. Q&A Константин Ковалев RIA-разработчик http://www.riapriority.com/ constantiner@riapriority.com

More Related