Блог

Я работаю над пользовательским компонентом Flex 4, который представляет собой совокупность двух существующих компонентов flex. Я хотел бы иметь возможность указывать свои собственные пользовательские свойства для компонента, а также получать доступ к существующим общедоступным свойствам подкомпонента через MXML. Например, я мог бы захотеть настроить цвет шрифта или стиль для метки и ввода текста.

Игрушечный компонент, который объединяет как метку, так и ввод текста:

 <?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     >  
<fx:Script>
    <![CDATA[
        [Bindable] public var prompt:String = "default prompt";
        [Bindable] public var input:String = "default inpput";
    ]]>
</fx:Script>
<s:VGroup>
    <s:Label id="cLabel" text="{prompt}" />
    <s:TextInput id="cTextInput" text="{input}" />
</s:VGroup>
</s:Group>
  

Затем в моем основном приложении я хотел бы получить доступ к общедоступным интерфейсам подкомпонента через mxml без перезаписи сквозной привязки для каждого из них. Что-то вроде:

 ...
<local:myInput prompt="name" input="please enter name">
    <local:cLabel color="0xffffff" />
    <local:CTextInput fontStyle="bold" />
</local:myInput>
  

В actionscript это можно легко сделать для всех общедоступных свойств:

 myInput.cLabel.color = "0xffffff";
  

Но я в тупике с синтаксисом MXML. Кажется, что это должно быть легко, но я пока не нашел ответа. Любая помощь приветствуется.

Вы не можете последовательно выстраивать иерархию отображения с тегом / значением MXML. Вы можете сделать это в ActionScript, как вы указали, но даже это, вероятно, будет считаться плохой практикой.

Я отмечу, что цвет на ярлыке и стиль шрифта на TextInput не являются свойствами. Это стили, поэтому код, который у вас есть:

 myInput.cLabel.color = "0xffffff";
  

Скорее всего, выдаст ошибку, потому что color не является свойством. Вам пришлось бы использовать код, подобный этому:

 myInput.cLabel.setStyle('color',"0xffffff");
  

Однако, поскольку стили обычно наследуются дочерними элементами; я подозреваю, что в компоненте верхнего уровня вы можете установить стиль, и он сразу же автоматически перейдет к дочерним элементам. Итак, вы должны просто уметь делать:

 myInput.setStyle('color',"0xffffff");
  

Или в MXML:

 <local:myInput prompt="name" input="please enter name" color="0xffffff" fontStyle="bold"  >
</local:myInput>
  

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

Но вернемся к вашему первоначальному вопросу, касающемуся свойств. Чтобы сохранить компонент инкапсулированным, вы должны создать свойства, которые устанавливаются для дочерних элементов. Что — то вроде этого:

 private var _property : String;
public function get property():String{
 return _property;
}
public function set property(value:String){
 _property = value;
 myChildComp.property = value;
}
  

Это может быть отстойно, если вам нужно сделать это для большого количества свойств. Если инкапсуляция этого компонента не является приоритетом; просто задайте их в ActionScript.