6 Replies Latest reply on Sep 22, 2009 10:50 PM by mewk

    ItemRenderer and Data Binding


      Hey guys. Simple question with probably a very obvious answer but I'm very new to Flash Builder (flex) and XML coding in general, so please bear with me.


      This is my ItemRenderer code for a datalist I have. It works fine but I'm trying to do logic checks and modification to the provided data before it's displayed on screen. Minor things like checking if it exist (some fields will be blank) and then inserting generic stuff.


      The problem I'm having is that I cant seem to access the data object using actionscript. The bold part of the code is giving me a TypeError #1009 during runtime.


      Am I not able to access the passed data object in Actionscript?






      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:ai="http://ns.adobe.com/ai/2008"
          xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:mx="library://ns.adobe.com/flex/halo">

          public var myHtmlText:String= "Description: " + data.deck;




              <s:State name="normal"/>
              <s:State name="hovered"/>
              <s:State name="selected"/>
          <s:Rect height="63" alpha="0.4" alpha.normal="0" width="422" id="rect1">
                  <s:SolidColor color="#000000"/>
          <s:Group y="4" x="5" id="group1">
              <mx:Image width="50" height="50" y="2" source="{data.image.small_url}" ai:knockout="0" />
              <s:HGroup x="57" y="0">
              <s:RichText fontFamily="Arial" lineHeight="120%" color="0xfcee21" whiteSpaceCollapse="preserve" kerning="on"  ai:knockout="0"
                  text="{data.name}"  id="nameYellow"/>
              <s:RichText fontFamily="Arial" lineHeight="120%" color="0x999999" whiteSpaceCollapse="preserve" kerning="on" ai:knockout="0"
                  text="( {data.resource_type} )" id="textGrey" />
              <s:RichText width="358" height="45" fontFamily="Arial" lineHeight="120%" color="0xffffff" whiteSpaceCollapse="preserve" kerning="on" x="57" y="16"
                  ai:knockout="0" text="{data.deck}"  id="descriptionBox" />
              <s:Line xTo="415" ai:knockout="0" x="0.5" y="62.5" id="line1">
                      <s:SolidColorStroke color="0xb3b3b3" caps="none" weight="1" joints="miter" miterLimit="4"/>





        • 1. Re: ItemRenderer and Data Binding
          mewk Level 3

          I'm not 100% sure here without running your full code and playing around with the debugger, but i'd be careful when the itemrenderer data property is actually bound to the object you actually pass in. Obviously, the data property is simply generic until real data is actually passed in. you might be trying to access .data too soon and hence deck would be undefined.






          public var myHtml:String;


          private function init():void {

               myHtml = "Description: " + data.deck;






          and of course in <s:ItemRenderer> add the line



          - e

          1 person found this helpful
          • 2. Re: ItemRenderer and Data Binding
            Zaph31-spayNX Level 1

            No luck I'm afraid. Still getting "TypeError: Error #1009: Cannot access a property or method of a null object reference" at runtime.

            • 3. Re: ItemRenderer and Data Binding
              mewk Level 3

              just tested this out. you need to delay accessing data even after the initialize event.


              replace initialize=init() with creationComplete="init()"


              here is the code i tested:

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   minWidth="1024" minHeight="768" initialize="init()">
                             import mx.collections.ArrayCollection;
                             [Bindable] public var myData:ArrayCollection;
                             private function init():void {
                                  var p1:Person = new Person();
                                  p1.name = "Dave";
                                  p1.sex = "male";
                                  p1.age = 20;
                                  var p2:Person = new Person();
                                  p2.name = "Angela";
                                  p2.sex = "female";
                                  p2.age = 43;
                                  myData = new ArrayCollection();
                   <s:List itemRenderer="myItemRenderer" dataProvider="{myData}"/>

              <!-- myItemRenderer -->
              <?xml version="1.0" encoding="utf-8"?>
              <s:ItemRenderer name="ThumbNailItemRenderer"
                             private var fakeAge:int;
                             [Bindable] private var myString:String;
                             private function init():void {
                                  if (data.sex == 'male') {
                                       fakeAge = data.age;
                                  } else if (data.sex == 'female') {
                                       fakeAge = data.age - 10;
                                  myString = data.name + " says ";
                                  (data.sex == 'male')? myString += "he" : myString += "she";
                                  myString += "is " + fakeAge + " years old.\n";
                                  myString += "(real age: " + data.age + " )";
                      <s:State name="normal" />
                      <s:State name="hovered" />
                      <s:State name="selected" />
                        <s:HGroup height="200" width="200" verticalAlign="middle">
                                  <s:RichText text="{myString}"/>

              // Person.as
                   public class Person
                        public var name:String;
                        public var age:int;
                        public var sex:String;
                        public function Person()


              hope that helps,


              - e

              • 4. Re: ItemRenderer and Data Binding
                Zaph31-spayNX Level 1

                Dude, thank you so much. I've literally spent hours googling this.


                All that example code you posted really went above and beyond.


                While I have your ear, as someone who's new to the Flash Builder 4 platform, is it usually okay to read Flex 3 tutorials as reference? or will I be doing myself a disservice due to depreciated code? I ask because I'm not finding much Flash Builder 4 stuff out there.


                Also, if you have any good links for the FB4 platform, I would appriciate them.




                • 5. Re: ItemRenderer and Data Binding
                  Peter deHaan Level 4

                  A lot of Flex 3 content is still applicable, but some stuff (states, skinning, renderers) may be substantially different.


                  As for Flex 4 links, I'd start with http://devgirl.wordpress.com/2009/09/04/flex-4-resources-samples-and-links/ and you could browse the specs and various documents at http://opensource.adobe.com/wiki/display/flexsdk/Gumbo.



                  • 6. Re: ItemRenderer and Data Binding
                    mewk Level 3

                    hey zaph,


                    no problemo. glad i could help!!


                    adobe has pretty good documentation at http://livedocs.adobe.com/flex/gumbo/html/WSc64e9ead1f0e66f0-1a61a292120da2547f0-8000.html

                    if you're highly motivated you could read through the entire site w/in 2-3 days.


                    i'm not super familiar with the blogs peter listed above (i.e. they're not bookmarked), but what peter failed to mention was his own site at http://blog.flexexamples.com/ which has tons of great examples and is a place i run into a lot during my own google searches.


                    so yeah, those are my top two general resources. i recommend reading through them again and again and again...



                    have fun and g'luck


                    - e