2 Replies Latest reply on Aug 16, 2010 3:54 AM by sphinks1

    Dispatching event from custom itemRender

    sphinks1

      Hello all. Have a problem with the event in custom itemRender.

      First of all i have created TileList:

       

      <mx:TileList height="544" width="575" dataProvider="{favorites}" id="FavoriteTileList"
                      itemDoubleClick="onFavoritesClick(event)" x="5"
                      doubleClickEnabled="true"
                      itemRenderer="FavoriteItemRender">
      </mx:TileList>

       

      Then I`ve created new itemRender:

       

      package
      {

       

      import flash.events.MouseEvent;

      import mx.containers.HBox;
      import mx.containers.VBox;
      import mx.controls.Image;
      import mx.controls.Label;
      import mx.controls.LinkButton;
      import mx.controls.Spacer;
      import mx.controls.listClasses.IListItemRenderer;
      import mx.core.UIComponent;
      import mx.events.*;

       

          public class FavoriteItemRender extends UIComponent implements IListItemRenderer
          {
             
              // Internal variable for the property value.
              private var _data:Object;
             
              private var hBox:HBox;
              private var vBox:VBox;
              private var image:Image;
              private var textLabel:Label;
              private var deleteFavorite:LinkButton;
              private var hSpacer:Spacer;
              private var vSpacer:Spacer;
              
               [Bindable] public var myData:DataModel = new DataModel();
               // Make the data property bindable.
              [Bindable("dataChange")]
              
              public function FavoriteItemRender()
                {
                     super();
                     this.explicitHeight = 150;
                     this.explicitWidth = 150;
                }
         
              // Define the getter method.
              public function get data():Object {
                  return _data;
              }    
         
              // Define the setter method, and dispatch an event when the property
              // changes to support data binding.
              public function set data(value:Object):void {
                  _data = value;
         
                  myData = new DataModel();
                  myData.source = value.source;
                  myData.text = value.text;
                  myData.tag = value.tag;
                  myData.carNumber = value.car_id;
         
                  invalidateProperties();
                  dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
              }
         
              
         
              override protected function createChildren():void
              {
                  super.createChildren();
                 
                  this.explicitHeight = 150;
                     this.explicitWidth = 150;
                    
                  vBox = new VBox();
                  vBox.explicitHeight = 150;
                  vBox.percentWidth = 100;
                  vBox.setStyle("horizontalAlign","center");
                  vBox.setStyle("verticalAlign","top");
                  addChild(vBox);
                 
                      image = new Image();
                      image.explicitHeight = 100;
                      image.explicitWidth = 120;
                      vBox.addChild( image );
                     
                      vSpacer = new Spacer();
                      vSpacer.explicitHeight = 10;
                      vBox.horizontalScrollPolicy = 'off';
                        vBox.verticalScrollPolicy = 'off';
                      vBox.addChild(vSpacer);
                 
                 
                        hBox = new HBox();
                        hBox.setStyle("horizontalAlign","center");
                        hBox.explicitHeight = 30;
                        hBox.percentWidth = 100;
                        hBox.horizontalScrollPolicy = 'off';
                        hBox.verticalScrollPolicy = 'off';
                        vBox.addChild( hBox );
                       
                       
                      hSpacer = new Spacer();
                      hSpacer.explicitWidth = 10;
                     
                        textLabel = new Label();
                   
                        deleteFavorite = new LinkButton();
                        deleteFavorite.label = 'X';
                        deleteFavorite.setStyle("color","#06ADE4");
                        deleteFavorite.addEventListener(MouseEvent.CLICK, handleDeleteClick);
                       
                        hBox.addChild( textLabel );
                        hBox.addChild( deleteFavorite );
                        hBox.addChild( hSpacer );

       

         
              } 
         
              override protected function commitProperties():void
              {
                  super.commitProperties();


         
                  textLabel.text = myData.text;
                  image.source = myData.source;
              }
         
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                  super.updateDisplayList(unscaledWidth,unscaledHeight);
                 
                  vBox.move(0,0);
                  vBox.setActualSize( (unscaledWidth-4), unscaledHeight);
              }
             
              private function handleDeleteClick( event: MouseEvent ) : void
              {
                  dispatchEvent(new DeleteFavoriteEvent(myData.carNumber));
              }
             
             
           }
      }

       

      As you can see I handle click on link button to dispatch my own event DeleteFavoriteEvent. As I firstly thought to hadle this event in parent mxml file with TileList will be enought set in init section:

       

      addEventListener(DeleteFavoriteEvent.DELETE_FAVORITE, deleteFavorite);

       

      But it`doesnt work. As then I find out I should addEventListener to instance of object that will dispatch it, as far as I understand to listen to this event, I should write something like this:

      (Instance of FavoriteItemRender).addEventListener(DeleteFavoriteEvent.DELETE_FAVORITE, deleteFavorite);

       

      in the mxml file with definition of TileLIst? But I didn`t have any instance of it, because using

      <mx:TileList height="544" width="575" dataProvider="{favorites}" id="FavoriteTileList"
                       itemRenderer="FavoriteItemRender">

       

      Give me an advise how to listen to event from itemRender in parent mxml file where TileList definite?

        • 1. Re: Dispatching event from custom itemRender
          MikisMM Level 2
          private function handleDeleteClick( event: MouseEvent ) : void

          {
                dispatchEvent(new DeleteFavoriteEvent(myData.carNumber));
          }

           

          As you can see I handle click on link button to dispatch my own event DeleteFavoriteEvent. As I firstly thought to hadle this event in parent mxml file with TileList will be enought set in init section:

           

          addEventListener(DeleteFavoriteEvent.DELETE_FAVORITE, deleteFavorite);

           

          But it`doesnt work. As then I find out I should addEventListener to instance of object that will dispatch it, as far as I understand to listen to this event, I should write something like this:

          (Instance of FavoriteItemRender).addEventListener(DeleteFavoriteEvent.DELETE_FAVOR ITE, deleteFavorite);

           

          in the mxml file with definition of TileLIst? But I didn`t have any instance of it, because using

          <mx:TileList height="544" width="575" dataProvider="{favorites}" id="FavoriteTileList"
                           itemRenderer="FavoriteItemRender">

          the

          Give me an advise how to listen to event from itemRender in parent mxml file where TileList definite?

          I guess the problem lies in what parateters you pass to your DeleteFavoriteEvent constructor. Actually it's one parameter you do not pass: bubbles. It defaults to false which means that your event will not have the bubbling phase. Therefore it does not travel up the display list and your parent TileList does not receive it. So just pass 'true' as a second parameter for the event's constructor and see if that helps:

          private function handleDeleteClick( event: MouseEvent ) : void
          {
             dispatchEvent(new  DeleteFavoriteEvent(myData.carNumber, true));
          }

          Now I'm not sure if this is appropriate way to atchieve your goal (whatever that is). In my opinion, stuffing your custom events to the display list is not applausable. But that's just my opinion after all.

          • 2. Re: Dispatching event from custom itemRender
            sphinks1 Level 1

            Ou, thanks. It`s really works.


            As far as I understand my way is not good may be. Can you tell you way of decision? I`m really interesting in correct way of solving of this problem.