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>