Archive for the ‘Using Cascading Style Sheets’ Category

Type selectors in CSS for Flex 4 or FB 4

March 11th, 2011 by aabhaanjan

Type selectors assign styles to all components of a particular type. Flex applies the style to all classes of that type. Flex also applies the style properties defined by a type selector to all subclasses of that type.

To  use type selectors we required to specify which namespace each type appears in with the @namespace directive.

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”>

<fx:Style>

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

s|Button {

fontSize: 15;

color: #9933FF;

}

</fx:Style>

<s:VGroup>

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

<s:Button id=”myButton2″ label=”Click Me”/>

</s:VGroup>

</s:Application>

[/xml]

Tags: , , , , , ,

Use of class selectors in CSS and multiple class selectors

March 10th, 2011 by aabhaanjan

A Class selectors define a set of styles (or a class) that we can apply to any component. You define the style class, and then point to the style class using the styleName property of the component’s MXML tag.

Note* : All components that are a subclass of the UIComponent class support the styleName property.

The following example defines a new style myFontStyle and applies that style to a Button component by assigning the Button to the myFontStyle

style class:

[xml]

<?xml version=”1.0″?>

<!– styles/ClassSelector.mxml –>

<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:Button id=”myButton2″ label=”Click Me”/>

</s:VGroup>

</s:Application>

[/xml]

we can apply multiple class selectors by separating them with a space in the styleName property.

Note * : The order of preference that the styles is applied is the order in which they appear in the space-delimited list, not the order in which they are defined in the CSS block or external style sheet.

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”>

<fx:Style>

.myFontStyle {

fontSize: 22;

}

.myOtherFontStyle {

color: #9933FF;

}

</fx:Style>

<s:VGroup>

<s:Button id=”myButton”

styleName=”myFontStyle myOtherFontStyle”

label=”Click Me”/>

<s:Button id=”myButton2″ label=”Click Me”/>

</s:VGroup>

</s:Application>

[/xml]

Tags: , , , , ,

Inheritance in CSS in Flex4 or FB

March 9th, 2011 by aabhaanjan

Important Points :

1.       If we set an inheritable style property on a parent container, its children inherit that style property.

For example, if you define fontFamily as Times for a Panel container, all children of that    container will also use Times for fontFamily, unless they override that property.

2.        If  we set a noninheritable style on a parent container, only the parent container uses that style; the children do not use that style.

3.       In general, color and text styles are inheritable, regardless of which theme they are in (Spark or Halo) or how they are set (by using style sheets or the set Style() method).

4.       The following are exceptions to the rules of inheritance:

a) If we use the global selector in a CSS style definition, Flex applies those style properties to all controls, regardless of whether the properties are inheritable.

b)      The values set in type selectors apply to the target class as well as its subclasses, even if the style properties are not inheritable.

For example, if you define a Group type selector, Flex applies all styles in that selector to Group and VGroup controls because VGroup is a subclass of Group.

5.       We should avoid using type selectors for commonly-used base classes like Group.

Why ? Group is a class that Spark skins are based on. Setting styles on the Group type selector might cause unexpected results because the skins will have styles applied that we might not oridinarily expect to apply.

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”>

<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|Group {

color:#FFCC33;

}

</fx:Style>

<s:VGroup>

<s:Button label=”This Button is in a VGroup and its label is yellow.”/>

<s:Label text=”This Label is in a VGroup and its text is yellow.”/>

</s:VGroup>

<s:Button label=”This Button is not in a Group, but it is still yellow.”/>

<s:Label text=”This Label is not in a Group, but it is still yellow.”/>

</s:Application>

[/xml]

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]