adobe flex константин ковалев
TRANSCRIPT
Adobe FlexAdobe FlexНовая технология для создания Новая технология для создания RIA RIA на базе на базе Flash-Flash-платформыплатформы
Константин КовалевКонстантин КовалевRIA-RIA-разработчикразработчикhttp://www.riapriority.com/http://www.riapriority.com/[email protected]@riapriority.com
www.rit2007.ru
Константин Ковалев
Новая?Новая?
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
www.rit2007.ru
Константин Ковалев
Революционные особенности Революционные особенности Flex 2Flex 2 Возможность создания приложений без
необходимости компиляции на сервере Бесплатный SDK Новая виртуальная машина Новая среда разработки на базе Eclipse Новый язык программирования ActionScript 3 Ориентирована на традиционных разработчиков
www.rit2007.ru
Константин Ковалев
Насыщенные Интернет-Насыщенные Интернет-приложения (приложения (RIARIA)) Термин введен Macromedia в марте 2002
Текстовый интерфейс
Насыщенный интерфейс
Интернет
Локальная сеть
~1992
~1998
~2004
Мэйнфрэймы Десктоп
Веб-приложения
RIA
www.rit2007.ru
Константин Ковалев
Adobe Flex 2 – мощная среда Adobe Flex 2 – мощная среда для создания RIAдля создания RIA Объединение группы технологий на базе Flash-
платформы Flex – это DSL для GUI (Брюс Эккель)
Flex Builder
Flex SDK
MXML
ActionScript
CSS
Resource Bundles
SWC-библиотеки
Assets
Flex-framework
КомпиляцияSWF
www.rit2007.ru
Константин Ковалев
Продукты в составе Продукты в составе FlexFlex
Flex SDK
Языки
MXML и ActionScript 3
Фрэймворк
Компоненты, Контейнеры, Layout
Managers, Behaviors и эффекты
Утилиты
Компилятор, отладчик, AsDoc
Adobe LiveCycle Data Services
Messaging
Data Management
RPC
Flex Bulder
Визуальный дизайнер
Подсветка кода и автокомплит
Отладчик
Редактор CSS
Документация
Расширяемость плагинами
www.rit2007.ru
Константин Ковалев
Поддержка стандартовПоддержка стандартов
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)
www.rit2007.ru
Константин Ковалев
Flash Player 9Flash Player 9
Альфа-версия появилась в октябре 2005 (как Flash Player 8.5)
Релиз в июне 2006 Вес плеера по-прежнему в районе 1M (примерно
на 300K больше Flash Player 8) Повышенная производительность
Flash Player 9
AVM1
ActionScript 1/2
AVM2
ActionScript 3
www.rit2007.ru
Константин Ковалев
Встроенная поддержка классов Строгая типизация + динамика Ошибки времени исполнения Реорганизованный API + новые API JIT-компилятор Введены примитивные типы int и uint Регулярные выраженияvar example:RegExp = /(\d)abc(\d*)/g;
либоvar example:RegExp = new RegExp ("(\d)abc(\d*)", "g");
Проект Tamarin
ActionScriptActionScript 3 3
www.rit2007.ru
Константин Ковалев
Display List APIDisplay List API
DisplayObject
AVM1Movie Bitmap InteractiveObject
DisplayObjectContainer
Loader Sprite Stage
SimpleButton TextField
MorphShape Shape
MovieClip
«Классовый» подход:var aButton:Button = new Button ();
вместоvar aButton:MovieClip =
aBox.attachMovie (“button”, “button”, 0);
Возможность смены родителя
var aButton:Button = new Button ();
aBox.addChild (aButton);
aContainer.addChild(aButton);
www.rit2007.ru
Константин Ковалев
E4XE4X
Простота и наглядность Так же прост, как XPath и SQL Простая запись XML Получение списка продуктовmyXML..product.@name
либоmyXML.company.products.product.@name
Получение всех продуктов на букву “F”myXML..product.(@name.indexOf('F') == 0)
var myXML:XML =
<companies>
<company name="Adobe">
<products>
<product name="Flex"/>
<product name="Flash"/>
<product name="Apollo"/>
</products>
</company>
</companies>
myXML.company +=
<company name="Macromedia">
<products>
<product name="Flex"/>
<product name="Flash"/>
<product name="Central"/>
</products>
</company>
www.rit2007.ru
Константин Ковалев
Наследование Объявление стилей в
CSS-файлах, в MXML-классах, внутри MXML-тэгов
Runtime CSS Стили компилируются
внутрь swf Скинизация
CSSCSS
<?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>
www.rit2007.ru
Константин Ковалев
<?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;}
Позиционирование Позиционирование с помощью с помощью CSSCSS
www.rit2007.ru
Константин Ковалев
Декларативная форма Расширяемость Data binding Встраивание блоков кода Встраивание CSS Модульность Мощный фрэймворк компонент Контейнеры MXML-файл ActionScript-класс
MXMLMXML
Flex SDK
Компилятор mxmlc
{ActionScript}
<MXML>
www.rit2007.ru
Константин Ковалев
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'
}
}
MXMLMXML: что проще?: что проще?
<?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
www.rit2007.ru
Константин Ковалев
<?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>
MXMLMXML: расширяемость: расширяемостьКомпонент: Приложение:
<?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>
www.rit2007.ru
Константин Ковалев
<?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")]
public function get currentCity ():String {
return selectedItem as String;
}
]]>
</mx:Script>
<mx:ArrayCollection id="cityList">
<mx:String>Москва</mx:String>
<mx:String>Санкт-Петербург</mx:String>
<mx:String>Новосибирск</mx:String>
<mx:String>Владивосток</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
MXMLMXML: : data bindingdata bindingКомпонент: Приложение:
<?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>
www.rit2007.ru
Константин Ковалев
<?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")]
public function get currentCity ():String {
return selectedItem as String;
}
]]>
</mx:Script>
<rit2007:CityListData id="cityList" />
</mx:ComboBox>
MXMLMXML: модульность: модульностьКомпонент: Подкомпонент:
<?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>
www.rit2007.ru
Константин Ковалев
<?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[
private function onChange ():void {
dispatchEvent(new Event ("cityChange"));}
[Bindable (event="cityChange")]
public function get currentCity ():String {
return selectedItem as String;
}]]></mx:Script>
<rit2007:CityListData id="cityList" />
</mx:ComboBox>
MXMLMXML: события: событияКомпонент: Приложение:
<?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:Label id="cityLabel"
text="{cityList.currentCity}" />
<rit2007:CityList id="cityList"
cityChange="labelBlur.play()“ />
<mx:Blur id="labelBlur"
target="{cityLabel}"
blurXFrom="50“ blurXTo="0" />
</mx:Application>
www.rit2007.ru
Константин Ковалев
Code behindCode behindКод: Разметка:
<?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>
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);
}
}
}
www.rit2007.ru
Константин Ковалев
КомКомпоненты и контейнерыпоненты и контейнеры
Расширяемые (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
+
www.rit2007.ru
Константин Ковалев
Клиентская библиотека Сервер на базе 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 ServicesAdobe LiveCycle Data Services
www.rit2007.ru
Константин Ковалев
Flash vsFlash vs FlexFlex
Таймлайн
Библиотека
Инструменты рисования
Ограниченная поддержка CSS
Бинарный исходник
Для аниматоров, художников и медиа-
дизайнеров
Таймлайн отсутствует
Внешние ассеты
ActionScript
Design View
Полноценный CSS
Текстовые исходники
Для разработчиков
ActionScript и MXML
www.rit2007.ru
Константин Ковалев
Q&AQ&A
Константин КовалевКонстантин КовалевRIA-RIA-разработчикразработчикhttp://www.riapriority.com/http://www.riapriority.com/[email protected]@riapriority.com