Использование mx:Metadata для задания стилей компонентов

Я уверен, что вы умеете создавать пользовательские компоненты во Flex и применять к ним CSS. Но знаете ли вы, что можно использовать стили компонента для задания стилей элементов, находящихся внутри этого компонента?

Давайте взглянем на пример. Здесь расположены два компонента (example 1 и example 2). Это два экземпляра компонента "MXML_Example". Да, выглядят они по разному, но родитель у них один. Каждый "MXML_Example" сожержит mx:Panel, mx:TextArea и mx:Button.

Посмотрим на исходный код компонентов:

<components:MXML_Example width="{(width/2)-20}" left="10" top="80" title="Example 1" styleName="example1" height="200" />
<components:MXML_Example width="{(width/2)-20}" right="10" top="80" title="Example 2" styleName="example2" height="200" />

Разница лишь в атрибуте styleName.

Давайте посмотрим на исходный код компонента "MXML_example". В теге mx:Metadata можно увидеть определения трех стилей.

<mx:Metadata>
[Style(name="panelStyleName", type="String", inherit="no" )]
[Style(name="buttonStyleName", type="String", inherit="no" )]
[Style(name="textAreaStyleName", type="String", inherit="no" )]
</mx:Metadata>

По наступлению события creationComplete эти стили применяются к компонентам внутри "MXML_Example".

private function onCreationComplete() : void
{
panel.styleName = getStyle("panelStyleName");
button.styleName = getStyle("buttonStyleName");
textArea.styleName = getStyle("textAreaStyleName");
}

А вот и сам CSS:

.example1
{
panelStyleName:"panel1";
buttonStyleName:"button1";
textAreaStyleName:"textArea1";
}
.example2
{
panelStyleName:"panel2";
buttonStyleName:"button2";
textAreaStyleName:"textArea2";
}

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

Открыть в новом окне
Посмотреть исходный код
Скачать исходный код

Статья