Creating Accordion

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”add();init()” backgroundImage=”darkaurora.jpg”>
<mx:XML id=”cusapp” source=”cus.xml”/>
<mx:Script source=”cusas.as”/>
<mx:Accordion x=”-1″ y=”10″ width=”914″ height=”526″ >
<mx:Canvas backgroundColor=”#FFFFCC” label=”Customer List” width=”100%” height=”100%”>
<mx:DataGrid x=”30″ visible=”false” y=”50″ width=”353″ id=”datag” sortableColumns=”true” editable=”true” color=”Yellow”>
<mx:columns>
<mx:DataGridColumn dataField=”cname” headerText=”Customer Name” color=”0×00ccff” fontFamily=”TimesNewRoman” fontSize=”18″/>
<mx:DataGridColumn dataField=”cid” headerText=”customer Id” color=”0×00ccff” fontFamily=”TimesNewRoman” fontSize=”18″/>
</mx:columns>
</mx:DataGrid>
<mx:Text visible=”false” id=”te1″ x=”405″ y=”50″ text=”  Display the total number of Customer” width=”344″ height=”142″ fontSize=”20″ fontFamily=”TimesNewRoman” fontThickness=”30″ fontSharpness=”100″ fontStyle=”italic”/>
<mx:Text visible=”false” id=”te2″ x=”405″ y=”200″ text=”Display the number of customer who got logged in&#xa;” width=”344″ height=”151″ fontSize=”20″ fontFamily=”TimesNewRoman” fontThickness=”15″ fontSharpness=”20″ fontStyle=”italic”/>
<mx:Button x=”30″ y=”10″ label=”Customer Details” click=”datag.visible=true”/>
<mx:Button id=”bu1″ x=”405″ y=”10″ label=”Number of customers” click=”te1.visible=true” visible=”false”/>
<mx:Button id=”bu2″ x=”405″ y=”136″ label=”Logged customers” click=”te2.visible=true” visible=”false”/>
<mx:Label x=”20″ y=”309″ text=”Search Customer ID”/>
<mx:TextInput x=”183″ y=”307″/>
<mx:Button x=”183″ y=”354″ label=”Search”/>
<mx:Button x=”285″ y=”10″ label=”View Details” click=”bu1.visible=true,bu2.visible=true”/>
</mx:Canvas>
<mx:Canvas backgroundColor=”#FFFFCC” label=”Personal Details” width=”100%” height=”100%”>
<mx:Panel  id=”p1″ x=”108″ y=”10″ width=”318″ height=”146″ title=” Personal Information” fontSize=”15″ fontStyle=”italic”  fontFamily=”TimesNewRoman”>
<mx:Label text=”Last Logged in                    :”/>
<mx:Label text=” Account Created on/in      :”/>
<mx:Label text=”Customer Group               :”/>
</mx:Panel>
<mx:Panel id=”p2″ x=”483″ y=”10″ width=”328″ height=”146″ title=”Sales Satisfy” fontSize=”15″ fontStyle=”italic”  fontFamily=”TimesNewRoman”>
<mx:Label text=” Life Time Sales&#x9;:”/>
<mx:Label text=” Average Sale     :”/>
</mx:Panel>
<mx:DataGrid id=”myGrid” width=”460″ height=”128″ x=”212″ y=”176″ visible=”false”>
<mx:ArrayCollection>
<mx:Object RecentOrder=”Fertilizer” Order=”12″
ShippedTo=”USA” Total=”10000″ BroughtFrom=”India”/>
<mx:Object RecentOrder=”Hybrid Rose” Order=”172″
ShippedTo=”UK” Total=”80000″ BroughtFrom=”India”/>
<mx:Object RecentOrder=”Lily seeds” Order=”120″
ShippedTo=”Japan” Total=”100″ BroughtFrom=”India”/>
<mx:Object RecentOrder=”Money Plant” Order=”180″
ShippedTo=”Australia” Total=”10000″ BroughtFrom=”India”/>
</mx:ArrayCollection>
</mx:DataGrid>
<mx:DataGrid id=”myGrid2″ width=”460″ height=”126″ x=”379″ y=”312″ visible=”false”>
<mx:ArrayCollection>
<mx:Object ProductID=”01″ ProductName=”Daffodils”
Date=”23/03/09″ DaysinwishList=”0″/>
<mx:Object ProductID=”02″ ProductName=”Lily Hybrid”
Date=”13/03/09″ DaysinwishList=”10″/>
<mx:Object ProductID=”03″ ProductName=”Rose Hybrid”
Date=”3/03/09″ DaysinwishList=”20″/>
</mx:ArrayCollection>
</mx:DataGrid>
<mx:Button x=”30″ y=”219″ label=”Recent Orders” click=”myGrid.visible=true”/>
<mx:Button x=”202″ y=”360″ label=”Wishlist” click=”myGrid2.visible=true”/>
</mx:Canvas>
<mx:Canvas label=”Shipping” width=”100%” height=”100%” backgroundColor=”#FFFFCC”>
<mx:DataGrid id=”myGrid3″ width=”488″ height=”232″ x=”203″ y=”121″ visible=”false”>
<mx:ArrayCollection>
<mx:Object OrderID=”01″ Date=”23/03/09″ Status=”Delivered”/>
<mx:Object OrderID=”02″ Date=”23/02/09″ Status=”Delivered”/>
<mx:Object OrderID=”03″ Date=”23/02/09″ Status=”Pending”/>
<mx:Object OrderID=”04″ Date=”23/01/09″ Status=”Pending”/>
<mx:Object OrderID=”05″ Date=”2/03/09″ Status=”Delivered”/>
<mx:Object OrderID=”06″ Date=”3/03/09″ Status=”Pending”/>
<mx:Object OrderID=”07″ Date=”5/03/09″ Status=”Pending”/>
<mx:Object OrderID=”08″ Date=”9/03/09″ Status=”Delivered”/>
</mx:ArrayCollection>
</mx:DataGrid>
<mx:Button x=”46″ y=”35″ label=”Shipping” click=”myGrid3.visible=true”/>
</mx:Canvas>
</mx:Accordion>
</mx:Application>

———————

// ActionScript file
import mx.collections.ArrayCollection;
public var ASXML:XML=new XML();
public var arrc:ArrayCollection;
public function add():void
{
ASXML=cusapp;
fetch1();
}
public function fetch1():void
{
arrc=new ArrayCollection();
for(var i:uint=0; i<ASXML.customer.length();i++)
{
arrc.addItem({cname:ASXML.customer.cname[i],cid:ASXML.customer.cid[i]});
}
datag.dataProvider=arrc;
}

——————-

XML file:

<root>
<customer>
<cname>Sendil</cname>
<cid>01</cid>
</customer>
<customer>
<cname>Kamal</cname>
<cid>02</cid>
</customer>
<customer>
<cname>Venkat</cname>
<cid>03</cid>
</customer>
<customer>
<cname>Mukund</cname>
<cid>04</cid>
</customer>
</root>

~ by devibaskaran on June 18, 2009.