Pour tout designer que nous sommes, proposer différents CSS sur notre site est toujours quelque chose d'agréable. Toutefois on peut se demander si pour un site en Flex, il faut ou non recompiler le swf à chaque changement de CSS. Heureusement il n'est pas nécessaire de recompiler et nous allons voir comment procéder.

Créez un nouveau projet Flex et ajoutez cette arborescence à la racine du projet:

• src/assets/style
• src/assets/style/blue.css
• src/assets/style/red.css

Rajoutez les lignes suivantes dans les fichiers blue.css et red.css:

Nous avons juste redéfini la couleur de fond pour le composant Canvas. Maintenant voyons comment charger le CSS.

Tout réside dans le fait de pouvoir  convertir son CSS en swf. Pour cela faîtes un clic droit sur votre fichier CSS dans la fenêtre de navigation d'Eclipse/Flex Builder et cliquez sur "Compile CSS to SWF".

Faîtes cela pour les 2 CSS. Vous allez ainsi générer le .swf associé à votre CSS dans le répertoire bin-debug/assets/style.

Ensuite nous allons modifier le fichier main.mxml afin de pouvoir charger dynamiquement nos .swf.

Nous allons utiliser la méthode StyleManager.loadStyleDeclarations qui permet de charger un fichier de style sous forme SWF.

Lancez maintenant votre application et jouez avec la comboBox afin de charger dynamiquement vos CSS.

Vous trouverez les sources du projet ici.

Tags: CSS, flex

Cet article a été publié le Thursday 1 January 2009 à 0:42 et est classé dans Adobe. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.