Flex Cascading Style Sheets example

Following code demonstrates the use of <mx:Style> tag. Style definitions
of this tag are implemented on other GUI components like on Button
controls.
This implementation is done by using the class selector, here class selector is
used with name Alexander.
Like other flex components id attribute, class selector is the id
attribute of style tag and acts as its identifier. Under the tag, style statements
for the flex components are coded. Further the features defined through
the statements are invoked in the components mostly in containers with the
styleName property.
In the example below styles
are implemented on flex Button and Combo box controls.
cascade.mxml
<?xml version = '1.0' encoding = 'utf-8'?>
<mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml'>
<mx:Style>
.Alexander {color : green}
Button {font-size: 10pt}
</mx:Style>
<mx:Button label = 'Motorist' styleName = 'Alexander'/>
<mx:ComboBox id = 'combo' styleName = 'Alexander'>
<mx:Button label = 'Teacher'/>
<mx:Button label = 'Central Park carriage driver'/>
<mx:Button label = 'Flower store worker'/>
</mx:ComboBox>
</mx:Application>
|
cascade.swf

Download the code

|