Adobe Flex Tutorial - Adobe Flex Tutorial

29mai/089

Flex Theme: Créer un thème Flex (SWC)

Pour utiliser un thème, il vous faut déjà avoir crée un thème Flex. Un thème doit contenir au moins un fichier CSS, et certainement des éléments graphiques comme des images ou des skins AS3. Un thème doit être précompilé en un fichier SWC. Vous pouvez compiler un SWC en utilisant compc, le compilateur en ligne de commande pour les composants. Lorsque vous compilez un thème, vous devez spécifier l'option "-include-file" pour chaque fichier CSS ou élément graphique que vous voulez ajouter au SWC. L'option "-include-file" requiert 2 paramètres: le nom par lequel vous référencez le fichier et le chemin du fichier. Voici un exemple:

compc -include-file corporate_styles.css ../assets/themes/corporate.css -include-file background.jpg ../assets/themes/background.jpg -o corporate.swc

Si vous voulez ajouter une classe (skin) au thème, vous pouvez utiliser l'option "-include-classes". Cette option permet de spécifier une ou plusieurs classses (nom complet, avec le package) dans une liste séparée par un espace:

compc -include-file corporate_styles.css ../assets/themes/corporate.css -include-classes com.company.styles.ButtonSkin com.company.styles.ToolTipSkin

Comme vous pouvez le voir, même en faisant l'inclusion de deux fichiers ou classes, la ligne de commande commence à être longue. Ajouter de nouveaux fichiers augmenterai le problème. Une solution plus élégante est d'utiliser le fichier de configuration Flex.

L'exemple suivant est un simple fichier de configuration nommé example_theme.xml:

 <xml version="1.0"?>
<flex-config xmlns="http://www.adobe.com/2006/flex-config">
	<output>corporate.swc</output>
	<include-file>
		<name>corporate.css</name>
		<path>../assets/themes/corporate.css</path>
	</include-file>
	<include-file>
		<name>background.jpg</name>
		<path>../assets/themes/background.jpg</path>
	</include-file>
	<include-classes>
		<class>com.company.styles.ButtonSkin</class>
		<class>com.company.styles.ToolTipSkin</class>
	</include-classes>
</flex-config>

Vous pouvez ensuite compiler en utilisant l'option "-load-config" de compc comme dans cet exemple:

compc -load-config example_theme.xml

Flex est livré avec plusieurs thèmes non compilés. Vous pouvez trouver ces thèmes dans le dossier frameworks/themes du SDK Flex. Si vous utilisez Flex Builder, le SDK est situé dans le dossier FlexSDK de l'installation de Flex Builder.

Remplis sous: Exemple, Flex Builder, Skin, Styles || Taggé comme: compc, include-file, SDK, theme Laisser un commentaire

Articles similaires

Commentaires (9) Trackbacks (0) (Souscrire aux commentaires de cet article)

loop
2 mars 2010

j'ai developpé un theme.
dans flashbuilder, je spécifie pour un projet Lambda que j'utilise ce theme.
si je modifie le theme, existe-t-il un moyen qu'automatiquement mon projet Lambda prenne en compte les modifications faites sur le theme ?
fnicollet
2 mars 2010

Salut, je ne pense pas que tu puisses automatiser le process. Ou peut etre avec une bidouille Ant, a voir
Fabien
loop
5 mars 2010

en fait, pour pseudo automatiser le process, il ne faut pas passer par le menu du builder, mais definir en argument de compilation le theme.
comme ça, il suffit juste de recompiler le projet utilisant le theme et hop ça marche
Yannick Lacaute
20 mars 2010

Il est aussi possible de compiler son thème en un fichier swf chargé par exemple à l'initialisation de l'application. Si le thème swf est réalisé dans un autre projet que l'application et que vous utilisez Eclipse pour la compilation, on peut configurer le répertoire de sortie du projet vers le répertoire "assets" (par exemple) de l'application. Cela évite de devoir recompiler l'application lorsque le thème est modifié et les modifications seront automatiquement prises en compte.
L'inconvénient c'est si deux applications utilisent ce même swf… C'est alors que Ant/Maven peut peut corriger le problème en copiant le swf généré dans les deux applications utilisant le thème.

Y.
lam
10 avril 2010

Slt,
Quelqu'un peut me dire comment réaliser un coverflow en détail parsque j'ai des erreurs et c sur ke j'ai oublié quelque chose !!!!
fnicollet
10 avril 2010

Salut,
il te suffit d'utiliser un composant comme ceux-ci:
http://www.google.fr/search?hl=fr&rlz=1G1GGLQ_FRFR243&q=coverflow+flex
Pour les erreurs, cela dépend de comment tu t'y es pris pour l'intégration du composant. Sans détail, personne ne pourra t'aider. Essaie de poster sur un forum consacré à Flex plutôt que sur ce blog

Thx
Fabien
ethernal
17 novembre 2011

Bonjour,

un point me semble ne pas être précisé dans cette explication.
Comment compc peut-il retrouver les classes, alors qu'on ne lui passe que le chemin de package ?
J'ai tenté de mettre le fichier de config. (pour compc) à la racine du projet (c'est aussi de cet endroit que j'ai lancé compc), mais compc ne retrouve pas mes classes de skin.
Je note que ce point ne paraît pas précisé sur le site d'Adobe (en tout cas pas sur cette page :
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f85.html)

Merci d'avance de vos réponses si vous avez des informations appropriées.
fnicollet
17 novembre 2011

Salut,
Et bien cela dépend depuis quel dossier tu lances compc (si j'ai bien compris ta question). C'est du relatif, il suffit que tu sois dans ton "src", non ?

Fabien
ethernal
18 novembre 2011

Je viens de tester de déplacer mon fichier xml dans src, et malheureusement, compc ne trouve toujours pas ma classe.
Je dois passer à côté de quelque chose, mais évidemment, je ne sais pas quoi…