Anyway to Dynamically Change the Color of Text

[awclemen]

Hello Forum Folks,

I'm attempting to change the color of some text depending on the value of it's
content, however when I try this, I get an error:
Error: Binding is not allowed to style property color

from this code:

<mx:Text text="{rp.currentItem.qualificationStatus}" width="100"
color="{chooseColor(rp.currentItem.qualificationSt atus)}" />

Is there any object that allows for dynamic color changes to the text? Am I
going about this the wrong way?

Thanks for your help
--Andy

[ntsiii]

Did you solve this?

If not, I'll give it a shot.

Tracy

[jpwrunyan]

yes and no. you cannot bind styles in Flex. Best (well, maybe not best, but
easiest) thing to do is make a custom component that extends mx.controls.Text
and then based on a setter method or property have a function execute to change
the TextFormat of the text_mc ("text_mc" I think is the actual TextField
instance inside of the Text class) or whatever. The reason I am suggesting
this is because I needed a custom cell renderer that did something similar
(change text color based on the value of the text) for a data grid. However,
there's no reason why the component I made for the cell renderer could not be
used as a normal alternative to the mx.controls.Text.

Also, I think there is a method for setStyle on UIComponents that you might
want to look into. That might get you on the right track for an easier
alternative way to change style properties dynamically (since binding isn't
allowed).

[higgins1b]

One of my apps really relies on color-coding, so i had to come up with
something to do this in many places. Here is what i did:
I created a .as file containing my function. I named it colorFormatter.as, and
it looks like this:

function colorMyLabel(myColor, myLabel):Void
{
//mx.controls.Alert.show(myColor + " <--myColor, " + myLabel + " <--myLabel");
if(myColor == "1")
{
myLabel.setStyle("color","blue");
}
else if(myColor == "2")
{
myLabel.setStyle("color","green");
}
else if(myColor == "3")
{
myLabel.setStyle("color","#FFCC00");
}
else if(myColor == "4")
{
myLabel.setStyle("color","red");
}
else
{
myLabel.setStyle("color","black");
}
}

You can use this function like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<Script source="colorFormatter.as"/>

<mx:Label id="appLabel" text="Hello World!" initialize="colorMyLabel("2",
this.appLabel)"/>

</mx:Application>

I do not know if this is the best way to do it, but I have found this very
useful as far as reuse goes.

Hope this helped.

[jpwrunyan]

Yeah, that was sort of what I was thinking except, if I were you I would make
the .as script file into an .as class file. You could do something like:

class ColorText extends mx.controls.Text {

public var myColor:String;

function draw() {
super.draw();
if (myColor !== undefined) {
this.setStyle("color",myColor);
}
}

}

[jpwrunyan]

sorry, forgot to add:

in the mxml file you could do:
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
xmlns:as="*">

<ColorText text="myText" myColor="0x00FF00" />

</mx:Application>

one more thing, I just noticed that you are using label while I used Text..
but the basic implementation is the same. I haven't tested this code but I
think it should work.