Hace pocos meses que la nueva versión de Liferay ya está disponible para todos nosotros, ésta es la versión Liferay 7.1 la cual trae consigo características nuevas é interesantes.
Una de éstas características nuevas son los Fragmentos de Página (Page Fragments), los cuales son pequeños modulos de HTML, CSS y JS los cuales puedes añadir a Páginas de Contenido para dar forma a una página con contenido relativamente estático. (Las Páginas de Contenido son también algo nuevo en ésta versión de 7.1).
Pensemos en una página que no requiere de mostrar contenido dinámico, en la cual quieres presentar un banner en la parte superior compuesto por una imágen y un encabezado después, un componente con 3 cards que presentan distinta información y finalmente quieres mostrar un formulario de registro.
Bien, vamos concentrarnos en el último componente, en éste caso el formulario. Para lograrlo, tenemos que seguir los sigueintes pasos:
1.- Ve a la sección de Content -> Forms desde el menu de administración del sitio en tu instancia de Liferay previamente ya levantada.
2.- Ya en la sección de Formularios, crea una forma de manera tradicional y publícalo.
3.- Ahora, nuevamente desde el menu de administración, dirigete a Build -> Page Fragments.
4.- Para poder crear un fragmento nuevo, necesitas crear una colección, ésto para tener una organización de tus fragmentos. En nuestro caso, creamos una colección llamda Fragmentos – Registro.
5.- Ahora que ya tenemos esa colección lista, seleccionala y crea una Página de Fragmento, que como ya te has dado cuenta, en Liferay 7.1 el botón para crear/agregar un nuevo elemento está en la parte superior derecha, a diferencia de la versión 7.0 que lo tiene en la esquinar inferior derecha.
6.- Dale un nombre a tu Fragmento de Página y guardala, depués de eso notarás que tienes disponible en tu pantalla una página con 4 divisiones.
* La primera es para añadir HTML, verás que ya tienes un div con una clase generada dinamiamente, la sugerencia es que no lo cambies y dentro de ése div agregues el HTML que necesitas.
* La segunda es para que puedas añadir CSS, donde verás la misma clase de la sección de HTML, donde podrás agregar reglas para estilizar tu HTML.
* La tercera división es donde podrás añadir Javascript en caso de ser necesario.
* Y finalmente, la cuarta división es donde podrás previsualizar el HTML, estilos y funcionalidad javascript que añadiste previamente.
7.- Bien, ahora que ya conocemos nuestra área de trabajo para crear un Fragmento de Página, te preguntarás como puedo agregar un Widget/Aplicación/Portlet a un Fragmento de Página, bueno para eso Liferay nos proporciona un par de tags que podemos utilizar en nuestro HTML cuando estamos haciendo un Fragmento de Página.
- <ltr-editable></ltr-editable>
- <ltr-widget-[portlet-alias]></ltr-widget-[portlet-alias]>
Donde <ltr-editable> nos va a ser útil para hacer posible la edición de texto ó imágenes, por ejemplo:
<p><ltr-editable id="miParrafo" type="text">Aquí va mi párrafo</ltr-editable></p>
Donde una vez añadido nuestro Fragmento de Página a una Página de Contenido, podremos editar el texto de nuestro párrafo dandole doble click sobre el texto.
Ahora si, después de la espera, te platico que el tag para añadir Widgets/Aplicaciones/Portles a un Fragmento de Página es <ltr-widget-[portlet-alias]> donde el portlet alias es una propiedad nueva en los Portlets de Liferay 7.1, la cual se agrega se agrega de la siguiente manera:
@Component(
immediate = true,
property = {
"com.liferay.fragment.entry.processor.portlet.alias=form",
.
.
.
}
);
Entonces, para poder injectar nuestro Widget de Formulario, necesitamos conocer el portlet alias, para eso, visitamos el repositorio de Liferay Portal, donde hicimos una busqueda de la propiedad portlet alias.
Ya con nuestro portlet alias en mano, procedemos a añadir nuestro tag dentro de nuestro Fragmento de Página en el espacio designado para el HTML.
<div class="fragment_36091"> <lfr-widget-form></lfr-widget-form> </div>
Una vez insertado nuestro tag, podrás ver en el spacio de previualización que tienes ya la opción para seleccionar el formulario previamente creado.
Puedes seleccionarlo desde el Fragmento de Página, pero no prodrás visualizar la formar hasta que éste sea añadido a una Página de Contenido.
Bueno, ahora ya sabes que es un Fragmento de Página, como crear uno y sobre todo, como añadir Widget dentro de ellos.
Si quieres saber un poco más sobre los Fragmentos de Página da click aquí.
Si tienes comentarios o dudas, escribelo en el apartado de comentarios al final de éste post, saludos.
Spoiler alert!
