13 Replies Latest reply on Nov 16, 2009 1:59 PM by Shongrunden

    Working with events from itemrenderers?

    Handycam Level 1

      I have a Spark List with an item renderer that shows several attributes of an XMLListCollection that's its data provider (e.g. title, caption, image).

       

      Currently, clicking on the item moves it to another list collection.  (the application as it is currently is here).

       

      I do this like this:

      protected function cardList_clickHandler(event:MouseEvent):void{
      var i:int = event.currentTarget.selectedIndex;
      // add the item on the currently selected card to the menu list
      menuList += recipeListCollection.getItemAt(i);
      recipeListCollection.removeItemAt(i);}
      

       

      What I'd like to do instead is have buttons on the item renderer do this and other things, such as show details etc.

       

      My question is, how would such a button refer to the item renderer that it's "on"?

       

      Currently, as you see above, I am using the Lists  click event and getting the event's current target's index.  With the new plan, I guess I'll have to listen for the button's click handler.  But then currenttarget is the button, not the list's current piece of data. I need to listen and get the button's parents's data I guess, but I am unsure of the proper syntax.

       

      Help?

        • 1. Re: Working with events from itemrenderers?
          Flex harUI Adobe Employee

          Should be event.currentTarget.document

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Working with events from itemrenderers?
            Handycam Level 1

            That didn't work, just returned a part to "ApplicationSkin2"

             

            However, I changed the button handler in the renderer to:

            protected function addButton_clickHandler(event:MouseEvent):void {
                owner.dispatchEvent(new Event("ADD_TO_MENU", true));
            }
            

            And then in the main app:

            private function addToMenuHandler(event:Event):void {
                  var i:int = event.target.selectedIndex;
                  menuList += recipeListCollection.getItemAt(i);
                  recipeListCollection.removeItemAt(i);
                 }
            

            Not sure if this is the best or most reliable way, but it seems to work.

            • 3. Re: Working with events from itemrenderers?
              Shongrunden Adobe Employee

              If I understand correctly it sounds like you are looking for the index that corresponds to a renderer.  We recently added an itemIndex property to the ItemRenderer class that should make this easier:

               

              private function buttonInsideItemRendererClicked():void {
                  trace(this.itemIndex);
                  ...
              }

               

              Does that work for you?

              • 4. Re: Working with events from itemrenderers?
                Handycam Level 1

                1119: Access of possibly undefined property itemIndex through a reference

                with static type components:RecipeCard.    RecipeCard.mxml

                /thanksgiving/src/components    line 32    Flex Problem

                • 5. Re: Working with events from itemrenderers?
                  Shongrunden Adobe Employee

                  Hmm - is RecipeCard.mxml an ItemRenderer?

                  • 6. Re: Working with events from itemrenderers?
                    Handycam Level 1

                    AFAICT:

                     

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                    xmlns:s="library://ns.adobe.com/flex/spark" 
                                    xmlns:mx="library://ns.adobe.com/flex/halo" 
                                    height="275" width="380">
                         <s:states>
                              <s:State name="normal"/>
                              <s:State name="hovered"/>
                              <s:State name="selected"/>
                         </s:states>
                         <s:Group>
                              .... content ....
                         </s:Group>
                    
                    </s:ItemRenderer>
                    
                     
                    
                    • 7. Re: Working with events from itemrenderers?
                      Shongrunden Adobe Employee

                      Maybe you are on an older build.  The property was initially added as "index" in svn 11070 and then renamed to "itemIndex" in svn 11170.

                      • 8. Re: Working with events from itemrenderers?
                        Flex harUI Adobe Employee

                        Somebody is confused about context.  I can't tell if it is us or you.  Where is the Button and the Button's clickHandler?  Is it in this same file?  If so, the I would expect event.currentTarget.document to be the itemRenderer and itemIndex to be there.

                         

                        Alex Harui

                        Flex SDK Developer

                        Adobe Systems Inc.

                        Blog: http://blogs.adobe.com/aharui

                        • 9. Re: Working with events from itemrenderers?
                          Handycam Level 1

                          I am on 257489

                          • 10. Re: Working with events from itemrenderers?
                            Handycam Level 1

                            I am often confused!  Here is my context:

                             

                            main document, main.mxml:

                             

                            <s:List id="cardList" dataProvider="{recipeListCollection}" skinClass="skins.CardListSkin" width="400" height="275">
                                 <s:itemRenderer>
                                      <fx:Component>
                                        <components:RecipeCard />
                                      </fx:Component>
                                 </s:itemRenderer>
                            </s:List>
                            

                             

                            and, in the script block of main:

                             

                            protected function application1_applicationCompleteHandler(event:FlexEvent):void {
                                 cardList.addEventListener("ADD_TO_MENU", addToMenuHandler); }
                            ....
                            
                            private function addToMenuHandler(event:Event):void {
                                  var i:int = event.target.selectedIndex;
                                  menuList += recipeListCollection.getItemAt(i);
                                  recipeListCollection.removeItemAt(i);
                            }
                            

                             

                            Then, in the ItemRenderer, RecipeCard.mxml:

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                                xmlns:s="library://ns.adobe.com/flex/spark" 
                                                xmlns:mx="library://ns.adobe.com/flex/halo" 
                                                height="275" width="380">
                            
                                 <fx:Script>
                                      <![CDATA[
                                           import mx.events.FlexEvent;
                                           import skins.StandardButtonSkin;
                                           private function goRecipe(where:String):void {
                                                navigateToURL(new URLRequest(where), "_blank");     }
                                                    protected function addButton_clickHandler(event:MouseEvent):void
                                           {
                                                       trace(this.itemIndex); // <-- this is what gave the error posted earlier
                                                       owner.dispatchEvent(new Event("ADD_TO_MENU", true));
                                           }
                                      ]]>
                                 </fx:Script>
                            
                            
                                 <s:Group>
                                      <s:HGroup gap="10" height="100%">
                                           <s:VGroup>
                                                <s:BitmapImage source="/cyom/thanksgiving_09/images/{XML(data).image}" width="200" height="200"/>
                                                <s:HGroup id="buttons" width="200">
                                                     <s:Button id="addButton" label="Add to Menu" click="addButton_clickHandler(event)" 
                                                                 skinClass="skins.StandardButtonSkin" width="100%" toolTip="Add this item to your menu"/>
                                                     <s:Button label="View Full Recipe" click="goRecipe(XML(data).recipeLink)" 
                                                                 skinClass="skins.StandardButtonSkin" width="100%" toolTip="View recipe on Finecooking.com in a new window" />
                                                </s:HGroup>
                                           </s:VGroup>
                                           <s:VGroup height="100%">
                                                <!--<s:BitmapImage source="@Embed('assets/add_to_menu.png')"/>-->
                                                <s:Label text="{XML(data).title}" width="175" styleName="recipeTitle" toolTip="{XML(data).title}" />
                                                <s:Label text="{XML(data).yield}" width="175" styleName="recipeYield" />
                                                <s:HGroup>
                                                     <s:Group visible="{XML(data).specials.vegetarian=='true'}" includeInLayout="{XML(data).specials.vegetarian=='true'}" toolTip="Vegetarian Dish">
                                                          <s:BitmapImage id="vegetarian" source="@Embed('assets/icon_vegetarian.gif')" />
                                                     </s:Group>
                                                     <s:Group visible="{XML(data).specials.quick=='true'}" includeInLayout="{XML(data).specials.quick=='true'}" toolTip="Quick">
                                                          <s:BitmapImage id="quick" source="@Embed('assets/icon_quick.gif')"  />
                                                     </s:Group>
                                                     <s:Group visible="{XML(data).specials.makeahead=='true'}" includeInLayout="{XML(data).specials.makeahead=='true'}" toolTip="Can be Made Ahead of Time">
                                                          <s:BitmapImage id="makeahead" source="@Embed('assets/icon_make_ahead.gif')" />
                                                     </s:Group>
                                                </s:HGroup>
                                                <s:Label text="{XML(data).abstract}" width="175" styleName="recipeAbstract" id="abstract" />
                                           </s:VGroup>
                                      </s:HGroup>
                                 </s:Group>     
                            </s:ItemRenderer>
                            
                             
                            

                             

                            This setup seems to work; however, I am unsure why the other things did not.

                             

                            I tried itemIndex in the item renderer's click handler.

                            • 11. Re: Working with events from itemrenderers?
                              Flex harUI Adobe Employee

                              A build # like 257489 sounds more like the Flash Builder version.  SDK version numbers should be lower than 12000.

                               

                              Try using this.index and see if that works.

                               

                              I don't recommend bubbling events especially if you are dispatching off of owner.

                               

                              Given where you placed the addButton_clickHandler, the 'this' variable references the ItemRenderer.  No need to use document or event.currentTarget.

                               

                              Alex Harui

                              Flex SDK Developer

                              Adobe Systems Inc.

                              Blog: http://blogs.adobe.com/aharui

                              • 12. Re: Working with events from itemrenderers?
                                Shongrunden Adobe Employee

                                I looked up the SDK version that came with Builder 257489 and it is 4.0.0.11020.  The itemIndex property wasn't introduced until 4.0.0.11170.

                                 

                                You will need to grab a newer SDK build.  Check out the nightly builds here:
                                http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

                                • 13. Re: Working with events from itemrenderers?
                                  Shongrunden Adobe Employee

                                  You can also quickly see your current SDK version with this:

                                  <mx:Label text="{mx_internal::VERSION}" />

                                   

                                  (Thanks to Peter D for this tip.)