Flex, Skins, Thème – Personnaliser les skins sous Flex

by Posted on



On ne rappelle jamais assez l’importance d’un webdesign soigné et chaque jour nous devrions méditer chez Hecube ou ailleurs cette phrase de Raymond Loewy La laideur se vend mal…. Par ce premier article de cette série consacrée à l’art du skinning et du styling sous Flex, on continue d’explorer l’art et la manière de personnaliser par des techniques simples la création d’applications sous Flex comme on le fait naturrelement pour de simples templates ou thèmes de CMS pour WordPress ou Drupal.

Installer les composants nécessaires

Il s’agit de tirer profit des capacités de Flash à produire des skins pour le compte de Flex. En effet, il eut été idiot de se couper du très grand nombre de ressources graphiques, on parle tout aussi bien des individus (flasheurs) que des sources (fichiers) qui permettraient de personnaliser une application faite sous Flex.

Cette possibilité d’importation est d’ailleurs à l’ensemble de ce qui constitue la suite Adobe Illustrator notamment. Tous les logiciels de la suite désormais Adobe peuvent être des contributeurs graphiques à la personnalisation de votre application sous Flex.

Installation du composant nécessaire sous Flash CS4 pour exporter pour Flex Builder 3

Le composante st à télécharger sur le site de Adobe. D’autres composants sont disponibles à cet endroit pour l’ensembles des programmes de la suite Adobe.
Flex, Skins, Thème - Personnaliser les skins sous Flex

Flex, Skins, Thème - Personnaliser les skins sous Flex

Source : Flex MX Skin Design Extensions & Flex Component Kit for Flash Professional downloads
http://www.adobe.com/go/flex3_cs3_swfkit

Skinning & Styling : jouer avec la CSS

Voici la source du fichier Skinning_theming_1 qui va habiller notre toute première application sous Flex.

Flex, Skins, Thème - Personnaliser les skins sous Flex

Flex, Skins, Thème - Personnaliser les skins sous Flex

Flex, Skins, Thème - Personnaliser les skins sous Flex

Flex, Skins, Thème - Personnaliser les skins sous Flex

Le fichier source de l’application Skinning_theming_1.mxml

	<mx:Application
	    xmlns:mx="http://www.adobe.com/2006/mxml"
	    layout="vertical">
	    <mx:Style>
 
	    /*
	Un extrait tiré d'une CSS quelconque....
 
	    font-family: Helvetica, Arial, sans-serif;
		font-size: 12px;
		font-style:italic;
	    */
	    /* font-family: 'Arial';
	            font-size: 20px;
	            font-weight: 'bold';
	            color: #FFFFFF;
	    */
	       .labelStyle {
	            font-family: Helvetica, Arial, sans-serif;
	            font-family: 'Verdana';
	            font-size: 40px;
	            font-weight: 'italic';
	            color: #ff6600;
 
	        }
	    </mx:Style>
 
	    <mx:Label text="Bienvenue sur social.hecube.net" styleName="labelStyle" />
	</mx:Application>
	<mx:Application
	    xmlns:mx="http://www.adobe.com/2006/mxml"
	    layout="vertical" backgroundColor="#000000" >
	    <mx:Style>

Skinning & Styling : vers une CSS plus sophistiquée.

Dans un article precedent, on avait choisi la mise en forme à l’aide d’un fichier .swc d’un tableau associatif des présidents américains. On reprend les mêmes et on recommence afin de montrer la mise en forme extensible mis à disposition sous Flex.

C’est l’utilisation de la propriété themeColor de la balise Canvas qui permet d'affecter un style aux différents menu déroulant : haloGreen, haloSilver, haloOrange. Si cette propriété n'est pas renseigné, c'est le style par défaut qui s'affiche.

Flex, Skins, Thème - Personnaliser les skins sous Flex

Flex, Skins, Thème - Personnaliser les skins sous Flex

