Crear popup/dialog con ALLOY en Liferay 6

Para generar los típicos bocadillos que utiliza liferay para mostrar las ventanas de configuración, acciones, etc. Su uso es bastante sencillo si se usa de forma correcta.

Para generar un bocadillo nos valdremos de la librería "aui-dialog" que nos ofrece las funciones necesarias para generarlo todo. Las opciones de configuración de la ventana son numerosas pero nosotros vamos a abordar unas cuantas en el ejemplo y explicar más adelante para qué sirve cada una, las principales.

Como siempre, el código de ejemplo es el siguiente:

AUI().ready('aui-dialog', function(A) {

   var instance = new A.Dialog({

      bodyContent: 'Dialog body',

      centered: true,

      constrain2view: true,

      destroyOnClose: true,

      draggable: true,

      height: 250,

      resizable: false,

      stack: true,

      title: 'Dialog title',

      width: 500,

      modal:true,

      cssClass: 'clasePrueba',

      id: 'identificadorDialog',

      buttons: [

         {

           text: 'Alerta1',

           handler: function() {

             alert('alerta1');

           }

         },

         {

           text: 'Alerta2',

           handler: function() {

             alert('alerta2');

           }

         }

      ]

   }).render();

});

Con ese ejemplo, prácticamente, podemos generar todo tipo de bocatas completos. Los principales parámetros que podemos configurar son los siguientes:

bodyContent: Es el contenido del dialog. Puede contener tanto texto plano, como código, como portlets. Necesita un string.

centered: Establece si queremos que el dialog salga centrado en la pantalla. Admite valores true o false.

constrain2view: Comprime el dialog para que solo se vea la región visible del portlet. Admite valores true o false.

destroyOnClose: Destruye el dialog cuando lo cerramos. En caso de no destruirlo, quedaría creado en el código pero oculto. Admite valores true o false.

draggable: Establece si queremos que podamos arrastrar el bocadillo o no. Admite valores true o false.

height: La altura del bocadillo. Necesita un valor numérico.

resizable: Permite redimensionar el bocadillo creado mediante un pequeño icono que sale en una esquina. Admite valores true o false.

title: Establece el título del bocadillo. Necesita un string.

width: El ancho del bocata. Necesita un valor numérico.

modal: Si se pone a true, hace que al mostrar el dialog se muestre un overlay oscuro por detras de él que deshabilita todo lo que hay por detrás de él. Admite valores true o false.

buttons: Permite añadir botones al dialog estableciendo simplemente el titulo del botón y una acción a llevar a cabo tras clicarlo. Podemos ver su modo de uso en el ejemplo.

close: Muestra el icono de cerrar el bocadillo. Admite valores true o false.

cssClass: Añade una clase al dialog. Necesita un string.

id: Añade un id al dialog. Necesita un string.

Además de todo ésto, teneis toda la documentación necesaria y ampliada en el siguiente enlace.