Ya hemos visto en anteriores post como crear portlets, incluso hemos realizado un portlet pequeño con Spring y hemos utilizado Service Builder para conectarnos con la base de datos.
Ahora llega el momento de intentar “poner bonito” a nuestros portlet. He de decir que no se mucho de frontend, más bien sé lo básico. Aunque estoy aprendiendo mucho con el libro de Liferay in Action. En él hay un capitulo donde se habla de AlloyUI y la verdad, me ha parecido una utilidad muy interesante, así que voy a crear un pequeña introducción sobre AlloyUY.
Que es AlloyUI
En pocas palabras, AlloyUI es un metaframework de interfaz, esto quizás suene un poco raro, pero tranquilo, ahora daremos más detalles.
El frontend de las páginas web (normalmente) se crean utilizando un combinación de 3 tecnologías: HTML, CSS y Javascript. Estas 3 tecnologías unidad constituyen la experiencia de Usuario (UX) para cualquier sitio web.
Básicamente, HTML proporciona la estructura de la página, CSS proporciona la capa visual, es decir cómo se representan visualmente los elementos y Javascript ofrece la interacción de los elementos de la página. Si algo se mueve, cambia de forma, se arrastra “es culpa” de Javascript.
Ahora que tenemos estos conceptos un poco más claros podemos decir que AlloyUI es un metaframework que proporciona una API Consistente y sencilla para crear aplicaciones web a través de los 3 niveles del navegador: estructura, estilo y comportamiento.
Como se utiliza
En la web oficial del proyecto http://alloyui.com tenemos una serie de ejemplo para ir viendo paso a paso como se utiliza, aquí explicaremos unos cuantos para ver cómo funciona todo esto.
Nos basaremos en el portlet de prueba creado anteriormente, sino lo tienes no importa. Con Liferay IDE crea un portlet por defecto, los scripts del plugin para eclipse (Liferay IDE) crearan un portlet con una página muy simple como esta:
Ahora abrimos el archivo view.jsp e insertamos las librerías correspondientes arriba del todo:
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%> <%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
Ya podemos empezar a utilizar AlloyUI en nuestra aplicación.
Validando formularios
Una de las cosas más comunes que tenemos que realizar siempre es validar los formularios antes de enviarlos. Con AlloyUI es simple.
Creamos un campo
<aui:input name="hola"></aui:input>
Ahora solo tenemos que ir añadiéndole validadores. Por ejemplo si queremos que el campo solo contenga números añadimos el validador:
<aui:validator name="digits" />
Si queremos que los números estén dentro de un rango añadimos:
<aui:validator name="range"> [8,50] </aui:validator>
El mensaje de error ya viene por defecto:
Dando formato
Con AlloyUI también podemos darle formato al contenido de nuestro portlet poniendo el texto en columnas por ejemplo.
Con <aui:layout> definimos el estilo y para añadir una columna solo tenemos que hacer esto:
<aui:column columnWidth="50" first="true">
Aquí dejo una pequeña guía en inglés sobre que tipos de atributos tenemos en cada elemento:
http://www.liferay.com/community/wiki/-/wiki/Main/Alloy+UI+Forms+%28aui%29
Así que ya no tenemos excusas para no validar los formularios.
Si te gusta esto de AlloyUI en su página oficial http://alloyui.com/ hay un montón de ejemplos para que puedas utilizarlo en cualquier página.
Referencias
Me he basado en el libro Liferay in Action y en los posts:
http://drewblessing.com/blog/-/blogs/34509
http://www.liferay.com/community/wiki/-/wiki/Main/Alloy+UI+Forms+%28aui%29
Jesús L.C. - Apuntes de un aprendiz 
Hola,
Primero decir q muchas gracias por los tutoriales, son de gran ayuda. Pero tengo una pregunta sobre AUI, tengo algo así:
<aui:input type="button" id="boton" name="boton" onClick='’>
Y quiero hacer un script para obtener ese valor, segun he visto de AUI hay una función que es ‘A.one(«#valor»)’ pero no acabo de entender que es el parametro A. Habia pensado en hacer algo así pero no es correcto.
AUI().use(function (A) {
function obtenerValor() {
var inputValue1 = A.one(‘#valor1’).get(‘value’);
var inputValue2 = A.one(‘#valor2’).get(‘value’);
var inputValue3 = A.one(‘#valor3’).get(‘value’);
alert(inputValue1 + » » +inputValue2 + » » +inputValue3 );
}
});
Me podrias decir como puedo hacer para obtener elementos html cuando presione un boton?
Muchas gracias.
Me gustaMe gusta
en el boton: onClick=»
Y tengo tres cajas de texto que es de lo que quiero obtener los valores.
Gracias
Me gustaMe gusta