Comunidad de diseño web y desarrollo en internet online

Mostrar una alerta antes del cierre de una aplicación AIR

En este tip mostraré como crear una ventana de alerta cuando le demos al botón de cerrar en una aplicación AIR, teniendo que validar el cierre evitando que se cierre directamente. De esta manera podemos controlar que el usuario cierre la aplicación si haber realizado una operación necesaria, pr ejemplo guardar los cambios realizados en el caso de tratarse de una a aplicación que edite documentos.



Lo primero que deberemos hacer es colocar la función a realizar cuando se detecte el evento de cierre de la aplicación (osea, cuando el usuario cierra la aplicación).

Código :

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" closing="cerrarApp(event)">


Ahora escribiremos la función. El punto importante aquí es como evitar el cierre de la aplicación, ya que el usuario realmente a clicado en el botón de cerrar. Esto lo conseguimos con el método preventDefault() de la clase Event. Con este método conseguimos que el evento no ejecute las funciones por defecto y por lo tanto no se cierra la aplicación. Lo que haremos en su lugar es abrir una ventana de Alert.

Código :

public function cerrarApp(e:Event):void
{
   e.preventDefault();
   
   Alert.yesLabel = "Si";
   
   Alert.show("¿Realmente quiere salir?","Salir aplicación", Alert.YES | Alert.NO, null, cerrar, null, 2);
}




Con yesLabel decimos que aparezca el texto "Si" en el botón de validar en lugar de "Yes". Y con el 2 al final de los parámetros decimos que el botón seleccionado por defecto sea el segundo, osea el "No".

También le estamos indicando que al clicar sobre cualquiera de los botones se ejecute la función "cerrar" que es la siguiente:

Código :

private function cerrar(e:CloseEvent):void
{
   if(e.detail == Alert.YES)
   {
      this.nativeApplication.exit();
   }
}


Donde le estamos indicando que si el botón seleccionado es el "Si" entonces cierre la aplicación. En el caso de seleccionar el "No" no se ejecuta nada y por lo tanto la aplicación sigue abierta.

Segundo ejemplo



El código anterior se ejecutaría siempre que le demos al icono de cerrar aplicación. Pero lo interesante es poder controlar cuando queremos mostrar esa advertencia.

Por ejemplo en el caso de tener una aplicación que sea un editor de texto. Si le damos al botón de cerrar la aplicación teniendo cambios sin guardar mostraremos el Alert, pero en el caso de haber guardado los cambios previamente cerraremos directamente la aplicación.

Primero crearemos una variable booleana que controlará si la aplicación se cierra automáticamente o requiere mostrar la advertencia.

Código :

private var cierre:Boolean = true;


En la función que se ejecuta al cerrar la aplicación colocaremos un condicional que detecte el estado de esa variable.

Código :

private function cerrarApp(e:Event):void
{
   e.preventDefault();
   
   if(cierre == false)
   {
      Alert.yesLabel = "Si";            
      Alert.show("¿Desea guardar los cambios antes de salir?","Salir aplicación", Alert.YES | Alert.NO | Alert.CANCEL, null, cerrar, null, 3);
   }
   else
   {
      this.nativeApplication.exit();
   }
}




Lógicamente esa función "cierre" la deberemos controla con el resto de funciones de la aplicación. Es decir, todas las funciones que realicen cualquier cambio que deba ser guardado deberán colocar esa variable a "false", y la función que realice el guardado de datos deberá colocar la variable a "true".

La función de cierre quedaría asi:

Código :

private function cerrar(e:CloseEvent):void
{
   if(e.detail == Alert.YES)
   {
      guardarDatos();               
      this.nativeApplication.exit();
   }
   else if(e.detail == Alert.NO)
   {
      this.nativeApplication.exit();
   }
}


De manera que si clicamos "Si" ejecutaríamos la función que nos guarda los datos y cerraríamos después la aplicación, si clisásemos "No" cerraríamos directamente y si clisásemos "Cancel" entonces no se ejecutaría nada y no cerraríamos la aplicación.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate