In this presentation you will see changes in Flex Framework that were made for version 4.

1. GUMBO
(Flex Framework 4)
Бесплатный фреймворк с открытым кодом для разработки
насыщенных интернет приложений (RIA), которые
поддерживаются всеми ведущими браузерами, платформами и
операционными системами.
Skype: mr.dr.jr. Email: Mr_Dr_Jr@me.com
Sunday, May 30, 2010

2. Flex 4 концепция и структура
Работа в Flex 4 основана на трех принципах:
Все внимание дизайну: среда разработки обеспечивает новый
уровень выразительности конечных проектов, благодаря
использованию новых инструментов.
Продуктивность разработки: улучшенная производительность
компилятора и языковых функций, таких как привязка данных.
Эволюция фреймворка: новые возможности проигрывателя Flash
Player в сочетании с новыми функциями.
Sunday, May 30, 2010

3. Flex 4 концепция и структура
Улучшенный компилятор Spark Продвинутый CSS
Скин
Двустороннее Типизированные
связывание данных массивы (Vector)
Модель компонента
Расширенная работа с
Компоненты Spark Поддержка FTE/TLF
состояниями
Трансформация
Графические Улучшенная
элементов
примитивы анимация
компоновки
Динамический
Поддержка FXG Встроенный OSMF
layout
Sunday, May 30, 2010

4. Язык разметки MXML и пространства имен
 MXML 2006: Пространство имен языка MXML предыдущей версии.
Префикс по умолчанию: mx
 MXML 2009: Новое пространство имен языка MXML. Представляет
собой только пространство имен языка, не содержащее тегов
компонента.
Префикс по умолчанию: fx
 Spark: Данное пространство имен включает все новые компоненты
Spark. Его необходимо использовать в сочетании с пространством
имен языка MXML 2009.
Префикс по умолчанию: s
 MX: Данное пространство имен включает все компоненты MX. Его
необходимо использовать в сочетании с пространством имен
языка MXML 2009.
Префикс по умолчанию: mx
Sunday, May 30, 2010

5. Пример использования пространств имен
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:Fade id="fadeEffect" target="{main_calendar}"
alphaFrom="1" alphaTo="0" />
</fx:Declarations>
<mx:DateChooser id="main_calendar" x="279" y="23"/>
<s:Button label="play effect" click="fadeEffect.play()" x="325"
y="258"/>
</s:Application>
Sunday, May 30, 2010

6. Flex 4 – улучшение продуктивности
 Двустороннее связывание данных
 text=“@{myModel.data}”
 <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />
 Улучшена работа с CSS
 Многочисленные StyleName:
<Button id=“upButton” styleName=“default tiny” />
 ID селекторы:
#upButton { fontSize: 14 }
 Селекторы дочерних элементов:
s|Scrollbar #upButton { baseColor: #FF8888 }
 Псевдо селекторы:
s|Scrollbar #upButton:over { baseColor: #8888FF }
 Неймспейсы в CSS
@namespace s "library://ns.adobe.com/flex/spark";
Sunday, May 30, 2010

7. Новый механизм создания анимации
 Работа с любыми объектами (не только UIComponents)
 Анимация свойств и частей компонента
 Автоматический возврат при смене состояний
 Поддержка фильтров, в том числе и Pixel Bender
 Трансформации в трех измерениях
 Поддержка ключевых кадров
Sunday, May 30, 2010

8. Компоновка (Layout)
 Динамическая
 Есть возможность создать Custom Layout
 Поддержка двумерных и трехмерных трансформаций
 Управление вложенностью
 Виртуализация
 Плавный скроллинг
Sunday, May 30, 2010

