Sorry, no example, just some quick code…
Here is how you use the component which is going to facade our complexity…
<components:FormItem label="Name:" help="e.g. Increase Revenue">
<s:TextInput text="@{pm.selectedGoal.name}" maxChars="160" width="100%"/>
</components:FormItem>
And what is happening behind the scenes…
<?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" width="100%">
<fx:Declarations>
<fx:String id="label"/>
<fx:String id="help"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
public function set content(value:Array):void {
contentGroup.mxmlContent = value;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingBottom="15"/>
</s:layout>
<s:Label text="{label}" styleName="formlabel"/>
<s:Group id="contentGroup" width="100%"/>
<s:Label text="{help}" styleName="formhelp"/>
<fx:Metadata>
[DefaultProperty("content")]
</fx:Metadata>
</s:Group>
Why is this important? We are taking a mxml based approach to building a composition of components that ‘feels’ more natural than skinning or writing as3. See the reference below for more complexity. Any UI language these days should have first class support for smarty-like (php) declarative templating.
References
http://blog.gorillalogic.com/2010/07/15/building-flex-4-containers-with-multiple-content-areas/