7 Replies Latest reply on Nov 1, 2010 11:34 AM by bchalupka-syPD9H

    Spark List alternating ItemRenderer

    daslicht Level 2

      Hello,

      lets say that I what a Spark List display its content like the following:

       

      [Picture]  text

      text  [Picture]

      ...

       

      Is there a way to define two (or even more,e.g: as  template) custom ItemRenderer and toggle between them?

      How is that solved in the DataGrid for example, where the background color is alternating.

       

      Best regards

      Marc

        • 1. Re: Spark List alternating ItemRenderer
          bchalupka-syPD9H Level 1

          You can try to build a custom ItemRenderer and determine the color,

          state, etc. based on the itemIndex property. For example you

          can use something like:

          if (itemIndex % 2 == 0)

               setStyle("backgroundColor", 0xFF0000);

           

          In your case I would try adding custom states to the ItemRenderer. You can read more about this in this post:

           

          http://forums.adobe.com/message/2082895

          • 2. Re: Spark List alternating ItemRenderer
            daslicht Level 2

            Thanks alot  that modulo approach looks promising!

            • 3. Re: Spark List alternating ItemRenderer
              daslicht Level 2

              Hi,

               

              I have overridden the following function in my custom Item Renderer, and modified it to not return the hovered state anymore:

               

               

               

              <?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"
                                  width="203" autoDrawBackground="false" creationComplete="itemrenderer1_creationCompleteHandler(event)"
                                  >
                   <s:states>
                        <s:State name="State1"/>
                        <s:State name="State2"/>
                   </s:states>
                   
                   
                   <fx:Script>
                        <![CDATA[
                             import mx.events.FlexEvent;
                             
                             protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
                             {
                                  if (itemIndex % 2 == 0){
                                       currentState='State1';
                                  }else{
                                       currentState='State2';
                                  }
                             }
                             
                             override protected function getCurrentRendererState():String
                             {
                                  return null;
                             }
              
                        ]]>
                   </fx:Script>
                   <s:Label text="{data}"  
                              textAlign.State1="left" textAlign.State2="right"
                              width="202" />
                   
                   
              </s:ItemRenderer>
              

               

               

              But the hovered state is still working ?

              • 4. Re: Spark List alternating ItemRenderer
                daslicht Level 2

                I have solved it like this now:

                 

                override protected function getCurrentRendererState():String
                {
                                    
                     return this.currentState;
                }
                

                • 5. Re: Spark List alternating ItemRenderer
                  daslicht Level 2

                  Hello,

                  I ve noticed , when I scroll a list with the itemRenderer Ive created it randomly loos its State, so that it is no longer alternating.

                   

                  Do you think it has something to do with virtualLayouts?

                   

                  Its not working properly like this when I use the modulo condition on creationComplete.

                   

                  Is there some other function which is called when you scroll ? Is there another property like itemIndex ?

                   

                  Any idea?

                  • 6. Re: Spark List alternating ItemRenderer
                    daslicht Level 2

                    For anyone who got the same Quest:

                     

                    Here is the magic solution :

                     

                    mx.core.UIComponent.updateComplete
                    
                    Dispatched when an object has had its commitProperties(), 
                    measure(), and updateDisplayList() methods called (if 
                    needed). 
                    This is the last opportunity to alter the component before it is displayed. 
                    All properties have been committed and the component has been measured and layed 
                    out.
                    This event is only dispatched when there are one or more relevant listeners 
                    attached to the dispatching object.
                    
                    
                    
                    

                    • 7. Re: Spark List alternating ItemRenderer
                      bchalupka-syPD9H Level 1

                      Ok, cool that you could solve your problem.

                       

                      PS: it's nice to read that there are other germans here =)