Changing TextField color / backgroundColor Dynamically?

[Laxidasical]

Is it possible to change the color or background color of a textfield using actionscript in a MXML file???  A simple example:

 <fx:Script>
     <![CDATA[

          var changeColor:Boolean = true;

          if (changeColor == true)
          {
               exampleText.color = '#FF000';
               exampleText.backgroundColor = '#FFFFFF';
          }

     ]]>
</fx:Script>

<s:TextInput id="exampleText" text="Example Text" />

Neither seems to work!?!?!

[bishopx]

Hi

try this:

<fx:Script>
     <![CDATA[

          var changeColor:Boolean = true;

          if (changeColor == true)
          {
               exampleText.textColor = 0xFF000;
               exampleText.backgroundColor = 0xFFFFFF;
          }

     ]]>
</fx:Script>

<s:TextInput id="exampleText" text="Example Text" />

Please note in order to see the background color you need to make sure the textfields border is visible. Hope this helps.

regrds Mike

[Laxidasical]

Thanks for the reply bishopx, neither worked though.  Is there a class I should import first???  I tried spark.components.TextInput already.

[Laxidasical]

Bump

[Guest]

I don't think TextInput control have those properties.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TextInput.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2#propertySummary.

Though this link gives all information about that control and you can check if it helps you.

[Laxidasical]

Hello Syed,

Thanks!  I browsed through all of the different properties and functions available to TextInput objects at the link you provided.  You can't access those properties directly, you have to use the setStyle() function.  Edited code below:

 <fx:Script>
     <![CDATA[

          var changeColor:Boolean = true;

          if (changeColor == true)
          {
               exampleText.setStyle('color', '#FFFFFF'); // changes font color
               exampleText.setStyle('contentBackgroundColor', '#FF0000'); // changes background color
          }

     ]]>
</fx:Script>

<s:TextInput id="exampleText" text="Example Text" />

[Guest]

I tried setStyle earlier, but that too didn't worked. so didn't mentioned it.

[Laxidasical]

Are you using Flash CS5 or Flash Builder???  I've noticed that some things work in one but not the other.  Maybe it has something to do with Flex Mobile Projects using Spark components that aren't fully baked yet?!?!?  Just a guess...

[thx1138]

@Lax - is your question answered?

UPDATE: Just noticed you are using contentBackgroundColor (was looking at the post title).

Use contentBackgroundColor and contentBackgroundAlpha.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Home">

    <fx:Script>
        <![CDATA[
            protected function textinput1_clickHandler(event:MouseEvent):void {
                event.currentTarget.setStyle("color", "#0000ff");
                event.currentTarget.setStyle("contentBackgroundColor", 0x00ff00);
            }
        ]]>
    </fx:Script>

   
    <s:TextInput contentBackgroundColor="#666666" text="Hello color filled World" click="textinput1_clickHandler(event)"/>
   
</s:View>

FYI keep in mind you now have access to the FXG MXML markup. This can be a quicker solution than recreating a new skin. If the contentBackgroundColor property didn't exist this is what you could have done prior to creating your own skin:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Home"

    <fx:Script>
        <![CDATA[
            protected function textinput1_clickHandler(event:MouseEvent):void {
                event.currentTarget.setStyle("color", "#0000ff");
                backgroundColorFill.color = 0x00ff00;
            }
        ]]>
    </fx:Script>

   
    <s:Group>
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:SolidColor id="backgroundColorFill" color="#00ffff"/>
            </s:fill>
        </s:Rect>
        <s:TextInput contentBackgroundAlpha="0" text="Hello color filled World" click="textinput1_clickHandler(event)"/>
    </s:Group>
</s:View>

[Laxidasical]

@thx1138 - YES!  This question is answered!  I figured it out myself (with the help of an informative link posted by Syed).  I wish there was a way to mark posts as answered manually.  Anyway, if you count 4 posts up above this one you'll see what I did.  It was super simple...