0 Replies Latest reply on Apr 8, 2009 9:55 AM by stuttsdc

    Error 1009 with custom ItemRenderer in TileList

    stuttsdc Level 1

       

      Pretty new to Flex.  I'm testing two components, a DataGrid and a TileList, using the same custom itemRenderer.  The DataGrid works fine.  The TileList returns error #1009:
      ]Error #1009: Cannot access a property or method of a null object reference.
          at components::BridgeRenderer/set data()[C:\FlexTrain\bridgeDemo\src\components\BridgeRenderer.mxml:36]
          at mx.controls.listClasses::TileBase/getPreparedItemRenderer()[C:\autobuild\3.2.0\frameworks \projects\framework\src\mx\controls\listClasses\TileBase.as:575]
          .....etc, etc.....
       

       

      The ItemRenderer in this case, is set to display one image if it loads fine (can be found) and another generic image if nothing is found.

       

      First, the renderer:
      [CODE]<?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
          horizontalAlign="center"
          initialize="init()">
         
          <mx:Script>
              <![CDATA[
                 
                  import valueObjects.Bridge;
                  import flash.net.URLLoader;
                 
                  [Bindable]
                  private var imagePath:String;
                 
                  private var loader:URLLoader;
                 
                  private function init():void{
                      loader = new URLLoader();
                      loader.addEventListener(Event.COMPLETE, loaderHandler);
                      loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
                  }
                 
                  private function loaderHandler(success:String):void{
                      if (success){
                          imagePath = "assets/bridgeImages/" + data.bridgeID + "_sm.jpg";
                      }
                  }
                 
                  private function ioErrorHandler(event:IOErrorEvent):void{
                      imagePath = "assets/bridgeImages/empty.png";
                  }
                 
                  override public function set data(value:Object):void{
                      super.data = value;
                      var requestURL:URLRequest = new URLRequest("assets/bridgeImages/" + data.bridgeID + "_sm.jpg");
                      loader.load(requestURL);
                  }
              ]]>
          </mx:Script>
         
          <mx:Image
              height="48"
              source="{imagePath}"/>
          <mx:Label text="{data.name}" />
             
         
      </mx:VBox>
      [/CODE]

       

      The custom TileList control:
      [CODE]<?xml version="1.0" encoding="utf-8"?>
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
          label="Pic Query - tl">
         
          <mx:Metadata>
              [Event(name="selectBridgeEvent", type="events.BridgeEvent")]
          </mx:Metadata>

       

          <mx:Script>
              <![CDATA[
                  import events.BridgeEvent;
                  import valueObjects.Bridge;
                  import mx.events.ListEvent;
                  import mx.collections.ArrayCollection;
                 
                  [Bindable]
                  public var tileListData2:ArrayCollection;
                 
                  private function itemClickHandler(event:ListEvent):void{
                      var bridgeData:Bridge;
                      bridgeData = event.itemRenderer.data as Bridge;
                      var bridgeEventObject:BridgeEvent = new BridgeEvent("selectBridgeEvent", bridgeData);
                      dispatchEvent(bridgeEventObject);
                  }
                 
              ]]>
          </mx:Script>

       

          <mx:TileList
              dataProvider="{tileListData2}"
              itemRenderer="components.BridgeRenderer"
              itemClick="itemClickHandler(event)"/>

       

       

       

      </mx:Panel>[/CODE]

       

      Just to compare, the DataGrid (which uses basically the same code, same itemRenderer w/no problems...)
      [CODE]<?xml version="1.0" encoding="utf-8"?>
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
          layout="vertical"
          label="Quick Search">
         
          <mx:Metadata>
              [Event(name="selectBridgeEvent", type="events.BridgeEvent")]
          </mx:Metadata>
             
          <mx:Script>
              <![CDATA[
                 
                  import events.BridgeEvent;
                  import valueObjects.Bridge;
                  import mx.events.ListEvent;
                  import mx.collections.ArrayCollection;
                 
                  [Bindable]
                  public var gridData:ArrayCollection;
                 
                  private function itemClickHandler(event:ListEvent):void{
                      var bridgeData:Bridge;
                      bridgeData = event.itemRenderer.data as Bridge;
                      var bridgeEventObject:BridgeEvent = new BridgeEvent("selectBridgeEvent", bridgeData);
                      dispatchEvent(bridgeEventObject);
                  }
              ]]>
          </mx:Script>
         
             
          <mx:DataGrid id="allBridgesGrid"
                      dataProvider="{gridData}"
                      itemClick="itemClickHandler(event)"
                      width="100%">
                      <mx:columns>
                          <mx:DataGridColumn dataField="name"
                               headerText="Name"/>
                          <mx:DataGridColumn dataField="stateName"
                               headerText="State"
                               width="100"/>
                          <mx:DataGridColumn dataField="worldGuideNum"
                               headerText="World Guide Number"/>
                      </mx:columns>
                  </mx:DataGrid>
      </mx:Panel>
      [/CODE]

       

       

       

      Both of these controls are instantiated in the main app as:

       

      [CODE]<comp:BridgeDataGrid
                       id="smBridgeImages"
                       tileListData="{bridgeData}"
                       selectBridgeEvent="selectBridgeEventHandler(event)"/>
             
                  <comp:BridgeTileList
                      id="testTileList"
                      tileListData2="{bridgeData}"
                      selectBridgeEvent="selectBridgeEventHandler(event)"/>

       

      bridgeData is on the main app page as:
      [Bindable]
      private var bridgeData:ArrayCollection;

       

      [/CODE]