Question

I have a Flex 3.5 application that will serve multiple purposes, and as part of the visual changes that I’d like to make to indicate which mode the application is in, I want to change its background color.

Currently, the application tag looks like this:

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:com="ventures.view.component.*"
    xmlns:views="ventures.view.*"
    layout="absolute"
    preinitialize="onPreInitialize()"
    creationComplete="onCreationComplete()"
    applicationComplete="onApplicationComplete()"
    click="onClick(event)"
    enabled="{(!chainController.generalLocked)}"
    backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]"
>

I’ve tried using a binding, for both the backgroundColor and backgroundGradientColors attributes:

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    ...
    backgroundColor="{app_background_color}"
>

—and—

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    ...
    backgroundGradientColors="{app_background_color}"
>

but for the former binding is not allowed, and for the latter there is a warning that:

Data binding will not be able to detect assignments to “app_background_color”.

I also ran across this page which seems to indicate that I could do it with the setStyle() method, but the documentation seems to indicate that this method is only available for components, not the main canvas.

I suppose I could wrap everything in a <mx:Canvas></mx:Canvas> specificially for this purpose, but that seems wasteful—like Div-itis in HTML or something.

What’s the best way to change the main application background color at run-time?

Answer 1

StyleManager.getStyleDeclaration("Application").setStyle('backgroundColor', 'Red');