Setting a Flex application’s style name

The following example shows how you can use the styleName style in a Flex Application to remove the background image, set the background color to white and left aligns the content.

To quote the Flex 2.0.1 documentation, “Overriding the default Application container styles“:

The Flex default style sheet defines a plain style name that sets all padding to 0 pixels, removes the default background image, sets the background color to white, and left-aligns the children.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/18/setting-a-flex-applications-style-name/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:Script>
        <![CDATA[
            private function plainStyle():void {
                Application.application.setStyle("styleName", "plain");
            }

            private function defaultStyle():void {
                Application.application.setStyle("styleName", undefined);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="styleName = 'plain'"
                click="plainStyle();" />
        <mx:Button label="styleName = undefined"
                click="defaultStyle();" />
    </mx:ApplicationControlBar>

    <mx:Button label="Button 1" />
    <mx:Button label="Button 2" />
    <mx:Button label="Button 3" />

</mx:Application>

View source is enabled in the following example.

As you can see in the previous example, when setting the Application’s styleName style to “plain”, the content becomes left aligned. If you want to center the content horizontally within the application, set the <mx:Application /> tag’s horizontalAlign style to “center”, as seen in the following snippet:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        horizontalAlign="center">
    ...
</mx:Application>

Note that you can also set the styleName style directly in the <mx:Application /> tag by using the following snippet:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        styleName="plain">
    ...
</mx:Application>

OK, looking a bit closer, it seems you can also set the styleName as a property, which I think I prefer, and what the documentation says (Application class documentation in the Flex 2.0.1 LiveDocs). To use the styleName property instead of styleName style, change the <mx:Script /> code block in the previous (big) example to the following:

<mx:Script>
    <![CDATA[
        private function plainStyle():void {
            Application.application.styleName = "plain";
        }

        private function defaultStyle():void {
            Application.application.styleName = undefined;
        }
    ]]>
</mx:Script>

Also, looking at the default.css style sheet in the Flex 3 beta SDK (see: [FlexSDK]\frameworks\projects\framework\defaults.css):

.plain
{
    backgroundColor: #FFFFFF;
    backgroundImage: "";
    horizontalAlign: "left";
    paddingBottom: 0;
    paddingLeft: 0;
    paddingRight: 0;
    paddingTop: 0;
}

Tagged as: plain, styleName