<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
          layout="vertical"
          creationComplete="dishesXML.send();initApp()">
  
          <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.selectedItem.@id);
                                  if(itemToUpdate.qty > 0)
                                  {
                                          itemToUpdate.qty=Number(itemToUpdate.qty)+1;
                                  }
                                  else
                                  {
                                          var newItem:XML =
                                          <product id={dishesTree.selectedItem.@id}>
                                                  <name>
                                                          {dishesTree.selectedItem.@name}
                                                  </name>
                                                  <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.@name;
                                          listPrice.text = node.@price;
                                          description.text = node.@description;
                                          theImage.source = "actionscript-e4x-assets-"+node.@image;
                                          theForm.visible = true;
                                  } 
                                  else 
                                  {
                                          theForm.visible = false;
                                          prodName.text = "";
                                          listPrice.text = "";
                                          description.text = "";
                                          theImage.source = "";
                                  }                                
                          }
                          private function initApp():void
                          {
                                  clearButton.enabled=false;
                          }
                  ]]>
          </mx:Script>
          
          <mx:HTTPService 
                  id="dishesXML"
                  url="actionscript-e4x-assets-xml-dishes.xml"
                   showBusyCursor="true"
                   result="dishesXMLHandler(event)"
                   resultFormat="e4x"/>
                  
          <mx:ApplicationControlBar width="100%" height="110">
                  <mx:HBox>
                          <mx:Image source="actionscript-e4x-assets-header.jpg" />
                          <mx:Label text="Delivery Service" fontSize="20"/>
                  </mx:HBox>
          </mx:ApplicationControlBar>
          
          <mx:HBox width="100%">
                  <mx:Panel id="leftPanel" 
                          title="Our Fine Foods" 
                          width="100%" height="{centerPanel.height}">        
                          <mx:Tree id="dishesTree"
                                  dataProvider="{dishesDP}"
                                  labelField="@name"
                                  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 Shopping Cart" 
                          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="name" 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:HBox>
          
  </mx:Application>