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

    Flex 4 List ItemRenderer

    megharajdeepak Community Member

      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 Community Member

          Try it on prepare and not set data.

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

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

            Capture.PNG

            • 3. Re: Flex 4 List ItemRenderer
              DeanLoganBH Community Member

              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 Community Member

                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