Tour de Flex经典例子（三）------SkinnableContainer(登陆界面)

CustomSkinnableContainerSkin.mxml

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

<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>
		<![CDATA[ 
		[HostComponent("spark.components.SkinnableContainer")]
		]]>
	</fx:Metadata> 
	
	<s:states>
		<s:State name="normal" />
		<s:State name="disabled" />
	</s:states>
	
	<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
		<s:stroke>
			<s:LinearGradientStroke weight="2"/>
		</s:stroke>
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:entries>
					<s:GradientEntry color="0xCCCCCC"/>
					<s:GradientEntry color="0x323232" alpha=".8" />
				</s:entries>
			</s:LinearGradient>	
		</s:fill>
	</s:Rect>
	
	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
	</s:Group>
	
</s:Skin>

?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
	
	<s:Panel id="myPanel" title="SkinnableContainer sample" 
			 width="100%" height="100%" skinClass="skins.TDFPanelSkin">
		
		<!-- Set a custom skin for the container to show a gradient background and border -->
		<s:SkinnableContainer skinClass="skins.CustomSkinnableContainerSkin" 
							  width="50%" height="50%" 
							  horizontalCenter="0" 
							  verticalCenter="0">
			
			<s:VGroup horizontalCenter="0" verticalCenter="0">
				<mx:Form fontSize="16">
					<mx:FormItem label="Userid:">
						<s:TextInput id="userid"/>
					</mx:FormItem>
					<mx:FormItem label="Password:">
						<s:TextInput id="pw"/>
					</mx:FormItem>
					<mx:FormItem>
						<s:Button label="Login"/>
					</mx:FormItem>
				</mx:Form>
			</s:VGroup>
		</s:SkinnableContainer>
		
	</s:Panel>
</s:Application>