Importar Recursos en Liferay 7 desde el tema

Liferay provee a los desarrolladores de una herramienta que te fascilitará la importación de recursos como Pages, Structures, Templates, Applications Display Templates (ADTs), Web Content y Documents and Media a un Portal de Liferay.

Todo esto es posible gracias al modulo de importación de recursos de Liferay, mejor conocido como resource importer tool, la cual a traves del deploy de un Tema de Liferay hará toda la mágia.

Comencemos por saber que todos los recursos que deseemos importar desde el tema deben estar bajo el folder [theme-name]/src/WEB-INF/src/resources-importer.

Todos los assets a importar deben estar bajo la siguiente estrucutura de carpetas:

En la estrucutura anterior podemos notar que los recursos a importar estan separados por folders.

Estructuras

Las estructuras son aquellas que nos dan el esqueleto de campos ó elementos disponibles para crear contenido, campos que pueden ser de tipo texto, fecha, documento, html entre algunos otros.

Para poder añadir estos campos con el resource importer desde el tema, debemos crear un archivos con extensión JSON, el cual debe contener una propiedad array  (availableLanguageIds) para los idiomas, de igual manera tendrá una propiedad que define el idioma por defecto (defaultLanguageId) y para añadir nuestros campos tendremos nuevamente una propiedad array (fields), la cual contendrá un objecto por cada campo. Cada objeto tendrá el label, el name, el tipo de dato, propiedades booleanas que nos en las que definimos si el campo es repetible, si es indexable, si queremos mostrar el label entre algunas otras. Para tener un poco más claro esto, dale un vistazo a la estructura siguiente:

Plantillas (Templates)

Bien, ahora te preguntarás como puedes obtener la información de de los campos de una estructura, bueno, para eso tenemos los templates, los cuales fungen como plantillas para renderear los campos de una estrucutura.

Para añadir templates al resource importer, debemos crear un folder el cual debe de coincidir en nombre con el nombre del folder que va a contener a los articles, como por ejemplo:

Estos pueden ser escritos con sintaxis de Velocity ó Freemarker (el recomendado por Liferay) los cuales son motores para la generación de plantillas, estos separan la lógica de la vista y son server site, es decir, se compilan de lado del cliente.

En el código anterior tenemos un template el cual obtiene el título de una noticia, el autor, el resumen (summary), el cuerpo (body), el thumbnail y una imagen. Todos estos campos son puestos entre tags de HTML para darle cuerpo y forma a nuestras noticias.

Documentos

Para el caso del directorio documents pudes agregarlos directamente bajo este los recursos de tipo imágen, video ó algún otro documento como PDF, XLS, DOCX, etc. o bien, puedes crear subfolders para separar y tener mejor ordenados estos tus ducumentos.

Contenido Web (Articles)

Para añadir contenido debes agregar un folder contenedor dentro de articles. Al igual que con los documentos, tu puedes agregar un folders extra para ordenar de mejor manera tu contenido.

Por ejemplo un folder llamado news, entonces nos quedaría algo así:

../journal/articles/web content/news

Por otro lado el contenido que deseemos añadir debe estar en formato XML.

Como podemos ver en el bloque anteior, todos los elementos que añadimos en nuestra estructura son nodos de XML con que agregan el contenido a traves del tag <dynamic-element> que a su vez contiene el tag <dynamic-content>. Dentro de este ultimo tag tenenos una notación particular ![CDATA[ …]] dentro de la cual va el contenido, como el summary, body y las imágenes. 

El tag <dynamic-element> tiene como atributos el nombre del elemento, el tipo y el tipo de indexamiento, los cuales fueron proporcionados en el JSON de la estrucutura.

El tag <dynamic-content> tiene como atributos el idioma y el tipo de contenido.

Aplication Display Templates (ADTs)

Los Applications Display Templates o ADTs son utiles para renderear un set de articles, los cuales pueden ser iterados usando sintaxis de Freemarker. Para poder agregar ADTs a nuestro resource importer requerimos de un folder llamdo asset_entry el cual debe estar bajo application_display. 

En la imágen anterior se puede ver la estructura de directorios explicada anteriormente. A continuación el código del ADT News and Events Archive.

 

Sitemap

