Publié par

Il y a 11 ans -

Temps de lecture 3 minutes

Les évènements dans des composants Flex réutilisables

Dans un précédent article, nous vous présentions comment créer des composants Flex réutilisables. Nous allons ici poursuivre la présentation en vous parlant de la gestion des évènements au sein de ces composants. En effet, il n’est pas évident de gérer les évènements lorsque ceux-ci sont dans des fichiers MXML différents. Alors comment faire ?

Une solution existe, utiliser les tags Metadata et plus précisemment le tag Event. Dans l’exemple du billet précédent, nous avons créé plusieurs composants pour mettre en place un formulaire. Nous allons effectuer le même exercice, avec une liste de contacts dans laquelle il est possible d’ajouter des utilisateurs. Nous verrons comment deux composants indépendants l’un de l’autre pourront communiquer et échanger des données.

Ce billet se découpe de la façon suivante :

Mise en place des composants réutilisables

Pour créer notre application, nous allons mettre en place :

  • ContactListView : une liste de contacts contenant une Datagrid et un bouton Ajouter


	
		
			
		
	
	


  • ContactFormView : un formulaire contenant un champ texte nom, un autre prénom et deux boutons Valider et Annuler

	
		
			
		
		
			
		
		
			
				
				
			
		
	

Ils seront stockés dans une pile de vues ({{ViewStack}}). Le composant ViewStack contient des vues filles dans lesquelles il est possible de naviguer. Seule une vue fille peut être affichée à la fois grâce à la propriété selectedItem ou selectedIndex. En manipulant ce composant, nous allons tenter de passer d’une vue à l’autre en modifiant la valeur de selectedIndex.
selectedIndex = 0 : le ViewStack affiche ContactListView
selectedIndex = 1 : le ViewStack affiche ContactFormView


	
		
		
	

Lorsque l’utilisateur clique sur le bouton Ajouter, l’application change de vue pour passer sur le formulaire. Les boutons Valider et Annuler quant à eux permettent de revenir sur la première vue.

La partie graphique est en place mais comment signaler à la pile de vue de passer de l’une à l’autre ? Effectivement depuis une vue, comment peut-on signaler à son parent qu’il s’est passé quelque chose ?

C’est là que les tags Metadata viennent à notre secours.

Qu’est ce qu’un tag Metadata ?

Un tag Metadata fournit au compilateur des informations sur la façon dont le composant MXML est utilisé dans une application Flex. Il existe 12 tags Metadata documentés dont entre autres Bindable, Embed, Effect et celui que nous allons utilisé Event. Le tag Event permet de définir des évènements que le composant concerné peut déclencher, ce qui convient très bien à notre problème.

Et concrètement ?

Côté déclencheur

Créons un tag Event dans notre vue ContactListView:


    [Event(name="addContact", type="flash.events.Event")]

Lorsque l’utilisateur clique sur le bouton Ajouter, le composant déclenche l’évènement addContact.


	


	
		
	


Côté abonné

Le parent de la vue, qui est ici l’application, ajoute un listener sur la vue pour attendre l’évènement addContact. Une fois l’évènement déclenché, nous changeons de vue.


	


	
	


Résultat

En faisant de même avec les boutons Valider et Annuler, nous arrivons au résultat suivant:

Ce billet présente un exemple très simple d’utilisation du tag Event avec un évènement de type flash.events.Event. Mais vous pouvez créer vos propres classes d’évènements comme le montre le livedocs. Le code source est disponible ici, vous trouverez l’exemple complet avec la gestion de l’ajout d’un contact et le retour vers la liste.

Références

http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_2.html

Publié par

Commentaire

2 réponses pour " Les évènements dans des composants Flex réutilisables "

  1. Publié par , Il y a 9 ans

    Je trouve ton article super!tu mets en avant l’essentiel de la programmation événementielle .
    D’une part ,parce qu’elle est essentielle dans n’importe quel langage .
    D’autre part ,elle permet de faciliter la communication entre les MX .
    Certe je suis débutant en Flex ,mais j’avoue que je comprends rapidement ce langage RIA .
    A noter que je suis Architecte en J2ee/ DotNet et ayant déjà une expérience sur d’autres RIA ,notamment Silverlight 4 et GWT.

    Merci d’avance.

  2. Publié par , Il y a 8 ans

    Merci, merci, merci beaucoup!!! Je t’ai remerciée? Ah oui, et merci beaucoup!
    Seule source (du moins référencée sur google) abordant la solution au problème que j’avais!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.