Flex Tutorials 9-Manipulating XML in Adobe Flex

put dishes.xml under src/xml
<?xml version="1.0" encoding="utf-8" ?>
<menu>
<type aname="From the Grill">
<category aname="Fish dishes">
<dish id="1" aname="Cajun Seafood Bouillabaisse" description="With crawfish, scallops, catfish, crab, and mussels. Served with Southern-style cornbread and honey butter." price="17.50" image="image2.jpg"/>
<dish id="2" aname="Grilled Rockfish Fillet" description="Lemon-Chive Risotto Cake, Balsamic Glaze" price="24.95" image="image2.jpg"/>
</category>
<category aname="Meat dishes">
<dish id="3" aname="Sage-rubbed Double-cut Pork Chop" description="Topped with a ragout of mushrooms and chunky pancetta. Served with griddle corn cakes." price="14.95" image="image4.jpg"/>
<dish id="4" aname="The Burger" description="Brioche Bun and your choice of Mushrooms, Bacon, Cheddar, Gruyere, Blue" price="18.75" image="image4.jpg"/>
</category>
</type>
<type aname="Healthy, Light and Vegetarian">
<category aname="Vegetarian dishes">
<dish id="5" aname="Cavatappi Pasta with Chickpea Sauce" description="Tossed with grilled eggplant, green olives, and sun dried tomatoes. Topped with Mediterranean feta." price="17.45" image="image0.jpg"/>
<dish id="6" aname="Roasted Tomato Soup" description="Served with goat cheese croutons and basil puree" price="9.95" image="image0.jpg"/>
</category>
<category aname="Light dishes">
<dish id="7" aname="Summer Salad" description="Gorgonzola, tossed with raspberry vinaigrette" price="13.25" image="image1.jpg"/>
<dish id="8" aname="Pancetta-wrapped Sea Scallops" description="Drizzled with tarragon puree. Served with baked cauliflower au gratin in a tangy Gruyere sauce" price="16.45" image="image1.jpg"/>
</category>
</type>
</menu>

Now we need the output as follows


Mxml Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" layout="horizontal" creationComplete="dishesXML.send();">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.XMLListCollection;
[Bindable]
private var dishesDP:XMLList;
[Bindable]
private var shoppingCartXML:XML = new XML(<products></products>);
[Bindable]
private var shoppingCartData:XMLListCollection;
private function dishesXMLHandler(event:ResultEvent):void
{
dishesDP = event.result..category;
}
private function addToShoppingCart():void
{
var itemToUpdate:XMLList = shoppingCartXML.product.(@id == dishesTree.selectedNode.@id);
if(itemToUpdate.qty > 0)
{
itemToUpdate.qty=Number(itemToUpdate.qty)+1;
}
else
{
var newItem:XML =
<product id={dishesTree.selectedNode.@id}>
<aname>
{dishesTree.selectedItem.@aname}
</aname>
<price>
{dishesTree.selectedItem.@price}
</price>
<qty>
1
</qty>
</product>;
shoppingCartXML.appendChild(newItem);
}
shoppingCartData = new XMLListCollection (shoppingCartXML.children());
}
private function removeFromShoppingCart():void
{

}
private function clearCart():void
{

}
private function populateForm(event:Event):void
{
var node:XML=event.target.selectedItem;
if(node.@price != undefined)
{
prodName.text = node.@aname;
listPrice.text = node.@price;
description.text = node.@description;
theImage.source = "assets/"+node.@image;
theForm.visible = true;
}
else
{
theForm.visible = false;
prodName.text = "";
listPrice.text = "";
description.text = "";
theImage.source = "";
}
}
]]>
</mx:Script>

<mx:HTTPService id="dishesXML" url="assets/xml/dishes.xml" showBusyCursor="true"
result="dishesXMLHandler(event)" resultFormat="e4x"/>

<mx:ApplicationControlBar width="100%" height="110">
<mx:HBox>
<mx:Image source="assets/header.jpg" />
<mx:Label text="Delivery Service" fontSize="20"/>
</mx:HBox>
</mx:ApplicationControlBar>

<mx:Panel id="leftPanel" title="Our Fine Foods" width="100%" height="{centerPanel.height}">
<mx:Tree id="dishesTree"
dataProvider="{dishesDP}"
labelField="@aname"
width="100%"
height="100%"
borderThickness="0"
change="populateForm(event)"/>
</mx:Panel>

<mx:Panel id="centerPanel" title="Product Details" width="100%" height="{theForm.height+100}">
<mx:Form id="theForm" visible="false">
<mx:FormHeading/>
<mx:FormItem label="Product Name">
<mx:TextInput id="prodName"/>
</mx:FormItem>
<mx:FormItem label="Price">
<mx:TextInput id="listPrice"/>
</mx:FormItem>
<mx:FormItem label="Description">
<mx:TextArea id="description" width="{listPrice.width}" height="100"/>
</mx:FormItem>
<mx:FormItem>
<mx:Image id="theImage" width="200" height="50" maintainAspectRatio="true" />
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:Button
id="addButton"
label="Add to Cart"
enabled="{theForm.visible}"
click="addToShoppingCart()" />
</mx:ControlBar>
</mx:Panel>

<mx:Panel id="rightPanel"
title="Your Shoppingcart"
width="100%" height="{centerPanel.height}">
<mx:DataGrid id="shoppingCart"
dataProvider="{shoppingCartData}"
width="100%" height="100%"
borderThickness="0">
<mx:columns>
<mx:DataGridColumn dataField="qty" headerText="Quantity"/>
<mx:DataGridColumn dataField="aname" headerText="Name"/>
<mx:DataGridColumn dataField="price" headerText="Price"/>
</mx:columns>
</mx:DataGrid>

<mx:ControlBar enabled="false">
<mx:Button id="removeButton"
label="Remove"
enabled="false"
click="removeFromShoppingCart()"/>
<mx:Button id="clearButton"
label="Clear Cart"
enabled="false"
click="clearCart()"/>
</mx:ControlBar>
</mx:Panel>

</mx:Application>