Fragmentos en Liferay 7.x

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. 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:

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.

Hola Mundo de los Fragmentos

Las posibilidades son muchas. Visualiza el vídeo más arriba y verás un ejemplo.

Usar un Fragmento

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:

Liferay.Service(
'/user/get-user-by-email-address',
{
companyId: Liferay.ThemeDisplay.getCompanyId(),
emailAddress: 'test@liferay.com'
},
function(obj) {
console.log(obj);
}
);

Nos mostrará un resultado en consola, más o menos como esto:

{…}​
agreedToTermsOfUse: true
​comments: ""
​companyId: "20101"
​contactId: "20131"
​createDate: 1559343752131
​defaultUser: false
​emailAddress: "test@liferay.com"
​emailAddressVerified: true
​externalReferenceCode: ""
​facebookId: "0"
​failedLoginAttempts: 0
​firstName: "Test"
​googleUserId: ""
​graceLoginCount: 0
​greeting: "¡Bienvenido Test Test!"
​jobTitle: ""
​languageId: "es_ES"
​lastFailedLoginDate: null
​lastLoginDate: 1562142243081
​lastLoginIP: "127.0.0.1"
​lastName: "Test"
​ldapServerId: "-1"
​lockout: false
​lockoutDate: null
​loginDate: 1562144162148
​loginIP: "127.0.0.1"
​middleName: ""
​modifiedDate: 1562144162154
​mvccVersion: "28"
​openId: ""
​portraitId: "0"
​reminderQueryAnswer: "a"
​reminderQueryQuestion: "what-is-your-father's-middle-name"
​screenName: "test"
​status: 0
​timeZoneId: "UTC"
​userId: "20129"
​uuid: "7b88a644-b9fd-b749-c4ab-f7091b4bd5f5"
​: Object { … }
testeos:3892:17

Consumir servicios REST públicos

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.