2 Replies Latest reply on Aug 3, 2009 1:49 AM by miquael

    TileList dynamics

    miquael Level 1

      I'm working with the TileList component in an application, and loading in an MC from the library to display multiple times across some columns and rows.

       

      How do I make an event function for the MC in the TileList, so that when a user clicks it, it will trigger a custom function?  I do not see that the TileList has something like this inherently for it's source item.

       

      I made an external class for the MC being used in the TileList, but my standard "addEventListener"s are not working.

       

      There has got to be a way to do this, right?

       

      Here is the function that sets up the TilList:

       

       

       

      public function setChordList(song:int):void {

                    

                  var dpChords:DataProvider = new DataProvider();

                  var activeChords:Array;

                  var i:uint;

                   

                 // determine chord set

                 if (song == -1) {

                       activeChords = allChords;

                  } else {

                       activeChords = songChordSets[song];

                  }

                    

                              

                 // fill dataProvider

                 for(i=0; i<activeChords.length; i++) {

                 var tt = activeChords[i];

                      dpChords.addItem({ label:tt, source:ChordBar, data:i, scaleContent:true }); 

                 }

       

                    

                 chordList.dataProvider      = dpChords;

                 chordList.columnWidth     = 70;

                 chordList.rowHeight          = 30;

                chordList.direction      = ScrollBarDirection.VERTICAL;

                 chordList.setStyle("contentPadding", 5);

                 chordList.setRendererStyle("imagePadding", 0);

                    

                 chordList.scrollPolicy  = ScrollPolicy.ON;

       

                 // set style for labels

                 chordList.setRendererStyle("textFormat", textFormat1);

                    

                 // set the background skin

                 chordList.setStyle("skin", lightBackground);

                    

                 //set the cell renderer

                 chordList.setStyle("cellRenderer", MyRenderer);

      }

       

       

       

      Here is the ChordBar class:

       

       

       

      package {

          

                // associates to "ChordBar" MC graphic in library

       

                import flash.display.*;

                import flash.events.*;

         

                public class ChordBar extends MovieClip {

       

               

                          // ChordBar ///////////////////////////////////////////////////////////////

                          public function ChordBar():void {

                              

                               this.buttonMode    = true;

                               this.useHandCursor = true;

                    

                               addEventListener(MouseEvent.CLICK, clickHandler);

                               addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

                               addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

                  

                          }

       

                          private function clickHandler(event:MouseEvent):void {

                                    trace ("click");

                          }

                          private function mouseOverHandler(event:MouseEvent):void {

                                    trace ("mo");

                          }

                          private function mouseOutHandler(event:MouseEvent):void {

                    

                          }

                }

      }

       

        • 1. Re: TileList dynamics
          miquael Level 1

          Anyone have any insights into this?  Surely, we can make the tile elements of the TileList component interactive, right?

          • 2. Re: TileList dynamics
            miquael Level 1

            I found my own answer: I just added "addEventLister"s to the custom MyRenderer.as class:

             

            package {

                 

               import fl.controls.listClasses.ICellRenderer;

               import fl.controls.listClasses.ImageCell;

             

               import flash.events.*;

             

               public class MyRenderer extends ImageCell implements ICellRenderer {

                   

                  public function MyRenderer() {

                       

                      // set state skins to same skin so background is static

                      setStyle("upSkin", lightBackground);

                        setStyle("downSkin", lightBackground);

                      setStyle("overSkin", lightBackground);

                       

                      setStyle("selectedUpSkin", lightBackground);

                      setStyle("selectedDownSkin", lightBackground);

                      setStyle("selectedOverSkin", lightBackground);

             

                      // turn off text background by setting to 0

                      setStyle("textOverlayAlpha", 0);

                      setStyle("textPadding", 7);

                       

                        // event listeners

                        this.addEventListener(MouseEvent.CLICK, clickHandler);

                        this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

                        this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

                   }

                  

                   // EVENTS

                   private function clickHandler(event:MouseEvent):void {

                        trace ("click");

                   }

                   private function mouseOverHandler(event:MouseEvent):void {

                   }

                   private function mouseOutHandler(event:MouseEvent):void {

                   }

               }

            }