3 Replies Latest reply on Oct 21, 2010 1:37 PM by Shongrunden

    Why does mouseOut of a DataGroup ItemRenderer cause a state change?

    ChrisInCambo2

      Hi guys,

      I've found a very annoying problem with the itemRenderers in a  DataGroup in flex 4, when I mouseout of the itemRenderer is returns to  its default state. Here's an example:

       

      <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:BorderContainer>
                 
      <s:DataGroup>
                     
      <s:layout>
                         
      <s:VerticalLayout gap="1"/>
                     
      </s:layout>

                     
      <s:dataProvider>
                         
      <s:ArrayCollection>
                             
      <fx:Object title="One" />
                             
      <fx:Object title="Two" />
                             
      <fx:Object title="Three" />
                         
      </s:ArrayCollection>
                     
      </s:dataProvider>

                     
      <s:itemRenderer>
                         
      <fx:Component>
                             
      <s:ItemRenderer>
                                 
      <s:states>
                                     
      <s:State name="expanded" />
                                     
      <s:State name="collapsed" />
                                 
      </s:states>

                                 
      <fx:Script>
                                      <![CDATA[
                                          private function expandCollapse():void
                                          {
                                              currentState = (currentState == "collapsed") ? "expanded" : "collapsed";
                                          }
                                      ]]>
                                 
      </fx:Script>
                                 
      <s:VGroup>
                                     
      <mx:Button click="expandCollapse();" label="Click me to hide the number" />
                                     
      <s:SkinnableContainer>
                                         
      <s:VGroup height="0" height.expanded="NaN">
                                                 
      <s:Label text="{data.title}" />
                                         
      </s:VGroup>
                                     
      </s:SkinnableContainer>
                                 
      </s:VGroup>
                             
      </s:ItemRenderer>
                         
      </fx:Component>
                     
      </s:itemRenderer>
                 
      </s:DataGroup>
         
      </s:BorderContainer>   
      </s:Application>

      When the user clicks on the button the VGroup is collapsed as  expected, but then if a user moves their mouse out of the item renderer  it then collapses, i.e. returns to its default state.

       

      Is this a bug or am I missing something here?

       

      Cheers,

       

      Chris

        • 1. Re: Why does mouseOut of a DataGroup ItemRenderer cause a state change?
          Claudiu Ursica Level 4

          By default ItemRenderers come with their own states and and they handle the

          MouseEvent.ROLL_OVER, MouseEvent.ROLL_OUT . Use a DataRenderr in your case since

          you don't need the normal and hover states anyway. I think you need to override

          the getCurrentRendererState to make it work somehow. I modified your example a

          little bit: I really hate inline renderes style of coding...

           

          TSTRenderer

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:DataRenderer

              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:layout>

                  <s:VerticalLayout/>

              </s:layout>

           

              <s:states>

                  <s:State name="collapsed"/>

                  <s:State name="expanded"/>       

              </s:states>

               

              <fx:Script>

                  <![CDATA[

                      import spark.skins.spark.DefaultItemRenderer;

                      protected function stateBtn_clickHandler(event:MouseEvent):void

                      {

                          currentState = (currentState == "collapsed") ? "expanded" :

          "collapsed";

                      }

                  ]]>

              </fx:Script>

           

           

              <s:Button id="stateBtn" click="stateBtn_clickHandler(event)" label="Click me

          to hide the number"/>

               

              <s:Label

                  includeIn="expanded"

                  text="{data.title}"/>

           

          </s:DataRenderer>

           

           

          <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:BorderContainer>

                  <s:DataGroup itemRenderer="TSTRenderer">

                      <s:layout>

                          <s:VerticalLayout gap="1"/>

                      </s:layout>

                       

                      <s:dataProvider>

                          <s:ArrayCollection>

                              <fx:Object title="One" />

                              <fx:Object title="Two" />

                              <fx:Object title="Three" />

                          </s:ArrayCollection>

                      </s:dataProvider>

                       

           

                  </s:DataGroup>

              </s:BorderContainer>  

          </s:Application>

           

           

           

          C

          • 2. Re: Why does mouseOut of a DataGroup ItemRenderer cause a state change?
            ChrisInCambo2 Level 1

            Thanks for the reply, that fixed the problem. I do usually seperate my item renderers but always put them together when posting in forums so it's easy to copy, paste and compile.

             

            I've only just started learning Flex 4 and skinning components so states are fresh in my mind and I thought that they might be part of the problem, but when I checked the ItemRenderer in the docs there was no mention of any states. Now I've taken a closer look, I've realised that none of the components mention their internal states, do you know where I can look to find out what states various components in Flex 4 have?

            • 3. Re: Why does mouseOut of a DataGroup ItemRenderer cause a state change?
              Shongrunden Adobe Employee

              Take a look at the code in the getCurrentRendererState() method of the spark.components.supportClasses.ItemRenderer class to see when renderers are put into what states.

               

              An ItemRenderer in a DataGorup will go into either the "normal" or "hovered" state, whereas in a List it will go into either a "normal", "hovered", "selected", etc. state.

               

              This post might also be useful: http://flexponential.com/2010/02/07/using-datarenderer-to-add-custom-states-to-a-spark-lis t-renderer/