8 Replies Latest reply on May 14, 2009 3:50 PM by Michael Borbor

    Dispatching Event in ItemRenderer Component?

    Miggl

      Am I going about this the right way? Here's my situation:

      I have a custom itemRenderer for a List. This itemRenderer consists mainly of a checkbox and label, but has a few additional details in it (which is why I'm not using a drop-in itemRenderer). I want to detect when the selection of the checkbox changes, so I was thinking of creating a custom event in the itemRenderer and then bubbling it up to the list.

      Or is there a way I can detect when a user checks a checkbox from the lists itself?

       

      Thanks!

        • 1. Re: Dispatching Event in ItemRenderer Component?
          _Natasha_ Level 4

          Hi,

          you are going right way. Dispatching event is a correct way to do what you want.

           

          Good article about itemRenderers

          http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html

          1 person found this helpful
          • 2. Re: Dispatching Event in ItemRenderer Component?
            Miggl Level 1

            I found this article which explains this topic very well also: http://weblogs.macromedia.com/pent/archives/2008/03/itemrenderers_p_2.html

            (It appears that these may be referencing the same series of articles on different sites.)

             

            However, I am now conflicted, because if I the version without bubbling, I am tying the itemRenderer directly to my component; whereas with bubbling I don't need to make that association. I may opt for the bubbling route after all, because I want to keep my itemRenderers generic enough to use in any of my custom controls, and not just in a certain type.

             

            For more clarification: the hangup is where the event gets triggered on the listData.owner. To do this, it appears that it must be type-cast first, and then manipulated. Any ideas on how to get around that? Here's Peter's example:

             

            ====================================

            First, you have to add metadata to the CatalogList control to let the compiler know the control dispatches the event:

                 import events.BuyBookEvent;
                 import mx.controls.TileList;

                 [Event(name="buyBook",type="events.BuyBookEvent")]
                
                 public class CatalogList extends TileList
                 {

            Second, add a function to CatalogList to dispatch the event. This function will be called by the itemRenderer instances:

                      public function dispatchBuyEvent( item:Object ) : void
                      {
                           var event:BuyBookEvent = new BuyBookEvent();
                           event.bookData = item;
                           dispatchEvent( event );
                      }
                     
                 }

            Third, change the Buy button code in the itemRenderer to invoke the function:

                           <mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]">
                                <mx:click>
                                <![CDATA[
                                     (listData.owner as CatalogList).dispatchBuyEvent(data);
                                ]]>
                                </mx:click>
                           </mx:Button>

            Now the Button in the itemRenderer can simply invoke a function in the list control with the data for the record (or anything else that is appropriate for the action) and pass the responsibility of interfacing with the rest fo the application onto the list control.

            ====================================

            • 3. Re: Dispatching Event in ItemRenderer Component?
              Miggl Level 1

              In the mean time I'll try to get the basics working. I have set up the item renderer to be specific to the custom component. However, when I try adding a custom event to my custom component using the event metatag, it doesn't show up in the code-hints, and also spits out the following error if I try to assign a function to this new event:

               

              1119: Access of possibly undefined property testEvent through a reference with static type com.brassworks.components.composite:LinkAndCheckboxToggleList.

              • 4. Re: Dispatching Event in ItemRenderer Component?
                Michael Borbor Level 4

                Could you post the code that is raising this error?

                • 5. Re: Dispatching Event in ItemRenderer Component?
                  Miggl Level 1

                  I'll try, but its a bit complicated.

                   

                  The app, instanciating and using the custom component (line with ".testEvent" is causing error):

                  //[...]
                  private function loadGroupsByUserHandler(event:ResultEvent):void
                  {
                       var groupList          :LinkAndCheckboxToggleList     = new LinkAndCheckboxToggleList();
                  //[...]
                       groupList.dataProvider = currentGroups;
                       groupList.id = "cbl_groups";
                       groupList.labelField = "name";
                       groupList.selectionField = "selected";
                       groupList.interactive = false;
                       groupList.testEvent = "userGroupsChanged(event)";
                  //[...]
                  }
                  //[...]
                  

                   

                   

                  Then the component:

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Box
                       xmlns:mx="http://www.adobe.com/2006/mxml"
                       xmlns:classes="com.brassworks.components.classes.*"
                       creationComplete="componentInit()"
                  >
                       <mx:Metadata>
                            [Event(name="testEvent", type="com.brassworks.events.GenericComponentEvent")]
                       </mx:Metadata>
                  
                       <mx:Script>
                            <![CDATA[
                  //[...]               
                                 private function selectionChanged(event:GenericComponentEvent):void
                                 {
                                      var item:Object = event.items[0] as Object;
                                      
                                      dispatchEvent(new GenericComponentEvent("testEvent", new Array(item)));
                                 }
                  //[...]
                            ]]>
                       </mx:Script>
                  <!--
                       more components here
                  -->
                  </mx:Box>
                  
                  • 6. Re: Dispatching Event in ItemRenderer Component?
                    Michael Borbor Level 4

                    This line is not right

                    groupList.testEvent = "userGroupsChanged(event)";

                    What do you want to do with this line of code?

                    • 7. Re: Dispatching Event in ItemRenderer Component?
                      Miggl Level 1

                      I was trying to trigger the following function on that event:

                                     private function userGroupsChanged(event:GenericComponentEvent)
                                     {
                                          Alert.show(event.items[0].id.toString());
                                     }
                      
                      

                       

                      Nevermind the quotes around it, I was messing around (thinking that perhaps textual values were assigned, as in MXML object you assign it that way to the event). Removing the quotes results in the same error.