0
Adobe Flex Новая технология для создания  RIA  на базе  Flash- платформы Константин Ковалев RIA- разработчик http://www.ri...
Новая? <ul><ul><li>Macromedia Flex 1.0  (март 2004)  Flash Player 7, ActionScript 2 </li></ul></ul><ul><ul><li>Macromedia ...
Революционные особенности  Flex 2 <ul><ul><li>Возможность создания приложений без необходимости компиляции на сервере </li...
Насыщенные Интернет-приложения ( RIA ) <ul><ul><li>Термин введен  Macromedia  в марте 2002 </li></ul></ul>
Adobe Flex 2 – мощная среда  для создания RIA <ul><ul><li>Объединение группы технологий на базе Flash-платформы </li></ul>...
Продукты в составе  Flex
Поддержка стандартов <ul><ul><li>XML  ( MXML ) </li></ul></ul><ul><ul><li>ECMA-262, edition 4  (ActionScript 3) </li></ul>...
Flash Player 9 <ul><ul><li>Альфа-версия появилась в октябре 2005  (как Flash Player 8.5) </li></ul></ul><ul><ul><li>Релиз ...
ActionScript  3 <ul><ul><li>Встроенная поддержка классов </li></ul></ul><ul><ul><li>Строгая типизация + динамика </li></ul...
Display List API <ul><ul><li>«Классовый» подход: </li></ul></ul><ul><ul><li>var  aButton:Button =  new  Button (); </li></...
E4X <ul><ul><li>Простота и наглядность </li></ul></ul><ul><ul><li>Так же прост, как XPath и SQL </li></ul></ul><ul><ul><li...
CSS <ul><ul><li>Наследование </li></ul></ul><ul><ul><li>Объявление стилей в CSS-файлах, в MXML -классах , внутри  MXML- тэ...
Позиционирование  с помощью  CSS <ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul></ul><ul...
MXML <ul><ul><li>Декларативная форма </li></ul></ul><ul><ul><li>Расширяемость </li></ul></ul><ul><ul><li>Data binding </li...
MXML : что проще? public   class  MyApp extends  mx.core.Application { p rivate   var  myText:TextArea; p rivate   var  my...
MXML : расширяемость <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!-- com.riapriority.rit2007.CityList.mxml...
MXML :  data binding <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!-- com.riapriority.rit2007.CityList.mxml...
MXML : модульность <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!-- com.riapriority.rit2007.CityList.mxml -...
MXML : события <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!-- com.riapriority.rit2007.CityList.mxml --> <...
Code behind Код: Разметка: <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <LoginFormBase  direction=&quot;vert...
Ком поненты и контейнеры <ul><ul><li>Расширяемые ( MXML  и  ActionScript ) </li></ul></ul><ul><li>Datagrid, Tree, List, Ti...
Adobe LiveCycle Data Services <ul><ul><li>Клиентская библиотека </li></ul></ul><ul><ul><li>Сервер на базе  J2EE </li></ul>...
Flash vs   Flex
Q&A Константин Ковалев RIA- разработчик http://www.riapriority.com/ [email_address]
Upcoming SlideShare
Loading in...5
×

Adobe Flex константин ковалев

1,053

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Good Presentation about adobe photo shop. I got good information from your site.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,053
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Adobe Flex константин ковалев"

  1. 1. Adobe Flex Новая технология для создания RIA на базе Flash- платформы Константин Ковалев RIA- разработчик http://www.riapriority.com/ [email_address]
  2. 2. Новая? <ul><ul><li>Macromedia Flex 1.0 (март 2004) Flash Player 7, ActionScript 2 </li></ul></ul><ul><ul><li>Macromedia Flex 1.5 (октябрь 2004) Flash Player 7, ActionScript 2 </li></ul></ul><ul><ul><li>Macromedia Flex 2.0 public alpha 1 (октябрь 2005) Flash Player 8.5, ActionScript 3 </li></ul></ul><ul><ul><li>Adobe Flex 2.0 (28 июня 2006) Flash Player 9 </li></ul></ul><ul><ul><li>Adobe Flex 2.0.1 (5 января 2007) Flash Player 9 </li></ul></ul>
  3. 3. Революционные особенности Flex 2 <ul><ul><li>Возможность создания приложений без необходимости компиляции на сервере </li></ul></ul><ul><ul><li>Бесплатный SDK </li></ul></ul><ul><ul><li>Новая виртуальная машина </li></ul></ul><ul><ul><li>Новая среда разработки на базе Eclipse </li></ul></ul><ul><ul><li>Новый язык программирования ActionScript 3 </li></ul></ul><ul><ul><li>Ориентирована на традиционных разработчиков </li></ul></ul>
  4. 4. Насыщенные Интернет-приложения ( RIA ) <ul><ul><li>Термин введен Macromedia в марте 2002 </li></ul></ul>
  5. 5. Adobe Flex 2 – мощная среда для создания RIA <ul><ul><li>Объединение группы технологий на базе Flash-платформы </li></ul></ul><ul><ul><li>Flex – это DSL для GUI (Брюс Эккель) </li></ul></ul>
  6. 6. Продукты в составе Flex
  7. 7. Поддержка стандартов <ul><ul><li>XML ( MXML ) </li></ul></ul><ul><ul><li>ECMA-262, edition 4 (ActionScript 3) </li></ul></ul><ul><ul><li>E4X (ECMAScript for XML из ECMA-357 2 ed.) </li></ul></ul><ul><ul><li>CSS , level 1 (CSS1) </li></ul></ul><ul><ul><li>Событийная модель W3C DOM Level 3 Events specification </li></ul></ul><ul><ul><li>J2EE (Adobe LiveCycle Data Services) </li></ul></ul>
  8. 8. Flash Player 9 <ul><ul><li>Альфа-версия появилась в октябре 2005 (как Flash Player 8.5) </li></ul></ul><ul><ul><li>Релиз в июне 2006 </li></ul></ul><ul><ul><li>Вес плеера по-прежнему в районе 1M (примерно на 300K больше Flash Player 8) </li></ul></ul><ul><ul><li>Повышенная производительность </li></ul></ul>
  9. 9. ActionScript 3 <ul><ul><li>Встроенная поддержка классов </li></ul></ul><ul><ul><li>Строгая типизация + динамика </li></ul></ul><ul><ul><li>Ошибки времени исполнения </li></ul></ul><ul><ul><li>Реорганизованный API + новые API </li></ul></ul><ul><ul><li>JIT- компилятор </li></ul></ul><ul><ul><li>Введены примитивные типы int и uint </li></ul></ul><ul><ul><li>Регулярные выражения </li></ul></ul><ul><ul><li>var example:RegExp = /(d)abc(d*)/g ; </li></ul></ul><ul><ul><li>либо </li></ul></ul><ul><ul><li>var example:RegExp = new RegExp ( &quot;(d)abc(d*)&quot; , &quot;g&quot; ); </li></ul></ul><ul><ul><li>Проект Tamarin </li></ul></ul>
  10. 10. Display List API <ul><ul><li>«Классовый» подход: </li></ul></ul><ul><ul><li>var aButton:Button = new Button (); </li></ul></ul><ul><ul><li>вместо </li></ul></ul><ul><ul><li>var aButton: MovieClip = aBox.attachMovie (“button”, “button”, 0) ; </li></ul></ul><ul><ul><li>Возможность смены родителя </li></ul></ul><ul><ul><li>var aButton:Button = new Button (); </li></ul></ul><ul><ul><li>aBox.addChild (aButton); </li></ul></ul><ul><ul><li>aContainer.addChild(aButton); </li></ul></ul>
  11. 11. E4X <ul><ul><li>Простота и наглядность </li></ul></ul><ul><ul><li>Так же прост, как XPath и SQL </li></ul></ul><ul><ul><li>Простая запись XML </li></ul></ul><ul><ul><li>Получение списка продуктов </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>либо </li></ul></ul><ul><ul><li>myXML. company .products.product.@name </li></ul></ul><ul><ul><li>Получение всех продуктов на букву “F” </li></ul></ul><ul><ul><li>myXML..product.(@name.indexOf( 'F' ) == 0) </li></ul></ul>var myXML:XML = <companies> <company name= &quot;Adobe&quot; > <products> <product name= &quot;Flex&quot; /> <product name= &quot;Flash&quot; /> <product name= &quot;Apollo&quot; /> </products> </company> </companies> myXML.company += <company name= &quot;Macromedia&quot; > <products> <product name= &quot;Flex&quot; /> <product name= &quot;Flash&quot; /> <product name= &quot;Central&quot; /> </products> </company>
  12. 12. CSS <ul><ul><li>Наследование </li></ul></ul><ul><ul><li>Объявление стилей в CSS-файлах, в MXML -классах , внутри MXML- тэгов </li></ul></ul><ul><ul><li>Runtime CSS </li></ul></ul><ul><ul><li>Стили компилируются внутрь swf </li></ul></ul><ul><ul><li>Скинизация </li></ul></ul><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;vertical&quot;> <mx:Style> Panel { font-family: Times, &quot;_serif&quot;; font-size: 24; } .areaStyle { color: #FF00FF; font-size: 12; border-style:none; } </mx:Style> <mx:Panel title=&quot;Hello!&quot;> <mx:Button fontSize=&quot;18&quot; label=&quot;Button&quot; /> <mx:TextArea styleName=&quot;areaStyle&quot; text=&quot;Hello, World!&quot; /> </mx:Panel> </mx:Application>
  13. 13. Позиционирование с помощью CSS <ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul></ul><ul><ul><li><mx:Application </li></ul></ul><ul><ul><li>xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;vertical&quot;> </li></ul></ul><ul><ul><li><mx:Style source=&quot;layout.css&quot;/> </li></ul></ul><ul><ul><li><mx:Panel width=&quot;50%&quot; height=&quot;50%&quot; layout=&quot;absolute« title=&quot;Hello!&quot;> </li></ul></ul><ul><ul><li><mx:Button styleName=&quot;panelArea&quot; label=&quot;Button&quot; /> </li></ul></ul><ul><ul><li><mx:TextArea styleName=&quot;panelButton&quot; text=&quot;Hello, World!&quot; /> </li></ul></ul><ul><ul><li></mx:Panel> </li></ul></ul><ul><ul><li></mx:Application> </li></ul></ul>.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. 14. MXML <ul><ul><li>Декларативная форма </li></ul></ul><ul><ul><li>Расширяемость </li></ul></ul><ul><ul><li>Data binding </li></ul></ul><ul><ul><li>Встраивание блоков кода </li></ul></ul><ul><ul><li>Встраивание CSS </li></ul></ul><ul><ul><li>Модульность </li></ul></ul><ul><ul><li>Мощный фрэймворк компонент </li></ul></ul><ul><ul><li>Контейнеры </li></ul></ul><ul><ul><li>MXML -файл ActionScript -класс </li></ul></ul>
  15. 15. MXML : что проще? public class MyApp extends mx.core.Application { p rivate var myText:TextArea; p rivate var myButton:Button; public function MyApp(){ layout = &quot;vertical&quot; ; myText = new TextArea (); addChild(myText) ; myText.editable = false ; myText.width = 300; myText.height = 200; myButton = new Button (); addChild(myButton) ; myButton.label = &quot;Нажми меня!&quot; ; m yButton.addEventListener( &quot;click&quot; , onButtonClick); } private function onButtonClick (event:MouseEvent): void { myText.text += 'Еще раз ' } } <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;vertical&quot;> <mx:TextArea editable=&quot;false&quot; id=&quot;myText&quot; width=&quot;300&quot; height=&quot;200&quot; /> <mx:Button id=&quot;myButton&quot; label=&quot;Нажми меня!&quot; click=&quot;myText.text += 'Еще раз ' &quot; /> </mx:Application> VS
  16. 16. MXML : расширяемость <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!-- com.riapriority.rit2007.CityList.mxml --> <mx:ComboBox dataProvider=&quot;{cityList}&quot; xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;> <mx:ArrayCollection id=&quot;cityList&quot;> <mx:String>Москва</mx:String> <mx:String>Санкт-Петербург</mx:String> <mx:String>Новосибирск</mx:String> <mx:String>Владивосток</mx:String> </mx:ArrayCollection> </mx:ComboBox> Компонент: Приложение: <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; xmlns:rit2007=&quot;com.riapriority.rit2007.*&quot; layout=&quot;vertical&quot;> <rit2007:CityList /> </mx:Application>
  17. 17. MXML : data binding <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!-- com.riapriority.rit2007.CityList.mxml --> <mx:ComboBox dataProvider=&quot;{cityList}&quot; creationComplete= &quot;dispatchEvent( new Event ( 'change' ))&quot; xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;> <mx:Script> <![CDATA[ [Bindable (event=&quot;change&quot;)] public function get currentCity ():String { return selectedItem as String; } ]]> </mx:Script> <mx:ArrayCollection id=&quot;cityList&quot;> <mx:String>Москва</mx:String> <mx:String>Санкт-Петербург</mx:String> <mx:String>Новосибирск</mx:String> <mx:String>Владивосток</mx:String> </mx:ArrayCollection> </mx:ComboBox> Компонент: Приложение: <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; xmlns:rit2007=&quot;com.riapriority.rit2007.*&quot; layout=&quot;vertical&quot;> <rit2007:CityList id=&quot;cityList&quot; /> <mx:Label text=&quot;{cityList.currentCity}&quot; /> </mx:Application>
  18. 18. MXML : модульность <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!-- com.riapriority.rit2007.CityList.mxml --> <mx:ComboBox dataProvider=&quot;{cityList}&quot; creationComplete= &quot;dispatchEvent( new Event ( 'change' ))&quot; xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; xmlns:rit2007=&quot;com.riapriority.rit2007.*&quot;> <mx:Script> <![CDATA[ [ Bindable (event= &quot;change&quot; )] public function get currentCity ():String { return selectedItem as String; } ]]> </mx:Script> <rit2007:CityListData id=&quot;cityList&quot; /> </mx:ComboBox> Компонент: Подкомпонент: <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:ArrayCollection xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;> <mx:source> <mx:String>Москва</mx:String> <mx:String>Санкт-Петербург</mx:String> <mx:String>Новосибирск</mx:String> <mx:String>Владивосток</mx:String> </mx:source> </mx:ArrayCollection>
  19. 19. MXML : события <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!-- com.riapriority.rit2007.CityList.mxml --> <mx:ComboBox dataProvider=&quot;{cityList}&quot; creationComplete=&quot; on Change()&quot; change=&quot; on Change()&quot; xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; xmlns:rit2007=&quot;com.riapriority.rit2007.*&quot;> <mx:Metadata> [Event (name=&quot;cityChange&quot;, type=&quot;flash.events.Event&quot;)] </mx:Metadata> <mx:Script><![CDATA[ private function on Change (): void { dispatchEvent(new Event (&quot;cityChange&quot;));} [ Bindable (event= &quot;cityChange&quot; )] public function get currentCity ():String { return selectedItem as String; }]]></mx:Script> <rit2007:CityListData id=&quot;cityList&quot; /> </mx:ComboBox> Компонент: Приложение: <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; xmlns:rit2007=&quot;com.riapriority.rit2007.*&quot; layout=&quot;vertical&quot;> <mx:Label id=&quot;cityLabel&quot; text=&quot;{cityList.currentCity}&quot; /> <rit2007:CityList id=&quot;cityList&quot; cityChange=&quot;labelBlur.play()“ /> <mx:Blur id=&quot;labelBlur&quot; target=&quot;{cityLabel}&quot; blurXFrom=&quot;50“ blurXTo=&quot;0&quot; /> </mx:Application>
  20. 20. Code behind Код: Разметка: <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <LoginFormBase direction=&quot;vertical&quot; xmlns=&quot;com.riapriority.rit2007.*&quot; xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;> <mx:Form defaultButton=&quot;{submitButton}&quot;> <mx:FormItem label=&quot;Имя:&quot; required=&quot;true&quot;> <mx:TextInput id=&quot;yourName&quot; /> </mx:FormItem> <mx:FormItem label=&quot;&quot;> <mx:Button id=&quot;submitButton&quot; label=&quot;Подтвердить&quot;/> </mx:FormItem> </mx:Form> </LoginFormBase> 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 ( &quot;Превед, {0}!&quot; , yourName.text); Alert.show(message); } } }
  21. 21. Ком поненты и контейнеры <ul><ul><li>Расширяемые ( MXML и ActionScript ) </li></ul></ul><ul><li>Datagrid, Tree, List, TileList, HorizontalList,... </li></ul><ul><li>Tab, Accordion, Menu, ... </li></ul><ul><li>RichText Editor, Sliders, ... </li></ul><ul><li>ToggleButton, PopupButton, ... </li></ul><ul><li>Медиа-компоненты </li></ul><ul><li>Charting Components </li></ul><ul><li>Panel, VBox, HBox, VDividedBox, HDivideBox, Form, Tile, Grid, … </li></ul>Валидаторы, Форматтеры, Эффекты, Состояния, Drag’n’drop, Модули, RSL, Resource Bundles +
  22. 22. Adobe LiveCycle Data Services <ul><ul><li>Клиентская библиотека </li></ul></ul><ul><ul><li>Сервер на базе J2EE </li></ul></ul><ul><ul><li>HTTP/S, AMF, RTMF/S </li></ul></ul><ul><ul><li>Server Data Pushing </li></ul></ul><ul><ul><li>Компиляция swf на сервере </li></ul></ul><ul><ul><li>Удаленный вызов процедур (RPC) </li></ul></ul><ul><ul><li>Publish/Subscribe Messaging </li></ul></ul><ul><ul><li>CRUD </li></ul></ul><ul><ul><li>Кластеризация </li></ul></ul><ul><ul><li>Бесплатно для 1 CPU, $6,000 (до 100 пользователей), $20,000 (без ограничений) </li></ul></ul>
  23. 23. Flash vs Flex
  24. 24. Q&A Константин Ковалев RIA- разработчик http://www.riapriority.com/ [email_address]
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×