6 Replies Latest reply on Oct 26, 2010 1:32 PM by joan_lafferty

    HorizontalList itemrenderer question

    MacLeod7222 Level 1

      I have a <mx:horizontalList> I created an itemRenderer for it. I want to change the background gradient and text color on selected items. Does anyone have an example on how to do this? Also, I see there is a selectionColor property for changing the background of selected items, but what is the property for non-selected items?

       

      thanks

        • 1. Re: HorizontalList itemrenderer question
          joan_lafferty Adobe Employee

          If you want to change just the backgroundColor for selected items, you can use the selectionColor style in Flex 3. In this simple example, I am changing the background of the cell to yellow and the text to red when an item is selected.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
              <mx:Script>
                  <![CDATA[
                     
                      [Bindable]
                      private var myData:Array = ["Television", "Washer/Dryer", "Vacuum", "DVD Player", "Google TV"];
                     
                  ]]>
              </mx:Script>
             
              <mx:HorizontalList dataProvider="{myData}" height="100" selectionColor="0xFFFF03"
                 itemRenderer="BackgroundComp"/>
          </mx:Application>

           

          BackgroundComp.as

           

          package {

           

              import mx.controls.Label;
              import mx.controls.listClasses.*;
              import mx.controls.HorizontalList;

           

              [Style(name="backgroundColor", type="uint", format="Color", inherit="no")]
             
              public class BackgroundComp extends Label {

           

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                   super.updateDisplayList(unscaledWidth, unscaledHeight);
                      
                   var grid1:HorizontalList = HorizontalList(ListData(listData).owner);
                   if (grid1.isItemSelected(data))
                       setStyle("color", 0xFF0000);
              }
              }
          }

           

          HTH,

          Joan

           

          p.s. I'm assuming you are using Flex 3 and not Flex 4 since you are using a HorizontalList. If you are using Flex 4, please say so. How you change the text and background would be in the skin files.

          • 2. Re: HorizontalList itemrenderer question
            Devtron Level 3

            ^ So it is better to change the SKINs in FLEX 4? as opposed to MXML attributes?

             

            this would make a lot of sense to me (now), because I have struggled so much to try to change stuff like this (selection color, background colors, etc).

             

            I am sorry but SKINs is the way to go for FLEX 4 styling changes? Wow, I have learned something major today

            • 3. Re: HorizontalList itemrenderer question
              MacLeod7222 Level 1

              Sorry, Yes I am using Flex 4, would you mind providing an example using the Skinning technique you described?

               

              thanks

              • 4. Re: HorizontalList itemrenderer question
                joan_lafferty Adobe Employee

                Sure, here is a simple example where the selected item has a yellow background and red text. This example uses the selectionColor style on List plus a custom skin for the text color change depending on the state of the itemRenderer.

                 

                Main.mxml

                <?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">
                   
                    <s:List selectionColor="0xFFFF03" itemRenderer="CustomItemRenderer">
                        <s:layout>
                            <s:HorizontalLayout />
                        </s:layout>
                        <s:dataProvider>
                            <s:ArrayList>
                                <fx:String>Winnie the Pooh</fx:String>
                                <fx:String>Snoopy</fx:String>
                                <fx:String>Goofy</fx:String>
                                <fx:String>Garfield</fx:String>
                                <fx:String>Care Bears</fx:String>
                            </s:ArrayList>
                        </s:dataProvider>
                    </s:List>
                </s:Application>

                 

                Skin file: CustomItemRenderer.mxml

                <?xml version="1.0" encoding="utf-8"?>
                <s:ItemRenderer name="CustomItemRenderer"
                                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>
                    <s:layout>
                        <s:HorizontalLayout gap="0"
                                            paddingLeft="3" paddingRight="3"
                                            paddingTop="5" paddingBottom="5"
                                            verticalAlign="middle" />
                    </s:layout>
                   
                    <s:Label id="labelDisplay" maxDisplayedLines="1" color.selected="0xFF0000" color="0x000000"/>

                 

                </s:ItemRenderer>

                • 5. Re: HorizontalList itemrenderer question
                  MacLeod7222 Level 1

                  I have just one more question, sorry.

                   

                  In the example CustomItemRenderer.mxml there are three states listed. I'm assuming that means the itemRenderer would be used when the component is in one of those states? How would you set things up to use a different renderer for another state?

                   

                  Here's what I'm trying to do - my horizontalList has a custom item renderer that displays a gradient background, an image, and some text. When an item is selected in the horizontalList, I need to change the gradient color, change the text color, keep the image unchanged.

                   

                  thanks

                  • 6. Re: HorizontalList itemrenderer question
                    joan_lafferty Adobe Employee

                    If you wanted to use different itemRenderers depending on your data, you could use the itemRendererFunction property of a Spark List. However, for what you are trying to do (change appearance due to a state change), I think you want to use the same itemRenderer. You would just specify different values for the 'selected' state. For example, in the previous example that I posted, the 'color' of the text is specified as black (0x000000), but, when its in the selected state, it turns red (0xFF0000).  In Flex 4, we use the dot syntax for this:  color.selected="0xFF0000".

                     

                    If you want different gradients in your itemRenderer depending on the states, I would probably change the skin to include a couple of Rect components with a gradient fill.  Then, set the visible property depending on the state. So, in your itemRenderer you'd have something like:

                     

                    <s:Rect left="0" right="0" top="0" bottom="0" visible="false" visible.selected="true">
                            <s:fill>
                                <s:LinearGradient>
                                    <s:entries>
                                        <s:GradientEntry color="0xFF0000" alpha="0.2"/>
                                        <s:GradientEntry color="0xFFFFFF" />
                                    </s:entries>
                                </s:LinearGradient>
                            </s:fill>
                        </s:Rect>
                        <s:Rect left="0" right="0" top="0" bottom="0" visible.hovered="true" visible="false">
                            <s:fill>
                                <s:LinearGradient>
                                    <s:entries>
                                        <s:GradientEntry color="0x00FF00" alpha="0.2"/>
                                        <s:GradientEntry color="0xFFFFFF" />
                                    </s:entries>
                                </s:LinearGradient>
                            </s:fill>
                        </s:Rect>
                        <s:Label id="labelDisplay" maxDisplayedLines="1" color.selected="0xFF0000" color="0x000000"/>

                        <s:Image source="blahblah.jpg" y="40" horizontalAlign="center" />