PrimeUI: set de componentes visuales en javascript – un spin-off de Primefaces.

2
17212

PrimeUI: set de componentes visuales en javascript – un spin-off de Primefaces.

0. Índice de contenidos.


1. Introducción

PrimeUI es una librería javascript al estilo de jquery-ui
que nos permite disponer de una colección de componentes visuales prediseñados y listos para usar en nuestros desarrollos html, esto es,
haciendo uso de tecnologías en servidor que no nos proporcionen ya dichos componentes (como JSF).

PrimeUI nace como un proyecto derivado de Primefaces,
que es una librería de componentes visuales para JSF que, a su vez, hace uso de jquery y jquery-ui. Primefaces ha decidido con algunos componentes que,
en vez de usar los de jquery-ui u otras librerías javascript como yui,
construir los suyos propios y de ahí el nacimiento de PrimeUI; una ideal genial, «ya que voy a construir componentes javascript propios para
encapsularlos en componentes JSF, voy a hacerlo de forma no intrusiva y, a la vez, libero una librería para que quien no pueda hacer uso de JSF
se pueda beneficiar igualmente de los mismos».

Hay que decir que PrimeUI no es una librería que funcione de forma autónoma, está construida sobre jquery y jquery-ui, puesto que son los frameworks base de Primefaces;
con lo que necesitaremos para hacer uso de la misma:

  • importar las librerías javascript tanto de jquery como de jquery-ui, e
  • importar un tema (una css) de jquery-ui

Como consecuencia de lo anterior, con PrimeUI, tenemos las mismas ventajas de personalización de los componentes visuales que con Primefaces
puesto que hacen uso de la misma nomenclatura de estilos, esto es, usando los prefijos de jquery-ui. De este modo podemos hacer uso de la herramienta
ThemeRoller de jquery-ui para personalizar el estilo de todos los componentes.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.4 GHz Intel Core i7, 8GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Lion 10.7.4
  • PrimeUI 0.8


3. Descarga y configuración.

Para hacer uso de la librería tenemos que:

  • descargarnos el último bundle de la siguiente dirección http://www.primefaces.org/downloads.html, en nuestro caso la 0.8.
  • decidir si vamos a hacer uso de una distribución pública de jquery y jquery-ui o dichas librerías las tendremos en el contexto de nuestra aplicación,
  • descarganos un tema de jquery-ui desde Theme Roller, para importar la css, en nuestro caso hacemos uso del tema «redmon» y debemos trasladar a nuestro
    proyecto tanto la css como las imágenes que se distribuyen con el mismo.

Tras descomprimir el paquete de PrimeUI podremos copiar de la carpeta production los ficheros:

  • prime-ui-0.8-min.js: al directorio de nuestros fuentes javascript y
  • prime-ui-0.8-min.css: al directorio correspondiente a los estilos.

Una vez hecho todo esto ya podemos empezar a trabajar en nuestras páginas html, con la siguiente cabecera:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>PrimeUI</title>
  <link rel="stylesheet" href="prime-ui-0.8-min.css">
  <link rel="stylesheet" href="css/redmon.css">
  <script src="/wp-content/uploads/tutorial-data/http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
  <script src="/wp-content/uploads/tutorial-data/http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
  <script src="/wp-content/uploads/tutorial-data/prime-ui-0.8-min.js"></script>
</head> 
<body>


4. Algunos componentes visuales.

Para hacer uso de los componentes visuales no tenemos más que revisar el
showcase y trasladar el código de los ejemplos para empezar a jugar,
por ejemplo, con un acordeón:

Necesitaremos las capas a mostrar/ocultar

    <div id="accordion">  
        <h3>Kill Bill 1</h3>  
        <div>  
            Kill Bill es una película de acción y suspenso de dos partes estrenada en 2003 y 2004, que fue escrita y dirigida por Quentin Tarantino.
        </div>  
      
        <h3>Kill Bill 2</h3>  
        <div>  
			Kill Bill: Volumen 2 es una película de acción y suspense estadounidense escrita y dirigida por Quentin Tarantino. Es la segunda de las dos películas que fueron lanzadas en cines aparte varios meses, la primera titulada Kill Bill: Volumen 1.
        </div>      
    </div>  

y para imprimirle el comportamiento de acordeón no tenemos más que invocar a la función correspondiente al componente visual, obteniendo la capa con el
soporte de jquery por id.

<script type="text/javascript">  
    $(function() {  
        $('#accordion').puiaccordion();  
  
    });  
</script>  

Con elo, obtendremos un resultado similar al siguiente:



Un segundo ejemplo bastante ilustrativo podría ser un componente growl, que muestra un mensaje emergente en la parte superior derecha de la pantalla:

Necesitamos una capa para el growl y un botón de ejemplo para añadir un mensaje:

    <div id="growl" />
      

Vamos a inicializar primero la capa con comportamiento de growl y después vamos a asociar al evento onclick del botón la acción de añadir un mensaje al growl:

<script type="text/javascript">  
    $(function() {  
        $('#growl').puigrowl();   
        
        $('#info').click(function() {  
	        $('#growl').puigrowl('show', [{severity: 'info', summary: 'Ok', detail: 'Operación realizada correctamente.'}]); 
        });  
  
    });  
</script>  

El resultado será similar al siguiente:


5. Referencias.


6. Conclusiones.

Y si quisiéramos incluir, por ejemplo, un componente de calendario?, PrimeUI no tiene un componente para ello, pero jquery-ui sí, con lo que no tendríamos
más que seguir los pasos correspondientes.

En definitiva, lo que nos proporciona PrimeUI son muchos más componentes que los básicos de jquery-ui, listos para usar.

Un saludo.

Jose

jmsanchez@autentia.com

2 COMENTARIOS

  1. Jose tremendo el tutorial esta clarito.
    Quiero desarrollar etiquetado de imagenes en una pagina web, me podes dar una mano como encarar el tema
    De antemano muchas gracias,

    Miguel N.
    P.D.: hace minutos me registre, espero tus comentarios.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad