Le fichier source Compile_SWC_2.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <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} ]; private function ClickHandler ():void { messageField.text = "Vous avez choisi => " + nameCB.selectedLabel + " "; } ]]> </mx:Script> <mx:Panel title="Faites un choix parmi ces présidents américains :" width="50%" height="50%" paddingLeft="10" paddingTop="10"> <mx:VBox width="100%"> <mx:HBox width="100%"> <mx:Text text="Choisir :" /> <mx:ComboBox id="nameCB" dataProvider="{dp}"/> <mx:Button label="Selectionner" click="ClickHandler();"/> </mx:HBox> <mx:Text id="messageField" /> </mx:VBox> </mx:Panel> </mx:Application> |
Jusqu’à présent rien d’extraordinaire, on vient de faire une application en Flex. On va maintenant chercher à corser le tout en cherchant à compiler manuellement un thème pour en faire un fichier .swc
et l’adjoindre à notre application.
Dans un tout premier temps, il va falloir localiser le répertoire, qui contient l’utilitaire nécessaire à la compilation.
Premier problème, accéder à l’utilitaire de compilation de Flex. Il faut chercher le chemin vers le répertoire bin
dans Flex et lancer la commande qui va bien pour accéder à l’utilitaire.
Sous mac, l’utilitaire est dans /Applications/Adobe Flex Builder 3/sdks/3.2.0/bin/
. Dans le terminal cette commande vous emmène direct dans le répertoire et lance le terminal comme il faut bin
du Flex SDK cd /Applications/Adobe Flex Builder 3/sdks/3.2.0/bin/fcsh
L’aide contextuelle au compiler de Flex
(fcsh) -help List of fcsh commands: mxmlc arg1 arg2 ... full compilation and optimization; return a target id compc arg1 arg2 ... full SWC compilation compile id incremental compilation clear [id] clear target(s) info [id] display compile target info quit quit |
Il s’agit de la commande pour compiler une feuille e style en fichier thème .swc
compc -include-file my_style_dashboard.css /Users/nom-d-utilisateur/le_chemin_vers_la_css/my_style_dashboard.css -o /Users/nom-d-utilisateur/le_chemin_vers_la_swc/my_style_dashboard.swc |
Vous pouvez aussi utiliser via une ligne de commande le compiler mxmlc
pour convertir vos fichiers .mxml
en fichiers .swc
mxmlc /Users/nom-d-utilisateur/le_chemin_vers_la_mxml/MonApplication.mxml -o /Users/nom-d-utilisateur/le_chemin_vers_la_mxml/MonApplication.swc |
Une erreur possible pour la compilation d’un mxml
Il vous faut évidemment donner le chemin (path
) de là où se trouve les fichiers du thème.
mxmlc MonApplication_1.mxml -o MonApplication_1.swc |
Le message d’erreur qui va s’afficher dans la mesure où le fichier MonApplication_1.mxml
est introuvable.
Loading configuration file /Applications/Adobe Flex Builder 3/sdks/3.2.0/frameworks/Flex-config.xml
Error: unable to open 'MonApplication_1.mxml'
La ligne de commande pour une bonne compilation d’un mxml
mxmlc /Users/nom-d-utilisateur/le_chemin_vers_la_mxml/MonApplication_1.mxml -o /Users/nom-d-utilisateur/le_chemin_vers_la_mxml/MonApplication_1.swc |
Une fois que vous maitrisez les principales lignes de commande pour utiliser le compilateur, on peut se livrer à l’objet véritable de l’article “Créer un fichier de thème en .swc
“
.swc
On va voir véritablement comment on peut à partir d’un thème complet et produire un fichier .swc
. Pour cela, on va se servir des thèmes livrés avec l’installation par défaut de Flex. L’ensemble visible sur un mac dans le répertoire suivant : /Applications/Adobe Flex Builder 3/sdks/3.2.0/frameworks/
On va se servir du thème Smoke
comme base de départ pour créer note .swc
. Ce thème se compose d’un répertoire Smoke
contenant 2 fichiers : Smoke.css
et moke_bg.jpg
. Les deux fichiers compilés vont former le fichier de thème Flex nommé SmokeTheme.swc
compc -include-file /Users/nom-d-utilisateur/le_chemin_vers_le_swc/Smoke/Smoke.css /Users/nom-d-utilisateur/le_chemin_vers_le_swc/Smoke/Smoke.css -include-file /Users/nom-d-utilisateur/le_chemin_vers_le_swc/Smoke/Smoke/smoke_bg.jpg /Users/nom-d-utilisateur/le_chemin_vers_le_swc/Smoke/Smoke/smoke_bg.jpg -o /Users/nom-d-utilisateur/le_chemin_vers_le_swc/SmokeTheme.swc |
.swc
à une application FlexIl vous faut créer le fichier swc
selon la procédure décrite ci-dessus. Ensuite, vous devez ajouter le fichier .swc
à votre application, puis entrer la ligne de commande pour joindre le thème à la publication de votre application. Il ne vous reste qu’à publier votre application en lançant le compiler via la procédure normale
Ajouter le fichier SmokeTheme.swc
à l’application
Modifier les informations du Flex compiler avec l’inclusion du thème SmokeTheme.swc
à l’application
Joindre le thème à l’application se fait à l’aide de cette commande, -locale en_US -theme /Users/nom-d-utilisateur/le_chemin_vers_le_swc/SmokeTheme.swc
L’application publiée avec le thème compilé SmokeTheme.swc
Conclusion : Si vous connaissez un tant soit peu l’intégration notamment la rédaction des CSS, vous pouvez produire des “skins” pour des applications au même titre que des thèmes Drupal ou WordPress.
compc
pour compiler des fichiers .swc
/ Using compc, the component compiler.swc
/ Flex Quick Start: Building custom components