Cargar un contenido web con un dialog de ALLOY Liferay 6.1

por

Gracias al plugin que nos ofrece Liferay con ALLOY podemos hacer infinidad de cosas muy útiles aunque descubrirlas no suele ser fácil.

Esta vez os voy a enseñar a generar un dialog o popup que cargue un contenido web generado desde el panel de control de Liferay 6.1.

Anteriormente os enseñe como crear un dialog/popup genérico con ALLOY y ahora os voy a indicar como hacer para que cargue un contenido web. Para ello usaremos el siguiente código javascript:

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

A.one('.politica').on(
		'click',
		function() {

			  var instance = new A.Dialog({
			  bodyContent: 'Dialog body',
			  centered: true,
			  constrain2view: true,
			  destroyOnClose: true,
			  draggable: false,
			  height: 500,
			  resizable: false,
			  stack: true,
			  title: 'Política de Privacidad',
			  width: 600,
			  modal:true,
			  cssClass: 'popup',
			  after:{

			  bodyContentChange: function(event){
						A.all('.popup link').remove();
			  }},
			  id: 'popup-politicaPrivacidad',
			  buttons: [
				 {
				   label: 'Aceptar',
				   handler: function() {
					 instance.close();
				   }
				 }]

		   }).plug(
				A.Plugin.IO,
				{
					uri: '/c/journal/view_article_content?cmd=preview&groupId=12078&articleId=15009&version=1.0'
				}
			).render();

		});
});

En el código anterior "uri" sería la URL relativa del contenido web y la podemos obtener de la siguiente manera:

Vamos a Panel de Control->ContenidoWeb y buscamos nuestro contenido. Clicamos sobre Acciones->Vista Previa y se abrirá una página nueva. Ahora debemos de cojer la URL de la página(i.e.: http://localhost:8080/c/journal/view_article_content?cmd=preview&groupId=12078&articleId=15009&version=1.0 ) y quedarnos con "/c/journal/view_article_content?cmd=preview&groupId=12078&articleId=15009&version=1.0". Esta será la ruta que usaremos como ruta relativa.

Al hacer esto nos surge un problema y es que este contenido que se carga sobre el popup tiene unos repetidos que pueden hacer que nuestra página se descoloque por lo que debemos de eliminar estos CSS nada mas cargar el popup. Para ello debéis fijaros en el "after" del código que es quien lo hace.

Esto nos puede servir, por ejemplo, para cargar automáticamente sobre un popup un contenido de Política de Privacidad con solo poner un class en un elemento de página(el ejemplo esta hecho para ese caso).

Os recomiendo añadir el código anterior en el tema de apariencia para tenerlo disponible para su uso en todo en portal donde se use el tema de apariencia.

COMENTARIOS

09-02-2014 12:51:22
Hola Camilo, me puedes daqr algún dato más? Necesito saber si tu popup se llega a abrir pero no carga nada dentro o si ni siquiera llega a abrirse. Si se abre pero no carga nada es problema de que tu URI está mal puesta. Si no es problema de la forma de abrirlo que tienes. Saludos,
08-02-2014 17:13:30
Disculpa veo esto por acá y quiero saber si me pueder ayudar por favor, resulta que necesito desplegar en un popup un contenido previamente creado, pero no logro que me funcione el script que tu pusiste, me podrias colaborar con algún dato ? estoy usando liferay 6.1
18-12-2012 22:18:27
Mirando un poco tu código creo que no lo estás planteando bien. No tiene sentido meter dentro de un option un <a>. Lo que tu deberías utilizar es el evento onChange de javascript en el select. Este evento se lanza cada vez que cambias el option del select y desde ella puedes hacer lo que creas oportuno aunque te recomiendo que si quieres asegurarte 100% que te va a funcionar en IE utilices ALLOY. Un ejemplo de uso sería este:
Espero que te sirva.
18-12-2012 19:03:23
Estoy creando un hook con el porlet journal y journal_content Bien el objetivo es el siguietne: He creado un select lo que se desea es que cuando se selecione un valor del option este valor equivalga ha una funcion javascrip por ejemplo <aui:option label="<%= article_Display.getTitle()%>" value="<br /> <a href='javascript:alert(8)'> Información </a>"/> El codigo anterior funciona pero tengo que recargar la pagina(actualizar en modo vista) sino el link indica javascrip:void(0), cabe destacar que en firefox funciona bien mas Internet eplorer no Ayuda o una idea porfavor.
05-12-2012 15:21:54
Gracias por tu pronta respuesta Chekis.
17-11-2012 03:37:45
Es una funcion javascript disponible desde cualquier punto del portal. No necesitas incluir nada mas que la función arriba escrita englobada por <script></script> como cualquier javascript que metemos. POr ejemplo, puedes hacerlo desde el tema de apariencia, en el main.js o en el propio portal_normal.vm. O si lo prefieres directamente desde un portlet. Si necesitas algo más o no sigues sin enteder algo coméentamelo.
16-11-2012 14:13:46
Estoy realizando un trabajo en el cual necesito utilizar esta funcion, soy nuevo en liferay megustaria saber como llamo esta funcion para desplegar el contenido. Gracias de antemano.

DEJA TU COMENTARIO