3 Replies Latest reply on Mar 16, 2010 1:29 PM by Peter deHaan

    click handler in ItemRenderer on "hovered" state

    franto kormanak Level 1

      Hey,

       

      im trying to add Button to spark List itemRenderer and listen for click. If button is still there (not usin includeIn) it works.

      But when it's just visible in "hovered" state, click is not dispatched. Is it bug? or can you let me know some workaround.

       

      Thank you

        • 1. Re: click handler in ItemRenderer on "hovered" state
          Peter deHaan Level 4

          Can you post a simple example and I can take a look.

           

          Peter

          • 2. Re: click handler in ItemRenderer on "hovered" state
            Flex harUI Adobe Employee

            To get a click event, you need to get a mouseDown and mouseUp on the same

            object.  My guess is that as soon as you get a mouseDown, the renderer state

            changes to selected, the button goes away and the mouseUp is not on the

            button.

             

            You'll probably have to have logic that doesn't take away the button if

            there was mouseDown on it or something like that.

            • 3. Re: click handler in ItemRenderer on "hovered" state
              Peter deHaan Level 4

              Ah yeah, what Alex said...

              I just built a simple example with s:List and a custom renderer and a Button control only in the hovered state and it appears that after mouse down the state changes and the button disappears before the mouseUp happens. My workaround was to show the button in both the hovered and selected states.

               

              Peter

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/mx">
                 
                  <s:List width="200"
                          itemRenderer="HoverListItemRen"
                          labelField="name"
                          horizontalCenter="0" verticalCenter="0">
                      <s:layout>
                          <s:VerticalLayout horizontalAlign="justify" gap="0" requestedRowCount="10" />
                      </s:layout>
                      <s:dataProvider>
                          <s:ArrayList>
                              <fx:Object team="Los Angeles" name="Angels of Anaheim" />
                              <fx:Object team="Seattle" name="Mariners" />
                              <fx:Object team="Oakland" name="Athletics" />
                              <fx:Object team="Texas" name="Rangers" />
                              <fx:Object team="Cleveland" name="Indians" />
                              <fx:Object team="Detroit" name="Tigers" />
                              <fx:Object team="Minnesota" name="Twins" />
                              <fx:Object team="Chicago" name="White Sox" />
                              <fx:Object team="Kansas City" name="Royals" />
                              <fx:Object team="Boston" name="Red Sox" />
                              <fx:Object team="New York" name="Yankees" />
                              <fx:Object team="Toronto" name="Blue Jays" />
                              <fx:Object team="Baltimore" name="Orioles" />
                              <fx:Object team="Tampa Bay" name="Rays" />
                              <fx:Object team="Arizona" name="Diamondbacks" />
                              <fx:Object team="Colorado" name="Rockies" />
                              <fx:Object team="San Diego" name="Padres" />
                              <fx:Object team="Los Angeles" name="Dodgers" />
                              <fx:Object team="San Francisco" name="Giants" />
                              <fx:Object team="Chicago" name="Cubs" />
                              <fx:Object team="Milwaukee" name="Brewers" />
                              <fx:Object team="St. Louis" name="Cardinals" />
                              <fx:Object team="Houston" name="Astros" />
                              <fx:Object team="Cincinnati" name="Reds" />
                              <fx:Object team="Pittsburgh" name="Pirates" />
                              <fx:Object team="Philadelphia" name="Phillies" />
                              <fx:Object team="New York" name="Mets" />
                              <fx:Object team="Atlanta" name="Braves" />
                              <fx:Object team="Washington" name="Nationals" />
                              <fx:Object team="Florida" name="Marlins" />
                          </s:ArrayList>
                      </s:dataProvider>
                  </s:List>
                 
              </s:Application>

               

               

              <?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/mx"
                              autoDrawBackground="true">
                  <s:layout>
                      <s:HorizontalLayout />
                  </s:layout>
                  <s:states>
                      <s:State name="normal" />
                      <s:State name="hovered" />
                      <s:State name="selected" />
                  </s:states>
                 
                  <fx:Script>
                      <![CDATA[
                          import mx.controls.Alert;
                         
                          protected function button1_clickHandler(evt:MouseEvent):void {
                              Alert.show(data.name);
                          }
                      ]]>
                  </fx:Script>
                 
                  <s:Label text="{data.name}" width="100%" height="100%" maxDisplayedLines="1" verticalAlign="middle" paddingTop="3" paddingBottom="3" paddingLeft="3" paddingRight="3"/>
                  <s:Button label="X" click="button1_clickHandler(event);" includeIn="hovered,selected" height="20" width="20" />
                 
              </s:ItemRenderer>