Основы Adobe Flex FLASH PLATFORM – ОБЗОРНЫЙ КУРС. ЛЕКЦИЯ 5. - презентация

1 Основы Adobe Flex FLASH PLATFORM – ОБЗОРНЫЙ КУРС. ЛЕКЦИЯ 5

2 Язык MXML Декларативный язык на основе XML Стандартные пространва имён MXML: xmlns:fx=" – Классы ActionScript и синтаксические конструкции MXML xmlns:s="library://ns.adobe.com/flex/spark" – Классы набора компонент Spark xmlns:mx="library://ns.adobe.com/flex/mx – Классы набора компонент MX Разделы MXML-документа UI section – декларативное описание пользовательского интерфейса

3 MXML-компоненты. Связь с классами ActionScript Любой AS3-класс может быть использован в MXML Конструктор без параметров, либо со значениями по умолчанию В UI-секции – только классы, реализующие IUIComponent Параметры объекта в MXML – публичные поля класса Обработчики событий в MXML – обработчики объявленных (в метаданных) событий Стили в MXML – объявленные в метаданных класса стили. Параметр id MXML-компоненты – публичное поле класса Любой MXML-документ – это класс. Может быть использован в ActionScript

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

5 Язык MXML. Связывание данных (Data Binding) Автоматизированное присваивание значений полей одного объекта значениям полей другого объекта. Односторонний – Двухсторонний – (присваивание идёт в обе стороны) Механика – метатег [Bindable] [Bindable("change")] // change – имя события public function get text():String { return _text.toUpperCase(); } [Bindable] public var text:String; [Bindable] // все поля класса public class MyDataClass { …

6 Компоненты 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. Компонент довольно много. Посмотреть на них с примерами кода можно тут:

7 Компоненты-контейнеры В 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 …

8 Контейнеры Spark и MX Причины Новая архитектура скинования spark-компонент Неувязки старой архитектуры mx-компонент (PopUpManager и ComboBox, for example). Spark:.addElement(…) /.addElementAt(…).removeElement(…) /.removeElementAt(…).getElementAt(…).*Element*(…) element.owner MX:.addChild(…) /.addChildAt(…).removeChild(…) /.removeChildAt(…).getChildAt(…).*Child*(… child.parent

9 Компоновка Spark-контейнеров. (Layouts) В Spark: отделение логики контейнера и логики компоновки (лэйаута): Стандартные лэйауты: BasicLayout HorizontalLayout VerticalLayout TileLayout Можно писать свои.

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

11 Списки и другие компоненты отображения данных 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

12 Создание простых собственных компонент Самый простой путь. Расширение компоненты-контейнера, помещение в неё ваших компонент. (демка) Пути посложнее рассматривать пока не будем При использовании в других MXML-компонентах нужно добавлять namespace: Аналог выражения import в ActionScript

13 Скины Spark-компонент В Spark-компонентах (почти) у каждой компоненты есть скин. Скин – ещё одна визуальная компонента, тесно интегрирующаяся с родительской. Базовый класс – s:Skin (основан на s:Group) // демка Смысл: Разделение логики от визуального представления Визуальные средства редактирования представления – Adobe Flash Catalyst (дизайнер рисует – программист пишет)

14 Состояния компонент в MXML Возможность частичного изменения вида и набора отображаемых компонент или Параметры, стили, обарботчики событий:

15 Эффекты и переходы (transitions) Transition (переход, смена) – эффект при изменении состояния. Плавное изменение размеров компонент, их добавление и удаление.

16 Язык MXML