1 / 16

Flash platform – обзорный курс. Лекция 5

Flash platform – обзорный курс. Лекция 5. Основы Adobe Flex. Язык MXML. Декларативный язык на основе XML Стандартные пространва имён MXML: xmlns:fx ="http://ns.adobe.com/ mxml /2009" – Классы ActionScript и синтаксические конструкции MXML

terah
Download Presentation

Flash platform – обзорный курс. Лекция 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Flash platform – обзорный курс.Лекция 5 Основы Adobe Flex

  2. Язык 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 – декларативное описание пользовательского интерфейса

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

  4. MXML. Параметры и события объектов • Два способа указания параметров, обработчиков событий и стилей: • Атрибуты XML-узла • <s:Button label="Search"click="loader.send({q: query.text});" /> • Дочерние узлы: • <s:DataGroup> • <s:layout> <s:VerticalLayoutgap="4" /> </s:layout> • <s:top> <fx:Number>30</fx:Number> </s:top> • <s:rendererAdd> • <![CDATA[ • trace('added renderer!'); • ]]> • </s:rendererAdd> • </s:DataGroup>

  5. Язык 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 vartext: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. • Компонент довольно много. Посмотреть на них с примерами кода можно тут: • http://www.adobe.com/devnet/flex/tourdeflex.html

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

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

  9. Компоновка 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 • Можно писать свои.

  10. Компоновка Spark-контейнеров.BasicLayout • Позволяет располагать компоненты произвольно, задавать их ограничения: • <s:Group> <s:TextAreatop=“10” left=“10” /></s:Group> • <s:Group> <s:TextAreabottom=“10” left=“10” width=“100” /></s:Group> • <s:Group> <s:TextAreabottom=“10” right=“10” height=“30%” /></s:Group> • <s:Group> <s:TextAreatop=“10” left=“10” right=“10” bottom=“10” /></s:Group> • <s:Group> <s:TextAreahorizontalCenter=“0” verticalCenter=“-10” /></s:Group>

  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: • <… xmlns:twitterDemo="ru.ustu.twitterDemo.*“ …> • <twitterDemo:TweetInfo/> • Аналог выражения import в ActionScript

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

  14. Состояния компонент в MXML • Возможность частичного изменения вида и набора отображаемых компонент • <s:states> • <s:State name=“main” /> • <s:State name=“subscribe” /> • </s:states> • <s:ButtonincludeIn=“main” /> или <s:ButtonexcludeFrom=“main” /> • Параметры, стили, обарботчики событий: • <s:Buttonlabel.main=“Login” label.subscribe=“Sign up” left=“50” click.login=“trace(‘loginClick’);” click.subscribe=“trace(‘subscribeClick’)” />

  15. Эффекты и переходы (transitions) • Transition (переход, смена) – эффект при изменении состояния. • Плавное изменение размеров компонент, их добавление и удаление. <s:transitions> <s:TransitionfromState=“*” toState="register"> <!– effects --> </s:Transition> <!- more transitions --> </s:transitions>

  16. Язык MXML

More Related