ajout de bouton d'actions lors d'un rollOver

[piff62]

Bonjour à tous,

J'écris actuellement une application flex qui gère une liste de contacts (cf pièce jointe).

Cette liste de contacts et de type List.

Comme tout programme qui se respecte j'aimerai pouvoir "appeler", "modifier" ou "supprimer" un contact de la liste.

Pour cela, je souhaiterai affiché des petites icônes à côté du contact que je survole avec la souris.

Après quelques recherches j'ai trouvé qu'une méthode itemRollOver existe.

Côté MXML :

Code :

<mx:List id="listeContacts" itemRollOver="itemrollover(event);"/>

Côté AS3 :

Code :

1
2
3
4
5
 
public function itemrollover(event:ListEvent):void
{
	//debug.text += event.rowIndex;
}

donc ce qui se passe, c'est quand dans la fonction itemrollover(event:ListEvent) j'aimerai puvoir ajouté 3 petites icones à droite du nom du contact.

C'est sur ce point que je n'arrive pas à trouvé de documentation.

Quelqu'un aurait-il déjà rencontré ce problème? ou aurait une idée de solution ?

Cordialement,

Thomas

[Jim_Nastiq]

je pense qu'une solution avec un itemRenderer sera interressante.

en fait tu créé un composant qui te servira de rendu pour chaque item de ta List, admettons tu créés un composant listRenderer.mxml, dans ta List tu ajoutes cette propriété :

Code :

itemRenreder=tonpackage.listRenderer

et c'est ce renderer qui affichera ou non les 3 icones(en jouant sur visible)!

si tu as des questions sur ce developpement, poste ici ton code

PS:tu arrives un poil trop tot j'ai prévu de traiter le sujet dans les jours qui viennent sur mon blog

[piff62]

Bonour Jim_Nastiq,

et merci pour ta réponse. Je vais essayer cette solution et n'hésiterai pas revenir donner des nouvelles !

Encore merci

Thomas

[piff62]

Alors,

Après quelques souci je suis arrivé a ce code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 <mx:List id="listeContacts" horizontalCenter="0" y="30" width="150" height="248" borderStyle="none" backgroundAlpha="0" dataProvider="{contacts.contact}" iconFunction="list_iconFunc">
 	<mx:itemRenderer>
 		<mx:Component>
 			<mx:HBox> width="150" rollOver="{appeleritemrenderer.visible=true;modifieritemrenderer.visible=true;supprimeritemrenderer.visible=true}" rollOut="{appeleritemrenderer.visible=false;modifieritemrenderer.visible=false;supprimeritemrenderer.visible=false}">
 				<mx:Image id="imageitemrenderer"/>
 				<mx:Label id="labelitemrenderer" text="{data.@name}" width="80"/>
 				<mx:Image id="appeleritemrenderer" source="images/appelerContact.png" visible="false" />
 				<mx:Image id="modifieritemrenderer" source="images/modifierContact.png" visible="false"/>
 				<mx:Image id="supprimeritemrenderer" source="images/supprimerContact.png" visible="false"/>
 			</mx:HBox>
 		</mx:Component>
 	</mx:itemRenderer>
 </mx:List>

Ceci fonctionne pour le rollover (cf imprim ecran) mais je n'ai pas le comportement voulu
En effet, lorsque je passe au dessus du test (le nom de mes contacts) les 3 petites icones s'affichent, mais dès que je veux aller cliquer sur l'une d'entre elles, elle disparait dès que je sort du champ texte

Aurait tu une idée du pourquoi ?
Je suis perdu

Merci d'avance

thomas