Using styles in Flex 4

January 27th, 2011 by aabhaanjan

We can modify the appearance of components through style properties.

Important points :

  1. The style properties that we can set on a component depend on the component’s architecture.
  2. The components in the MX component set (mx.controls.* and mx.containers.* packages) take one set of styles. Components in the Spark component set (spark.components.* package) allow an entirely different set of styles.
  3. Flex does not support controlling all aspects of component layout with CSS.
  4. Properties such    as xywidth, and height are properties, not styles, of the UIComponent class, and therefore cannot be set in CSS.
  1. For MX components to use CSS it should  implement the IStyleClient interface.

Example :

[xml]

<?xml version=”1.0″?>

<!– modules/StyleModLoaderApp.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”>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

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

s|Button {

color:blue;

cornerRadius:10;

}

</fx:Style>

<s:Button id=”myButton” label=”Sample Styling”/>

</s:Application>

[/xml]

Tags: , , , ,