Adobe Flex Tutorial - Adobe Flex Tutorial

14jan/0910

Flex PopUp – Créer une PopUp à partir d'un composant MXML ou ActionScript

Dans les précédents exemples sur les PopUp Flex, vous avez pu voir des cas d'utilisation simplistes, juste pour montrer le fonctionnement de la méthode createPopUp(). Mais la plupart du temps, vous voudrez utiliser des composants personnalisés, c'est-à-dire des composants que vous aurez codé en MXML ou en ActionScript (puisque si vous avez suivi, cela revient à peu près à la même chose).

Pour l'exemple, voici un composant MXML qui est une sous-classe de TitleWindow avec une TextArea et un handler pour fermer la fenêtre PopUp. Ici, je vais donc créer un nouveau composant MXML appelé TextAreaWindow.mxml dans mon répertoire de projet qui va contenir:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" showCloseButton="true" close="closeHandler(event)">
	<mx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			private function closeHandler(event:CloseEvent):void{
				PopUpManager.removePopUp(this);
			}
		]]>
	</mx:Script>

	<mx:TextArea height="200" width="200" text="Texte dans une TextArea qui va être ajouté à une PopUp bla bla"/>

</mx:TitleWindow>

Une fois que vous avez crée ce composant, vous pouvez créer des PopUp basés sur ce composant en utilisant le code suivant dans votre MXML principal:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			private function showWindow(event:MouseEvent):void{
				PopUpManager.createPopUp(this, TextAreaWindow);
			}
		]]>
	</mx:Script>
	<mx:Button label="Ouvrir une PopUp avec PopUpManager" click="showWindow(event)"/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

Si vous voulez, vous pouvez bien sur faire votre propre composant en ActionScript mais pour les débutants, mieux vaut le faire en MXML. Pour cela, créez une classe (ici, TextAreaWindowAS.as) avec ce contenu:

COPIER-COLLER

Actionscript:

package
{
import mx.containers.TitleWindow;
import flash.events.Event;
import mx.managers.PopUpManager;
import mx.events.CloseEvent;
import mx.controls.TextArea;
public class TextAreaWindowAS extends TitleWindow
{
public function TextAreaWindowAS()
{
super();
this.showCloseButton = true;
}
private function closeEventHandler(event:CloseEvent):void{
PopUpManager.removePopUp(this);
}
override protected function createChildren():void
{
super.createChildren();
this.addEventListener(Event.CLOSE, closeEventHandler);
var txtArea:TextArea = new TextArea;
txtArea.text = "bla bla encore du texte pour le texteArea";
addChild(txtArea);
}
}
}

