2. GUMBO
(Flex Framework 4)

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

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

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

6. Язык разметки MXML и пространства имен

7. Язык разметки MXML и пространства имен
 MXML 2006: Пространство имен языка MXML предыдущей версии.
Префикс по умолчанию: mx

8. Язык разметки MXML и пространства имен
 MXML 2006: Пространство имен языка MXML предыдущей версии.
Префикс по умолчанию: mx
 MXML 2009: Новое пространство имен языка MXML. Представляет
собой только пространство имен языка, не содержащее тегов
компонента.
Префикс по умолчанию: fx

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

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

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

12. Пример использования пространств имен
<?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>

13. Flex 4 – улучшение продуктивности

14. Flex 4 – улучшение продуктивности
 Двустороннее связывание данных

15. Flex 4 – улучшение продуктивности
 Двустороннее связывание данных
 text=“@{myModel.data}”

16. Flex 4 – улучшение продуктивности
 Двустороннее связывание данных
 text=“@{myModel.data}”
 <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />

17. Flex 4 – улучшение продуктивности
 Двустороннее связывание данных
 text=“@{myModel.data}”
 <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />
 Улучшена работа с CSS

18. Flex 4 – улучшение продуктивности
 Двустороннее связывание данных
 text=“@{myModel.data}”
 <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />
 Улучшена работа с CSS
 Многочисленные StyleName:
<Button id=“upButton” styleName=“default tiny” />

19. 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 }

20. 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 }

21. 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 }

22. 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

23. 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";

24. Новый механизм создания анимации

25. Новый механизм создания анимации
 Работа с любыми объектами (не только UIComponents)

26. Новый механизм создания анимации
 Работа с любыми объектами (не только UIComponents)
 Анимация свойств и частей компонента

27. Новый механизм создания анимации
 Работа с любыми объектами (не только UIComponents)
 Анимация свойств и частей компонента
 Автоматический возврат при смене состояний

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

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

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

31. Компоновка (Layout)

32. Компоновка (Layout)
 Динамическая

33. Компоновка (Layout)
 Динамическая
 Есть возможность создать Custom Layout

34. Компоновка (Layout)
 Динамическая
 Есть возможность создать Custom Layout
 Поддержка двумерных и трехмерных трансформаций

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

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

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

38. 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>

39. Графика в MXML

40. Графика в MXML

41. Графика в 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>

42. Графика в MXML

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

44. Flash XML Graphics (FXG)

45. Flash XML Graphics (FXG)
FXG: графический формат
основанный на XML

46. Flash XML Graphics (FXG)
FXG: графический формат
основанный на XML
 Распознается графическими
редакторами

47. Flash XML Graphics (FXG)
FXG: графический формат
основанный на XML
 Распознается графическими
редакторами
 Базируется на модели отрисовки
10 flash плейера

48. Flash XML Graphics (FXG)
FXG: графический формат
основанный на XML
 Распознается графическими
редакторами
 Базируется на модели отрисовки
10 flash плейера
 Статический – без связываний,
без компоновки, без слушателей
событий, без стилизации

49. Flash XML Graphics (FXG)
FXG: графический формат
основанный на XML
 Распознается графическими
редакторами
 Базируется на модели отрисовки
10 flash плейера
 Статический – без связываний,
без компоновки, без слушателей
событий, без стилизации
 Оптимизируется
компилятором (важно для
высокой производительности)

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

51. Пример FXG:

52. Пример 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>

53. High-Fidelity Text

54. High-Fidelity Text
 FTE: Новый механизм работы с текстом
(Flash Player 10)

55. High-Fidelity Text
 FTE: Новый механизм работы с текстом
(Flash Player 10)
 TLF: Новые компоненты используют
FTE.

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

57. Стейты во Flex 3

58. Стейты во Flex 3
Сложны в использовании
 Многословные в описании
 Сложное управление иерархией
 Трудно оптимизируемые

59. Стейты во 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>

60. Стейты во 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>

61. Стейты во 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>

62. Стейты во 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>

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

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

65. Skinning Lifecycle

66. Skinnable Component Livecycle

67. Skinnable Component Livecycle
Invalidation

68. Skinnable Component Livecycle
Invalidation
invalidateProperties()

69. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()

70. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()

71. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()
Execution

72. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()
Execution
commitProperties()

73. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()
Execution
commitProperties()
measure()

74. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()
Execution
commitProperties()
measure()
updateDisplayList()

75. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()
invalidateSkinState()
Execution
commitProperties()
measure()
updateDisplayList()

76. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()
invalidateSkinState()
Execution
commitProperties()
measure()
updateDisplayList()

77. Skinnable Component Livecycle
Invalidation
invalidateProperties()
invalidateSize()
invalidateDisplayList()
invalidateSkinState()
Execution
commitProperties()
getCurrentSkinState()
measure()
updateDisplayList()

78. Пример использования

79. Пример использования
<s:Button skinClass="ButtonSkin" />

80. Пример использования
<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>

81. Пример использования
<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>

82. Datavisualization теперь часть Flex 4 SDK
Теперь это бесплатно!