MXML – це мова розмітки XML, яка використовується для опису і налаштування компонентів інтерфейсу користувача. Можна також використовувати MXML для декларативного визначення невізуальних аспектів застосунку, таких як доступ до джерел даних на сервері та прив’язка даних між компонентами інтерфейсу користувача і джерелами даних на сервері.

Як і HTML, MXML забезпечує теги, які визначають інтерфейси користувача. Мова MXML може видатися дуже знайомою, якщо ви працювали з HTML. Однак, MXML є більш структурованою, ніж HTML, і забезпечує багатший набір тегів. Наприклад, MXML включає теги для візуальних компонентів, таких як системи даних (data grids), дерева (trees), навігатори (tab navigators), вкладки (accordions) і меню (menus), а також для невізуальних компонентів, які забезпечують зв’язки веб-сервісів, прив'язку даних та ефекти анімації. Також можна розширити MXML з компонентами клієнта, прийнятими як теги MXML.

Однією з найбільших відмінностей між MXML і HTML є те, що MXML-описані додатки компілюються в SWF-файли і відтворюються в Adobe ® Flash ® Player або Adobe ® AIR ™, які забезпечують багатший і більш динамічний інтерфейс користувача, ніж засновані на HTML-сторінках додатки.

Можна написати MXML-застосунок в одному файлі або в кількох файлах. MXML також підтримує компоненти користувача, написані в файлах MXML і ActionScript.

Написання простого за стосунку

Оскільки MXML-файли — це звичайні XML-файли, існує широкий вибір середовищ розробки. Можна написати MXML-код в простому текстовому редакторі, в спеціальному редакторі XML або в інтегрованому середовищі розробки (IDE), яке підтримує редагування тексту. Flex підтримує спеціальний IDE, який називається Adobe ® Flex Builder ® ™, який можна використовувати для розробки власних додатків.

Наступний приклад показує простий застосунок "Hello World", який містить тільки тег і два дочірніх теги — і . Тег визначає контейнер застосунка, який є завжди кореневим тегом програм Flex. Тег визначає контейнер групи, який включає рядок заголовка, назву, повідомлення статусу, межі та зміст області дочірніх тегів. Тег представляє собою контейнер мітки — дуже простий компонент інтерфейсу користувача, що відображає текст.

<?xml version="1.0"?>
<!--mxml\HellowWorld.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

Нижче приводиться SWF-файл для попереднього прикладу:

Збережіть цей код у файл hello.mxml. Імена файлів в MXML повинні зберігатися з розширенням .mxml (маленькими літерами).

Наступний малюнок показує застосунок "Hello World", що відображається у вікні браузера.

Про XML кодування

Перший рядок документа визначає необов’язкове об’явлення версії XML. Це вдале виконання включення інформації кодування, яка визначає, як закодований файл MXML. Багато редакторів дозволяють вибирати з цілого ряду параметрів кодування файлу. На Північно-Американських операційних системах, ISO-8859-1 є домінуючим форматом кодування, і більшість програм використовують цей формат по замовчуванню. Для забезпечення максимальної сумісності платформи можна використовувати формат кодування UTF-8. UTF-8 надає унікальний номер для кожного символу у файлі, і UTF-8 не залежить ні від платформи, ні від програми, ні від мови.

Якщо вказати формат кодування, то кодування файлу, який використовується, повинно поставитися йому у відповідність. Наступний приклад показує об’явлення тегів XML, які визначають формат UTF-8 кодування:

<?xml version="1.0" encoding="utf-8"?>

Про тег

Крім того, що тег є кореневим тегом програми Flex, він являє собою контейнер застосунку. Контейнер — це компонент інтерфейсу користувача, що містить інші компоненти та має вбудовані правила компоновки [правила для позиціонування] своїх дочірніх компонентів. По замовчуванню, контейнер застосунку впорядковує свої дочірні контейнери вертикально (зверху донизу). Всередині контейнеру застосунку можна формувати інші типи контейнерів, такі як показаний вище контейнер панелі для позиціонування компонентів інтерфейсу користувача відповідно до інших правил. Для додаткової інформації див.Using Flex Visual Components.

Про властивості тегів MXML