Et comme classe de référence, précisez ensuite TextAreaWindowAS (puisque c'est le nom de la classe AS3).

Remplis sous: ActionScript, Exemple, MXML, PopUpManager, TextArea || Taggé comme: ActionScript, createPopUp, MXML, PopUpManager, TitleWindow Laisser un commentaire

Articles similaires

Commentaires (10) Trackbacks (0) (Souscrire aux commentaires de cet article)

om
3 février 2009

Est-ce vraiment propre d'avoir la création du popup au niveau de la classe appelante et la fermeture dans la classe appelée ? La classe TextAreaWindow est-elle censée s'avoir qu'elle sera créée sous forme de popup ?

Ne serait-ce pas mieux de faire remonter l'événement close au niveau de l'appellant qui décidera alors de fermer la popup?
fnicollet
3 février 2009

Cela dépend de ton application mais en principe, tu sais déjà comment tes composants seront manipulés. Tu peux aussi redispatcher l'event close vers l'application principale tout dépend de l'architecture de ton appli ^^
mr monstre
26 janvier 2010

Bonjour,
quelqu'un peut-il me donner un indice (ou une solution complète pour faire passer une variable contenue dans un composant utilisé dans une pop-up vers l'appli.mxml qui a ouvert la pop-up ?

Merci d'avance.

M Monstre
fnicollet
27 janvier 2010

Un indice alors
http://www.flex-tutorial.fr/2009/10/19/flex-modules-communication-decouplee-entre-modules-avec-eventbroker/

Fabien
mr monstre
27 janvier 2010

gé-ni-al !
ça marche…

Youhou !

Attention Fabien, tu as maintenant correctement répondu (voir plus) à deux de mes trois questions sauras-tu relever le défi de la dernière, celle pour récupérer la source d'un objet graphic dans un textFlow lorsqu'on le sélectionne ?

Non, toutes blagues à part un grand merci.
C'est un petit bijoux cette classe EventBroker.
Benjamin
Avangel
3 avril 2010

Une note TRES IMPORTANTE concernant Flex 4 : si vous essayez de passer un composant Spark au PopupManager (que ce soit pour
COPIER-COLLER
Actionscript:
createPopup()
ou
COPIER-COLLER
Actionscript:
addPopup()
), vous obtiendrez une erreur au runtime assez incompréhensible (une histoire de champ qui n'existe pas au niveau de la classe SystemMaanger).

==> En Flex 4 donc, il faut que votre composant hérite d'un conteneur MX !!!
A noter toute fois que si votre composant est constitué d'une classe AS qui hérite de
COPIER-COLLER
Actionscript:
SkinnableComponent
, et que son skin hérite d'un conteneur MX, ce workaround fonctionne quand même.

Un bug a été ouvert chez Adobe, et refermé car ils considère ce workaround comme suffisant. J'ai ouvert un "sous-bug" pour leur demander au moins de mettre à jour la doc à défaut de corriger réellement le bug.

Voilà le bug que j'ai ouvert : http://bugs.adobe.com/jira/browse/SDK-26126
Et un tuto où ils expliquent le bug et le workaround plus en détail : http://butterfliesandbugs.wordpress.com/2010/01/22/avoiding-a-flex-4-error-when-using-popupmanager-addpopup/

Voilà, ça m'a coûté quelques heures à galérer bien comme il faut... J'espère que ça pourra aider quelqu'un !

Avangel.
Alex
20 juillet 2010

Bonjour.

je débute en Flex et j'ai utilisé ce principe pour avoir le contenu d'une corbeille qui s'affiche dans un pop-up.

Cependant, je dois faire appel a un moment au datagrid se trouvant dans le pop-up. Comment pourrais-je l'appeler sachant que mon deuxième .mxml a pour nom Trash et mon tableau dgTrash ?

La syntaxe que je souhaite utiliser est celle-ci
=> datagrid.dataProvider.removeItemAt(datagrid.selectedIndex);

Pour des raisons d'utulisations, cette fonction ne peut QUE se trouver dans le mxml principal. La déclaration du datagrid n'est donc pas dans le même fichier que l'appel de la fonction.

Sinon, un grand merci et bon courage pour ton site ! Complet, accessible, très bien écrit : bref, une super doc pour toutes personnes souhaitant apprendre flex. Je te remercie pour ton site encore une fois ! Du très bon boulot !!
fnicollet
20 juillet 2010

Salut,
Merci pour le commentaire
Alors déjà, ton objet Trash (ta pop-up) devrait exister dans ton code, en temps que variable (pas une variable locale à une fonction.
Prendre pour exemple, la variable _window de ce tutorial:
http://www.flex-tutorial.fr/2009/01/14/flex-popup-savoir-si-une-popup-est-deja-ouvert-avec-la-propriete-ispopup/
Ensuite, tu pourras accéder à ta DataGrid par cet objet.
Imaginons que tu aie:

COPIER-COLLER
Actionscript:
private var _trash:Trash = null; // null au départ, après une fois que ta pop-up est ouverte, ce n'est plus null.
Dans ton code, tu peux faire:

COPIER-COLLER
Actionscript:
_trash.datagrid.dataProvider.removeItemAt(_trash.datagrid.selectedIndex);
Perso, je te conseillerai plutôt de faire une méthode removeSelectedItem():void dans Trash et de l'appeler. Dans cette méthode, tu fais ton removeItemAt. C'est plus propre, ca évite d'aller chercher à chaque fois ta dataGrid dans la popup.

Fabien
zabdoul
2 novembre 2010

Bonjour;

Débutante en Flex 4, je souhaite utiliser la méthode exposée plus haut.
En effet, je développe une application AIR et je souhaite afficher un composant titleWindow lors que je clique sur un élément du menu.
Je tiens à préciser que dans mon fichier de paramétrage de l'application j'ai renseigné les constantes suivantes : "systemchrome" à NONE et "transparent" à TRUE.

Lorsque je clique sur un élément de mon menu, je souhaite ouvrir mon composant mxml. Pour ce faire, j'ai écris le code suivant:

COPIER-COLLER
Actionscript:
var tw:TitleWindow = new wParamGlob();

PopUpManager.addPopUp(tw,systemManager.stage, false);
wParamGlob étant mon composant mxml.

Or, lorsque je clic sur le bouton, rien ne se passe!!!!

Si vous avez une idée sur le dysfonctionnement, je vous en serai très reconnaissante.

Msrci par avance.
fnicollet
2 novembre 2010

Bonjour zabdoul,
Utilisez plutôt la méthode PopUpManager.createPopUp et pas addPopUp. Notez tout de même que cette pop-up sera intégrée à votre fenêtre courante Air et n'ouvrira pas une nouvelle fenêtre (pour cela, utiliser un Window et pas un Pop-up).

Fabien