Using Cascading Style Sheets in Flex 4 or FB4

March 8th, 2011 by aabhaanjan

Cascading Style Sheets (CSS) : A style sheet is a collection of formatting rules for types of components or classes that include sets of components:

Differences in Flex between support of CSS and the CSS specification:

  1. Flex supports subclassing selectors.
  2. Flex supports a subset of the style properties that are available in CSS.
  3. Flex controls also have unique style properties that are not defined by the CSS specification.
  4. Flex controls only support styles that are defined by the current theme.
  5. Flex style sheets can define skins for controls using the Embed keyword.
  6. The CSS 3 wildcard namespace prefix syntax of *| that matches any namespace is not supported.
  7. The universal selector scoped to a particular CSS namespace is not supported. Namespaces are not known at runtime in Flex and as such the universal selector remains universal no matter what namespace it is scoped to in CSS.
  8. If you apply multiple class selectors to a component, the order of preference that the styles is applied is the order in which they appear in the styleName property’s space-delimited list, not the order in which they are defined in the CSS block or external style sheet.

Selector :  In CSS syntax, each declaration associates a style name, or selector, with one or more style properties and their values.

We can define multiple style properties in each selector by separating each property with a semicolon.

Example :

In this example   selector name is  myFontStyle:

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Style>

.myFontStyle {

fontSize: 15;

color: #9933FF;

}

</fx:Style>

<s:VGroup>

<s:Button id=”myButton” styleName=”myFontStyle” label=”Click Me”/>

</s:VGroup>

</s:Application>

[/xml]

About selector names

When applying style properties with CSS in a <fx:Style> block or in an external style sheet, the best practice is to use camel-case without hyphens .

Important point * : However, Flex supports both the camel-case and hyphenated syntax in style sheets

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

.myFontStyle {

fontSize: 15; /* Note the camelCase. */

}

</fx:Style>

<s:Button id=”myButton” styleName=”myFontStyle” label=”Click Me”/>

</s:Application>

[/xml]

Example :

[xml]

.myClass { … } /* Valid style name */

.my-class { … } /* Not a valid style name */

[/xml]

About namespaces in CSS

Why namespaces :

To distinguish between different components that share the same name, you specify namespaces in your CSS that apply to types.

For example, we can specify that a particular selector apply to all components in the Spark namespace only.

@namespace s “library://ns.adobe.com/flex/spark”;

Example :

[xml]

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:myComps=”*”

>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

@namespace s “library://ns.adobe.com/flex/spark”;

@namespace mx “library://ns.adobe.com/flex/mx”;

s|Button {

fontSize:16;

}

mx|VBox {

color:red;

}

</fx:Style>

<mx:VBox>

<s:Button label=”Click Me, Too”/>

</mx:VBox>

</s:Application>

[/xml]

Important points :

1. The following are valid namespace directives in Flex 4 that refer to the manifests in the related SWC files:

library://ns.adobe.com/flex/spark

library://ns.adobe.com/flex/mx

2. If you do not use type selectors in your style sheets, then you are not required to use the @namespace rule.

3. You can also specify that a particular selector apply to mixed nested namespaces.

4. This is common if you are using descendant selectors.

5. You can exclude an identifier, in which case the declared namespace becomes the default namespace.

6. For custom components, you can define your own style namespace; that style namespace must match the component’s namespace.

For example, components in the myComponents package use the style namespace “myComponents.*”

Example :

[xml]

<?xml version=”1.0″?>

<!– styles/CustomComponentsNamespace.mxml –>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:comps=”myComponents.*”>

<fx:Style>

@namespace comps “myComponents.*”;

comps|MyButton {

color:green;

}

</fx:Style>

<comps:MyButton label=”Click Me”/>

</s:Application>

[/xml]