1.EComm.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:states>
<mx:State name="cartView">
<mx:SetProperty target="{products}" name="width" value="0"/>
<mx:SetProperty target="{products}" name="height" value="0"/>
<mx:SetProperty target="{cartBox}" name="width" value="100%"/>
<mx:AddChild relativeTo="{cartBox}" position="lastChild">
<mx:LinkButton label="Continue Shopping" click="this.currentState=''" id="linkbutton2"/>
</mx:AddChild>
<mx:RemoveChild target="{linkbutton1}"/>
<mx:AddChild relativeTo="{linkbutton2}" position="before">
<mx:DataGrid width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:ApplicationControlBar x="10" y="10" dock="true" height="90">
<mx:Canvas width="100%" height="100%">
<mx:Label x="0" y="0" text="Flex"/>
<mx:Label x="0" y="41" text="Grocer"/>
<mx:Button y="10" label="ViewCart" id="bnViewCart" right="90"/>
<mx:Button y="10" label="Checkout" id="btnCheckout" right="10"/>
</mx:Canvas>
</mx:ApplicationControlBar>
<mx:Label x="355" y="225" text="(c)2009,FlexGrocer"/>
<mx:HBox x="0" y="9" width="100%" height="100%">
<mx:VBox width="100%" height="100%" id="products">
<mx:Label text="Milk" id="prodName"/>
<mx:Label text="$1.99" id="price"/>
<mx:Button label="Add To Cart" id="add"/>
</mx:VBox>
<mx:VBox height="100%" id="cartBox">
<mx:Label text="Your Cart Total :$"/>
<mx:LinkButton label="View Cart" id="linkbutton1" click="this.currentState='cartView'"/>
</mx:VBox>
</mx:HBox>
</mx:Application>
2.Dashboard.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:ApplicationControlBar dock="true">
<mx:LinkButton label="All"
click="this.currentState=''"/>
<mx:LinkButton label="Sales"
click="this.currentState='fullSales'" />
<mx:LinkButton label="Categories"
click="this.currentState='fullType'" />
<mx:LinkButton label="Comparison"
click="this.currentState='fullComp'" />
</mx:ApplicationControlBar>
<mx:states>
<mx:State name="fullSales">
<mx:SetProperty target="{rightCharts}"
name="width" value="0"/>
<mx:SetProperty target="{rightCharts}"
name="height" value="0"/>
</mx:State>
<mx:State name="fullType">
<mx:SetProperty target="{sales}"
name="width" value="0"/>
<mx:SetProperty target="{sales}"
name="height" value="0"/>
<mx:SetProperty target="{comp}"
name="width" value="0"/>
<mx:SetProperty target="{comp}"
name="height" value="0"/>
</mx:State>
<mx:State name="fullComp">
<mx:SetProperty target="{sales}"
name="width" value="0"/>
<mx:SetProperty target="{sales}"
name="height" value="0"/>
<mx:SetProperty target="{type}"
name="width" value="0"/>
<mx:SetProperty target="{type}"
name="height" value="0"/>
</mx:State>
</mx:states>
<mx:Panel id="sales" title="Sales Chart" width="100%" height="100%">
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
<mx:VBox id="rightCharts"
width="100%" height="100%">
<mx:Panel id="type" width="100%" height="100%"
title="Category Chart">
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
<mx:Panel id="comp" width="100%" height="100%"
title="Comparison Chart">
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
</mx:VBox>
</mx:Application>