9. Flex 4 – Поддержка ASDoc в документах MXML
<?xml version="1.0"?>
<!–- Стандартный комментарий-->
<!--- ASDoc Коментарий для класса. -->
<mx:VBox xmlns="http://ns.adobe.com/mxml/2009" xmlns:mx="library:adobe/flex/halo" >
<!--- Коментарий для кнопки-->
<mx:Button id="myButton" label="This button has comment" />
<!--- Этот комментарий не принадлежит никакому компоненту и будет проигнорирован-->
</mx:VBox>
Sunday, May 30, 2010

10. Графика в MXML
<fx:Library>
<fx:Definition name="MySquare">
<s:Group>
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="red"/>
</s:stroke>
</s:Rect>
</s:Group>
</fx:Definition>
<fx:Definition name="MyCircle">
<s:Group>
<s:Ellipse width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="blue"/>
</s:stroke>
</s:Ellipse>
</s:Group>
</fx:Definition>
</fx:Library>
Sunday, May 30, 2010

11. Графика в MXML
 Простые Формы
(прямоугольники, эллипсы, окружности и другие)
 Сложные Линии
(прямые, квадратичные, кривые Безье)
 Широкий спектр заливок и контуров
(сплошные, прозрачные, с использованием картинок,
градиенты)
 Маскирование, фильтры, режимы смешивания
(размытие, сияние, тень)
 Цвета и 2D трансформации
(поворот, масштабирование, оттенок)
 Интегрированный текст, картинки
Sunday, May 30, 2010

12. Flash XML Graphics (FXG)
FXG: графический формат Инструменты для дизайна и разработки
основанный на XML
 Распознается графическими Flash CS4 Flash Flash
Professional Catalyst
редакторами Builder
Интерактивное Создание
Eclipse IDE
 Базируется на модели отрисовки содержание прототипов
10 flash плейера Анимация Разработка Анализ кода
рабочих
 Статический – без связываний, Визуальная
компоновка
процессов
Отладка
без компоновки, без слушателей
событий, без стилизации
 Оптимизируется FXG
компилятором (важно для
высокой производительности)
After Effects Illustrator Fireworks Photoshop
Sunday, May 30, 2010

13. Пример FXG:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/ArrowAbsolute.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Path data="M 20 0 C 50 0 50 35 20 35 L 15 35 L 15 45 L 0 32 L 15 19 L 15 29 L 20 29 C 44 29"/>
<!-- Define the border color of the arrow. -->
<stroke>
<SolidColorStroke color="#888888"/>
</stroke>
<!-- Define the fill for the arrow. -->
<fill>
<LinearGradient rotation="90">
<GradientEntry color="#000000" alpha="0.8"/>
<GradientEntry color="#FFFFFF" alpha="0.8"/>
</LinearGradient>
</fill>
</Path>
</Graphic>
Sunday, May 30, 2010

14. High-Fidelity Text
 FTE: Новый механизм работы с текстом
(Flash Player 10)
 TLF: Новые компоненты используют
FTE.
 Преимущества:
 Текст в нескольких связанных контейнерах
 Вертикальный текст
 Множество столбцов
 Лигатуры и типографические элементы
 Работа с пользовательскими шрифтами
 Двунаправленный текст
Sunday, May 30, 2010

15. Стейты во Flex 3
Сложны в использовании
 Многословные в описании
 Сложное управление иерархией
 Трудно оптимизируемые
<states>
<State name=”login”>
<SetProperty target=“{goBtn}” name=“label” value=“log in” />
</State>
<State name=”register”>
<SetProperty target=“{goBtn}” name=“label” value=“sign up” />
<AddChild target=“vBox”>
<Checkbox label=“Agree to terms” />
</AddChild>
</State>
</states>
<VBox id=“vBox” >
<Text text=“username:” />
<TextInput />
<Text text=“password:” />
<TextInput />
<Button label=“new user?” />
<Button id=“goBtn” />
</VBox>
Sunday, May 30, 2010

16. Стейты во Flex 3
Сложны в использовании
 Многословные в описании
 Сложное управление иерархией
 Трудно оптимизируемые
