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

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



<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: что проще?: что проще?


<mx:Application


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





<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: расширяемость: расширяемостьКомпонент: Приложение:


<mx:Application


xmlns:rit2007="com.riapriority.rit2007.*"

layout="vertical">

<rit2007:CityList />

</mx:Application>

www.rit2007.ru




<mx:ComboBox


creationComplete="dispatchEvent(new Event ('change'))"


<mx:Script>

<![CDATA[

[Bindable (event="change")]

public function get currentCity ():String {

return selectedItem as String;

}

]]>

</mx:Script>

<mx:ArrayCollection id="cityList">






</mx:ComboBox>

MXMLMXML: : data bindingdata bindingКомпонент: Приложение:


<mx:Application



layout="vertical">

<rit2007:CityList

id="cityList" />

<mx:Label

text="{cityList.currentCity}" />

</mx:Application>

www.rit2007.ru




<mx:ComboBox


creationComplete="dispatchEvent(new Event ('change'))"


xmlns:rit2007="com.riapriority.rit2007.*">

<mx:Script>

<![CDATA[

[Bindable (event="change")]



}

]]>

</mx:Script>

<rit2007:CityListData id="cityList" />

</mx:ComboBox>

MXMLMXML: модульность: модульностьКомпонент: Подкомпонент:


<mx:ArrayCollection


<mx:source>





</mx:source>


www.rit2007.ru




<mx:ComboBox


creationComplete=" onChange()"

change=" onChange()"


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")]



}]]></mx:Script>

<rit2007:CityListData id="cityList" />

</mx:ComboBox>

MXMLMXML: события: событияКомпонент: Приложение:


<mx:Application



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Код: Разметка:


<LoginFormBase

direction="vertical"

xmlns="com.riapriority.rit2007.*"


<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

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

Technology

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