Source : Flex MX Skin Design Extensions & Flex Component Kit for Flash Professional downloads
http://www.adobe.com/go/flex3_cs3_swfkit
Voici la source du fichier Skinning_theming_1 qui va habiller notre toute première application 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> |
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.
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è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ème 1 par dé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è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è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è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
Flash in Flex tutorial: Flash Weather Component
http://blog.arnomanders.nl/index.php/archives/flash-in-flex-tutorial:-flash-weather-component/
Installing the Flex Component Kit for Flash CS3
http://blog.flexexamples.com/2007/09/02/installing-the-flex-component-kit-for-flash-cs3/
Flex MX Skin Design Extensions & Flex Component Kit for Flash Professional downloads
http://www.adobe.com/go/flex3_cs3_swfkit
Flex Component Kit Alpha for Flex 2.0.1
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1273018
Créer des composants Flex avec Flash CS3
http://blog.phiphou.com/index.php/?2007/06/03/26-creer-des-composants-flex-avec-flash-cs3
Flex Embed Fonts – Polices Embarquées à la compilation
http://www.flex-tutorial.fr/2008/05/23/flex-embed-fonts-polices-embarquees-a-la-compilation/
Using ActionScript 2.0 Components > Customizing Components > About skinning components > Creating new component skins
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002473.html
Des sources .fla
d'un projet Flex qui donne une idée de la méthode à appliquer pour créer une application Flex designé.
http://svn.jetbrains.org/omeaopen/trunk/Omea/Docs/Help/!SkinSubFolder!/FlashHelp_Default/