Jump to content

Working with CSS and Flex

  chco's Photo
Posted Dec 19 2010 01:33 AM

The following excerpt from Learning Flex 4 gives instruction on working with CSS while developing your Flex 4 application.
Your stylesheet should include namespace manifests followed by style definitions, and every style definition should take the form of a selector condition followed by a block of style rules.

Namespaces in CSS

When you open a Style block, Flash Builder will automatically create two namespace definitions for the Spark and Halo component sets; they will be the familiar s and mx namespace abbreviations, respectively.

Note: By saying “open a Style block,” we mean typing only this much: <fx:Style>. That’s the opening tag of the Style block, and when you complete the opening tag by adding the right angle bracket (>), Flash Builder will automatically copy all namespaces in use by the application into the stylesheet. The copying will also include any namespaces pointing to custom components and third-party libraries you may be using. If you provide a source property declaring the location of an external stylesheet, Flash Builder will not copy the namespaces.

You can also use stylesheets to define style rules for custom components, but of course you’ll need to make sure to declare a namespace pointing to the component’s package location or appropriate URI. If we expanded the previous example to reach custom components under src/com/learningflex4, the CSS namespace assignments would resemble the example below.

CSS namespace assignments, including a namespace for a custom package

 @namespace s "library://ns.adobe.com/flex/spark";
 @namespace mx "library://ns.adobe.com/flex/mx";
@namespace lf4 "com.learningflex4.*";
 /* style assignments go here */

Note: You can declare comments within your stylesheet by wrapping them between the symbols /* and */.

Next, we discuss the various selectors (condition syntax) used by CSS to identify which components will receive which styles.

Style selectors

CSS syntax supports five categories of style definitions, called selectors. The main difference between them is how far up the containment ladder a style is declared and thus, how far it’s allowed to cascade down a layout.

The five selector categories—global, descendant, name, type, and id—are similar to conditions used to define style targets, and each selector is built using a slightly different syntax. What follows is a description of each selector and an example declaration.

Global selectors

As its name implies, the global selector defines styles for every component in your application. You probably won’t define many styles globally, although fontFamily and some color styles do make appropriate global styles. As demonstrated in the following code, the global selector is distinguished by its use of the reserved name “global”:

/* global selector */
chrome-color: red;

Note: These examples define color values as names. While we used this approach lightly in Chapter 9, we haven’t discussed it very deeply. For more info, see the sidebar “Color Names” on page 320.

Descendent selectors

This selector type defines a style based on containment of one component class by another. In the example, notice the selector defines a container, followed by a space, followed by a component. Each component is identified by the combination of namespace abbreviation (s), followed by a pipe (|), followed by a component class. Code completion should help you with the construction. The following style would apply to any Spark button contained by a BorderContainer:

/* descendant selector */
s|BorderContainer s|Button{
chrome-color: teal;

Name selectors

The name selector, also called a class selector, is so called because you can name it just about anything. Syntax for the name selector begins with a dot (.), followed by a unique style name, followed by a batch of style rules. When you create a name selector, you can define any style/value combinations you want, and later, when you apply the style rule to a component, it will accept rules for any style it supports. You apply name selector styles to various components by setting a component’s styleName property equal to the name you provided for your name selector (only without the dot):

/* name (class) selector */
chrome-color: maroon;
color: white;

Note: Here’s how you would apply a name selector style to a Button:

<s:Button id="button" label="Button"
 horizontalCenter="0" verticalCenter="0"

Type selectors

This is the selector category we used near the start of the chapter. The declaration format for a type selector is namespace abbreviation (s, mx, etc.) followed by a pipe (|), followed by the component class to be styled. The following example would apply a chromeColor (as chrome-color) of olive to any Spark Button in the application:

/* type selector */
chrome-color: olive;

Id selectors

The id selector will apply its style rules to every component in an application having a certain id. Make sure to use this selector wisely, as it could create some confusion if you have multiple components with the same id. The id selector is created by prepending a valid component id with the pound (#) symbol. In the example, the chrome-color and the color styles will be applied to all components having the id “submitButton”.

/* id selector */
chrome-color: navy;
color: white;

Selector precedence

In the previous subheading, we discussed selector categories in the following order: global, descendant, name, type, and id. We discussed selectors in this order because such is their order of precedence, or in other words, how they flow from weakest to strongest style association.

Note: From weakest to strongest association, component styling will observe the following styling precedence. Where the global selector is the weakest, inline styling is the strongest:

  • Global
  • Descendant
  • Name
  • Type
  • Id
  • Inline

You could test this by creating a simple testing application with a lone Button control. Then, if you created a nested stylesheet and included each selector example from the previous section, the id selector would override the other selector categories and actually modify the button. That’s because, as stated earlier, id selectors have greater precedence than name selectors, which have greater precedence than type selectors, and so on.

While we’re on this topic, inline styling trumps everything. That means if you’re managing styles in a stylesheet, you always have the option of adding styles inline. If you do, your inline style assignments will override anything coming from CSS.

Learning Flex 4

Learn more about this topic from Learning Flex 4.

Learn Adobe Flex 4 in a fun and engaging way with this book's unique, hands-on approach. Using clear examples and step-by-step instructions, you'll create four applications that demonstrate fundamental Flex programming concepts, including how to enhance user interaction with ActionScript, create and skin a user interface with Flex's UI components, manage dynamic data, connect to a database using server-side script, and deploy applications to both the Web and the desktop.

See what you'll learn

0 Subscribe

0 Replies