A child UI element that joins multiple mxml tags in a custom component

http://www.munkiihouse.com/?p=37

This article discusses how to add multiple UI elements to a custom component

First of all, we look at its custom formitem, just look at the source code, this is claimed to be formitem things actually did not extend from the Formitem, but from the hbox extension, so the personal feeling is to install how many things on how many things, Let's see what the author is trying to explain to us behind the scenes.

Flex does not support adding sub-components to a component container at multiple levels, for example, you cannot create a component with Hbox, and then place other components inside it, and then, if you try to do so in other places, you get a run-time error saying "multiple sets of Visual children has been specified for this component "the component declares multiple visual component collections

It seems that everything should not be taken for granted, and then see how the author solves the problem.

Flex does not support this because the compiler really does not know how these additional components should be handled and should be present in a variety of conflicts and special cases.

However, there are several ways to avoid such cases where only the Mxml component is declared as a leaf class, (no inheriting Class) declares the component in ActionScript instead of explicitly handling the delivery of the Mxml component in the class file in Mxml, and places the component in the appropriate place

Method 3 is the most flexible, so our authors will take this as an example to tell us how to use this method to avoid the beginning of our situation

Step One : Create a property inside your component so that the Mxml compiler will pay the subcomponent to this component, in the example "Children" attribute, the value passed to the function is stored in a global variable, so that it can be used later. Then call the Invalidateproperties () function and call this function to cause Flex to call the Commitproperties () function at a later stage of the component, which is handy

Step two : Overwrite the commitproperties () function, we simply traverse through the subcomponents that are passed to the custom component, and then put them right into our container

Step three : Set the property that you created in step one as the default property for this component, which means that the "children" attribute we define in the example is automatically paid to the component

<?xml version= "1.0" encoding= "Utf-8"?>
<mx:hbox xmlns:mx= "Http://www.adobe.com/2006/mxml" >
<!--
* Set "Children" to is the default property so we can easily Set it from Mxml
-
<mx:Metadata>
[Defaultproperty ("Children")]
</mx:Metadata>

<mx:Script>
<! [cdata[

private var _children:array = [];
private var _childrenchanged:boolean = false;

/**
* Set the &apos;content&apos; Of this component, and then call Invalidateproperties
*
* Note that if only one child is defined in Mxml, then the child itself is passed in
* If more than one child is defined, then an Array is passed in
*/
Public function set Children (value:*): void
{
If (value is displayobject)//This belongs to dynamic class recognition
_children = [value];
Else
_children = value;

_childrenchanged = true;
Invalidateproperties ();
}

Public function Get Children (): Array
{
return _children;
}


/**
* During The Commit properties phase is the best time to
* Add the children to their intended target
*/
protected override function Commitproperties (): void
{
Super.commitproperties ();

if (_childrenchanged)
{
For each (Var child:displayobject in _children)
{
B_content.addchild (child);
}
}
}

/**
* These is just a few more properties to flesh out the example
*/
[Bindable]
private Var _label:string;
public override function set label (value:string): void
{
_label = value;
}
public override function Get label (): String
{
return _label;
}

[Bindable]
private Var _labelwidth:number;
Public function set Labelwidth (value:number): void
{
_labelwidth = value;
}
Public function Get Labelwidth (): Number
{
return _labelwidth;
}

]]>
</mx:Script>
<mx:label id= "L_label" text= "{_label}" width= "{_labelwidth}" textalign= "right"/>
<mx:box id= "b_content" direction= "horizontal" horizontalgap= "0" verticalalign= "Middle"/>
</mx:HBox>

Things of note : The type of the value of the property that the Mxml compiler passes to your ' children ' will vary depending on the number of subcomponents that you declare, and if you only declare a subcomponent, then this subcomponent will be passed this property if more than one child property , then the value will be passed an array is handy when the commitproperties () function is called to place subcomponents in the right place, first because this function is called when Flex gets some processor free time, which means it performs well, Next, this function waits until all the subcomponents have been created before being called, without having to deal with the competing conditions that are called by the container, and then call measure (), updatedisplaylist () to ensure that your component looks correct, This completes the correct placement of subcomponents [Defaultproperty] Metadata tags must be nested inside <mx:Metadata> Use this method, you can create a number of properties for your custom component, You can use Mxml to add several subcomponents to a component using this method