【原创】Flex4 自定义FormItem

package com.founder.tbm.components
{
	import org.osmf.layout.HorizontalAlign;
	
	import spark.components.Group;
	import spark.components.Label;
	import spark.components.SkinnableContainer;
	import spark.layouts.HorizontalLayout;

	public class ItemForm extends SkinnableContainer
	{
		public function ItemForm()
		{
			super();
			setStyle("skinClass", ItemFormSkin);
		}
		
		[SkinPart(required="false")]
		[Inspectable(environment="none")]
		public var labelDisplay:Label;
		
		[SkinPart(required="false")]
		[Inspectable(environment="none")]
		public var requiredDisplay:Label;
		
		private var _label:String;
		
		public function set label(value:String):void
		{
			if (value != _label) 
			{		
				_label = value;
				if (labelDisplay) 
				{		
					labelDisplay.text = value;
				}
			}
		}
		
		public function get label():String
		{
			return _label;
		}
		
		private var _required:Boolean;
		
		public function set required(value:Boolean):void
		{
			if(value != _required)
			{
				_required = value;
				if(requiredDisplay)
				{
					requiredDisplay.visible = value;
				}
			}
		}
		
		public function get required():Boolean
		{
			return _required;
		}
		
		private var _labelWidth:Number;
		
		public function set labelwidth(value:Number):void
		{
			if (value != _labelWidth) 
			{
				_labelWidth = value;
				if (labelDisplay) 
				{		
					labelDisplay.width = value;
				}
			}
		}
		
		public function get labelwidth():Number
		{
			return _labelWidth;
		}
		
		protected override function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			
			if (instance == labelDisplay)
			{
				labelDisplay.text = label;

　　　　　　　　　　　　　　　　　　 if(_labelWidth)

				　　labelDisplay.width = _labelWidth;

			}				
			else if (instance == requiredDisplay)
			{
				requiredDisplay.visible = required;
				requiredDisplay.includeInLayout = required;
			}				
		}
	
	}
}

　　皮肤文件

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark SkinnableContainer container.  

     @see spark.components.SkinnableContainer
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
	<fx:Metadata>[HostComponent("com.founder.tbm.components.ItemForm")]</fx:Metadata>
	
	<s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
	
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle"/>
	</s:layout>
    
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
    
    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
   
	
	<s:Label id="labelDisplay"
			 paddingBottom="0"
			 paddingLeft="5"
			 paddingRight="0"
			 paddingTop="0"
			 fontWeight="bold"
		     textAlign="right"/>
	<s:Label id="requiredDisplay"
			 paddingBottom="0"
			 paddingLeft="0"
			 paddingRight="{requiredDisplay.visible ? 5 : 0}"
			 paddingTop="0"
			 toolTip="必须"
			 text="*"
			 color="red"/>
	
	<s:Group id="contentGroup">
		<s:layout>
			<s:HorizontalLayout verticalAlign="middle"/>
		</s:layout>
	</s:Group>
</s:Skin>