Creación de un componente en JSF2.

Creación de un componente en JSF2.


0. Índice de contenidos.


1. Introducción

Ya vimos hace un tiempo en un tutorial de Alejandro http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=jsfComponent como crear un componente en JSF. Aunque ahora mismo existen muchas librerias de componentes, en ocasiones podrían no ofrecernos el componente que necesitamos y podríamos tener la necesidad de crearlo nosotros.

En este tutorial crearemos un componente personalizado con JSF 2 que básicamente realizará las funciones de un h:outputLabel. Primero crearemos las clases de java, el taglib y la vista y luego le añadiremos el parametro al componente.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: MacBookPro8,2 (2 GHz Intel Core i7, 4GB DDR3 SDRAM).
  • AMD Radeon HD 6490M 256MB.
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.7.
  • Eclipse Helios

3. Creación de la clase java, el taglib y la vista

.

Para este ejemplo todo lo que necesitaremos será una clase de java para nuestro componente, que tendrá la funcionalidad. Y un archivo xml que será el descriptor de la libreria de tags.

No tenemos necesidad de crear una clase Renderer para nuestro componente. En el ejemplo el código que se encargará de renderizar estará dentro de la clase de java.

El código de la clase java sería el siguiente:

El nombre de la clase empieza por Html por convención, ya que el componente esta hecho para visualizarse en html por defecto. En el método encodeAll tenemos el código para que el componente se visualice en el cliente. La creacíon del html se realiza con un ResponseWriter que podemos recoger del contexto. Esta clase tiene varios métodos para escribir lenguaje de marcado entre ellos los que estamos utilizando aquí.

El método getFamily() devuelve la categoría general a la que pertenece el componente. Esto se utiliza para combinarlo con el rendererType para elegir un Renderer apropiado. En nuestro caso al no crear una familia de componentes ni de renderers podemos devolver null.

Y por último la anotacion @FacesComponent, que sería una alternativa a escribir el siguiente código en el faces-config.xml:

Lo que hacemos con esto es registrar el componente para que en tiempo de ejecución se pueda construir.

Por último vamos a crear una tag library de Facelet para poder utilizar el componente en una vista.

Colocamos el taglib en WEB-INF/classes/META-INF/ para que la aplicación sea capaz de encontrarlo en tiempo de ejecución. Para que sea capaz de encontrarlo, el archivo debe acabar en .taglib.xml, en nuestro caso, custom.taglib.xml

Para usar el componente basta con crear un xhtml:

La URI del taglib debe ser la misma que hemos puesto en nuestro fichero xml, y como nuestro componente no necesita ningún atributo, con poner <aut:customComponent /> nos bastaría.


4. Añadir un parámetro al componente.

Una vez que ya tenemos nuestro componente creado, podría ser interesante que tuviera un parámetro de entrada para poder recibir el texto que queremos visualizar.

Cualquier atributo que se añada en la vista es accesible en nuestra clase java a través del mapa que devuelve getAttributes(). Vamos a añadir un atributo custommsg en nuestro .xhtml y cambiaremos el metodo encodeAll() para que escriba lo que haya en ese atributo.

Ahora podemos utilizar <aut:customComponent custommsg=”Mensaje pasado como parametro en el xhtml” /> y veremos este mensaje en el navegador.

Facelets soporta automáticamente EL, así que si escribimos como atributo <aut:customComponent custommsg=”#{param.msg}” />. Con esto podríamos pasar el parámetro msg en la URL y se visualizaría en la página. Por ejemplo si accedemos a la url añadiendole: ?msg=Hola%20desde%20la%20url veremos “Hola desde la url” en nuestro navegador.


5. Referencias.

  • http://jsfcompref.appspot.com/

  • 6. Conclusiones.

    Con este tutorial hemos podido ver lo básico para crear un componente en JSF 2. Algo que puede resultarnos útil si tenemos la necesidad de usar un componente que no existe en una librería de componentes.

    Espero que os haya resultado útil. Cualquier duda, comentario o sugerencia podéis hacerla a continuación.

    Un saludo.

    César López.