Flex 4 Gumbo Framework

GUMBO(Flex Framework 4)

Бесплатный фреймворк с открытым кодом для разработки насыщенных интернет приложений (RIA), которые поддерживаются всеми ведущими браузерами, платформами и операционными системами.

Skype: mr.dr.jr. Email: [email protected]

Sunday, May 30, 2010

mailto:[email protected]

mailto:[email protected]

Работа в Flex 4 основана на трех принципах:

Все внимание дизайну: среда разработки обеспечивает новый уровень выразительности конечных проектов, благодаря использованию новых инструментов.

Продуктивность разработки: улучшенная производительность компилятора и языковых функций, таких как привязка данных.

Эволюция фреймворка: новые возможности проигрывателя Flash Player в сочетании с новыми функциями.

Flex 4 концепция и структура


Расширенная работа с состояниями

Графические примитивы

Динамическийlayout

Улучшенная анимация

Встроенный OSMF

Поддержка FTE/TLF

Трансформация элементов компоновки

Компоненты Spark

Поддержка FXG

Улучшенный компилятор

Двустороннее связывание данных

Продвинутый CSS

Типизированные массивы (Vector)

Модель компонента

Spark

Скин

Flex 4 концепция и структура


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

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

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

Spark: Данное пространство имен включает все новые компоненты Spark. Его необходимо использовать в сочетании с пространством имен языка MXML 2009.Префикс по умолчанию: s

MX: Данное пространство имен включает все компоненты MX. Его необходимо использовать в сочетании с пространством имен языка MXML 2009.Префикс по умолчанию: mx


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

<?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>


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


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

Работа с любыми объектами (не только UIComponents)

Анимация свойств и частей компонента

Автоматический возврат при смене состояний

Поддержка фильтров, в том числе и Pixel Bender

Трансформации в трех измерениях

Поддержка ключевых кадров


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

Динамическая

Есть возможность создать Custom Layout

Поддержка двумерных и трехмерных трансформаций

Управление вложенностью

Виртуализация

Плавный скроллинг


Flex 4 – Поддержка ASDoc в документах MXML

<?xml version="1.0"?>

<!–- Стандартный комментарий-->



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


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


Графика в MXML

Простые Формы (прямоугольники, эллипсы, окружности и другие)

Сложные Линии(прямые, квадратичные, кривые Безье)

Широкий спектр заливок и контуров (сплошные, прозрачные, с использованием картинок, градиенты)

Маскирование, фильтры, режимы смешивания(размытие, сияние, тень)

Цвета и 2D трансформации(поворот, масштабирование, оттенок)

Интегрированный текст, картинки


Flash XML Graphics (FXG)

FXG: графический формат основанный на XML

Распознается графическими редакторами

Базируется на модели отрисовки 10 flash плейера

Статический – без связываний, без компоновки, без слушателей событий, без стилизации

Оптимизируется компилятором (важно для высокой производительности)

Интерактивное содержание Eclipse IDE

Анализ кода

Отладка

Flash CS4Professional

FlashCatalyst

FlashBuilder

Инструменты для дизайна и разработки

After Effects Illustrator Fireworks Photoshop

FXG

Анимация

Визуальная компоновка

Создание прототипов

Разработка рабочих процессов


Пример FXG:

<?xml version="1.0" encoding="utf-8"?><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"/> <stroke>

<SolidColorStroke color="#888888"/></stroke><fill>

<LinearGradient rotation="90"><GradientEntry color="#000000" alpha="0.8"/><GradientEntry color="#FFFFFF" alpha="0.8"/>

</LinearGradient></fill>

</Path></Graphic>


http://ns.adobe.com/fxg/2008

http://ns.adobe.com/fxg/2008

High-Fidelity Text

FTE: Новый механизм работы с текстом (Flash Player 10)

TLF: Новые компоненты используют FTE.

Преимущества: Текст в нескольких связанных контейнерах

Вертикальный текст

Множество столбцов

Лигатуры и типографические элементы

Работа с пользовательскими шрифтами

Двунаправленный текст


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










</State></states>


</VBox>


</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>










</State></states>


</VBox>




</AddChild></State>

</states>


</VBox>



</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>






</State></states>


</VBox>




</AddChild></State>

</states>


</VBox>



</State></states>


</VBox>

<states><State name=”login”/><State name=”register”/>

</states>


</VBox>

Стейты во Flex 4


Скинование и архитектура компонентов

MXML

GraphicsLayout

AnimationPartsStates

BehaviorLogicData

Component/SkinMX Component Model


Скинование и архитектура компонентов

MXML

GraphicsLayout

AnimationPartsStates

Skin

CSS properties

ActionScript

Component

BehaviorLogicData

Spark Component

Model


Skinning Lifecycle


Skinnable Component Livecycle

Invalidation

Execution

commitProperties()

getCurrentSkinState()

measure()

updateDisplayList()

invalidateProperties()

invalidateSize()

invalidateDisplayList()

invalidateSkinState()


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

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

 <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states>  <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>  <s:Label text="Button!" color="0x131313" textAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="1" left="12" right="12" top="6" bottom="6" /></s:Skin>


http://ns.adobe.com/mxml/2009

http://ns.adobe.com/mxml/2009

Datavisualization теперь часть Flex 4 SDK

Теперь это бесплатно!

Flex 4 Gumbo Framework

Technology