Flex 2 - Thèmes
Je me suis demandé comment changer l'apparence des applications qu'on crée avec Flex 2.
Il y a quelques thèmes fournis dans le SDK, ils sont assez sympas et montrent bien ce qu'on peut faire. Après, il faudrait que j'essaye d'en faire un complet pour voir les limites.
Introduction
On imagine mal toutes les applications Flex se ressembler. Il fallait forcément imaginer un moyen de personnaliser l'interface.
Les balises MXML, qu'on utilise pour la mise en page, ne sont que des sortes de class après tout. Ce sont des composants qui ont des propriétés, des événements, des méthodes etc.
Une balise a sa propre liste de styles possibles. C'est plus souple que d'essayer d'imposer une liste de styles générale et de faire des composants qui rentrent dans les cases. Je n'ai jamais vraiment utilisé les composants des anciens Flash, mais c'était l'idée je crois.
Plusieurs techniques
Concrètement, j'ai vu 2 façons d'appliquer un thème.
A la compilation
La première technique consiste à compiler avec un paramètre. Voilà un exemple pour utiliser le thème Wooden fourni avec le SDK :
SET OPTS=-use-network=false -benchmark -theme="..\..\frameworks\themes\Wooden.css" ..\..\bin\mxmlc.exe %OPTS% "test_002.mxml"
Dans le MXML
Sinon, on peut bien sûr modifier localement des morceaux de l'interface en mettant un style à l'application. Donc directement dans le MXML, comme ça :
<mx:Style source="style.css"/>
Remarque
Il faut se balader dans source/mx/containers pour voir les class des éléments d'interface. Tous les styles sont déclarés comme ça :
[Style(name="dropShadowEnabled", type="Boolean", inherit="no")]
Et les thèmes sont dans frameworks/themes.
Regardez comment est fait le thème AeonGraphical. Dans sa CSS, il peut cibler un symbol dans un SWF, c'est terrible ! :)
Conclusion
J'ai vu (trop ?) rapidement les propriétés disponibles pour personnaliser les composants, mais au moins, ca ne se résume pas seulement à changer des couleurs et des images. Si le composant le propose, on peut modifier plein de choses.
Au delà de la simple mise en forme, on pourrait imaginer des composants qui traitent les données différement suivant une propriété CSS.
Télécharger les sources (à mettre à la racine de flex_sdk_2)
PS: private joke à Kreudouille et Zeuyen pour George :)
Commentaires
1. Le samedi, août 5 2006, 09:54 par ekameleon
Hello :)
Il est possible d'utiliser une balise <mx:script pour définir également le style que tu veux et ensuite pour l'appliquer au composant que tu souhaites. Le MXML c'est juste une surcouche de l'AS3 et au final tu peux tout définir uniquement avec du code et un tout petit fichier mxml avec le strict minimum pour lancer le tout ! et pour un développeur bah c'est pratique je trouve d'utiliser le MXML juste pour la préparation de l'interface visuelle et ensuite d'utiliser derrière le code pour s'organiser comme il faut sans toutes les balises dans tous les sens.
EKA+ :)
2. Le samedi, août 5 2006, 10:12 par NiKo
Je trouve au contraire beaucoup plus sain de laisser l'application de style à la mise en forme dans la Vue (le MXML). Un peu comme dans n'importe quel langage, comme PHP, où il devient très vite inmaintenable de placer les éléments de style au sein même du code PHP.
De plus, ça laisse une plus grande marge de maneouvre à un éventuel intégrateur tiers, qui se contente alors d'éditer les fichiers MXML et les feuilles de style ad-hoc.
3. Le lundi, août 7 2006, 17:01 par ekameleon
Le truc c'est que de trop en mettre dans le swf .. je sais pas si cela vaut le coup ? Mettre tous les styles dans le SWF à la compilation alors que justement une feuille de style peut être chargée par la suite dynamiquement ? Faut faire la part des choses à mon avis au niveau du poids du fichier au final.