7 Replies Latest reply on Aug 15, 2010 5:09 AM by RealBillyBlue

    'if...' in ItemRenderer?

    RealBillyBlue

      Hey there,

      is it possible to use 'if..' in an ItemRenderer?

       

      I've to show products in a SList. Every product has multiple colors. The DB gives true/false as information (which color is available) like this:

       

      productname:text

      blue:true

      black:true

      white:false

       

      And I want to show the colors (as a little colored box) under the product-picture. I've got everything done fine, but this colorthing.

       

      So I thought I could done this maybe with something like 'if (blue) ...' but this seems not to work or I've did it wrong.

       

      Maybe someone of you could help me?

       

      I hope I could explain what I try to do (with my bad english ^^)

       

      Thank you!!

      - BB

        • 1. Re: 'if...' in ItemRenderer?
          saisri2k2 Level 4

          Yes, you cn use if in the itemrenderer. But please put it in the following block in the custom itemrenderer that you write.

           

          //you need to ovverride the data prop in the itemrenderer

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

          {

          if(logic goes here){

          //set color herer

          }else if(){

          anothre color

          }

          }

          • 2. Re: 'if...' in ItemRenderer?
            RealBillyBlue Level 1

            Thank you, but if it is separated from s:layout, how could I add a colored box into the 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" 
                                xmlns:mx="library://ns.adobe.com/flex/mx" 
                                autoDrawBackground="true">
                 
                 
                 <s:layout>
                      <s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
                 </s:layout>
                 
                 <s:Label text="{data.productname}" fontWeight="bold"/>
                 <mx:Image source="pix/{data.picfile}.jpg" width="100" height="100"/>
            
                      
            </s:ItemRenderer>
            
            

             

            So where I've to put your code now?

            • 3. Re: 'if...' in ItemRenderer?
              BhaskerChari Level 4

              Hi RealBillyBlue,

               

              Write a Script block in your itemRenderer file and put the override function in that block....as shown below:

               

              <?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">

                 

                   <fx:Script>
                      <![CDATA[
                         
                override public function set data(value:Object):void

                {

                if(logic goes here){

                //set color herer

                }else if(){

                anothre color

                }

                }

                      ]]>
                  </fx:Script>

                   <s:layout>

                        <s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>

                   </s:layout>

                 

                   <s:Label text="{data.productname}" fontWeight="bold"/>

                   <mx:Image source="pix/{data.picfile}.jpg" width="100" height="100"/>

               

                      

              </s:ItemRenderer>

               

               

              Thanks,

              Bhasker Chari

              • 4. Re: 'if...' in ItemRenderer?
                RealBillyBlue Level 1

                Ok, maybe I did told you correct where my (new) problem is, because of my not so good english

                 

                If I do it like you told me in your last answer, how I'll get the color into my s:list via this ItemRenderer? I know how to set/give back a s:label or mx:image as you can see in my code, but what have to be in the if-logic that gives back a colored box, which will appears under the picture from ' <mx:Image source="pix/{data.picfile}.jpg" width="100" height="100"/>' ?

                • 5. Re: 'if...' in ItemRenderer?
                  David_F57 Level 5

                  hi,

                   

                  You can play with this and see if it meets what you need, the way I did the color boxes can be done differently (such as use the color flag to make visible true or false). I elected to use width as sometimes objects can leave gaps rather than totally disappear when visible is false.

                   

                  David

                   

                  <?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">

                  <fx:Declarations>

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

                  </fx:Declarations>

                  <fx:Script>

                  <![CDATA[

                  import mx.collections.ArrayCollection;

                  [Bindable] private var myProducts:ArrayCollection = new ArrayCollection([

                  {ID:"P01",IMG:null,RED:true,BLUE:true,GREEN:false,YELLOW:true,BLACK:true,WHITE:true},

                  {ID:"P02",IMG:null,RED:true,BLUE:false,GREEN:true,YELLOW:true,BLACK:true,WHITE:true},

                  {ID:"P03",IMG:null,RED:true,BLUE:true,GREEN:true,YELLOW:true,BLACK:true,WHITE:true},

                  {ID:"P04",IMG:null,RED:true,BLUE:true,GREEN:true,YELLOW:true,BLACK:true,WHITE:true},

                  {ID:"P05",IMG:null,RED:false,BLUE:true,GREEN:true,YELLOW:true,BLACK:true,WHITE:true},

                  {ID:"P06",IMG:null,RED:true,BLUE:true,GREEN:true,YELLOW:true,BLACK:true,WHITE:true}

                  ]);

                  ]]>

                  </fx:Script>

                  <s:List x="87" y="85" width="627" height="140" dataProvider="{myProducts}" itemRenderer="ProductRender">

                  <s:layout>

                  <s:HorizontalLayout/>

                  </s:layout>

                  </s:List>

                  </s:Application>

                   

                  renderer

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

                  <s:VGroup width="100%" height="100%">

                  <mx:Image source="{data.IMG}" left="2" right="2" top="2" height="100%"/>

                  <s:Label width="100%" text="{data.ID}" textAlign="center"/>

                  <s:HGroup width="100%" height="16" paddingLeft="2" paddingRight="2" gap="0">

                  <s:Rect height="16" width="{data.WHITE ? 16 : 0}">

                  <s:fill>

                  <s:SolidColor color="0xFFFFFF"/>

                  </s:fill>

                  </s:Rect>

                  <s:Rect height="16" width="{data.BLACK ? 16 : 0}">

                  <s:fill>

                  <s:SolidColor color="0x000000"/>

                  </s:fill>

                  </s:Rect>

                  <s:Rect height="16" width="{data.RED ? 16 : 0}">

                  <s:fill>

                  <s:SolidColor color="0xFF0000"/>

                  </s:fill>

                  </s:Rect>

                  <s:Rect height="16" width="{data.GREEN ? 16 : 0}">

                  <s:fill>

                  <s:SolidColor color="0x00FF00"/>

                  </s:fill>

                  </s:Rect>

                  <s:Rect height="16" width="{data.BLUE ? 16 : 0}">

                  <s:fill>

                  <s:SolidColor color="0x0000FF"/>

                  </s:fill>

                  </s:Rect>

                  </s:HGroup>

                  </s:VGroup>

                  </s:ItemRenderer>

                  1 person found this helpful
                  • 6. Re: 'if...' in ItemRenderer?
                    RealBillyBlue Level 1

                    Thank you! I'll try this today or tomorrow!

                    • 7. Re: 'if...' in ItemRenderer?
                      RealBillyBlue Level 1

                      Thank you! It works perfect!