2 Replies Latest reply on Apr 18, 2008 3:07 AM by atta707

    How to update the ItemRenderer at runtime..?

    Pratap Reddy
      Hi....
      am facing a hectic problem with ITemRenderes..

      My requirement is like i need to insert a Label and Image in each item of Horizontal List.
      For this i created a ArrayCollection with Lable and ImagePath. And assigning array as a Dataprovider to HorizontalList. and am attaching itemrenderer to it (which hold the lable and image).

      code:

      var data:ArrayCollection=new ArrayCollection({label:'A', path:'a.jpg'}, {label:'B', path:'b.jpg'}{label:'C', path:'c.jpg'});
      var hList:HorizontalList=new HorizontalList();
      hList.dataProvider=data;
      hList.itemRenderer=new ClassFactory(rendererObj);

      rendererObj holds the Lable Component and Image Componnet..


      Now the porblem is am trying to change the horizontal list at runtime. Like i want to change the lable of selected item in Horizontal list. Am able to update the arraycollection values. But its not getting effected in ItemRenderer.

      How to update the itemerenderer at runtime...?


      Thanks in Advance...
      Pratap
        • 1. Re: How to update the ItemRenderer at runtime..?
          peterskeeter
          Hi Pratap,
          I was playing with some sample code for this...


          Here is the main.mxml

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Script>
          <![CDATA[
          import mx.utils.ArrayUtil;
          import mx.collections.ArrayCollection;
          import mx.collections.IViewCursor;
          import mx.controls.Alert;
          import mx.events.*;
          import mx.controls.dataGridClasses.DataGridListData;
          import mx.controls.listClasses.BaseListData;
          import mx.controls.HorizontalList;
          import mx.controls.dataGridClasses.DataGridColumn;
          import mx.containers.TitleWindow;
          [Bindable] private var myItemRenderer:ClassFactory;

          private function doit()
          {
          myItemRenderer = new ClassFactory(rendererObj);
          var mydata:ArrayCollection=new ArrayCollection([{mylabel:'A', path:'a.jpg'}, {mylabel:'B', path:'b.jpg'},{mylabel:'C', path:'c.jpg'}]);
          var myList:HorizontalList = new HorizontalList();
          myList.dataProvider = mydata;
          this.addChild(myList);
          myList.itemRenderer=myItemRenderer;
          }
          ]]>
          </mx:Script>
          <mx:Button x="204" y="191" label="Button" click="doit()"/>
          </mx:Application>


          Here is the rendererObj.mxml (component/itemrenderer)

          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="110" height="76" implements="mx.core.IFactory,mx.controls.listClasses.IDropInListItemRenderer" backgroundColor="#BAB3B3" borderStyle="solid" borderThickness="3" borderColor="#000000">

          <mx:Script>
          <![CDATA[
          import mx.collections.IViewCursor;
          import mx.controls.listClasses.BaseListData;
          import mx.controls.Label;
          private var _listData:BaseListData;
          //------------------------------------------------------------------------------
          public function newInstance():*
          {
          return new rendererObj();
          }
          //------------------------------------------------------------------------------
          public function get listData() : BaseListData
          {
          return _listData;
          }
          //------------------------------------------------------------------------------
          public function set listData( value:BaseListData ) : void
          {
          _listData = value;
          }
          //------------------------------------------------------------------------------
          override public function set data(value:Object):void {
          if (value != null)
          {
          var r:Label = new Label();
          r.text = value.mylabel;
          this.addChild(r);
          }
          }
          //------------------------------------------------------------------------------
          ]]>
          </mx:Script>
          </mx:VBox>




          See how that works..you press the button and the itemrenderer
          gets drawn into the horiz. list with the values from the arraycollection.
          I didnt implement the picture, but you get the idea on how to get
          the values into the hlist..
          hope this helps...
          • 2. Re: How to update the ItemRenderer at runtime..?
            atta707 Level 2
            is your array collection declared as bindable? like:

            [Bidable]
            var data:ArrayCollection=new ArrayCollection({label:'A', path:'a.jpg'}, {label:'B', path:'b.jpg'}{label:'C', path:'c.jpg'});