Основы Adobe Flex

FLASH PLATFORM – ОБЗОРНЫЙ КУРС.ЛЕКЦИЯ 5

Язык MXML• Декларативный язык на основе XML

• Стандартные пространва имён MXML:

• xmlns:fx="http://ns.adobe.com/mxml/2009" – Классы ActionScript и синтаксические конструкции MXML

• xmlns:s="library://ns.adobe.com/flex/spark" – Классы набора компонент Spark

• xmlns:mx="library://ns.adobe.com/flex/mx“ – Классы набора компонент MX

• Разделы MXML-документа

• <fx:Metadata/>

• <fx:Declarations/>

• <fx:Script/>

• UI section – декларативное описание пользовательского интерфейса

MXML-компоненты. Связь с классами ActionScript• Любой AS3-класс может быть использован в MXML

• Конструктор без параметров, либо со значениями по умолчанию

• В UI-секции – только классы, реализующие IUIComponent

• Параметры объекта в MXML – публичные поля класса

• Обработчики событий в MXML – обработчики объявленных (в метаданных) событий

• Стили в MXML – объявленные в метаданных класса стили.

• Параметр id MXML-компоненты – публичное поле класса

• Любой MXML-документ – это класс. Может быть использован в ActionScript

MXML. Параметры и события объектов• Два способа указания параметров, обработчиков событий и стилей:

• Атрибуты XML-узла

• <s:Button label="Search" click="loader.send({q: query.text});" />

• Дочерние узлы:

• <s:DataGroup>

• <s:layout> <s:VerticalLayout gap="4" /> </s:layout>

• <s:top> <fx:Number>30</fx:Number> </s:top>

• <s:rendererAdd>

• <![CDATA[

• trace('added renderer!');

• ]]>

• </s:rendererAdd>

• </s:DataGroup>

Язык MXML. Связывание данных (Data Binding)• Автоматизированное присваивание значений полей одного объекта значениям полей

другого объекта.

• Односторонний –

• <s:TextInput id="query"/><s:Label text=“Вы ввели: {query.text}" />

• Двухсторонний –

• <s:TextInput id="query"/><s:TextInput text=“@{query.text}” />

• (присваивание идёт в обе стороны)

• Механика – метатег [Bindable]

[Bindable("change")] // “change” – имя событияpublic function get text():String { return _text.toUpperCase(); }

[Bindable] public var text:String;

[Bindable] // все поля классаpublic class MyDataClass { …

Компоненты Flex SDK

• Все написаны на Action Script

• Все основываются на базовом компоненте UIComponent.

• В UIComponent значительная часть «внутренностей» SDK

• Два набора компонент – MX и Spark.

• MX – старый набор UI-компонет (версия Flex SDK 2 и 3 - legacy) + системные классы Flex SDK (пакеты mx.core, mx.managers). Все расположены в пакете mx.*

• Spark – новый набор UI-компонент с несколько другой архитектурой. Flex SDK, начиная с версии 4.

• Компонент довольно много. Посмотреть на них с примерами кода можно тут:

• http://www.adobe.com/devnet/flex/tourdeflex.html

Компоненты-контейнеры• В MX – классы, основанные на mx.core.Container

• В Spark – классы, реализующие mx.core.IVisualElementContainer

• В MXML в контейнеры можно помещать любые UI-компоненты:

• Контейнеры:

• s:Group (s:VGroup/s:HGroup)

• s:SkinnableContainer, s:BorderContainer, s:Panel

• mx:Box, (mx:HBox, mx:VBox), mx:Canvas – all legacy

• …

<s:HGroup width="100%" verticalAlign="middle" fontWeight="bold"><s:Label text="Twitter query:" /><s:TextInput id="query" text="@MedvedevRussia" width="100%" /><s:Button label="Search" click="loader.send({q: query.text});" />

</s:HGroup>

Контейнеры Spark и MX

• Причины

