4 Replies Latest reply on Mar 11, 2013 6:02 AM by megharajdeepak

    Flex 4 List ItemRenderer

    megharajdeepak

      Hi,

      I am trying to change the background colour of the itemrenderer based on some condition. But this doesn't seem to be working. Based on my condition, as soon as list gets loaded, current state should be 'bg' for which the colour is 'green'. But all the time, i get the background colour as 'blue' which is for normal state.

       

      Kindly let me know if we are supposed to set the state in some other way here.... Not sure where am I going wrong

       

      <s:List id="list" width="100%" itemRenderer="renderers.ListItemRenderer" >

              <s:dataProvider>

                  <s:ArrayList source="{dataProvider}"/>

       

              </s:dataProvider>

       

          </s:List>

       

      <?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" width="100%" height="40"

                      >

          <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

          <s:layout>

              <s:BasicLayout  />

          </s:layout>

          <fx:Script>

              <![CDATA[

                  import mx.events.FlexEvent;

       

       

                  override public function set data(value:Object):void

                  {

                      super.data = value;

      if(data.myCondition == true)

                      this.currentState = 'bg';}

      else

                       this.currentState = '';

       

                  }

       

              ]]>

          </fx:Script>

       

          <s:states>

              <s:State name="normal"/>

              <s:State name="hovered"/>

              <s:State name="selected"/>

              <s:State name="bg"/>

          </s:states>

       

       

          <s:Rect left="0" right="0" top="0" bottom="0" width="100%" height="100%">

              <s:fill>

                  <s:SolidColor

       

                      color.normal="blue"

                      color.hovered="red"

                      color.selected="yellow"

                      color.bg="green"

                      />

              </s:fill>

          </s:Rect>

       

      </s:ItemRenderer>

        • 1. Re: Flex 4 List ItemRenderer
          DeanLoganBH Level 3

          Try it on prepare and not set data.

          override public function prepare(hasBeenRecycled:Boolean):void {
          
          
          • 2. Re: Flex 4 List ItemRenderer
            megharajdeepak Level 1

            Thanks Dean, I tried it. But I get compile time error:

            Capture.PNG

            • 3. Re: Flex 4 List ItemRenderer
              DeanLoganBH Level 3

              Ahhh.... prepare is in GridItemRenderer, but not in LitsItemRenderer.

               

              Have you thought about just change the "Normal" state to the color you want, since the condition is still "Normal", but the color is different?

               

               

              <?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:states>
                <s:State name="normal"/>
                <s:State name="hovered"/>
                <s:State name="selected"/>
               </s:states>
               <fx:Declarations>
                <fx:uint id="normalColor">0x0000FF</fx:uint>
                <fx:uint id="hoverColor">0xFF0000</fx:uint>
                <fx:uint id="selectedColor">0xFFFF00</fx:uint>
               </fx:Declarations>
               
               <fx:Script>
                <![CDATA[
                 
                 import mx.events.FlexEvent;
                 
                 override public function set data(value:Object):void 
                 {
                  super.data = value;
                  
                  if(data.myCondition == true) {
                   normalColor = 0x00FF00;
                  }
                 }
                 
                ]]>
                
               </fx:Script>
               <s:layout>
                <s:BasicLayout  />
               </s:layout>
               <s:Label text="{data}"/>
               <s:Rect left="0" right="0" top="0" bottom="0" width="100%" height="100%">
                <s:fill>
                 <s:SolidColor  
                  color.normal="normalColor"
                  color.hovered="hoverColor" 
                  color.selected="selectedColor"
                  />
                </s:fill>
               </s:Rect>
               
              </s:ItemRenderer>
              
              
              • 4. Re: Flex 4 List ItemRenderer
                megharajdeepak Level 1

                Oh Great!

                That worked like charm ! Thanks

                 

                Only thing is we have to reset the colour to actual normal color if condition is not met:

                override public function set data(value:Object):void

                            {

                                super.data = value;

                               

                              

                                 if(data.growth < 0)

                                {

                                    normalColor = 0xFF0000;  //normal colour is RED

                                }else

                                {

                                    normalColor = 0x00ff00; //normal colour is GREEN

                                }

                            }

                 

                But i still wonder why didn't the first approach work on setting the state.

                 

                Anyway, Thanks again...

                 

                Cheers!

                Deepak