1 Reply Latest reply on Jun 10, 2010 6:29 AM by UbuntuPenguin

    ItemRenderer Question

    christomanos Level 1

      Hi all,

       

      I have this Component with a DataGroup inside

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" close="titlewindow1_closeHandler(event)">
           
           <fx:Script>
                <![CDATA[
                     import com.eworx.seven7eshop.views.presenters.CartPM;
                     
                     import mx.collections.ArrayCollection;
                     import mx.controls.Alert;
                     import mx.events.CloseEvent;
                     import mx.managers.PopUpManager;
                     import mx.rpc.events.ResultEvent;
                     
                     
                     
                     
                     [Bindable]
                     public var model:CartPM;
                     
                     
                     [Bindable]
                     public var total:int;
                     
                     private function init():void {
                          XML.ignoreWhitespace = true;
                          XML.prettyPrinting = false;
                     }
                     
                     protected function titlewindow1_closeHandler(event:CloseEvent):void
                     {
                          PopUpManager.removePopUp(this);
                     }
                
      
                     protected function button1_clickHandler(event:MouseEvent):void
                     {
      
                          var params:Object = {};
                          var cartXML:XML = new XML("<order></order>");
                          
                          for each (var item:Object in cartDg.dataProvider) {
                               var pId:String = item.pId;
                               var pName:String = item.pName;
                               var product:XML = <product pId={pId} pName={pName}></product>;
                               cartXML.appendChild(product);
                          }
                          
                          params["orders"] = cartXML.toXMLString();
                          
                          saveOrderServ.send(params);
                          model.emptyCart();
                     }
                     
                     private function totalItems():void {
                          cartDg.dataProvider;
                     }
      
      
                     protected function httpservice1_resultHandler(event:ResultEvent):void
                     {
                          Alert.show("SAVED");
                     }
      
      
                     
      
                ]]>
           </fx:Script>
           
           <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) here -->
                <s:HTTPService id="saveOrderServ" url="http://localhost/Seven7-Eshop-debug/rpc/saveOrders.php" method="POST" result="httpservice1_resultHandler(event)" />
           </fx:Declarations>
           <s:HGroup id="ordersHeader">
                <s:Label id="shoppingCartLabel" text="Shopping Cart" />
                <!--<s:Button label="Hide Details" />-->
           </s:HGroup>
           
           <s:Group id="marginHolder" width="1000" height="550">
                <s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
                     <s:fill>
                          <s:LinearGradient rotation="90">
                               <s:GradientEntry color="0xD8B220" />
                               <s:GradientEntry color="0x986733" />
                          </s:LinearGradient>
                     </s:fill>
                </s:Rect>
                <s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
                     <s:fill>
                          <s:BitmapFill source="@Embed('garnish/denimPattern.png')" fillMode="repeat" />
                     </s:fill>
                </s:Rect>
                <s:VGroup top="25" left="25" width="100%" horizontalAlign="center">
                     <s:Scroller  width="950" height="450">
                          <s:DataGroup id="cartDg" width="100%" height="100%"  
                                          dataProvider="{new ArrayCollection(model.cartProducts)}" 
                                          itemRenderer="CartListItemRenderer">
                               <s:layout>
                                    <s:VerticalLayout gap="50" />
                               </s:layout>
                          </s:DataGroup>
                     </s:Scroller>
                     <s:Group>
                          <s:BitmapImage source="@Embed('garnish/cartCheckoutBorder.png')" />
                          <s:HGroup verticalAlign="middle">
                               <s:Label id="totalItemsPrice" text="items / € " />
                               <s:Button label="checkout" click="button1_clickHandler(event)" />
                          </s:HGroup>
                     </s:Group>
                </s:VGroup>
                
           </s:Group>
      </s:TitleWindow>
      
      
      

       

      And this itemrenderer with a datagrid inside

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          autoDrawBackground="false">
           
           <fx:Script>
                <![CDATA[
                     import com.eworx.seven7eshop.events.CartEvent;
                     
                     import mx.events.DataGridEvent;
                     
                     [Bindable]
                     public var total:int = 0;
      
                     protected function color_sizes_itemEditBeginHandler(event:DataGridEvent):void
                     {
                          total = 0;
                          for each(var item:Object in color_sizes.dataProvider) {
                               for each(var cell:Object in item) {
                                    if(cell > 0) {
                                         total += cell;
                                    }
                               }
                          }
                          
                     }
                     
                ]]>
           </fx:Script>
           
           
           <s:HGroup id="holder" gap="20">
                <mx:Image source="{data.pImage}" />
                <s:VGroup>
                     <s:Label id="orderTitle" text="{data.pName}" />
                     <s:Group width="100%">
                          <s:HGroup gap="20">
                               <s:Label id="orderProduct" text="{data.pCode}" />
                               <s:Label id="orderPrice" text="€ {data.pPrice}" />
                          </s:HGroup>
                          <s:Label id="previewTotal"  text="Sum: {total} items / € {data.pPrice*total}" right="0" />
                     </s:Group>
                     <mx:DataGrid 
                          id="color_sizes" 
                          editable="true" 
                          dataProvider="{data.rows}"  
                          color="0x000000" columns="{data.columns}"
                          itemEditBegin="color_sizes_itemEditBeginHandler(event)"
                          
                          />
                </s:VGroup>
           </s:HGroup>
      </s:ItemRenderer>
      

       

      This Datagroup has a datagrid where the user can enter how many items want for each color/size. I can calculate the total items for each datagrid but I need to display the total of all datagrids in the parent component where the datagroup is.

       

      How can I do that?

        • 1. Re: ItemRenderer Question
          UbuntuPenguin Level 4

          I would bypass the DataGrid all together.  Using the DataGrid , you have to mess with itemrenderers and indexes ... not

          very fun when one can avoid it.  Instead , I would do my calculations off of the dataprovider.  Then it becomes an elementary exercise of a for-loop and [Bindable] values.