MXML File
<?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" width="100%" height="100%">
<fx:Style source="/CssStyle/AccoridianLayout.css"/>
<fx:Script>
<![CDATA[
import boxie_skins.panel_acc;
import mx.collections.ArrayCollection;
[Bindable] public var ddltxt:ArrayCollection = new ArrayCollection([
{Label:"Delhi", data:'1'},
{Label:"Mumbai", data:2},
{Label:"Tamilnadu", data:3},
{Label:"Karantaka", data:4},
{Label:"AndhraPardesh", data:5},
{Label:"Utter Pradesh", data:6}
]);
[Bindable] public var cardtype:ArrayCollection = new ArrayCollection([
{Label:"", data:06},
{Label:"Visa", data:7},
{Label:"Master Card", data:8},
{Label:"American Express", data:9},
{Label:"Discover", data:10},
{Label:"Dinner Club", data:11}
]);
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:BorderContainer width="100%" height="100%" borderVisible="false" borderColor="#ffffff" backgroundColor="#838C8C">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" />
</s:layout>
<s:Panel cornerRadius="5" borderColor="#ffffff" width="45%" borderVisible="false" title="Product Catalog" styleName="paneltitle">
<s:VGroup width="100%" height="100%">
<mx:Accordion id="accordion" width="99%" height="98%" left="5" top="5" bottom="20" borderColor="#AAB3B3" headerStyleName="header">
<s:NavigatorContent label="General Information" styleName="paneltitle" >
<s:Group width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="20" paddingLeft="25" bottom="50">
<s:HGroup width="100%">
<s:Label text="Name" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Address" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="City" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="State" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:DropDownList dataProvider="{ddltxt}" labelField="Label" prompt="Choose a state..." width="180">
</s:DropDownList>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Zip" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Email" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%" paddingTop="80" paddingLeft="445">
<s:Button label="Continue" click="accordion.selectedIndex=1;"/>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent label="Shipping Information" styleName="paneltitle" >
<s:Group>
<s:VGroup width="100%" height="100%" paddingTop="20" paddingLeft="25">
<s:RadioButton label="US Mail (3-7 business days)"/>
<s:RadioButton label="UPS (2 bussiness days)"/>
<s:RadioButton label="FedEx (Overnight Priority)" selected="true"/>
<s:HGroup width="100%" paddingTop="200" paddingLeft="445">
<s:Button label="Continue" click="accordion.selectedIndex=2;"/>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent label="Payment Information" styleName="paneltitle" >
<s:Group width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="20" paddingLeft="25" bottom="50">
<s:HGroup width="100%">
<s:Label text="Card Type" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:DropDownList dataProvider="{cardtype}" width="130" labelField="Label"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="credit Card" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Holder Name" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Expiration Month" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:DropDownList width="50" selectedIndex="0">
<s:dataProvider>
<s:ArrayList source="[1,2,3,4,5,6,7,8,9,10,11,12]" />
</s:dataProvider>
</s:DropDownList>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Expiration Year" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red" paddingTop="7.5" fontSize="18"/>
<s:DropDownList width="70" selectedIndex="0">
<s:dataProvider>
<s:ArrayList source="[2004,2005,2006,2007,2008,2009,2010]" />
</s:dataProvider>
</s:DropDownList>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
</mx:Accordion>
<s:Label text="Order Summary" styleName="order"/>
<s:Label text="Order Total: $129.99" styleName="txtsmall"/>
<s:Label text="Shipping and Handling: $5.99" styleName="txtsmall"/>
<s:Label text="Grand Total: $135.98" styleName="grand"/>
</s:VGroup>
</s:Panel>
</s:BorderContainer>
</s:Application>
CSS File
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace spark "mx.skins.spark.*";
.paneltitle
{
}
.txt
{
text-align:right;
font-size:12px;
font-family:arial;
font-weight:normal;
}
s|Panel
{
font-size:11px;
font-family:arial;
color:#2B333C;
font-weight:bold;
}
.header {
skin: ClassReference("boxie_skins.AccordianTabskin");
}
.order
{
padding-left:5px;
padding-top:10px;
font-size:16;
font-weight:bold;
font-family:arial;
color:#333333;
}
.grand
{
color:#FF6600;
font-size:16;
padding-left:5px;
padding-top:10px;
}
.txtsmall
{
color:#0B333C;
padding-left:5px;
}
Skin File
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->
<s:SparkSkin name="CustomAccordionHeaderSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21"
alpha.disabled="0.5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
<s:State name="selectedUp" />
<s:State name="selectedOver" />
<s:State name="selectedDown" />
<s:State name="selectedDisabled" />
</s:states>
<!-- layer 3: fill -->
<s:Rect left="1" right="1" top="1" bottom="1" rotation="360">
<s:fill>
<s:SolidColor color="white"
color.selectedUp="#E6FFDC"
color.selectedOver="#E6FFDC"
color.selectedDown="#E6FFDC" />
</s:fill>
</s:Rect>
<!-- layer 4: fill lowlight -->
<s:Rect left="1" right="1" bottom="1" height="9">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000" alpha="0.0099" />
<s:GradientEntry color="0x000000" alpha="0.0627" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: fill highlight -->
<s:Rect left="1" right="1" top="1" height="9">
<s:fill>
<s:SolidColor color="0xFFFFFF"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12" />
</s:fill>
</s:Rect>
<!-- layer 6: highlight stroke (all states except down) -->
<s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="1" height="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.25" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.09" />
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
<s:stroke>
<s:SolidColorStroke color="#AAB3B3" color.over="#67E634"
/>
</s:stroke>
</s:Rect>
</s:SparkSkin>
Posts
