<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
          layout="vertical"
          creationComplete="dishesXML.send()">
  
          <mx:Script>
                  <![CDATA[
                          import mx.rpc.events.ResultEvent;
                          
                          [Bindable]
                          private var dishesDP:XMLList;
                          
                          private function dishesXMLHandler(event:ResultEvent):void
                          {
                                  dishesDP = event.result..category;
                          }
                          private function addToShoppingCart():void
                          {
  
                          }
                          private function removeFromShoppingCart():void
                          {
  
                          }
                          private function clearCart():void
                          {
  
                          }
                          private function populateForm(event:Event):void
                          {
                                  var node:XML=null;
                                  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 = "";
                                  }                                
                          }
                  ]]>
          </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" />
                  </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" 
                                  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>