3 Replies Latest reply on Dec 18, 2009 10:06 AM by Handycam

    Setting the state of an item renderer based on its data

    Handycam Level 1

      I have an item renderer in a spark list.  I had set it up so that is the XML data that is the lists provider contains a parameter, show one state otherwise use the "normal" state:

       

      protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void
      {
           // if a recipe is a cocktail, switch state to display numeric stepper
           if (XML(data).@course == "cocktails") {
                currentState = "stepper";
           }
      }
      
      

      My list shows one item at a time (current version od the app is here, I am talking about the recipe book "pages") and is "paged" with a stepper.

       

      If I page through the items, this code works fine.  However, if I "add" a recipe item, which removes an item from the list, the item revealed underneath is NOT the switched state; I guess this event is only fired when  you page the items.  If I then go to the next recipe, the stepper state is set.  But if I get to the next recipe by removing the current recipe, the othwer state is shown.

       

      How could I ensure that the render has checked its state?

        • 1. Re: Setting the state of an item renderer based on its data
          Flex harUI Adobe Employee

          Override getCurrentSkinState?

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Setting the state of an item renderer based on its data
            rfrishbe Level 3

            There's some state management that goes on within the ItemRenderer so that it's changing the currentState property as well.

             

            Try overriding getCurrentRendererState() to return "stepper" sometimes.  So in the dataChangeHandler, you'll have to store a variable, like inStepperState = true.   Then in the getCurrentRendererState(), take a look at that inStepperState property to see what you should return.  So the data setter should look something like:

             

            protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void

            {

                 // if a recipe is a cocktail, switch state to display numeric stepper

                 if (XML(data).@course == cocktails) {

                         inStepperState = true;

                      currentState = getCurrentRendererState();

                 }

            }

             

            Another option to do what you want is to use itemRendererFuntion() on the List/DataGroup.  So if the course is cocktails return one item renderer.  If it's not cocktails, return another item renderer.

             

            Hope that helps,

            Ryan

            • 3. Re: Setting the state of an item renderer based on its data
              Handycam Level 1

              Thanks.

               

              I also found that what was happening is that the state was being correctly set, but the List was overriding the state with its built in selected and hovered state.  The renderer would have a stepper, but as soon as the mouse moved over it it would change state.  I even tried deleting all the states in the states array except "normal" and "stepper" , but it would still change out of "stepper".

               

              Also, the buttons on the item renderer would also cause the item renderer to change states when their states changed.

               

              So, for this case, to get it done I changed from a states model to a visibility model, and that works fine:

               

              // if a recipe is a cocktail, switch state to display numeric stepper
              if (XML(data).@course == "cocktails") {
                   stepperGroup.visible = true;
                   stepperGroup.includeInLayout = true;
                   doubleItGroup.visible = false;
                   doubleItGroup.includeInLayout = false;
              } else {
                   stepperGroup.visible = false;
                   stepperGroup.includeInLayout = false;
                   doubleItGroup.visible = true;
                   doubleItGroup.includeInLayout = true;
              }