Flex, Thème – Créer et compiler des thèmes sous Flex

by Posted on


On souhaite créer un fichier de thème pour une application faite sous Flex, c’est à dire un fichier .swc. On va faire les essais de compilation sous Flex 3 et sur un mac. Il vous faut donc Flex 3 et un accès au terminal. Pour se faire on va créer une application sommaire de sélection parmi un array composé par des présidents américains à laquelle on va rajouter un thème compilé SmokeTheme.swc.

L’application : la Flex’O selection for US president

Le code de Compile_SWC_2.mxml édité dans Flex
Flex, Thème - Créer et compiler des thèmes sous Flex

Notre application avec l’habillage (skin) par défaut
Flex, Thème - Créer et compiler des thèmes sous Flex

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>

Compil à la “main”

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

Flex, Thème - Créer et compiler des thèmes sous Flex

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

Flex, Thème - Créer et compiler des thèmes sous Flex

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'

Flex, Thème - Créer et compiler des thèmes sous Flex

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“

Compiler un thème compilé ou Créer un fichier .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

Associer un .swc à une application Flex

Il 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
Flex, Thème - Créer et compiler des thèmes sous Flex

Flex, Thème - Créer et compiler des thèmes sous Flex

Flex, Thème - Créer et compiler des thèmes sous Flex

Modifier les informations du Flex compiler avec l’inclusion du thème SmokeTheme.swc à l’application
Flex, Thème - Créer et compiler des thèmes sous Flex

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

Flex, Thème - Créer et compiler des thèmes sous Flex

L’application publiée avec le thème compilé SmokeTheme.swc

Flex, Thème - Créer et compiler des thèmes sous Flex

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.

En savoir plus

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He 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://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as 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