4 Replies Latest reply on Nov 15, 2010 2:57 PM by MSPMarathon

    Changing certain data display font color in <mx:List control

    MSPMarathon Level 1

      Hello,

       

        I have been working with flex for about a month or so, therefore am fairly new and trying to learn all I can.  I have a <mx:List/> which has an ArrayCollection as a dataProvider.  This list displays a labelField of one of the items in the ArrayCollection once it is loaded from my dataservice.  My question is how do I manipulate the color of the font based on the information received in the dataProvider?  I have looked into the itemRender and the htmlText properties which seem completely different and neither really seem to do this simple task the way I want it to(both seem to be able to change the color, but not based on the data received in the dataProvider).  I have a button displaying the list which I can loop through the data in the dataProvider here and change the text color dynamically.  Like I said I am relatively new and could use any and all information on the topic.  Thank you for your help!

       

      MSP

        • 1. Re: Changing certain data display font color in <mx:List control
          SashaKeith Adobe Employee

          Hi,

           

          In Spark, you can do the following.

              <s:List dataProvider="{items}" width="300" height="600" itemRenderer="CustomItemRenderer" />

           

          In CustomItemRenderer.mxml, you can override set data and change the color appropriately:

          <?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
                      {
                          super.data = value;
                          if (value == null)
                          {
                              return;
                          }
                          lblMonth.text = value.month;
                          if (value.month == "Jan")
                          {
                              lblMonth.setStyle("color", 0x990000);
                          }
                      }
                  ]]>
              </fx:Script>
              <s:Label id="lblMonth"/>
             
          </s:ItemRenderer>

           

          The same idea will work with MX List also. Your MX item renderer may look like this:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx">
              <fx:Script>
                  <![CDATA[
                      override public function set data(value:Object):void
                      {
                          super.data = value;
                          if (value == null)
                          {
                              return;
                          }
                          lblMonth.text = value.month;
                          if (value.month == "Jan")
                          {
                              lblMonth.setStyle("color", 0x990000);
                          }
                      }
                  ]]>
              </fx:Script>
              <mx:Label id="lblMonth"/>
             
          </mx:VBox>
          1 person found this helpful
          • 2. Re: Changing certain data display font color in <mx:List control
            MSPMarathon Level 1

            Thank you for your reply.  In your mx example you use the variable lblMonth.text.  Where are you getting this from?(nevermind, I see this declared below, but still do not understand why it is in the code)  Do I need to use something like "value.setStyle("color", 0x990000);" In order to change the color of the row in the List?

            • 3. Re: Changing certain data display font color in <mx:List control
              SashaKeith Adobe Employee

              You cannot set value.setStyle(...). The value object is not a UI component but simply data so you cannot style it. You can only style visual components like Label, TextInput, List, etc. Perhaps a more complete example will help. Since you are using mx List, I will illustrate it with that:

               

              In my application, I declare the sample data like this in the Script tag:

                          [Bindable]
                          public var items:ArrayCollection = new ArrayCollection([
                              {month:"Jan", message:"Message1"},
                              {month:"Feb", message:"Message2"},
                              {month:"Mar", message:"Message3"},
                              {month:"Apr", message:"Message4"},
                              {month:"May", message:"Message5"}
                          ]);

               

              Then I declare the List like this:

              <mx:List dataProvider="{items}" width="300" height="600" itemRenderer="CustomItemRenderer" />

               

              The list is being bound to the items ArrayCollection, and the itemRenderer determines what properties and how to display each List item. In this example, let's say I only want to display the month for each item and I want to display it as text since the month attribute is a String. That's where the Label comes into play, and I set the Label's text to the month attribute.

               

              The List passes each item to the itemRenderer in the data object. Normally, all I need in the itemRenderer is:

               

              <mx:Label id="lblMonth" text="{data.month}"/>


              However, the data setter function override is needed to modify the color of the Label based on data (let's say, all Strings that say "Jan" should be displayed in red font) since you cannot do it declaratively in MXML:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
                              xmlns:s="library://ns.adobe.com/flex/spark"
                              xmlns:mx="library://ns.adobe.com/flex/mx">
                  <fx:Script>
                      <![CDATA[
                          override public function set data(value:Object):void
                          {
                              super.data = value;
                              if (value == null)
                              {
                                  return;
                              }
                              lblMonth.text = value.month;
                              if (value.month == "Jan")
                              {
                                  lblMonth.setStyle("color", 0x990000);
                              }
                          }
                      ]]>
                  </fx:Script>
                  <mx:Label id="lblMonth"/>
              </mx:VBox>

               

              Hope that helps.

              • 4. Re: Changing certain data display font color in <mx:List control
                MSPMarathon Level 1

                I assume it overrides the labelField we have already set on the List?  This was extremely helpful!  Thanks again!