Властивості тегів MXML, такі як текст та атрибути тегу ширина шрифту (fontWeight) і розмір шрифту (fontSize), дозволяють декларативно налаштувати початковий стан компонента. Можна використовувати код ActionScript в тезі для зміни стану компонента під час виконання. Для отримання додаткової інформації див. Using ActionScript.

Компіляція з MXML в SWF-файли

Можна використати програму як скомпільований SWF-файл або SWF-fuke, включені в застосунок AIR, або при наявності Adobe LiveCycle Data Services ES, можна використати програму як набір файлів MXML і AS.

При використанні Flex Builder, компілюється та запускається скомпільований SWF файл з Flex Builder’а. Після того, як застосунок виконається правильно, його можна використовувати, попередньо скопіювавши його в каталог на веб-сервер або на сервер застосунків. Потім користувачі звертаються до розміщеного SWF-файлу шляхом HTTP-запиту у вигляді:

http://hostname/path/filename.html

Flex також передбачає компілятор командного рядка MXML — mxmlc, який дозволяє скомпілювати файли MXML. Можна використовувати mxmlc для компіляції hello.mxml з командного рядка, як показано в наступному прикладі:cdlexInstallDir/bin mxmlc-show-actionscript-warnings=true -strict=true c:/appDir/hello.mxml

У цьому прикладі, flexInstallDir — це каталог установки Flex, а AppDir — це каталог, що містить hello.mxml. Результуючий SWF-файл, hello.swf, записується в той же каталог, що і hello.mxml.

Для отримання додаткової інформації про mxmlc див. Using the Flex Compilers. Для отримання додаткової інформації про відладчик Adobe Flash Player’а див. Logging.

Зв'язок тегів MXML з класами ActionScript

Adobe Flex реалізовано як бібліотеку класів ActionScript. Ця бібліотека класів містить компоненти (контейнери та директиви), класи керування, класи передачі даних та класи для всіх інших властивостей. Застосунки розробляються шляхом використання MXML і мов ActionScript з бібліотекою класів.

Теги MXML відповідають класам ActionScript або властивостям класів. Flex аналізує теги MXML і компілює файл SWF, що містить відповідні об'єкти ActionScript’а. Наприклад, Flex надає клас кнопка (Button) в ActionScript, який визначає елемент керування кнопка (Button) для Flex. Директива Button створюється в MXML шляхом використання наступного твердження:

Коли об’являється елемент керування з використанням тегу MXML,створюється екземпляр того класу. Це твердження MXML створює об’єкт Button і ініціалізує властивість мітки об’єкту Button в рядок Submit.

Тег MXML, який відповідає класу ActionScript використовує ті ж узгодження назв, як і клас ActionScript. Назви класів починаються з великої літери; великі літери відокремлюються від слів в назвах класів. Кожен атрибут тегу MXML відповідає властивості об'єкта ActionScript, стилю застосування до об'єкта або прослуховувачу події для об'єкта. Для повного опису бібліотеки класів Flex і синтаксису тегів MXML див. Adobe Flex Language Reference.

Розуміння структури Flex-застосунку

Можна написати MXML-застосунок в один файл або в кілька файлів. Зазвичай визначається головний файл, який містить тег . З головного файлу потім можна посилатися на додаткові файли, записані на MXML, ActionScript, або комбінації цих двох мов.

Загальне кодування виконується для розділення Flex-програми на функціональні одиниці, або модулі, кожен з яких виконує дискретну задачу. В Flex можна розділити застосунок на окремі файли MXML і файли ActionScript, де кожен файл відповідає певному модулю. Шляхом поділу застосунку на модулі забезпечується багато переваг, включаючи наступні:

Простота розробки (Ease of development)

Різні розробники або групи розробників можуть розробляти і налагоджувати модулі незалежно один від одного.

Повторне використання (Reusability)

Можна використовувати модулі в різних за стосунках, так що не доведеться повторно писати той самий код.

Придатність до налагоджування (Maintainability)

Можна виділити і налагодити помилки швидше, ніж якщо застосунок розробляється в одному файлі. У Flex модулю відповідає компонент користувача, реалізований в MXML або в ActionScript. Ці користувацькі компоненти можуть посилатися на інші компоненти користувача. Немає обмежень рівня вкладеності (формування) посилань компонентів в Flex. Компоненти визначаються відповідно до вимог програми.