Pareciera que ya tenemos todo listo para importar nuestros recurso, pero no, aún falta algo muy importante, el archivo sitemap.json 

En este archivo especificaremos las páginas que deseamos crear, los layout templates que queremos usar para cada página, el mapping de nuestro contenido web, los assets y la configuración de los portlets la cual es porporcionada por el tema.

La primera propiedad de nuestro archivo json, es un array con el tipo de páginas que queremos incluir en el importer, publicPages (páginas publicas) ó privatePages (páginas privadas). Posteriormente un objeto que contiene porpiedades que definen el friendlyURL (url amigable), layoutTemplateId (plantilla a utilizar en nuestra página), name (nombre de nuestra página). También contiene un array de columnas (columns) donde añadiremos nuestros portlets (esto no significa que las columnas sean el layout, para eso esta el layoutTemplateId) los cuales son añadidos en la propiedad portletId y portletPreferences, en está ultima propiedad es donde definimos configuraciones para nuestro portlet, por ejempo, si tenemos un Asset Publisher Portlet, este tiene configuraciones como el tipo de ADT con el que va a presentar los articles, configuración de estilos con el portlet decorator, el comportamiento del los links para ver el contenido en otra página o en el mismo portlet entre algunas otras.

Vamos a imaginar que deseamos crear cuatro páginas publicas llamadas home, my workspace, my life, about us, las cuales usarán un layout template de  una columna, y en el que cada página solo contendrá un portlet, en este caso el asset publisher portlet. Para hacer un poco más ulustrativa esta idea, a continuación el sitemap.json.

 

Ya casi terminamos, lo unico que nos falta es decirle a nuestro tema donde deseamos hacer importar recurso al momento de hacer deploy de nuestro tema ya que por defecto, Liferay crea un site template para importar nuestros recursos, pero como le digo eso? bien, cuando construimos un tema usando el theme genarator tool, automáticamente se crea un archivo llamado liferay-plugin-package.properties.

Con las propiedades resources-importer-target-class-name y resources-importer-target-value=[site name] le podemos especificar un site, solo debemos de estar seguros del nombre de site que estamos proporcionando, ya que si nos equivocaramos, podríamos perder contenido que ya tengamos creado en Liferay.

Para nuestro ejemplo, agregaremos esas propiedades de la siguiente manera:

Ahora solo a hacer el deploy de nuestro tema para importar contenido en nuestro ambiente de Liferay.

Para más información puedes consultar la documentación oficial de resource importer de Liferay.

Publicado por

Eduardo Juarez

Eduardo es un experimentado Desarrollador Web Enterprise, sus conocimientos abarcan tecnologías web open source y privadas. Recientemente ha comenzado a trabajar con Liferay en su versión DXP.

2 thoughts on “Importar Recursos en Liferay 7 desde el tema”

  1. Hola Eduardo, muy buen contenido la verdad! Hay poco de Liferay, y los DEV nos vemos en un mundo infinito 🙂 Ahora con los ADT y las estructuras es todo mas simple.
    Una duda que tengo, despues de implementar el código… veo que

    Me devuelve y hash de tipo:

    {“groupId”:”353512″,”name”:”image.jpg”,”alt”:””,”title”:”Image.jpg”,”type”:”document”,”uuid”:”41d231f7-58f7-f5b5-b4fb-cecca7a29e60″,”fileEntryId”:”371995″,”resourcePrimKey”:”439323″}

    Sabes si ha cambiado algo en LR7.1? Simplemente quería obtener una url de una imagen que está en un Value de una estructura.

    Gracias por tu post, me ha ayudado mucho con los ADT de web content.

  2. Que tal Adán!

    Muchas gracias por tus comentarios, es un gusto que éste post te haya sido de ayuda. Respecto a tu pregunta, hasta el momento no he hecho cosas con el resource importer en Liferay 7.1 pero estoy en el entendido de que el resource importer va a desaparecer y van a implementar algo nuevo y diferente llamado Site Initializer el cual promete estar más completo y útil.

    Te dejo en el siguiente párrafo una referencia con notas para aplicar a la certificación de Liferay 7.1 en la cual se comenta el futuro remplazo del Resource Importer.

    https://github.com/alex-arriaga/liferay-front-end-certification/blob/master/notes/session-10-adding-resources.md

    Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *