Apache Flex: Style Sheets

Friday, February 26, 2010

Skining Flex Components

A Flex component is made up of visual elements which are set of images, SWF files, or class files that contain drawing API methods.

Skinning: the process of changing the appearance of a component by modifying or replacing its visual elements.

You can define a skins for a component using the following methods:
1. Using the setStyle() method
2. Cascading Style Sheets (CSS).

External Styles - You can reference a CSS file in any MXML file using the tag
Embedded Style - You can define embedded styles in an MXML file. Embedded styles can used only in the file in which it is defined.
Inline Styles - they are defined in MXML tag and can be used in that tag.

Application skins can be defined in separate MXML file.

SparkSkin - class is used for skinning an flex application

 <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"   
   xmlns:s="library://ns.adobe.com/flex/spark">

All skins requires a states property with at least one state called normal state.

   <s:states>  
     <s:State name="normal" />  
     <s:State name="disabled" />  
     ....  
   </s:states>

Metadata block contians the HostComponent directive, declare to which components the skin will be applied.

    <fx:Metadata>   
     [HostComponent("spark.components.Application")]  
   </fx:Metadata>

Skin also defines the background shape and colors

Skin defines the container display layout and properties for the Application container's content children.

Thursday, August 27, 2009

Building Simple Application with Flex

EBA AJAX Grid + Flex Charting Component (Photo credit: Andre Charland)

Working with Containers

Lets now learn about the most important MXML tag in Flex.

Applicaiton
Description: root container for an Flex application

Properties:

layout, define lay out for its child components, possible values for this property are:

vertical - automatic top to bottom in order layout
horizontal - automatic left to right in order layout
absolute - no automatic layout, (x,y) location based layout

Note: The default layout, BasicLayout renderer doesn't respect the transformations that occur in the object's width/height/position during rotation. It still tries to layout the objects as if they were not rotated. However, if you use any other layout, like VerticalLayout or HorizontalLayout, the objects new dimensions after rotation is used.

style, defines formatting for the child components