Introduction
In the first segment of this series on designing the user interface of (RED)Wire, you learned about the different techniques and applications of CSS with Flex and AIR applications. In part two of the series, you will learn how these techniques can be applied to application components in enterprise level Flex and AIR applications. You will also discover the value of using external stylesheets when developing your Flex user interfaces.
All of the style information for (RED)Wire was contained in a single, well-commented style sheet. Additionally, all of the assets that were part of the user interface were contained in a single SWF file and loaded on demand.
Applying styles in Flex
Choosing your method of CSS implementation with Flex must be based on the situation and the environment. It is important to look at the application you are designing from the conceptual 50,000-foot view when considering your options for design implementation. The following are the most common methods for using CSS with Flex:
Setting Styles on an Instance (inline)
Flex components that extend the Flex UIComponent base class will allow you to set common styles as properties “inline”, or in other words, within the MXML component declaration tag. The layout properties of a display object are often unique to that object, so it is common to see any one of the following properties set explicitly on a component: x, y, height, width, top, right, left, bottom, horizontalCenter, verticalCenter, horizontalAlign, and verticalAlign.
<mx:Button id="volumeIcon" cornerRadius="0" alpha="0.9"
verticalCenter="0" enabled="true" toolTip="Volume Control"
click="toggleVolumeControl();" />
The listing above exhibits a functional example of setting style properties that are unique to the specific instance of the Button component with an id value of volumeIcon. Since I know that this is the only button that will require these particular style values, I have explicitly set the cornerRadius, alpha, and verticalCenter of this particular button.
A good rule of thumb when setting style properties on an MXML component tag is that the only reason you should be setting the property this way is because you know that the particular property value you are setting is specific to that component. For instance, let’s say your application requires a container that vertically stacks display objects, but without any gap in between. At the same time, you know that other VBox containers in the application do need to have some spacing between the display objects. In this type of situation, you should explicitly set the verticalGap property on that instance of the VBox component, as the following listing demonstrates:
<mx:VBox id="myVBox" verticalGap="0"
x="15" y="15" width="100%" height="100%">
(...)
</mx:VBox>
Embedding CSS in MXML
This method involves embedding styles or assets directly into an mxml file with the tag. For all practical purposes, there are few instances in which directly embedding style information into an mxml file makes sense. It is important to recognize that as the application grows, the design will become harder and harder to maintain if there is a lot of embedded CSS throughout the application. With that in mind, it is important to be conservative with this method and only use it when necessary. The following code illustrates an example of an embedded style declaration that really should be held within an external CSS file for greater code maintainability.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
showFlexChrome="false"
borderStyle="none"
keyUp="{this.onKeyStrokeEvent(event);}">
<mx:Style>
.bGroup {
borderSides:"left,bottom,right";
borderStyle:"solid";
borderColor:#6d6f71;
borderLeftThickness:3;
borderRightThickness:3;
borderBottomThickness:1;
dividerColor:#6d6f71;
dividerThickness:3;
}
</mx:Style>
<mx:Script>
<
Notice the Unique Styling of the ApplicationControlBar component in the upper right corner (click to enlarge)
Additionally, each of these one-word links have a small bullet separator between them. Since I had the design for the full application already, I knew this bullet separator was unique to the application’s main control bar and did not appear anywhere else. Most importantly, since the bullet appeared several times within the same component, it made perfect sense to embed the image, as it’s own private class within the MXML file, so that I could bind to it from each of the Image controls that I placed between the links. Otherwise I would have ended up with multiple instances of the same exact image being created, which is nothing more than a waste of system resources.
<?xml version="1.0" encoding="utf-8"?>
<mx:ApplicationControlBar xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Embed(source="assets/bullet_black.png")]
[Bindable]
private var bullet:Class;
]]>
</mx:Script>
<mx:HBox x="10" y="10" id="hbox" horizontalGap="10" width="350">
<mx:LinkButton label="Help" styleName="appBarButton"/>
<mx:Image source="{bullet}" />
<mx:LinkButton label="About" styleName="appBarButton"/>
<mx:Image source="{bullet}" />
<mx:LinkButton label="Minimize" styleName="appBarButton" />
<mx:Image source="{bullet}" />
<mx:LinkButton label="Quit" styleName="appBarButton"/>
</mx:HBox>
</mx:ApplicationControlBar>
External Style Sheets
A Flex or AIR Application will have a single MXML file at the root of the source code directory that is based on either the Application class (Flex), or the WindowedApplication class (AIR). This is the default MXML application file that starts with either or . The application’s style sheet source should immediately follow the declaration of the application’s base class, as seen below:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
showFlexChrome="false"
dropShadowEnabled="false"
borderStyle="none"
applicationComplete="{this.appInit(event);}"
>
<mx:Style source="com/passalong/assets/RED_SKIN_MAIN.css"/>
<mx:Script>
<![CDATA[
...
]]>
</mx:Script>
The easiest and safest way to maintain the style settings of an application is by using external style sheets. In fact, you could reasonably maintain all of the styles of a large application from a single CSS file. I choose to use only one CSS file for two reasons; first, I always know where to find my style settings, and second, it makes finding styles easy for other developers when working in a team environment. Additionally, it is good practice to keep this file well organized, because as the application grows, your CSS file will inevitably grow as well.
The custom FAQ component I built went through 5 design iterations. This wasn't a problem though because it was completely driven by CSS (Click to see the functional component).
When building your main application CSS file, it is generally good practice to place your default component style declarations first. For instance, if you want all of your tooltips to look the same throughout your application, use ToolTip as the name of the style and place it toward the beginning of the file. I tend to place a tooltip on just about anything I can in my applications to make the application as user-friendly as possible. Therefore, the tooltip component shows up in my applications more than probably any other component. Since your default component styles have the most impact on the overall look and feel of your application, you need to have quick and easy access to them. This is why it is usually a good idea to place those styles first.
Keep in mind that in most applications, you won’t be able to get away with just creating a default style for each component and calling it a day. The Button component is a good example of this. In order to keep your CSS code tidy, also consider grouping component style subsets together. For instance, a design with three alternate button styles called: Button.musicPlayerPlay, Button.pageDown, and Button.backToMenu, would be placed one after the other in the style sheet and separated by comments from other style groupings.
Conclusion
The bottom line is that in most cases, the most lucrative method for managing and maintaining the design of a Flex user interface is by use of external style sheets. In this regard, Flex is not much different from a standard web application. The methodology is the same: the more you keep styling, layout, and behavior separated from each other, the more manageable your application will be.
Possibly Related Posts:
Posted by Dan Orlando on May 31st, 2009 :: Filed under
User ExperienceTags ::
Flex with CSS,
user experience design,
user interface
