Mes: octubre 2018

Agregar widgets en un Fragmento de Página en Liferay 7. 1

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.

1.- Creando Formulario de registro

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.

2.- Cómo crear un Fragmento de Página

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.

Diferencia entre parámetros y argumentos en JavaScript

Hoy en nuestro Curso Profesional de JavaScript Avanzado uno de nuestros amigos nos preguntó sobre la diferencia entre “parámetros” y “argumentos” así que decidí dejar aquí la explicación para futura referencia.

 

Pregunta

Hola Alex! Tengo una preguntita que me da un poco de vergüenza preguntar porque es como muy básica y ya debería saber la respuesta.

Pero desafortunadamente no la sé, y siempre es fuente de confusión para mí. Tiene que ver con los métodos en JS.

Cuando creo un método que toma dos argumentos, cada vez que llamo a ese método tengo necesariamente que meterle esos dos argumentos, ¿verdad?

Luego quería preguntarte también, ¿cuál es la diferencia entre “parámetro” y “argumento”?

Respuesta

Que tal esta es una excelente pregunta; y no te preocupes para nada debe darte vergüenza ya que es algo importantísimo de comprender. Aquí te dejo varios puntos referentes a “parámetros” y “argumentos” en JavaScript.

Los parámetros son la lista de variables que ponemos cuando se define una función, por ejemplo, en la siguiente función tenemos dos parámetros “a” y “b”:

function sum(a, b) {
	return a + b;
}

Los argumentos son los valores que se pasan a la función cuando ésta es invocada, de esta manera, en el siguiente ejemplo tendríamos que “7”, “4” son los argumentos de nuestra invocación a la función:

const result = sum(7, 4);

Aclarado lo anterior, en las definiciones de funciones suelen haber parámetros que son opcionales, como en este caso en la documentación de la Mozilla Developer Network (MDN) sobre el método filter tenemos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg]);

Lo que quiere decir que el único parámetro requerido por “filter” es un “callback” y a su vez este “callback” tiene como único parámetro requerido al “element” que es precisamente cada uno de los elementos disponibles durante el ciclo (loop). Los parámetros opcionales son los que están entre corchetes”[ ]”

var filtrarNumerosPares = function(numero) {
	return numero % 2 === 0;
};

var numerosPares = [3,4, 7, -1].filter(filtrarNumerosPares);

console.log(numerosPares); // 4 es el único número par

De hecho de manera equivalente podríamos escribir nuestro “filter” así:

var filtered = [3,4, 7, -1].filter(function(numero) {
	return numero % 2 === 0;
});

Y más aún, en ES2015 podríamos reducir nuestra instrucción a una sola línea, usando un “return” implícito:

var filtered = [12, 5, 8, 130, 44].filter(numero => numero % 2 === 0);

Y el objeto “arguments” ¿para qué sirve?

Otra cosa interesante es que JavaScript tiene una variable local implícita llamada  arguments, la cual te da la posibilidad de acceder a los argumentos del llamado a tu función.

Imagina que quieres validar que SIEMPRE te manden un cierto número de argumentos para que tu función se ejecute correctamente, eso lo podrías lograr con algo como esto:

function sum(a, b) {
	if(arguments.length !== 2) {
		throw new Error("Unable to run, the sum() function needs TWO arguments...");
	}
	return a + b;
}

/* Mandará un error porque sólo hemos pasado "un solo argumento" */
const result = sum(7);

¿Te gustaría aprender más sobre JavaScript?

Adquiere nuestro Curso Profesional de JavaScript Avanzado y aprende entre otras cosas: patrones de diseño, promesas, ES2015+,  y mucho más.

 

Saludos.