Про MXML– компоненти

У типових Flex–застосунках код всього застосунку не пишеться в одному файлі вихідного коду, тому що така реалізація ускладнює розробникам працювати над проектом одночасно, що ускладнює налагодження, а також перешкоджає повторному використанню коду.

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

MXML–компоненти — це MXML–файли, на які посилаються за допомогою тегів MXML з інших файлів MXML. Одним з основних застосувань компонентів MXML є розширення функціональності існуючих компонентів Flex.

Наприклад, Flex надає елемент керування ComboBox, який можна використовувати як частину форми, яка накопичує адресні дані від клієнта. Можна використовувати ComboBox, щоб дозволити користувачеві вибрати частину адрес Штату зі списку з 50 штатів у США. У застосунка, який має кілька місць для введення адреси користувачем, було б важко створити і ініціалізувати кілька елементів керування ComboBox з інформацією про всі 50 штатів.

Замість цього створюється компонент MXML, який містить елемент керування ComboBox з усіма 50 штатами, визначеними в ньому. Тоді, коли необхідно буде додати селектор штату для за стосунку, використовуватиметься користувацький компонент MXML.

Створення компонентів MXML

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

Можна створити MXML–компонент в MXML–файлі, де назва файлу компонента стає його назвою MXML–тегу. Наприклад, файл з назвою StateComboBox.mxml визначає компонент за назвою тегу .

Кореневий тег компоненту MXML є тегом компонента, чи Flex–компонентом або іншим компонентом MXML. Кореневий тег визначає простір імен http://www.adobe.com/2006/mxml. Наприклад, наступний компонент MXML розширює стандартний елемент керування Flex ComboBox.

<?xml version="1.0"?>
<!-- mxml/StateComboBox.mxml -->
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:dataProvider>
        <mx:String>AK</mx:String>
        <mx:String>AL</mx:String>
        <!-- Add all other states. -->
        </mx:dataProvider>
</mx:ComboBox>

Як частина своєї реалізації, користувацький компонент MXML може посилатися на інший користувацький компонент MXML.

Основний застосунок або будь–який інший файл компоненту MXML посилається на компонент StateComboBox, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– mxml/MXMLMyApplication.mxml ––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«*»>
<MyComp:StateComboBox/>
</mx:Application>

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

В даному прикладі основний файл програми включає нове визначення простору імен xmlns: MyComp = «*» в якості частини тегу <mx:Application>. Це визначення простору імен визначає розташування компонентів MXML. У цьому випадку вказується, що елемент знаходиться в тому ж каталозі, що і основний файл програми, або, якщо використовується Adobe ® LiveCycle ™ Data Services ES, — в каталозі WEB–INF/flex/user–classes.

Вдалим є рішення про зберігання компонентів у підкаталозі. Наприклад, можна написати цей файл до каталогу (директорії) myComponents, підкаталогу основного каталогу застосунку. Більш докладну інформацію про простір імен, див. в розділі Developing Applications in MXML.

StateComboBox.mxmlfile визначає елемент керування ComboBox як свій кореневий тег, так що можна посилатися на всі властивості елементу керування ComboBox в тезі MXML користувацького компонента або в ActionScript, заданому в тезі <mx:Script>. Наприклад, наступний код визначає властивість RowCount і прослуховувач події для елементу користувача:

<?xml version=«1.0»?>
<!–– mxml/MyApplicationProps.mxml––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:local=«*»>
<mx:Script>
<![CDATA[
     import flash.events.Event;
     private function handleCloseEvent(eventObj:Event):void {
     myTA.text=«foo»;

} ]]>
</mx:Script>
<local:StateComboBox rowCount=«5» close="handleCloseEvent(event);"/>

<mx:TextArea id=«myTA» />

</mx:Application>

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

Обмеження властивості за замовчуванням кореневого тегу

Багато компонентів Flex визначають одну властивість за замовчуванням. Властивість за замовчуванням — це властивість тегу MXML, яка притаманна вмісту всередині тегу MXML, якщо if you do not explicitly specify a property. For example, consider the following MXML tag definition:

<mx:SomeTag>
anything here
</mx:SomeTag>

Якщо цей тег визначає властивість за замовчуванням під назвою default_property, попереднє визначення тегу є еквівалентним наступному коду:

<mx:SomeTag>
<default_property>
anything here
</default_property>
</mx:SomeTag>

Однак механізм властивості за замовчуванням не спрацьовує для кореневих тегів компонентів MXML. У цій ситуації, щоб визначити властивість за замовчуванням, необхідно використовувати дочірні теги, як показано в наступному прикладі:

<?xml version=«1.0»?>
<mx:SomeTag xmlns:mx=«http://www.adobe.com/2006/mxml»>
<default_property>
anything here
</default_property>
</mx:SomeTag>

