{"id":1359,"date":"2010-02-10T06:48:50","date_gmt":"2010-02-10T05:48:50","guid":{"rendered":"http:\/\/flaven.fr\/?p=1359"},"modified":"2013-09-25T10:11:57","modified_gmt":"2013-09-25T08:11:57","slug":"flex-theme-creer-et-compiler-des-themes-sous-flex","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2010\/02\/flex-theme-creer-et-compiler-des-themes-sous-flex\/","title":{"rendered":"Flex, Th\u00e8me – Cr\u00e9er et compiler des th\u00e8mes sous Flex"},"content":{"rendered":"


\n<\/p>\n

On souhaite cr\u00e9er un fichier de th\u00e8me pour une application faite sous Flex, c’est \u00e0 dire un fichier .swc<\/code>. On va faire les essais de compilation sous Flex 3 et sur un mac. Il vous faut donc Flex 3 et un acc\u00e8s au terminal. Pour se faire on va cr\u00e9er une application sommaire de s\u00e9lection parmi un array<\/code> compos\u00e9 par des pr\u00e9sidents am\u00e9ricains \u00e0 laquelle on va rajouter un th\u00e8me compil\u00e9 SmokeTheme.swc<\/code>.<\/p>\n

L’application : la Flex’O selection for US president<\/h4>\n

Le code de Compile_SWC_2.mxml<\/code> \u00e9dit\u00e9 dans Flex<\/b>
\n\"Flex,<\/p>\n

Notre application avec l’habillage (skin) par d\u00e9faut<\/b>
\n\"Flex,<\/p>\n

Le fichier source Compile_SWC_2.mxml<\/code><\/b><\/p>\n

\r\n\t<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\t<mx:Application xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\" layout=\"vertical\">\r\n\t<mx:Script>\r\n\t\t\t<![CDATA[\r\n\t\t\t\t[Bindable] private var dp:Array =\r\n\t\t\t\t[\r\n\r\n\t\t\t\t\/* US presidents *\/\r\n\t{label:\"George Washington\", data:0},\r\n\t{label:\"John F. Kennedy\", data:1},\r\n\t{label:\"Lyndon B. Johnson\", data:2},\r\n\t{label:\"Richard M. Nixon\", data:3},\r\n\t{label:\"Gerald R. Ford\", data:4},\r\n\t{label:\"James E. \"Jimmy\" Carter\", data:5},\r\n\t{label:\"Ronald W. Reagan\", data:6},\r\n\t{label:\"William J. \"Bill\" Clinton\", data:7},\r\n\t{label:\"George W. Bush\", data:8},\r\n\t{label:\"Barack Obama\", data:9}\r\n\r\n\t\t\t\t];\r\n\r\n\t\t\t\tprivate function ClickHandler ():void {\r\n\t\t\t\t\tmessageField.text = \"Vous avez choisi => \" + nameCB.selectedLabel + \" \";\r\n\t\t\t\t}\r\n\t\t\t]]>\r\n\t\t<\/mx:Script>\r\n\r\n\t\t<mx:Panel title=\"Faites un choix parmi ces pr\u00e9sidents am\u00e9ricains :\" width=\"50%\" height=\"50%\" paddingLeft=\"10\" paddingTop=\"10\">\r\n\t\t\t<mx:VBox width=\"100%\">\r\n\t\t\t\t<mx:HBox width=\"100%\">\r\n\t\t\t\t\t<mx:Text text=\"Choisir :\" \/>\r\n\t\t\t\t\t<mx:ComboBox id=\"nameCB\" dataProvider=\"{dp}\"\/>\r\n\t\t\t\t\t<mx:Button label=\"Selectionner\" click=\"ClickHandler();\"\/>\r\n\t\t\t\t<\/mx:HBox>\r\n\t\t\t\t<mx:Text id=\"messageField\" \/>\r\n\t\t\t\t<\/mx:VBox>\r\n\t\t<\/mx:Panel>\r\n\t<\/mx:Application>\r\n\r\n\t\r\n<\/pre>\n
Compil \u00e0 la “main”<\/h4>\n
Jusqu’\u00e0 pr\u00e9sent rien d’extraordinaire, on vient de faire une application en Flex. On va maintenant chercher \u00e0 corser le tout en cherchant \u00e0 compiler manuellement un th\u00e8me pour en faire un fichier .swc<\/code> et l’adjoindre \u00e0 notre application.
\nDans un tout premier temps, il va falloir localiser le r\u00e9pertoire, qui contient l’utilitaire n\u00e9cessaire \u00e0 la compilation.<\/p>\n
Premier probl\u00e8me, acc\u00e9der \u00e0 l’utilitaire de compilation de Flex. Il faut chercher le chemin vers le r\u00e9pertoire bin<\/code> dans Flex et lancer la commande qui va bien pour acc\u00e9der \u00e0 l’utilitaire.
\nSous mac, l’utilitaire est dans \/Applications\/Adobe Flex Builder 3\/sdks\/3.2.0\/bin\/<\/code>. Dans le terminal cette commande vous emm\u00e8ne direct dans le r\u00e9pertoire et lance le terminal comme il faut bin<\/code> du Flex SDK cd \/Applications\/Adobe Flex Builder 3\/sdks\/3.2.0\/bin\/fcsh<\/code><\/p>\n
\"Flex,<\/p>\n
L’aide contextuelle au compiler de Flex<\/b><\/p>\n
\r\n(fcsh) -help \r\nList of fcsh commands:\r\nmxmlc arg1 arg2 ...      full compilation and optimization; return a target id\r\ncompc arg1 arg2 ...      full SWC compilation\r\ncompile id               incremental compilation\r\nclear [id]               clear target(s)\r\ninfo [id]                display compile target info\r\nquit                     quit\r\n<\/pre>\n
Il s’agit de la commande pour compiler une feuille e style en fichier th\u00e8me .swc<\/code><\/p>\n
\r\ncompc -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\r\n<\/pre>\n
Vous pouvez aussi utiliser via une ligne de commande le compiler mxmlc<\/code> pour convertir vos fichiers .mxml<\/code> en fichiers .swc<\/code><\/p>\n
\r\nmxmlc \/Users\/nom-d-utilisateur\/le_chemin_vers_la_mxml\/MonApplication.mxml -o \/Users\/nom-d-utilisateur\/le_chemin_vers_la_mxml\/MonApplication.swc\r\n<\/pre>\n
\"Flex,<\/p>\n
Une erreur possible pour la compilation d’un mxml<\/b><\/p>\n
Il vous faut \u00e9videmment donner le chemin (path<\/code>) de l\u00e0 o\u00f9 se trouve les fichiers du th\u00e8me.<\/p>\n
\r\nmxmlc MonApplication_1.mxml -o MonApplication_1.swc\r\n<\/pre>\n
Le message d’erreur qui va s’afficher dans la mesure o\u00f9 le fichier MonApplication_1.mxml<\/code> est introuvable.<\/em>
\nLoading configuration file \/Applications\/Adobe Flex Builder 3\/sdks\/3.2.0\/frameworks\/Flex-config.xml
\nError: unable to open 'MonApplication_1.mxml'
\n<\/code><\/p>\n
\"Flex,<\/p>\n
La ligne de commande pour une bonne compilation d’un mxml<\/b><\/p>\n
\r\nmxmlc \/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\r\n<\/pre>\n
Une fois que vous maitrisez les principales lignes de commande pour utiliser le compilateur, on peut se livrer \u00e0 l’objet v\u00e9ritable de l’article “Cr\u00e9er un fichier de th\u00e8me en .swc<\/code>“<\/b><\/p>\n
Compiler un th\u00e8me compil\u00e9 ou Cr\u00e9er un fichier .swc<\/code><\/h4>\n
On va voir v\u00e9ritablement comment on peut \u00e0 partir d’un th\u00e8me complet et produire un fichier .swc<\/code>. Pour cela, on va se servir des th\u00e8mes livr\u00e9s avec l’installation par d\u00e9faut de Flex. L’ensemble visible sur un mac dans le r\u00e9pertoire suivant : \/Applications\/Adobe Flex Builder 3\/sdks\/3.2.0\/frameworks\/<\/code><\/p>\n
On va se servir du th\u00e8me Smoke<\/code> comme base de d\u00e9part pour cr\u00e9er note .swc<\/code>. Ce th\u00e8me se compose d’un r\u00e9pertoire Smoke<\/code> contenant 2 fichiers : Smoke.css<\/code> et moke_bg.jpg<\/code>. Les deux fichiers compil\u00e9s vont former le fichier de th\u00e8me Flex nomm\u00e9 SmokeTheme.swc<\/code><\/b><\/p>\n
\r\ncompc -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\r\n<\/pre>\n
Associer un .swc<\/code> \u00e0 une application Flex<\/h4>\n
Il vous faut cr\u00e9er le fichier swc<\/code> selon la proc\u00e9dure d\u00e9crite ci-dessus. Ensuite, vous devez ajouter le fichier .swc<\/code> \u00e0 votre application, puis entrer la ligne de commande pour joindre le th\u00e8me \u00e0 la publication de votre application. Il ne vous reste qu’\u00e0 publier votre application en lan\u00e7ant le compiler via la proc\u00e9dure normale<\/p>\n
Ajouter le fichier SmokeTheme.swc<\/code> \u00e0 l’application<\/b>
\n\"Flex,<\/p>\n
\"Flex,<\/p>\n
\"Flex,<\/p>\n
Modifier les informations du Flex compiler avec l’inclusion du th\u00e8me SmokeTheme.swc<\/code> \u00e0 l’application<\/b>
\n\"Flex,<\/p>\n
Joindre le th\u00e8me \u00e0 l’application se fait \u00e0 l’aide de cette commande, -locale en_US -theme \/Users\/nom-d-utilisateur\/le_chemin_vers_le_swc\/SmokeTheme.swc<\/code>
\n<\/b>
\n\"Flex,<\/p>\n
L’application publi\u00e9e avec le th\u00e8me compil\u00e9 SmokeTheme.swc<\/code>
\n<\/b>
\n\"Flex,<\/p>\n
Conclusion : Si vous connaissez un tant soit peu l’int\u00e9gration notamment la r\u00e9daction des CSS, vous pouvez produire des “skins” pour des applications au m\u00eame titre que des th\u00e8mes Drupal ou WordPress.<\/b><\/p>\n
En savoir plus<\/h2>\n