Le fichier source de l'application Skinning_theming_2.mxml

 
	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	    layout="absolute"
	    width="850" height="241">
	    <mx:Script>
	        <![CDATA[
	            [Bindable]
	            private var dp:Array =
	            [
													/* US presidents */
														{label:"George Washington", data:0},
														{label:"John F. Kennedy", data:1},
														{label:"Lyndon B. Johnson", data:2},
														{label:"Richard M. Nixon", data:3},
														{label:"Gerald R. Ford", data:4},
														{label:"James E. "Jimmy" Carter", data:5},
														{label:"Ronald W. Reagan", data:6},
														{label:"William J. "Bill" Clinton", data:7},
														{label:"George W. Bush", data:8},
														{label:"Barack Obama", data:9}
	            ];
	        ]]>
	    </mx:Script>
 
 
		<!-- le nom des th&egrave;mes  -->
	    <mx:Label x="10" y="7" text="Standard Theme" fontWeight="bold" color="#ffffff"/>
	    <mx:Label x="218" y="7" text="Green Theme" fontWeight="bold" color="#ffffff"/>
	    <mx:Label x="426" y="7" text="Silver Theme" fontWeight="bold" color="#ffffff"/>
		<mx:Label x="634" y="7" text="Orange Theme" fontWeight="bold" color="#ffffff"/>
 
		<!-- th&egrave;me 1 par d&eacute;faut -->
	    <mx:Canvas x="10" width="200" height="200" verticalCenter="10.5">
	        <mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180"></mx:ComboBox>
	        <mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
	            <mx:columns>
	                <mx:DataGridColumn headerText="Id" dataField="data" width="30" />
	                <mx:DataGridColumn headerText="US president" dataField="label"  />
	            </mx:columns>
	        </mx:DataGrid>
	        <mx:Button x="10" y="168" label="Button"/>
	    </mx:Canvas>
 
		<!-- th&egrave;me 2 haloGreen -->
	    <mx:Canvas x="218" width="200" height="200" themeColor="haloGreen"
	        verticalCenter="10.5" backgroundColor="#ffffff" cornerRadius="8"
	        borderStyle="solid" alpha="0.5">
	        <mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180"></mx:ComboBox>
	        <mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
	            <mx:columns>
	                <mx:DataGridColumn headerText="Id" dataField="data" width="30" />
	                <mx:DataGridColumn headerText="US president" dataField="label"  />
	            </mx:columns>
	        </mx:DataGrid>
	        <mx:Button x="10" y="166" label="Button"/>
	    </mx:Canvas>
 
		<!-- th&egrave;me 3 haloSilver -->
	    <mx:Canvas x="426" width="200" height="200" themeColor="haloSilver"
	        verticalCenter="10.5" backgroundColor="#ffffff"
	        cornerRadius="8" borderStyle="solid">
	        <mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180"></mx:ComboBox>
	        <mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
	            <mx:columns>
	                <mx:DataGridColumn headerText="Id" dataField="data" width="30" />
	                <mx:DataGridColumn headerText="US president" dataField="label"  />
	            </mx:columns>
	        </mx:DataGrid>
	        <mx:Button x="10" y="166" label="Button"/>
	    </mx:Canvas>
 
 
 
		<!-- th&egrave;me 4 haloOrange -->
	    <mx:Canvas x="634" width="200" height="200" themeColor="haloOrange"
	        verticalCenter="10.5" backgroundColor="#ffffff" cornerRadius="8"
	        borderStyle="solid" alpha="0.5">
	        <mx:ComboBox x="10" y="10" dataProvider="{dp}" width="180"></mx:ComboBox>
	        <mx:DataGrid x="10" y="40" width="180" height="120" dataProvider="{dp}">
	            <mx:columns>
	                <mx:DataGridColumn headerText="Id" dataField="data" width="30" />
	                <mx:DataGridColumn headerText="US president" dataField="label"  />
	            </mx:columns>
	        </mx:DataGrid>
	        <mx:Button x="10" y="166" label="Button"/>
	    </mx:Canvas>
 
	</mx:Application>

En savoir plus

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts