Question

I am working on a custom Flex 4 component which is an aggregation of two existing flex components. I would like to be able to specify my own custom properties for the component as well as access the existing public subcomponent properties via MXML. For instance I might want to adjust the font color or style for the label and text input.

A toy component which aggregates both a label and a text input:

<?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>

Then in my main application I would like to access the public interfaces of the sub-component via mxml without re-writing a pass-through binding for every one. Something like:

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

In actionscript one can do this easily for all public properties:

myInput.cLabel.color = "0xffffff";

But I am stumped on the syntax for MXML. This seems like it should be easy, but I have not found the answer yet. Any help greatly appreciated.

Answer 1

You can’t daisy chain down an display hierarchy w/ the MXML tag/value. You can do it in ActionScript, as you specified, but even that would probably be considered a bad practice.

I’ll point out that color on the Label and fontStyle on the TextInput are not properties. They are styles So, the code you have:

myInput.cLabel.color = "0xffffff";

Would most likely throw an error because color is not a property. You’d have to use code like this:

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

However, since styles are usually inherited by the children; I suspect at the top level component, you can set the style and it would immediately trickle through to the children automatically. So, you should just be able to do:

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

Or in MXML:

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

And it should trickle on down. Things can get trickier if you want to set styles individually on child components.

But, back to your original question w/ regards to properties. To keep a component encapsulated, you should create properties that set on the children. Something like this:

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

It can suck if you need to do this for a lot of properties. If encapsulation of this component isn’t a priority; just set them in ActionScript.