1 Reply Latest reply on Mar 1, 2011 4:46 AM by Jorge Raimundo

    States in Application page

    Flex Rock Level 1

      Hi,

              Here is my code

       

      <?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" 
                     minWidth="955" 
                     minHeight="600"
                     creationComplete="comp()" xmlns:ns="library://ns.adobe.com/flashx/textLayout">
         
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
         
          <fx:Script>        
              <![CDATA[
                  import mx.collections.ArrayCollection;
                 
                  import renderers.PersonRenderer;
                  [Bindable]
                  public var userData:ArrayCollection = new ArrayCollection(
                  [{"fname":"Auto","index":"0"},
                   {"fname":"Low","index":"1"},
                   {"fname":"Medium","index":"2"},
                   {"fname":"High","index":"3"}   
                  ]);
                 
                  private function comp():void{
                     
                  }
              ]]>
          </fx:Script>
         
          <s:states>
              <s:State name="normal"/>
              <s:State name="hovered"/>
          </s:states>
         
          <!-- Launch your application by right clicking within this class and select Debug As > FDT SWF Application -->
         
         
          <mx:Canvas borderStyle="solid" borderColor="gray" backgroundColor="black" width="250" x="76" y="42" cornerRadius="8">
              <s:DataGroup dataProvider="{userData}" verticalCenter="0" width="100%">
                  <s:itemRenderer>
                      <fx:Component>
                          <s:ItemRenderer>
                              <mx:VBox width="100%" cornerRadius="8" verticalAlign="middle" paddingTop="5" paddingBottom="0" height="100%">
                                  <s:Label text="{data.fname}" color.hovered="#FF0000" color.normal="white" width="100%"
                                           mouseChildren="false" useHandCursor="true" buttonMode="true" paddingLeft="10" click="onClick(data)" paddingBottom="0"/>
                                  <mx:HRule strokeColor="#8C8C8C" strokeWidth="1" width="100%" includeInLayout="{data.currentIndex != userData.length -1}"
                                  visible="{data.index != userData.length -1}" strokeColor.hovered="white"
                                  mouseChildren="false" useHandCursor="true" buttonMode="true" click="onClick(data)"/>
                              </mx:VBox>
                          </s:ItemRenderer>
                      </fx:Component>
                  </s:itemRenderer>
                  <s:layout>
                      <s:VerticalLayout verticalAlign="middle" gap="0"/>
                  </s:layout>
              </s:DataGroup>
          </mx:Canvas>
         
      </s:Application>

       

       

      But it throws error Description    State 'hovered' was referenced without being declared. 

       

      whats wrong in it.

       

      thanks,

      Jayagopal.

        • 1. Re: States in Application page
          Jorge Raimundo Level 2

          That's because you're referencing it inside the ItemRenderer.

           

          The ItemRenderer is a separate and independent component so you should declare the hovered state also inside the ItemRenderer:

          <s:ItemRenderer>
               <s:states>
                    <s:State name="normal"/>
                    <s:State name="hovered"/>
               </s:states>
          
               <mx:VBox width="100%" ...
                    .
                    .
                    .
               </mx:VBox>
          </s:ItemRenderer>
          

           

          Best regards,

          Jorge