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;
}

10 thoughts on “Setting a Flex application’s style name

  1. Does this work just the same but from the initial load?

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            horizontalAlign="center">
    
        …
    
    </mx:Application>
    
  2. Yeah, you can just do this if you want:

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

    Peter

    PS: The trick to posting code is to change all your < characters to “[” or “&lt;”.

  3. Is there a way to change the style dynamically like this on just one component? Say I just wanted to change the style of button 1 but not the other two?

  4. Jesse,

    Yes, you can apply a style to a single Button on control/container by setting the styleName property, such as:

    <mx:Button label="Custom styled" styleName="myStyleName" />
    <mx:Button label="Default styled" />
    
    <mx:Style>
        .myStyleName {
            color: red;
        }
    </mx:Style>
    

    Hope that helps,
    Peter

  5. Is it possible to have conditionals inside styleName?

    styleName="check1 || check2 ? 'style1' : 'style2'"

    I can’t seem to make this approach work, I don’t see any compile errors but the styles are not being applied.

    Thanks for your time.

    -Paul

    1. @Paul,

      Try using data binding:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:Style>
              .style1 {
                  color: red;
                  fontSize: 32;
                  fontWeight: bold;
              }
       
              .style2 {
                  color: green;
                  fontSize: 40;
                  fontStyle: italic;
              }
          </mx:Style>
       
          <mx:ApplicationControlBar dock="true">
              <mx:CheckBox id="ch1" label="check1" />
              <mx:CheckBox id="ch2" label="check2" />
          </mx:ApplicationControlBar>
       
          <mx:Button label="Button" styleName="{(ch1.selected || ch2.selected) ? 'style1' : 'style2'}" />
       
      </mx:Application>

      Peter

  6. Hi Peter!

    Thanks for the suggestion. Was not able to try it though, I just ended up using ActionScript to update the values like in your example.

    Keep the great articles coming! :)

  7. can i dynamically change the styleName value? Suuppose I am putting the the stylename in a string and dynamically want to change tha styleName value……Can anyone give any sugesstion?

Comments are closed.