El artículo Fragmentos en Liferay 7.x muestra cómo se utilizan los fragmentos de página. Aparecen desde la versión 7 pero es en la 7.1 dónde podemos crearlos desde la interfaz del propio Liferay Portal y dónde están consolidados como tal.
Editor de Fragmentos
Su aparición obedece una vez más a la tendencia a modularizar, crear partes independientes más o menos pequeñas que puedan ser reutilizadas fácilmente en diferentes lugares.
¿Qué es un Fragmento en Liferay Portal?
Resumiendo, una porción de contenido web que puede ser usado en diferentes lugares. Está formado por HTML, CSS y JavaScript. Junto con todo lo que eso conlleva: todas las funcionalidades de HTML5, CSS3 y JavaScript más el API que provee Liferay y todos las librerías y frameworks que incluye Liferay Portal. Resultado: es posible crear módulos para Liferay sin entrar a desarrollar módulos OSGi. La desventaja es que al no ser módulos OSGi, no podemos controlarlos como tal. La ventaja es que podemos consumir servicios desde estos «módulos» o fragmentos. Los Fragmentos se agrupan en Colecciones que permiten agruparlos. Estas colecciones aparecen después cuando creamos una página de contenido.
Colecciones de Fragmentos
Cuando queremos usar Fragmentos para instanciarlos en alguna Página de Contenido, hemos de arrastrarlo desde el panel derecho de la pantalla de edición de la página. Cada colección que creemos será una categoría que aparecerá en el área elegida de este panel derecho:
Colección personalizada de Fragmentos
Secciones o Componentes
Fragmentos de tipo Sección
Genera una sección que permite instanciar dentro de ella componentes y otras secciones. Aparece en el área [Secciones] del panel derecho de la edición de Páginas de contenido.
Fragmentos de tipo Componente
Provee un componente que podrá formar parte de alguna sección. Aparece en el área [Generador de sección] del panel derecho de la edición de Páginas de contenido. ¿Cuál es entonces la diferencia real? La idea detrás de un Fragmento de sección es que provea directamente de todo un bloque de contenidos. El componente sería en todo caso, una parte de la sección.
El editor de Fragmentos
El editor de fragmentos dispone de 4 áreas bien diferenciadas:
HTML. Aunque en realidad podemos escribir aquí HTML, CSS y JavaScript, no es lo recomendable. Lo adecuado es disponer de cada código en su panel correspondiente.
Observaremos que aparece un elemento DIV por defecto cuyo atributo class viene con un valor de este modo: fragment_34960.
Lo normal es dejarlo tal cual, añadiendo nuestro contenido anidado dentro del DIV. Sin embargo, no es obligatorio siempre que seamos capaces de lidiar con las consecuencias.
CSS. Aparece una clase CSS por defecto, aplicada al DIV del área de HTML. Podemos modificarla, añadir nuestras propias reglas, clases, etc. Con todo, debería ser CSS aplicable solamente al fragmento.
JavaScript. Cualquier JavaScript aplicable al fragmento.
Es recomendable que todo el código JavaScript que añademos, se encuentre anidado dentro de la función que aparece por defecto.
El argumento que recibe la función es fragmentElement. Se trata de un objeto HTMLDivElement que representa al DOM del fragmento y nos permite manipularlo con facilidad.
Previsualización. Previsualiza el fragmento. Pulsando en los diferentes botones, será posible ver cómo se visualiza en diferentes dispositivos.
Utilizar los Fragmentos en Liferay 7.x, consiste básicamente en instanciarlo en la página o páginas de contenidos que necesitemos. Para ello, cuando estemos editando la página en cuestión, arrastraremos el fragmento hacia la página donde queremos instanciarlo. Nada más. De todas formas, existen otras formas de consumir un determinado fragmento que son menos frecuentes.
Consumir API de Liferay
Por supuesto, utilizando JavaScript podemos consumir el API que nos provee Liferay. La manera más común es con el uso del objeto: Liferay. Escribe esto en el área de JavaScript:
console.log(Liferay)
Te sorprenderas de todo lo que nos permite este objeto. Ejemplo: una acción muy común en Liferay es crear URLs (que en Liferay pueden ser muy aaaamplias). ¿Cómo hacerlo desde JavaScript? Pues mediante el uso del objeto Liferay aunque esto es lo bastante amplio como para otro artículo y se sale del tema a tratar.
Consumir servicios REST
Los servicios que podemos consumir utilizando JavaScript para construir el contenido del fragmento, pueden ser: los servicios que provee Liferay o bien otros servicios REST externos.
Consumir servicios de Liferay Portal
Por ejemplo, queremos obtener el usuario por medio de su email:
Existen multitud de servicios REST tanto públicos como privados que podemos utilizar para generar contenidos en Liferay y en un fragmento no es una excepción. La forma más rápidana llamada AJAX con el JQuery embebido en Liferay:
$.ajax({
url : '${URL_SERVICIO_REST}',
data : data,//person id to sent
type: 'POST',
dataType : "json",
success : function(data) {
/*
Aquí utilizamos la lógica que tengamos pensada usar sobre los
datos devueltos por la llamada exitosa.
*/
}
});
Sustituiremos URL_SERVICIO_REST por la URL de algún servicio REST. En la siguiente dirección, disponéis de multitud de servicios REST públicos para probar: https://any-api.com/
Conclusión
Como has podido comprobar, los Fragmentos en Liferay 7.x y su utilización, se hace un tanto evidente: crear porciones de contenido para las páginas que se repiten y se pueden reutilizar. Sin embargo, los Fragmentos ofrecen la oportunidad de crear componentes dinámicos que podemos usar en nuestras páginas sin que tengamos que desarrollar plugins, aplicaciones o componentes OSGi adicionales. Nada más, un saludo y hasta otra.
Tienes varias formas aunque recuerda que: – En principio, JavaScript debe ir en el Theme usado. – Las páginas tienen su apartado de JavaScript. – Las aplicaciones llevarán su JavaScript (si es necesario).
Sin embargo, si quieres añadir varios JavaScript a un fragmento, lo puedes hacer de varias maneras: – Añadir las etiquetas script src que quieras en el área de HTML. – Usar las etiquetas lfr- oportunas, también el área de HTML. – Usando el API del objeto Liferay en el área de JavaScript. En este mismo artículo se menciona brevemente su uso. – Usando el API del objeto AUI en el área de JavaScript. – Usar las nuevas funcionalidades de las últimas versiones de ECMAScript como import, en el área de JavaScript.
Como ves las posibilidades son muchas pero, reitero: no debemos meter mucho JavaScript en un fragmento.
(Los patrocinadores incluyen enlaces de afiliados, con cuyos servicios llevamos años, sin queja alguna y por tanto contrastados y recomendados por nosotros)
2 comentarios
¿Y si tengo una aplicación que contiene, además del HTML y del CSS, VARIOS archivos JS?, ¿Cómo lo hago?
Hola José Luis:
Tienes varias formas aunque recuerda que:
– En principio, JavaScript debe ir en el Theme usado.
– Las páginas tienen su apartado de JavaScript.
– Las aplicaciones llevarán su JavaScript (si es necesario).
Sin embargo, si quieres añadir varios JavaScript a un fragmento, lo puedes hacer de varias maneras:
– Añadir las etiquetas script src que quieras en el área de HTML.
– Usar las etiquetas lfr- oportunas, también el área de HTML.
– Usando el API del objeto Liferay en el área de JavaScript. En este mismo artículo se menciona brevemente su uso.
– Usando el API del objeto AUI en el área de JavaScript.
– Usar las nuevas funcionalidades de las últimas versiones de ECMAScript como import, en el área de JavaScript.
Como ves las posibilidades son muchas pero, reitero: no debemos meter mucho JavaScript en un fragmento.
Gracias por comentar José Luis.