Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex PopUp – Centrer une fenêtre PopUp avec la méthode centerPopUp

Jusqu'à présent, tous les exemples que j'ai publié montre des PopUp qui s'ouvrent dans le coin haut gauche de l'application. La plupart du temps, ce n'est pas comme cela que vous voudrez afficher votre PopUp. La classe mx.managers.PopUpManager par laquelle vous créez les popup avec la méthode createPopUp() contient aussi une autre méthode static: centerPopUp().

Elle prend un seul paramètre, la référence vers le PopUp à centrer. PopUpManager fera ensuite le calcul de position suivant le conteneur parent du popup pour déterminer les nouveaux x et y.

Voici un exemple simple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			import mx.controls.TextArea;
			import mx.containers.TitleWindow;

			private var _window:TitleWindow;

			private function showWindow(event:MouseEvent):void{
				var isCentered:Boolean = center.selected;
				var textArea:TextArea = new TextArea;
				textArea.text = "Texte dans une TextArea qui va être ajouté à une PopUp utilisant TitleWindow";
				textArea.height = 100;
				_window = TitleWindow(PopUpManager.createPopUp(this, TitleWindow));
				_window.addChild(textArea);
				_window.showCloseButton = true;
				_window.addEventListener(CloseEvent.CLOSE, closeHandler);
				if (isCentered){
					PopUpManager.centerPopUp(_window);
				}
			}

			private function closeHandler(event:CloseEvent):void{
				PopUpManager.removePopUp(_window);
			}
		]]>
	</mx:Script>
	<mx:CheckBox id="center" selected="true" label="Centrer ?"/>
	<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

Attention, lorsque l'application est redimensionnée, la PopUp ne restera pas centrée. Pour cela, il faut ajouter un eventListener sur l'évènement resize du stage et lorsque cet évènement se produit, vous appelez PopUpManager.centerPopUp().