0 Replies Latest reply on Jul 24, 2007 7:43 AM by dilbertje

    dispatch event from itemrenderer

    dilbertje
      Greetings.

      i've got a main applicationxml: main.mxml
      followed by a component: optionbox.mxml, being loaded in the main.mxml.

      in optionbox.mxml another component is loaded: optionCanvas.mxml

      inhere, a datagrid is being created with a custom itemrenderer: itemsRenderer.mxml

      in this itemsRenderer (wich alters the display of the cells) is an image located.
      when you click this image, an object has to be dispatched to the main.mxml.

      how can I do this? It works when I dispatch from a component, but not from an itemrenderer.


      can anyone help me out.??


      main.mxml
      ----------------

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="vertical"
      xmlns:c="comp.*"
      backgroundAlpha="0"
      backgroundColor="#FFFFFF">

      <mx:«»Style>
      global{
      fontFamily:Arial;
      }
      Canvas{
      color:#000000;
      }
      .FooterLink{
      color:#0066CB;
      fontWeight:Bold;
      fontThickness:900;

      }
      .Footer{
      backgroundColor:#E1F0F7;
      }
      DataGrid{
      borderThickness:0;
      selectionColor:#FFFFFF;
      selectionDisabledColor:#FFFFFF;
      disabledColor:#FFFFFF;
      rollOverColor:#FFFFFF;
      }
      ToolTip {
      fontFamily: Arial;
      fontSize: 12;
      color: #000000;
      }

      </mx:«»Style>
      <mx:«»Script>
      <![CDATA[
      import events.itemEvent;
      import mx.rpc.events.ResultEvent;
      import mx.collections.ArrayCollection;
      [Bindable]
      private var selectedItems:ArrayCollection = new ArrayCollection();

      private function photoSelectedHandler(event:itemEvent):void{
      selectedItems.addItem(event.selectedItem);
      }
      ]]>
      </mx:«»Script>

      <mx:VBox width="980" height="100%">
      <mx:HBox>
      <mx:VBox>
      <c:LeftPane id="leftpane" width="201" height="100%" />
      <c:Checkout id="checkout" selectedItems="{selectedItems}" styleName="checkout" fontWeight="bold"/>
      </mx:VBox>
      <c:«»Swfcontainer width="537" height="405" />
      <c:OptionBox width="222" height="100%" id="optionBox" itemSelected="{photoSelectedHandler(event)}"/>
      </mx:HBox>
      <c:Footer width="100%" styleName="Footer"></c:Footer>
      </mx:VBox>
      </mx:Application>

      [/code:1]


      optionbox.mxml
      --------------
      [code:1]<?xml version="1.0" encoding="utf-8"?>
      <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" color="#400000" creationComplete="printerData.send()" xmlns:c="comp.*">
      <mx:Metadata>
      [Event(name="itemSelected", type="events.itemEvent"«»)]
      </mx:Metadata>
      <mx:«»Script>
      <![CDATA[
      import mx.rpc.events.ResultEvent;
      import mx.collections.ArrayCollection;
      [Bindable]
      public var printer:ArrayCollection

      private function printerDataHandler(event:ResultEvent):void{
      printer = new ArrayCollection();
      printer=event.result.printer.confItem;
      }

      ]]>
      </mx:«»Script>
      <mx:HTTPService id="printerData" url="data/data.xml" result="printerDataHandler(event)"/>
      <mx:Accordion id="accOptions" width="100%" height="100%" headerHeight="32" backgroundAlpha="0" fontSize="11" color="#0066CB" resizeToContent="true">
      <mx:Canvas label="{printer.getItemAt(0).label}" width="100%" height="100%" backgroundAlpha="0">
      <mx:VBox>
      <mx:Text width="198" htmlText="{printer.getItemAt(0).text}" />
      </mx:VBox>
      </mx:Canvas>
      <mx:Repeater id="repAccOptions" dataProvider="{printer}" startingIndex="1" >
      <c:optionCanvas itemData="{repAccOptions.currentItem}"/>
      </mx:Repeater>
      </mx:Accordion>
      </mx:HBox>[/code:1]


      optionCanvas.mxml
      --------------------
      [code:1]<?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" label="{itemData.label}" width="100%" height="100%" verticalScrollPolicy="off">
      <mx:«»Script>
      <![CDATA[
      [Bindable]
      public var itemData:Object;
      ]]>
      </mx:«»Script>
      <mx:VBox width="100%">
      <mx:Text width="100%" htmlText="{itemData.text}" />
      <mx:«»DataGrid dataProvider="{itemData.consumables.consumable}"
      headerHeight="0"
      width="100%" itemRenderer="itemRenderers.OptionsRender" alternatingItemColors="#FFFFFF">
      <mx:columns>
      <mx:«»DataGridColumn dataField="consumableLabel" width="200"/>
      </mx:columns>
      </mx:«»DataGrid>
      </mx:VBox>
      </mx:Canvas>[/code:1]


      optionsRenderer.mxml
      -------------------
      [code:1]<?xml version="1.0" encoding="utf-8"?>
      <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="165" height="45">
      <mx:Metadata>
      [Event(name="itemSelected", type="events.itemEvent"«»)]
      </mx:Metadata>
      <mx:«»Script>
      <![CDATA[
      import events.itemEvent;
      [Bindable]
      public var selectedItem:Object;

      private function addItem(itemObj:Object):void{
      selectedItem = new Object();
      selectedItem = itemObj;
      var eventObj:itemEvent = new itemEvent(selectedItem,"itemSelected"«»);
      dispatchEvent(eventObj);
      }

      ]]>
      </mx:«»Script>
      <mx:Image source="assets/btnAddItem.jpg" click="addItem(data)"/>
      <mx:Text htmlText="{data.consumableLabel}" height="45"/>
      <mx:Image source="assets/btnInfoItem.jpg" horizontalAlign="right">
      <mx:toolTip>
      {data.consumableLabel}
      Partnumber:{data.consumablePartnr}
      Price:{data.consumablePrice}

      Omschrijving
      {data.consumableDescr}</mx:toolTip>
      </mx:Image>
      </mx:HBox>[/code:1]