De nombreux composants Flex ont une propriété "icon" qui permet justement d'assigner un icon à un composant Flex. Par exemple, les composants Button et Accordion ont cette propriété icon qui leur permet d'afficher une image à gauche (format png, jpg, …). La plupart du temps, les icônes sont embedded (embarqués) dans l'application pour que l'interface utilisateur soit complète et que l'utilisateur n'aie pas à attendre pour voir apparaître les icônes. Le poids souvent léger des icônes fait qu'il est souvent possible de mettre ces éléments graphiques icônes dans le SWF sans que sa taille n'augmente trop.
Pour ajouter un icône à un bouton par exemple, on utilise le code suivant:
<mx:Button icon="@Embed('/assets/icons/icon.png')"/>
L'icône qui se trouve dans le répertoire assets/icons/ de notre projet Flex sera compilé avec le SWF, aucun problème donc.
Mais imaginons que vous avez besoin d'un icône en particulier à un moment dans votre application, suivant une action utilisateur par exemple. Vous pouvez ajouter cet icône à la compilation en Embed dans une variable de type Class et l'assigner au bon moment à votre composant en faisant:
myComp.setStyle("icon", iconClass);
Mais si vous voulez charger un icône qui se trouve à une certaine URL à l'exécution, vous ne pourrez pas l'inclure à la compilation avec un Embed. Alors comment faire pour charger dynamiquement un icône dans un composant Flex.
Et bien Ben Stucki vous a mâché le travail en créant une classe qui s'occupe de charger des icônes Flex à la volée. Il a ainsi crée une classe IconUtility ayant une méthode static getClass. Cette méthode prend 2 paramètres:
- La référence vers le composant auquel vous voulez appliquer cet icône
- L'URL de l'icône à charger
Voici par exemple, un morceau de code permettant de charger un icône distant. On fait ici uniquement appel à IconUtility.getClass():
<mx:Button id="example" label="Example" icon="{IconUtility.getClass(example, 'http://www.exampledomain.com/image.jpg')}" />
On peut difficilement faire plus simple.
Télécharger la classe IconUtility
Exemple d'utilisation de Ben Stucki IconUtility
Article original sur le blog de Ben Stucki
24 avril 2009
Bonjour,
Cette class marche bien pour les bouton mais je n'arrive pas à l'utiliser pour modifier les icon dans un tree….
Une idée?
24 avril 2009
Un tree fonctionne différemment au niveau des icones. Si tu veux changer les icones dossiers / autres, tu peux utiliser les Styles du Tree:
http://livedocs.adobe.com/flex/3/langref/mx/controls/Tree.html
Sinon, il y a des méthodes qui devraient t'aider comme setItemIcon sur Tree
Fabien
24 avril 2009
En réalité je charge une image distante à partir d'une URL ex http://127.0.0.1/monIco.png
Ce que je n'arrive pas à faire même avec setItemIcon (qui marche bien avec des objets Embed). Je pense que mon vrai prb est de créer un objet de type icon à partir d'une image distante! une fois cette partie résolue il me sera facile de les passer en params à setItemIcon.
Tu as une idée sur la méthode je suis un peu perdu…
24 avril 2009
Tu peux cacher les icones, et utilier un itemRenderer qui va contenir une Image. Tu pourras ensuite fixer la source de ton image à l'url de ton icone. Pour un exemple d'itemRenderer, regarde le CheckTreeItemRenderer (google), ca devrait te donner une bonne piste
Fabien
24 avril 2009
je vais tester de suite
24 juillet 2009
Salut,
Je me retrouve confronté au même problème que toi. As tu réussi à le faire avec un renderer ?
Pourrais-tu poster ton code svp si tu as réussi ?
Merci d'avance.
Xavi
26 juillet 2009
Non, j'ai abandonné par manque de temps…. en revanche je confirme que c'est la bonne voix!
27 juillet 2009
J'ai eus un petit problème en utilisant cette classe pour mettre changer l'icon d'un button qui ne contenient pas de text. L'icon était carrément en dehors du bouton, en bas à droit o_Ô. En cliquant sur le bouton, l'icon revient à sa place.
J'ai résolu le problème en passant en paramètre la width et height de mon image lors de mon appel à IconUtility.getClass(). Côté serveur(PHP), j'ai donc du récupérer les dimensions de mon images et les renvoyer avec le lien vers l'image elle-même.