Компоненти MXML і класи ActionScript

При створенні користувацьких компонентів MXML, визначається новий клас ActionScript, де назва класу відповідає назві файлу компонента MXML. Новий клас є підкласом кореневого тегу компонента, а отже, наслідує всі властивості і методи кореневого тегу. Однак, оскільки визначається компонент в MXML, багато тонкощів створення класу ActionScript приховані.

Наприклад, у розділі Creating MXML components (Створення компонентів MXML), шляхом використання тегу <mx:ComboBox> в якості кореневого тегу було визначено компонент StateComboBox.mxml. Таким чином, StateComboBox.mxml визначає підклас класу ComboBox.

Створення складених компонентів MXML

Складений компонент MXML є компонентом, який містить кілька визначень компонента в собі. Для створення складеного компонента, його контейнер вказується як кореневий тег, а потім компоненти Flex додаються як дочірні компоненти контейнера.

Наприклад, наступний компонент містить форму адреси, створену шляхом визначення контейнера форми Form в якості кореневого тегу компонента, а потім визначення кількох дочірніх елементів форми контейнера. Один з тегів <mx:FormItem> містить посилання на тег <MyComp:StateComboBox>, який було створено в розділі Creating MXML components (Створення компонентів MXML):

<?xml version=«1.0»?>
<!–– mxml/AddressForm.mxml ––>
<mx:Form xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«*»>
<mx:FormItem label=«NameField»>>
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label=«Street»>
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label=«City» > <mx:TextInput/>
</mx:FormItem>

<mx:FormItem label=«State»> <MyComp:StateComboBox/>
</mx:FormItem>
</mx:Form>

Наступний застосунок посилається на компонент AddressForm в тезі <AddressForm>:

<?xml version=«1.0»?>
<!–– mxml/MyApplicationAddressForm.mxml––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«*» >
<MyComp:AddressForm/> </mx:Application>

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

Якщо дочірні теги кореневого контейнера включаються в файл компонента MXML, то не можна додавати дочірні теги, коли компонент використовується як користувацький тег в іншому файлі MXML. При визначенні в файлі MXML порожнього контейнера можна додати дочірні теги, коли компонент використовується як користувацький тег.

Примітка:
обмеження на дочірні теги відноситься до дочірніх тегів, які відповідають візуальним компонентам. Візуальні компоненти є підкласами компоненту UIComponent. Завжди можна ввести теги для невізуальних компонентів, таких як блоки ActionScript, стилі, ефекти, форматовщики, валідатори, та інші види невізуальних компонентів, незалежно від того, як визначений компонент користувача.

Наступний приклад визначає порожній контейнер форми в компоненті MXML:

<?xml version=«1.0»?>
<!–– mxml/EmptyForm.mxml ––>
<mx:Form xmlns:mx=«http://www.adobe.com/2006/mxml»/>

Цей компонент не визначає дочірніх елементів контейнера форми, тому можна додавати дочірні елементи при його використанні в іншому файлі MXML, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– mxml/MainEmptyForm.mxml––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«*»>
<MyComp:EmptyForm> <mx:FormItem label=«Name»>
<mx:TextInput/>
</mx:FormItem>
</MyComp:EmptyForm>
</mx:Application>

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

Файл AddressForm.mxml визначає контейнер форми як свій кореневий тег. Через те, що контейнер визначається як кореневий тег компонента MXML, при використанні компоненту MXML створюється підклас цього контейнера, і можна посилатися на всі властивості і методи кореневого тегу. Таким чином, в основному застосунку можна посилатися на всі властивості контейнера форми в тезі MXML, який відповідає компоненту користувача, або в будь–якому коді ActionScript в основному застосунку. Тим не менш, не можна посилатися на властивості дочірніх елементів контейнера форми.

Наприклад, наступний приклад встановлює властивість horizontalPageScrollSize і прослуховувач для події прокрутки для елементу керування користувача, але не можна визначити властивості для дочірніх елементів контролів CheckBox або TextInput контейнера форми:

<?xml version=«1.0»?>
<!–– mxml/MainEmptyFormProps.mxml––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«*»>
<mx:Script>
<![CDATA[
import mx.events.ScrollEvent;
private function handleScrollEvent(event:ScrollEvent):void {
// Handle scroll event.
} ]]>
</mx:Script>
<MyComp:AddressForm horizontalPageScrollSize=«25» scroll="handleScrollEvent(event);"/>
</mx:Application>

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

Щоб налаштувати дочірні елементи користувацького компоненту MXML, спочатку визначаються нові властивості в компоненті MXML, а потім вони використовуються для передачі інформації про конфігурацію до дочірніх компонентів. Для отримання додаткової інформації див. розділ Advanced MXML Components.