• Новая архитектура скинования spark-компонент

• Неувязки старой архитектуры mx-компонент (PopUpManager и ComboBox, for example).

Spark: .addElement(…) / .addElementAt(…)

.removeElement(…) / .removeElementAt(…).getElementAt(…).*Element*(…)element.ownerMX:

.addChild(…) / .addChildAt(…)

.removeChild(…) / .removeChildAt(…).getChildAt(…).*Child*(…child.parent

Компоновка Spark-контейнеров. (Layouts)

• В Spark: отделение логики контейнера и логики компоновки (лэйаута):<s:DataGroup width="100%" itemRenderer="ru.ustu.twitterDemo.TweetRenderer"dataProvider="{results}">

<s:layout><s:VerticalLayout gap="4" />

</s:layout></s:DataGroup>

• Стандартные лэйауты:

• BasicLayout

• HorizontalLayout

• VerticalLayout

• TileLayout

• Можно писать свои.

Компоновка Spark-контейнеров. BasicLayout• Позволяет располагать компоненты произвольно, задавать их ограничения:

• <s:Group><s:TextArea top=“10” left=“10” />

</s:Group>

• <s:Group><s:TextArea bottom=“10” left=“10” width=“100” />

</s:Group>

• <s:Group><s:TextArea bottom=“10” right=“10” height=“30%” />

</s:Group>

• <s:Group><s:TextArea top=“10” left=“10” right=“10” bottom=“10” />

</s:Group>

• <s:Group><s:TextArea horizontalCenter=“0” verticalCenter=“-10” />

</s:Group>

Списки и другие компоненты отображения данных

• s:List, s:DataGroup

• (mx:DataGrid, mx:Tree, mx:List, …)

• Списки в Spark – тоже контейнеры.

• Данные – из .dataProvider

• Data Provider – поставщик данных. Внутри – всегда IList/ICollectionView.

• Коллекция – структура данных, уведомляющая об изменениях внутри.

• Пример – ArrayCollection

• Событие уведомления – CollectionEvent.COLLECTION_CHANGE

• Отображение записи - itemRenderer. Специальная компонента, основанная на ItemRenderer/DataRenderer (реализующая IItemRenderer/IDataRenderer)

• Главное – есть поле .data

Создание простых собственных компонент

• Самый простой путь. Расширение компоненты-контейнера, помещение в неё ваших компонент. (демка)

• Пути посложнее рассматривать пока не будем

• При использовании в других MXML-компонентах нужно добавлять namespace:

• <… xmlns:twitterDemo="ru.ustu.twitterDemo.*“ …>

• <twitterDemo:TweetInfo/>

• Аналог выражения import в ActionScript

Скины Spark-компонент• В Spark-компонентах (почти) у каждой компоненты есть скин.

• Скин – ещё одна визуальная компонента, тесно интегрирующаяся с родительской.

• Базовый класс – s:Skin (основан на s:Group)

• // демка

• Смысл:

• Разделение логики от визуального представления

• Визуальные средства редактирования представления – Adobe Flash Catalyst

• (дизайнер рисует – программист пишет)

Состояния компонент в MXML• Возможность частичного изменения вида и набора отображаемых компонент

• <s:states>

• <s:State name=“main” />

• <s:State name=“subscribe” />

• </s:states>

• <s:Button includeIn=“main” /> или <s:Button excludeFrom=“main” />

• Параметры, стили, обарботчики событий:

• <s:Button label.main=“Login” label.subscribe=“Sign up” left=“50”

click.login=“trace(‘loginClick’);” click.subscribe=“trace(‘subscribeClick’)” />

Эффекты и переходы (transitions)• Transition (переход, смена) – эффект при изменении состояния.

• Плавное изменение размеров компонент, их добавление и удаление.

<s:transitions>

<s:Transition fromState=“*” toState="register">

<!– effects -->

</s:Transition>

<!- more transitions -->

</s:transitions>

Язык MXML