<states>
<State name=”login”>
<SetProperty target=“{goBtn}” name=“label” value=“log in” />
</State>
<State name=”register”>
<SetProperty target=“{goBtn}” name=“label” value=“sign up” />
<AddChild target=“vBox”>
<Checkbox label=“Agree to terms” />
</AddChild>
</State>
</states>
<VBox id=“vBox” >
<Text text=“username:” />
<TextInput />
<Text text=“password:” />
<TextInput />
<Button label=“new user?” />
<Button id=“goBtn” label.login=”log in” label.register=”sign up”/>
/>
</VBox>
Sunday, May 30, 2010

17. Стейты во Flex 3
Сложны в использовании
 Многословные в описании
 Сложное управление иерархией
 Трудно оптимизируемые
<states>
<State name=”login”>
<SetProperty target=“{goBtn}” name=“label” value=“log in” />
</State>
<State name=”register”>
<SetProperty target=“{goBtn}” name=“label” value=“sign up” />
<AddChild target=“vBox”>
<Checkbox label=“Agree to terms” />
</AddChild>
</State>
</states>
<VBox id=“vBox” >
<Text text=“username:” />
<TextInput />
<Text text=“password:” />
<TextInput />
<Button label=“new user?” />
<Button id=“goBtn” label.login=”log in” label.register=”sign up”/>
/>
<Checkbox includeIn=“register” label=“agree to terms” />
</VBox>
<Button id=“goBtn” label.login=”log in” label.register=”sign up”/>
</VBox>
Sunday, May 30, 2010

18. Стейты во Flex 4
<states>
<State name=”login”/>
<State name=”register”/>
</states>
<VBox id=“vBox” >
<Text text=“username:” />
<TextInput />
<states> text=“password:” />
<Text
<TextInput />
<State name=”login”>
<Button label=“new user?” />
<SetProperty target=“{goBtn}” name=“label” value=“log in” />
</State>
<Checkbox includeIn=“register” label=“agree to terms” />
<Button name=”register”>
<State id=“goBtn” label.login=”log in” label.register=”sign up”/>
</VBox> <SetProperty target=“{goBtn}” name=“label” value=“sign up” />
<AddChild target=“vBox”>
<Checkbox label=“Agree to terms” />
</AddChild>
</State>
</states>
<VBox id=“vBox” >
<Text text=“username:” />
<TextInput />
<Text text=“password:” />
<TextInput />
<Button label=“new user?” />
<Button id=“goBtn” label.login=”log in” label.register=”sign up”/>
/>
<Checkbox includeIn=“register” label=“agree to terms” />
</VBox>
<Button id=“goBtn” label.login=”log in” label.register=”sign up”/>
</VBox>
Sunday, May 30, 2010

19. Скинование и архитектура компонентов
MXML
MX
Component/Skin
Component
Model
Graphics
Layout
Animation
Parts
States
Behavior
Logic
Data
Sunday, May 30, 2010

20. Скинование и архитектура компонентов
ActionScript MXML
Spark
Component Skin
Component
Model
Behavior Graphics
Logic Layout
Animation
Data CSS
Parts
properties States
Sunday, May 30, 2010

21. Skinning Lifecycle
Sunday, May 30, 2010

22. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()
invalidateSkinState()
Execution
commitProperties()
getCurrentSkinState()
measure()
updateDisplayList()
Sunday, May 30, 2010

23. Пример использования
<s:Button skinClass="ButtonSkin" />
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- border and fill -->
<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x77CC22" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x131313" weight="2"/>
</s:stroke>
</s:Rect>
<!-- text -->
<s:Label text="Button!" color="0x131313"
textAlign="center" verticalAlign="middle"
horizontalCenter="0" verticalCenter="1"
left="12" right="12" top="6" bottom="6" />
</s:Skin>
Sunday, May 30, 2010

24. Datavisualization теперь часть Flex 4 SDK
Теперь это бесплатно!
Sunday, May 30, 2010