Setting or clearing the application background image in Flex

The following example shows how you can remove the default gradient background image for a Flex application by setting the backgroundImage style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/14/setting-or-clearing-the-application-background-image-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            [Bindable]
            private var defaultBackgroundImage:Class;

            private function init():void {
                defaultBackgroundImage = Application.application.getStyle("backgroundImage");
            }

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                Application.application.setStyle("backgroundImage", evt.item.data);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="default" data="{defaultBackgroundImage}" />
        <mx:Object label="null" data="{null}" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundImage:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        dataProvider="{arr}"
                        itemClick="toggleButtonBar_itemClick(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

You can also set the backgroundImage style in an external .CSS file, or <mx:Style /> block, as shown in the following snippet:

<mx:Style>
    Application {
        backgroundImage: ClassReference(null);
    }
</mx:Style>

Or, you can set the backgroundImage style in MXML, as shown in the following snippet:

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

Tagged as: backgroundImage