5 Replies Latest reply on Jul 5, 2009 10:01 PM by agreeshma

    Custom ItemRenderer problem

    agreeshma

      Hello everyone, I am new to Flex and have an image gallery requirement at hand. Below is my code. And my problem is only the last image is getting displayed in the TileList. Please find my code in attached files and help me! Thanks in advance!

        • 1. Re: Custom ItemRenderer problem
          agreeshma Level 1

          Probably I did not put in proper words.. so no one is answering me... Let me rephrase it--

           

          I am trying to build an image gallery. First I invoke httpservice that points to an xml file (test.xml) which has image details. Then in its result handler I am trying to read the data from xml and construct a TileList using a custom ItemRenderer to display the images. First I read the xml data and put the details like image URL, description etc into an ArrayCollection (theImages in code). Now I construct a TileList, using the ArrayCollection "theImages" as dataprovider and set itemRenderer to a custom itemRenderer (ImageRenderer in code). My ImageRenderer extends image and implements IFactory. I am overriding set data and get data functions. In my set data I am trying to set images properties like source, tooltip etc from the value passed in the argument. and my newInstance() method just returns the current instance of ImageRenderer. set data function is called for each item in the theImages arrayCollection as expected and when I try to print the value using alert statements it shows me correct values for each item in the arrayCollection. So, I am setting the image properties using the values. And finally, my TileList displays only the last image. Please see my code below and help me find the mistake. Thanks a lot!

           

                test.xml

          <?xml version = '1.0'?>

          <ROWSET>

          <ROW num="1">

          <ID>4</ID>

          <NAME>Image 4</NAME>

          <DESCRIPTION>Image 4</DESCRIPTION>

          <URL>1.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          <ROW num="2">

          <ID>5</ID>

          <NAME>Image 5</NAME>

          <DESCRIPTION>Image 5</DESCRIPTION>

          <URL>2.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          <ROW num="3">

          <ID>1</ID>

          <NAME>Image 1</NAME>

          <DESCRIPTION>Bday Stage</DESCRIPTION>

          <URL>3.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          <ROW num="4">

          <ID>2</ID>

          <NAME>Image 2</NAME>

          <DESCRIPTION>I am with balloons</DESCRIPTION>

          <URL>4.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          <ROW num="5">

          <ID>3</ID>

          <NAME>Image 3</NAME>

          <DESCRIPTION>Image 3</DESCRIPTION>

          <URL>5.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          <ROW num="6">

          <ID>6</ID>

          <NAME>Image 6</NAME>

          <DESCRIPTION>Image 6</DESCRIPTION>

          <URL>6.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          <ROW num="7">

          <ID>7</ID>

          <NAME>Image 7</NAME>

          <DESCRIPTION>Image 7</DESCRIPTION>

          <URL>7.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          <ROW num="8">

          <ID>8</ID>

          <NAME>Image 8</NAME>

          <DESCRIPTION>Image 8</DESCRIPTION>

          <URL>8.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          <ROW num="9">

          <ID>9</ID>

          <NAME>Image 9</NAME>

          <DESCRIPTION>Image 9</DESCRIPTION>

          <URL>9.jpg</URL>

          <CATEGORY_ID>1</CATEGORY_ID>

          <TYPE>Bday</TYPE>

          </ROW>

          </ROWSET>

           



                imggal.xml

              

          <?xml version="1.0" encoding="utf-8"?>

          <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/ -->

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="buildGallery.send();" layout="absolute">

          <mx:Script>

          <![CDATA[

          import mx.controls.Alert;

          import mx.controls.TileList;

          import mx.rpc.events.FaultEvent;

          import mx.rpc.events.ResultEvent;

          import mx.collections.ArrayCollection;

          import mx.collections.*;

          import mx.controls.Image;

          import ImageRenderer;

          [Bindable]

          public var theImages:ArrayCollection=new ArrayCollection();

          public var theImagesArray:Array=new Array();

          public var imagesFetched:Boolean = false;

          public var imageTileList:TileList=new TileList();

          public var img:Image=new Image();

          private function buildGalleryResult(event:ResultEvent):void{

          Alert.show("Im in Success");

          var myXML:XML = event.result as XML;

           

          for each (var item:Object in myXML.ROW){

          theImages.addItem(item);

          }

          do{

          if(theImages.length!=myXML.children().length()){

          }else{

          Alert.show("Inside else");

          if(theImages){

          imageTileList.height = 310;

          imageTileList.width = 310;

          imageTileList.columnCount = 3;

          imageTileList.rowCount = 3;

          imageTileList.columnWidth = 100;

          imageTileList.rowHeight = 100;

          imageTileList.dataProvider = theImages;

          imageTileList.itemRenderer = new ImageRenderer();

          galleryContainer.addChild(imageTileList);

          }

          }

          }while(theImages.length!=myXML.children().length());

          }

          private function buildME():void{}

          private function populateTileList():void{Alert.show("Im in populateTileList!");}

          private function buildGalleryFault(event:FaultEvent):void{

          Alert.show(event.fault.toString());

          }

          ]]>

          </mx:Script>

          <mx:HTTPService id="buildGallery"

          url="test.xml"

          showBusyCursor="true"

          resultFormat="e4x"

          useProxy = "false"

          result="buildGalleryResult(event)"

          fault="buildGalleryFault(event)" >

          </mx:HTTPService>

          <mx:Panel backgroundColor="#FFFFFF" height="320" width="320" id="galleryContainer">

          </mx:Panel>

          </mx:Application>



               ImageRenderer.as

              

          package
          {
          import mx.core.IFactory;
          import mx.core.ClassFactory;
          import mx.controls.Image;
          import mx.controls.Alert;

          [Bindable]
          public class ImageRenderer extends Image implements IFactory {
          public function ImageRenderer() {
              super();
          }
          public function newInstance():*
          {  Alert.show("newInstance"+data);
              return this;
              } 
          override public function set data(value:Object):void{        
            this.height = 100;
            this.width  = 100;
            this.alpha  = 0.3;
            this.autoLoad = true;
            this.maintainAspectRatio = false;
            this.source = value.URL;
            this.toolTip = value.DESCRIPTION;
            Alert.show("image "+this.source);
          }    
          override public function get data():Object{        
            return this;    
          }
          }
          }


            I hope someone can crack it.

          • 2. Re: Custom ItemRenderer problem
            Eliezer Reis

            My Opinion....... Flex DataGrid is a trash. Fuc##*&k DG and ADG developers !!!!

             

            I hate silverlight but their DataGrid is much much much much better that this sucks flex datagrid.

             

            http://demos.devexpress.com/AgDataGridFreeDemos/

            http://www.silverlightshow.net/items/DataGrid-and-row-details-in-Silverlight-2.aspx

            • 3. Re: Custom ItemRenderer problem
              dave cragg Level 2

              In item renderers, out of habit, in the "set data" override, I always call the super method and also dispatch a dataChanged event. Most examples I've seen do this, and I'm sure I read somewhere that this is important. So your method might look like this:

               

               

               

              override public function set data(value:Object):void{        
                super.data = value ;

               

                this.height = 100;
                this.width  = 100;
                this.alpha  = 0.3;
                this.autoLoad = true;
                this.maintainAspectRatio = false;
                this.source = value.URL;
                this.toolTip = value.DESCRIPTION;
                Alert.show("image "+this.source);

               

              dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
              }    

              • 4. Re: Custom ItemRenderer problem
                rgadiparthi Level 2

                here is the fix.

                 

                use

                var factory:ClassFactory = new ClassFactory(ImageRenderer);                                   
                imageTileList.itemRenderer = factory;

                 

                instead of

                 

                imageTileList.itemRenderer = new ImageRenderer();

                 

                Thanks

                • 5. Re: Custom ItemRenderer problem
                  agreeshma Level 1

                  Thank you all for your responses.

                   

                  Thank you so much rgadiparthi.

                   

                  Your solution just worked out. Thanks a lot.