7 Replies Latest reply on Apr 6, 2010 6:47 AM by Florincugir

    Changing Label text color based on some conditions

    Florincugir

      Hi,

       

      I have these labels and I would like to change the text color IF the text has some specific value (coming from an XML created by a program); for example the default text color is red, but if the text value is "Yes", the text color should be green.

       

      Any helps much appreciatted, as usual...

       

      Thanks.

        • 1. Re: Changing Label text color based on some conditions
          Vikash.kumar29 Level 3

          Hello

           

          I have something for you may this is waht you are looking for. Create a custom component based on label and override public function set text and from there you can change your color based on some condition.

           

          Now the code snippest :

           

          package Controls
          {
              import mx.controls.Label;
             
              public class ColouredLabel extends Label
              {
                  public function ColouredLabel()
                  {
                      super();
                      setStyle("color",0xFF0000);
                  }
                 
                  override public function set text(value:String):void
                  {
                      super.text = value;
                      changeColor(value);
                  }
                 
                 
                  private function changeColor(inValue:String):void
                  {
                      if(inValue == "Yes")
                      {
                          setStyle("color",0x00FF00);
                      }
                      //your further conditions
                  }
              }
          }

           

          Hope this helps you.

           

          Cheers

          -Vikash

          1 person found this helpful
          • 2. Re: Changing Label text color based on some conditions
            Vikash.kumar29 Level 3

            Let me know if this doesn't help you

             

            -Vikash

            • 3. Re: Changing Label text color based on some conditions
              Florincugir Level 1

              Vikash,

               

              First, thanks a lot for your answer...

               

              Before to continue, please keep in mind that I am a newbie in this area so do not expect me to see the "obvious" for the more experienced guys.

               

              Here we go: what I understood from your answer is I have to create a custom component control (named "ColouredLabel", based on "Label" class) which I can use in my application: instead <mx:Label> I will be using <mx:ColouredLabel> where I can call function "changeColor('Yes')" on "initialize" (or "creationComplete"?) property.

               

              In order to do that, I created an ActionScript file (extension ".as") and I tried to copy it in my source (using <mx:Script> tag); I cannot do it because I keep getting the infamous (noticed on internet during some research) error 1037: Package cannot be nested.

               

              Please let me know if I am completely off-base here and what I can do to fix it.

               

               

              Best regards,

               

              Florin

              • 4. Re: Changing Label text color based on some conditions
                Vikash.kumar29 Level 3

                Hi ,

                 

                You don't need to call function "changeColor('Yes')" on "initialize" (or "creationComplete"?) property explicitly as you can see in my code it is private and will be called automatically as soon as you assign some text to it.

                 

                To create this custom component

                First of all save the code posted above as ColouredLabel.as anywhere in your HD. Now copy this file and create a folder named "Controls" under project source folder and paste this file. [check the nameCase. It is case Sensetive]

                 

                This will make your your custom component ready.

                 

                Now if you are following me use <Controls:ColouredLabel  /> instead of <mx:Label/>.

                 

                Hope, Now you can start at lease.

                 

                Cheers

                -Vikash

                1 person found this helpful
                • 5. Re: Changing Label text color based on some conditions
                  Matt Le Fevre Level 4

                  unsure, but you might be able to get away with something like this:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                     
                      <mx:Script>
                          <![CDATA[

                              public function changeColor(value:String):uint
                              {
                                  if(value == "Yes")
                                  {
                                      return 0x007F00;
                                  }
                                  else
                                  {
                                      return 0x7F0000;
                                  }
                         
                              }
                             
                          ]]>
                      </mx:Script>
                     
                      <mx:Panel x="343" y="199" width="250" height="200" layout="absolute">
                          <mx:Label id="lbl1" text="Yes" color="{changeColor(lbl1.text)}" x="102.5" y="10"/>
                          <mx:Label id="lbl2" text="BlahhhhhBlahhhh" color="{changeColor(lbl2.text)}" x="97" y="36"/>
                          <mx:Label id="lbl3" text="Exampleeeeeeee"  color="{changeColor(lbl3.text)}" x="97" y="62"/>
                      </mx:Panel>
                     
                  </mx:Application>

                   

                  using a single label in an item renderer, passing across the 'data.text' value

                  • 6. Re: Changing Label text color based on some conditions
                    Florincugir Level 1

                    Vikash,

                     

                    Thanks for the elegant solution you provided to me; I changed a little bit your code, though: I moved initializing the color 'setStyle("color",0xFF0000);' from ColouredLabel() function to changeColor private function (on Else branch of if condition). I did that because I had issues on re-running the program (the text kept the color of the previous running without being re-initialized).

                     

                    Everything works fine now, but I have this problem: two (or more) Labels (with different ID's, obviously) could have the same incoming text, let's say, "Yes", but just one of them should change the color to green, in this situation. Is there any way to pass the ID along with the text value?

                          

                     

                    Thank you,

                     

                     

                    Florin

                    • 7. Re: Changing Label text color based on some conditions
                      Florincugir Level 1

                      Thanks a lot, Grizzz...., it works like a charm! I was even able to pass the ID of the label for situation when there are more labels with the same incoming text, but just one being necessary to change the color.

                       

                      Another good (and elegant) solution was provided by Vikash (see above) with the mention I didn't know how to pass the Label ID...

                       

                       

                      Best regards,

                       

                       

                      Florin