Nous allons travailler avec un bouton, dont nous allons modifier le design.

Première solution : spécifier le style dans le code du bouton, comme dans l'exemple ci-dessous.

<mx:Button color="0xFF0000" fillColors="[0x00FF00,0x0000FF]"/>

ce qui nous donne :

Deuxième solution : utiliser du code CSS. Nous pouvons soit le spécifier dans le code de l'application, comme ci-dessous :

<mx:Style>
Button 
{
   cornerRadius: 11;
   textIndent: 4;
   paddingLeft: 5;
   paddingRight: 7;
   paddingTop: 0;
   letterSpacing: 2;
   highlightAlphas: 0.36, 0;
   fillAlphas: 1, 0.67, 0.75, 0.65;
   fillColors: #ff0000, #ffcc00, #ffb572, #f7fe01;
   color: #8ad583;
   textRollOverColor: #ff0099;
   textSelectedColor: #3399ff;
   themeColor: #ff9900;
   fontFamily: Arial;
   fontSize: 16;
   fontWeight: bold;
   fontStyle: italic;
}
</mx:Style>

Soit dans une feuille de style que l'on importe, comme ceci :

<mx:Style source="assets/styles/styles.css" />

Le résultat sera le même :

Je ne saurais que trop vous conseiller d'utiliser le FlexStylesExplorer, qui fait gagner beaucoup de temps.

Nous pouvons aussi spécifier des stylenames différents pour chaque élément, comme ceci :

Notre css :

.bouton1
{
	font-weight:bold;
	font-size:14;
}
 
.bouton2
{
	font-weight:normal;
	font-size:10;
}

et modifier le code mxml comme ceci :

<mx:Button  label="Button" styleName="bouton1"/>
 
<mx:Button  label="Button" styleName="bouton2"/>

Enfin, avec la version 2.0.1 de Flex, nous pouvons charger des CSS dynamiquement, comme ceci :

style1 :

.test
{
   cornerRadius: 11;
   textIndent: 4;
   paddingLeft: 5;
   paddingRight: 7;
   paddingTop: 0;
   letterSpacing: 2;
   highlightAlphas: 0.36, 0;
   fillAlphas: 1, 0.67, 0.75, 0.65;
   fillColors: #ff0000, #ffcc00, #ffb572, #f7fe01;
   color: #8ad583;
   textRollOverColor: #ff0099;
   textSelectedColor: #3399ff;
   themeColor: #ff9900;
   fontFamily: Arial;
   fontSize: 16;
   fontWeight: bold;
   fontStyle: italic;
}

style2:

.test
{
   cornerRadius: 11;
   textIndent: 4;
   paddingLeft: 5;
   paddingRight: 7;
   paddingTop: 0;
   letterSpacing: 2;
   highlightAlphas: 0.36, 0;
   fillAlphas: 1, 0.67, 0.75, 0.65;
   fillColors: #669999, #cc33ff, #66ff33, #0099ff;
   color: #ffff33;
   textRollOverColor: #ccff00;
   textSelectedColor: #3399ff;
   themeColor: #0033ff;
   fontFamily: Verdana;
   fontSize: 10;
   fontWeight: bold;
}

Puis vous devez exporter vos feuilles de style sous forme de swf. Pour cela, faites un clic droit sur votre CSS et cochez 'Compile CSS to SWF'.

Puis enfin, le code de l'application :

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
	<![CDATA[
		import mx.styles.StyleManager;
        
        [Bindable]
        public var css: Array = [ {label:"Choisir", data:null},
                                         {label:"CSS 1", data:"style1.swf"},
                                         {label:"CSS 2", data:"style2.swf"} ];
        
        public function cssChange(style:String):void {
            if(style!=null)StyleManager.loadStyleDeclarations("styles/"+style)
        }
        ]]>
    </mx:Script>    
    
    <mx:Button label="Button" styleName="test" x="190" y="45"/>
	<mx:ComboBox dataProvider="{css}" width="100" 
     close="cssChange(ComboBox(event.target).selectedItem.data)" x="10" y="10"/>
    
</mx:Application>

Ce qui nous donne :

;

Nous pouvons aussi spécifier dans nos CSS des éléments graphiques, comme ci-dessous :

.test {
   upSkin: Embed("../assets/on.png");
   overSkin: Embed("../assets/on.png");
   downSkin: Embed("../assets/on.png");
   selectedUpSkin: Embed("../assets/off.png");
   selectedDownSkin: Embed("../assets/off.png");
   selectedOverSkin: Embed("../assets/off.png");
}
<mx:Button label="" styleName="test" toggle="true" selected="true"/>

Ce qui nous donne :

;

Voilà pour aujourd'hui...Nous verrons prochainement comment aller encore plus loin grâce aux thèmes.