Flex Examples
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.
<?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;
}
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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>ok dude…I give up on pasting code. :-) Basically, can you set styleName=”plain” in the initial mx:Application tag?
Sorry for the multiple comments.
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 “<”.
Ok…I figured could just put it up there but I wasn’t sure since you were using setStyle().
Koo on posting code. I’ll keep that in mind.
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?
Jesse,
Yes, you can apply a style to a single Button on control/container by setting the
styleNameproperty, 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
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
@Paul,
Try using data binding:
Peter
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! :)
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?