icono_twiter
Jose Manuel Sánchez Suárez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2013-02-07

Tutorial visitado 4.098 veces Descargar en PDF
PrimeUI: set de componentes visuales en javascript - un spin-off de Primefaces.

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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
  <script src="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

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: