Upload
mrdrjr
View
2.260
Download
1
Embed Size (px)
Citation preview
GUMBO(Flex Framework 4)
Бесплатный фреймворк с открытым кодом для разработки насыщенных интернет приложений (RIA), которые поддерживаются всеми ведущими браузерами, платформами и операционными системами.
Skype: mr.dr.jr. Email: [email protected]
Sunday, May 30, 2010
Работа в Flex 4 основана на трех принципах:
Все внимание дизайну: среда разработки обеспечивает новый уровень выразительности конечных проектов, благодаря использованию новых инструментов.
Продуктивность разработки: улучшенная производительность компилятора и языковых функций, таких как привязка данных.
Эволюция фреймворка: новые возможности проигрывателя Flash Player в сочетании с новыми функциями.
Flex 4 концепция и структура
Sunday, May 30, 2010
Расширенная работа с состояниями
Графические примитивы
Динамическийlayout
Улучшенная анимация
Встроенный OSMF
Поддержка FTE/TLF
Трансформация элементов компоновки
Компоненты Spark
Поддержка FXG
Улучшенный компилятор
Двустороннее связывание данных
Продвинутый CSS
Типизированные массивы (Vector)
Модель компонента
Spark
Скин
Flex 4 концепция и структура
Sunday, May 30, 2010
Язык разметки MXML и пространства имен
MXML 2006: Пространство имен языка MXML предыдущей версии. Префикс по умолчанию: mx
MXML 2009: Новое пространство имен языка MXML. Представляет собой только пространство имен языка, не содержащее тегов компонента.Префикс по умолчанию: fx
Spark: Данное пространство имен включает все новые компоненты Spark. Его необходимо использовать в сочетании с пространством имен языка MXML 2009.Префикс по умолчанию: s
MX: Данное пространство имен включает все компоненты MX. Его необходимо использовать в сочетании с пространством имен языка MXML 2009.Префикс по умолчанию: mx
Sunday, May 30, 2010
Пример использования пространств имен
<?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
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
Новый механизм создания анимации
Работа с любыми объектами (не только UIComponents)
Анимация свойств и частей компонента
Автоматический возврат при смене состояний
Поддержка фильтров, в том числе и Pixel Bender
Трансформации в трех измерениях
Поддержка ключевых кадров
Sunday, May 30, 2010
Компоновка (Layout)
Динамическая
Есть возможность создать Custom Layout
Поддержка двумерных и трехмерных трансформаций
Управление вложенностью
Виртуализация
Плавный скроллинг
Sunday, May 30, 2010
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
Графика в 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
Графика в MXML
Простые Формы (прямоугольники, эллипсы, окружности и другие)
Сложные Линии(прямые, квадратичные, кривые Безье)
Широкий спектр заливок и контуров (сплошные, прозрачные, с использованием картинок, градиенты)
Маскирование, фильтры, режимы смешивания(размытие, сияние, тень)
Цвета и 2D трансформации(поворот, масштабирование, оттенок)
Интегрированный текст, картинки
Sunday, May 30, 2010
Flash XML Graphics (FXG)
FXG: графический формат основанный на XML
Распознается графическими редакторами
Базируется на модели отрисовки 10 flash плейера
Статический – без связываний, без компоновки, без слушателей событий, без стилизации
Оптимизируется компилятором (важно для высокой производительности)
Интерактивное содержание Eclipse IDE
Анализ кода
Отладка
Flash CS4Professional
FlashCatalyst
FlashBuilder
Инструменты для дизайна и разработки
After Effects Illustrator Fireworks Photoshop
FXG
Анимация
Визуальная компоновка
Создание прототипов
Разработка рабочих процессов
Sunday, May 30, 2010
Пример 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
High-Fidelity Text
FTE: Новый механизм работы с текстом (Flash Player 10)
TLF: Новые компоненты используют FTE.
Преимущества: Текст в нескольких связанных контейнерах
Вертикальный текст
Множество столбцов
Лигатуры и типографические элементы
Работа с пользовательскими шрифтами
Двунаправленный текст
Sunday, May 30, 2010
Стейты во 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
Стейты во 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>
<states><State name=”login”>
</State><State name=”register”>
<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
Стейты во 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>
<states><State name=”login”>
</State><State name=”register”>
<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>
<states><State name=”login”>
</State><State name=”register”>
</State></states>
<VBox id=“vBox” ><Text text=“username:” /><TextInput /><Text text=“password:” /><TextInput /><Button label=“new user?” /><Checkbox includeIn=“register” label=“agree to terms” /><Button id=“goBtn” label.login=”log in” label.register=”sign up”/>
</VBox>
Sunday, May 30, 2010
<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>
<states><State name=”login”>
</State><State name=”register”>
<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>
<states><State name=”login”>
</State><State name=”register”>
</State></states>
<VBox id=“vBox” ><Text text=“username:” /><TextInput /><Text text=“password:” /><TextInput /><Button label=“new user?” /><Checkbox includeIn=“register” label=“agree to terms” /><Button id=“goBtn” label.login=”log in” label.register=”sign up”/>
</VBox>
<states><State name=”login”/><State name=”register”/>
</states>
<VBox id=“vBox” ><Text text=“username:” /><TextInput /><Text text=“password:” /><TextInput /><Button label=“new user?” /><Checkbox includeIn=“register” label=“agree to terms” /><Button id=“goBtn” label.login=”log in” label.register=”sign up”/>
</VBox>
Стейты во Flex 4
Sunday, May 30, 2010
Скинование и архитектура компонентов
MXML
GraphicsLayout
AnimationPartsStates
BehaviorLogicData
Component/SkinMX Component Model
Sunday, May 30, 2010
Скинование и архитектура компонентов
MXML
GraphicsLayout
AnimationPartsStates
Skin
CSS properties
ActionScript
Component
BehaviorLogicData
Spark Component
Model
Sunday, May 30, 2010
Skinnable Component Livecycle
Invalidation
Execution
commitProperties()
getCurrentSkinState()
measure()
updateDisplayList()
invalidateProperties()
invalidateSize()
invalidateDisplayList()
invalidateSkinState()
Sunday, May 30, 2010
Пример использования
<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