Applying styles to the application container

Difficulty: Beginner
Applying styles to the application container

Problem

You want to customize the appearance of the main application container.

Solution

Define style properties by using either Application class properties or the body CSS selector.

Discussion

You can use both, ActionScript properties or CSS, to style the application container. Note that the default visibility for the application background is set to false, which means the background of the application is not visible. If you are familiar with the Flex 3 framework, this approach could seem a little bit strange. The reason is that SPAS 3.0 can be used with both Flex and Flash compilers, and Flash developers habitually define their own background skins over the scene of the main timeline.

To define a visible gradient background like backgrounds in Flex applications, set the Application class gradientBackground and bodyVisibility properties to true:

package {
	import org.flashapi.swing.Application;
	public class ApplicationClass extends Application {
		public function ApplicationClass():void {
			super();
			gradientBackground = bodyVisibility = true;
		}
	}
}

To use CSS instead of Application class properties to style the main container, just create a CSS file that contains a body selector:

body {
	visibility: visible;
	gradient: true;
}

The CSS visibility property accepts two parameters: visible and hidden. As you see, SPAS 3.0 CSS syntax is really close to the HTML styling process.
Name the file you have created "style.css" and save it into your export folder. SPAS 3.0 provides an easy-to-use subsystem to load and integrate external assets. To apply externally defined styles at runtime, use the Application class styleSheet property, and let SPAS 3.0 deals with complex loading mechanism:

package {
	import org.flashapi.swing.Application;
		public class ApplicationClass extends Application {
		public function ApplicationClass():void {
			super();
			styleSheet = "style.css";
		}
	}
}

Share this article:

Comments:

There are no comments yet for this article.

Leave a reply

Your email is required but will not be displayed.

To prevent abusive emails, please enter the numbers you see in the image below:

Security code