4 Replies Latest reply on Feb 7, 2010 1:50 PM by serwylo

    itemDoubleClick on spark List

    serwylo Level 1

      G'day,

      I note that the new spark list does seem to not support an 'itemDoubleClick' event. Is there a suggested replacement for this?

       

      This bloke http://stackoverflow.com/questions/2037820/flex4-list-item-double-click-event suggests to listen on a regular doubleClick event, then interrogate event.target, however event.target is always a skin, and depending on the gaps between items, could be the skin of the List.

       

      So, stopping short of something like:

       

      if ( event.target is SparkSkin && ( event.target as SparkSkin ).parent is ItemRenderer )
      {
          item = ( ( event.target as SparkSkin ).parent as ItemRenderer ).data;
      }
      else
      {
           item = null;
      }
      

       

      Is there a simpler way?

      cheers.

        • 1. Re: itemDoubleClick on spark List
          Shongrunden Adobe Employee

          Could you handle your double click logic in your item renderer?  For example,

           

          <s:List id="list1">
              <s:ArrayList>
                  <fx:String>one</fx:String>
                  <fx:String>two</fx:String>
                  <fx:String>three</fx:String>
              </s:ArrayList>
              <s:itemRenderer>
                  <fx:Component>
                      <s:ItemRenderer doubleClick="handleDoubleClick(event)" doubleClickEnabled="true">
                          <fx:Script>
                              <![CDATA[
                                  import flash.events.MouseEvent;
                                  private function handleDoubleClick(me:MouseEvent):void {
                                      trace('double click on item ' + itemIndex);
                                  }
                              ]]>
                          </fx:Script>
                          <s:Label text="{data}" top="5" bottom="5" right="3" left="3" />
                      </s:ItemRenderer>
                  </fx:Component>
              </s:itemRenderer>
          </s:List>

           

          1 person found this helpful
          • 2. Re: itemDoubleClick on spark List
            serwylo Level 1

            Yeah thanks mate,

            I suppose that would do the trick for an inline renderer.

            Unfortunately my case requires external classes for renderers (I need to use the itemRendererFunction).

            So in order to handle the itemDoubleClick like so:

             

            <s:List itemDoubleClick="trace( event.item.toString() )" />

             

            I'd have to:

            1. Extend List, providing [Event(name="itemDoubleClick"...)] metadata.
            2. Bubble up the event from the ItemRenderer, or tweak the code inside list for when it creates ItemRenderers and add event listeners then.

             

            If no other solution is available, I will do this, because it is a lot cleaner than the alternative event.target solution. Incidentally, our particular application is using a single base class which extends ItemRenderer, so it will be easy to add the functionality for double clicks in there, it is only the requirement of extending list which causes me to pause and think a bit more.

             

            cheers.

            • 3. Re: itemDoubleClick on spark List
              Shongrunden Adobe Employee

              I usually don't subclass List for something like this.  Instead I dispatch a custom event on the List from within the renderer and add a listener on the List.  For example...


              App.mxml:

               

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark">
                 
                  <fx:Script>
                      <![CDATA[
                          private function handleItemDoubleClick(e:MyEvent):void {
                              trace('double click on item ' + e.itemIndex);
                          }
                      ]]>
                  </fx:Script>

               

                  <s:List id="list1" creationComplete="list1.addEventListener('rendererDoubleClick', handleItemDoubleClick);">
                      <s:ArrayList>
                          <fx:String>one</fx:String>
                          <fx:String>two</fx:String>
                          <fx:String>three</fx:String>
                      </s:ArrayList>
                      <s:itemRenderer>
                          <fx:Component>
                              <s:ItemRenderer doubleClick="handleDoubleClick()" doubleClickEnabled="true">
                                  <fx:Script>
                                      <![CDATA[
                                          import spark.components.List;
                                          private function handleDoubleClick():void {
                                              var e:MyEvent = new MyEvent("rendererDoubleClick");
                                              e.itemIndex = itemIndex;
                                              e.list = owner as List;
                                              owner.dispatchEvent(e);
                                          }
                                      ]]>
                                  </fx:Script>
                                  <s:Label text="{data}" top="5" bottom="5" right="3" left="3" />
                              </s:ItemRenderer>
                          </fx:Component>
                      </s:itemRenderer>
                  </s:List>

               

              </s:Application>

               

              MyEvent.as:

               


              package
              {
                  import mx.events.FlexEvent;
                  import spark.components.List;
                 
                  public class MyEvent extends FlexEvent
                  {
                      public var list:List;
                      public var itemIndex:int;
                     
                      public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
                      {
                          super(type, bubbles, cancelable);
                      }
                  }
              }

               

              Does that help at all?

              • 4. Re: itemDoubleClick on spark List
                serwylo Level 1

                Thanks mate,

                I suppose that is about as clean a solution as is possible given what we have available.