Tip Flex: Cerrar ventanas emergentes (PopUp) al hacer clic fuera de ellas

Cuando en una aplicación Flex queremos mostrar mensajes a los usuarios, ya sean de error o informativos, lo más probable es que hagamos uso de la clase PopUpManager, que nos permite mostrar componentes que hemos creado, como ventanas emergentes.

Una de las primeras solicitudes de los clientes y/o jefes, es que los PopUps puedan ser cerrados al hacer click fuera de la ventana, al estilo de los muchos PopUPs JavaScript que circulan por la red. Como muchos sabrán conseguir esto en JavaScript puede ser un verdadero pain in the ass, pero con AS3 no podría ser más fácil; sólo hace falta responder al evento MOUSE_DOWN_OUTSIDE de la clase FlexMouseEvent:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	width="492" height="334">

<mx:Script>
	<![CDATA[

		import mx.core.IFlexDisplayObject;
		import mx.events.FlexMouseEvent;
		import mx.managers.PopUpManager;

		private function showPopUp():void
		{
			//Inicializamos el componente a usar como PopUp
			var popUP:popUpWindow = new popUpWindow();
			//Creamos el PopUp
			PopUpManager.addPopUp(popUP, this, true);
			//Centramos el PopUP
			PopUpManager.centerPopUp(popUP);

			//Respondemos al Evento MOUSE_DOWN_OUTSIDE, para saber cuando
			//el usuario hace click fuera de la ventana y luego utilizamos
			//el método removePopUp para cerrar la ventana emergente
			popUP.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,
						function(e:FlexMouseEvent):void
						{
							PopUpManager.removePopUp(e.currentTarget as IFlexDisplayObject);
						});
		}
]]>
</mx:Script>

<mx:Button
	label="Mostrar PopUp"
	horizontalCenter="0" verticalCenter="0"
	click="showPopUp()"/>

</mx:Application>

Ver ejemplo

Como ven es bastante sencillo, también se puede usar mouseDownOutside directamente en el componente usado como PopUP:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
	width="302" height="166"
	backgroundColor="#FFFFFF" borderStyle="solid" borderColor="#000000"
	mouseDownOutside="closePopUp()">

<mx:Script>
	<![CDATA[
		import mx.managers.PopUpManager;

		//Este es el componente que usamos como PopUP usamos directamente
		// mouseDownOutside para llamar a closePopUp y cerrar así la
		// ventana emergente
		private function closePopUp():void
		{
			PopUpManager.removePopUp(this);
		}
	]]>
</mx:Script>

<mx:Label
	x="7.5" y="72"
	fontWeight="bold" fontSize="12"
	text="Haz click fuera de la ventana para cerrarla" />

<mx:Label
	x="10" y="10"
	fontWeight="bold"
	text="Ventana Emergente"/>

</mx:Canvas>

Y así no haría falta colocar el controlador del  evento al crear el PopUP:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	width="492" height="334">

<mx:Script>
	<![CDATA[
		import mx.core.IFlexDisplayObject;
		import mx.events.FlexMouseEvent;
		import mx.managers.PopUpManager;

		private function showPopUp():void
		{
			//Inicializamos el componente a usar como PopUp
			var popUP:popUpWindow = new popUpWindow();
			//Creamos el PopUp
			PopUpManager.addPopUp(popUP, this, true);
			//Centramos el PopUP
			PopUpManager.centerPopUp(popUP);
			//NO hace falta responder desde aqui al evento
			//MOUSE_DOWN_OUTSIDE.
		}
]]>
</mx:Script>

<mx:Button
	label="Mostrar PopUp"
	horizontalCenter="0" verticalCenter="0"
	click="showPopUp()"/>
</mx:Application>

Ver ejemplo

Pronto vendrán más tips para ayudar a facilitarnos el trabajo.

Por: Shogoki

2010

07/08

POSTED BY

shogoki_vnz

CATEGORY

Flex

Write comment