Definiciones de biblioteca Faces para controles JavaServer Faces de terceros

Este artículo describe la nueva característica Faces Library Definition (Definición de biblioteca Faces) en IBM Rational Application Developer Versión 7.5. Con esta característica, es posible importar una biblioteca de componentes JSF (JavaServer Faces) arbitrarios de terceros y ajustar el comportamiento de las herramientas JSF cuando se trabaja con los componentes de IU de esa biblioteca.

Introducción

La tecnología Java™ Server Faces (JSF) es un popular marco de Java™ para componentes de la interfaz de usuario Web. IBM® Rational® Application Developer ha incluido potentes herramientas para desarrollar aplicaciones Web JSF en las últimas versiones. La versión 7.5 ofrece a los desarrolladores una nueva funcionalidad que permite importar y usar componentes JSF arbitrarios de terceros con un mínimo esfuerzo. Este artículo describe un proceso que incluye el consumo de una biblioteca de componentes de terceros, la configuración de metadatos para la biblioteca y el uso compartido de la configuración resultante para su reutilización por parte del equipo de desarrollo.

Antes de empezar, veamos qué significa soportar componentes de terceros en el entorno de desarrollo. ¿Qué se puede hacer con los controles JSF de terceros (creados desde cero o bajados de la Web)?

  • Los nuevos componentes deben estar disponibles en la paleta para poder arrastrarlos hasta una página del editor Java™ Server Pages (JSP™).
  • La primera vez que agregue una biblioteca de componentes a un proyecto Web, deberá incorporar los recursos adecuados al proyecto y llevar a cabo todos los pasos de configuración que fueran necesarios para que la biblioteca sea usable.
  • Es necesario contar con un método que permita ver y configurar los componentes de IU una vez agregados a las páginas Web.
  • Además, deberá poder controlar ciertos detalles relativos al comportamiento y a la apariencia de la IU.

Esta funcionalidad ya está disponible para los controles JSF estándar y para las bibliotecas de componentes de la biblioteca de widgets JavaServer Faces (JWL) de IBM. A continuación aprenderá cómo ampliar este soporte a otras bibliotecas de componentes JSF. Este artículo muestra la nueva funcionalidad usando componentes Tomahawk del proyecto de código abierto MyFaces, pero el proceso se puede aplicar a cualquier biblioteca de componentes JSF válida.


Creación de una Definición de biblioteca Faces

Rational Application Developer V7.5 introduce el concepto de una configuración compartible para bibliotecas de componentes de terceros. Se creará una Definición de biblioteca Faces (JLD), que básicamente consiste en un archivo de configuración sumado a cualquier otro recurso de archivo que necesite la biblioteca. Todos los archivos se almacenan en un tipo especial de espacio de trabajo denominado Faces Definitions Project (Proyecto de definiciones Faces).

A efectos de una mejor comprensión de este ejemplo, se recomienda descargar el archivo Java™ (JAR) de componentes Tomahawk desde el sitio Web de Apache MyFaces (http://myfaces.apache.org/download.html), que se utilizará como una biblioteca de componentes de terceros representativa.

Comience creando un Proyecto de definiciones Faces que contenga los metadatos de configuración de la biblioteca.

  1. Inicie el asistente seleccionando File > New > Project (en la categoría Web).
  2. Lo único que hay que hacer en el asistente es darle un nombre al proyecto (en este caso, MyFaces Components), como se indica en la figura 1.
Figura 1. Crear Proyecto de definiciones Faces
dialog with text entry field

A continuación, cree una definición de biblioteca para la biblioteca Tomahawk y examine sus elementos.

  1. Haga clic con el botón derecho en el proyecto recién creado y seleccione New > Faces Library Definition.
  2. Asígnele un nombre a la nueva definición (por ejemplo, tomahawk).
  3. Haga clic en el botón examinar que se encuentra al lado del campo Jar file. Seleccione la ubicación del archivo JAR que descargó del sitio de Apache, como se indica en la figura 2.
  4. Haga clic en Finish.
Figura 2. Crear nueva Definición de biblioteca Faces
dialog to specify name, file, and project

Después de un breve lapso en el se analiza el archivo JAR Tomahawk y se generan los archivos, el asistente completará y abrirá el nuevo archivo de configuración JLD (tomahawk.jld). Observe que el archivo contiene información para configurar una aplicación Web y un elemento para cada etiqueta de la biblioteca de etiquetas (este editor se analizará con más detalle en los siguientes apartados).

Al tener en su espacio de trabajo esta definición de biblioteca y el proyecto que la contiene, usted ya ha logrado que las herramientas reconozcan los componentes Tomahawk. Más adelante, explore cómo la herramienta utiliza esta configuración y observe las maneras en que se puede ajustar.


Configuración de un proyecto Web JSF

A continuación se creará un proyecto Web JSF para ver la manera en que la nueva biblioteca de componentes se integra con las herramientas JSF.

  1. Inicie el asistente de proyectos seleccionando File > New > Project > Dynamic Web Project.
  2. Escriba el nombre del proyecto.
  3. En el menú desplegable Configuration, elija JavaServer Faces v1.1 Project.
  4. Haga clic en Finish.

Observe que ha seleccionado la configuración JavaServer Faces, que es un subconjunto de la configuración más habitual Faces Project. Esto se debe a que el valor preestablecido Faces Project también incluye la biblioteca de componentes JWL de IBM, que generalmente no se usa junto con bibliotecas de terceros. Por lo general, es recomendable utilizar la configuración JSF, que es más básica, cuando se incluyen componentes de terceros en el proyecto.

Figura 3. Crear proyecto Web de prueba
Dialog to create a project or add it to an application

Luego cree una página JSP en este proyecto de prueba.

  1. Haga clic con el botón derecho en el nombre del proyecto en Enterprise Explorer.
  2. Seleccione New > Web Page.
  3. Escriba un nombre para el JSP en el asistente, como se indica en la figura 4.
  4. Haga clic en Finish.
Figura 4. Crear página Web de prueba
tree view on left, preview on right

Exploración de una integración básica de componentes de terceros

  1. Cuando la página de prueba recién creada se abre en el editor, mire la vista paleta y observe el nuevo cajón tomahawk, como se muestra en la figura 5. (Por lo general, encontrará las bibliotecas de componentes de terceros al final de la paleta).
Figura 5. Paleta con componentes de terceros
open drawer with set of components

Es posible visualizar el cajón con los componentes Tomahawk porque la Definición de biblioteca Faces creada anteriormente está presente en el espacio de trabajo.

  1. Intente cerrar el proyecto que contiene la definición (MyFaces Components) y verá que el cajón de la paleta desaparece rápidamente. Reabra el proyecto para hacer volver el cajón.
  2. Arrastre el componente commandButton de Tomahawk desde la paleta hasta el JSP de prueba. Aparecerá un aviso que le preguntará si desea copiar nuevos recursos de proyecto.
  3. Haga clic en OK para permitir que Tomahawk se agregue al proyecto de prueba (observe que la etiqueta del botón también se agrega a la página).
  4. Usando Enterprise Explorer, examine el proyecto de prueba con la ruta de acceso /Web Content/WEB-INF/lib para encontrar el archivo JAR tomahawk. Como en la definición de biblioteca se hace referencia a este archivo JAR, la herramienta lo copió automáticamente en un proyecto Web la primera vez que se usaron los componentes Tomahawk. En el siguiente apartado aprenderá a configurar otros pasos de configuración de proyectos.
  5. En la página de prueba (testPage.jsp), observe que la etiqueta t:commandButton ha sido rodeada automáticamente por una etiqueta de formulario JSF. También podrá apreciar que en la vista Design (Diseño) de Page Designer, la etiqueta se visualiza correctamente como un botón. Estas dos circunstancias ocurren porque la herramienta reconoce que la nueva etiqueta representa un componente de IU JSF.
  6. Haga clic en el botón de la página para seleccionarla. Con la vista Properties (Propiedades), es posible modificar cualquiera de los atributos de la etiqueta del botón usando las herramientas JSF habituales. Por ejemplo, determine el atributo de valor del botón en la vista Properties y haga clic en el ícono contiguo para traer el familiar diálogo de enlace a fin de generar una expresión de enlace JSF.

Configuración adicional de proyectos

Regrese a la Definición de biblioteca Faces si desea agregar metadatos adicionales para configurar proyectos Web. Si ya cerró el editor de definiciones de biblioteca, vaya al Proyecto de definiciones de biblioteca que creó anteriormente (MyFaces Components) y abra el archivo de definiciones tomahawk.jld.

Mire el editor de definiciones de biblioteca (figura 6). Observará que, a la izquierda de la pantalla, el editor está dividido en secciones de configuración. La parte derecha del editor contiene los campos correspondientes a la sección que se selecciona a la izquierda.

Figura 6. Editor de Definiciones de biblioteca Faces
Overview on left, Details on right

Haga clic para ampliar

En la figura 6, está seleccionada la sección Faces Library Definition, que permite configurar información muy general de la biblioteca en la parte derecha de la pantalla. El próximo paso estará centrado en la sección Application Configuration (Configuración de aplicación), que trata de los cambios que se realizan en un proyecto Web cuando una biblioteca de terceros se usa por primera vez (las acciones que ocurran se definirán haciendo clic en OK en el diálogo de solicitud después de colocar la primera paleta).


Agregación de archivos a un proyecto

Habrá visto que, de manera predeterminada, Rational Application Developer agrega el archivo JAR de una biblioteca de terceros (por ejemplo, tomahawk.jar) a un proyecto Web automáticamente. Sin embargo, por lo general se necesita mucha más configuración para que una biblioteca de componentes sea completamente funcional durante el tiempo de ejecución. Por ejemplo, algunos de los componentes Tomahawk requieren un código Apache Commons adicional para funcionar correctamente, por lo que será necesario agregar estos recursos adicionales a la configuración.

  1. Visite http://commons.apache.org/downloads/index.html y descargue los siguientes paquetes:
    1. commons-fileupload
    2. commons-lang
  2. Descomprima ambas descargas y copie el archivo JAR de cada paquete en la carpeta del espacio de trabajo que contenga el JAR de componentes tomahawk (por ejemplo, /MyFaces Components/tomahawk).
  3. Si fuera necesario, actualice el espacio de trabajo para visualizar los nuevos archivos JAR commons-* en Enterprise Explorer.

Luego, realice los siguientes pasos en el editor de definiciones de biblioteca para agregar estos archivos JAR a la configuración.

  1. Seleccione la sección Resources en el editor y haga clic en el botón Add de la derecha. La única opción de esta sección es File, así que haga clic en OK. (Otra posibilidad es hacer clic con el botón derecho en la sección Resources y seleccionar Add > File.)
  2. En la parte derecha del editor, haga clic en el botón examinar o puntos suspensivos (...) que está al lado del campo Source path.
  3. Busque el archivo JAR commons-fileupload recién agregado, como se indica en la figura 7, y haga clic en Finish. Observe que, de manera predeterminada, los archivos JAR se agregarán a /WEB-INF/lib en un proyecto Web.
  4. Repita este proceso para crear otra entrada Resource para el archivo JAR commons-lang.
Figura 7. Agregar un nuevo recurso de archivo a la definición de biblioteca
the Select a file or a folder dialog

Haga clic para ampliar


Configuración adicional para aplicaciones Web

Algunos componentes de la biblioteca Tomahawk también requieren un filtro para administrar solicitudes durante el tiempo de ejecución. Si desea instalar automáticamente el filtro MyFaces Extensions Filter en proyectos Web, será necesario agregar más elementos de configuración en el editor de definiciones de la biblioteca.

  1. Seleccionar la sección web.xml Updates de Application Configuration en el editor de definiciones de biblioteca.
  2. Haga clic en Add y seleccione Filter. Haga clic en OK.
  3. A la derecha aparecerá una configuración de filtros vacía. Complete los siguientes valores, como se indica en la figura 8:
    1. Name: MyFacesExtensionsFilter
    2. Class: org.apache.myfaces.webapp.filter.ExtensionsFilter
    3. Seleccione y edite el valor predeterminado de URL Mappings y cámbielo a: /faces/myFacesExtensionResource/*
    4. Haga clic en Add al lado de Servlet Mappings e ingrese: Faces Servlet
  4. El filtro de extensiones también requiere un parámetro de inicialización. Para agregar este parámetro, seleccione el nuevo filtro en la parte izquierda del editor y haga clic en Add para crear un archivo Init Param en blanco. Luego ingrese los siguientes valores:
    1. Name: maxFileSize
    2. Value: 20m
    3. Description: Set the size limit for uploaded files.
Figura 8. Agregar definición de filtros
Overview left, Filter definition and mappings right

Haga clic para ampliar

Además de definir nuevos filtros, como se acaba de describir, la sección web.xml Updates también permite registrar nuevos servlets y agregar parámetros de contexto adicionales a una aplicación Web cuando se usa una biblioteca de componentes JSF.

En algunos casos, la biblioteca necesitará otros elementos de configuración en faces-config.xml para funcionar adecuadamente. La sección Faces Configuration File en Application Configuration se usa para especificar un archivo faces-config adicional que se pueda agregar a la configuración de tiempo de ejecución de una aplicación Web.

Se recomienda guardar este archivo en el mismo directorio que el archivo Faces Library Definition. El archivo será copiado en una carpeta /WebContent/WEB-INF del proyecto Web, y se hará referencia a él en web.xml para poder usarlo durante el tiempo de ejecución. La única restricción es que el nuevo archivo no puede ser nombrado faces-config.xml, ya que esto entraría en conflicto con el archivo de configuración predeterminado que ya está presente en el proyecto Web JSF.


Prueba de los cambios de configuración de una aplicación

Una vez efectuados los cambios que se mencionan en el apartado anterior, los proyectos Web que usan componentes Tomahawk tendrán incorporados los archivos JAR de Commons, y el filtro Extensions Filter se registrará automáticamente en web.xml. Esto podría ser confirmado creando otro proyecto de prueba y otra página Web. Sin embargo, en esta instancia, la demostración se realizará actualizando la configuración del proyecto de prueba que se creó anteriormente.

Cada vez que se instala una biblioteca de etiquetas en un proyecto Web, la herramienta hace un seguimiento de la versión de la configuración de la biblioteca. Esto sucede en el caso de las dos bibliotecas que son soportadas directamente en Rational Application Developer y las definiciones de biblioteca de terceros como las que se han generado para Tomahawk. Cuando corresponda, la herramienta verificará si hay disponibles actualizaciones de biblioteca de etiquetas para los proyectos Web existentes y dará un aviso para actualizar la configuración del proyecto en consecuencia. Este mecanismo se empleará para actualizar la biblioteca de etiquetas Tomahawk en el proyecto de prueba.

  1. Seleccione la sección Faces Library Definition, ubicada en la parte superior izquierda del editor de definiciones de biblioteca.
  2. A la derecha, localice el campo Version e incremente el valor (por ejemplo, cambie 1.0 por 1.0.1), como se indica en la figura 9.
Figura 9. Cambiar la versión de la definición de biblioteca
Overview on left, Details on right

Haga clic para ampliar

  1. Guarde la definición de biblioteca.
  2. Seleccione o abra la vista Problems. Después de un breve lapso, debería aparecer un nuevo Error que indica que es necesario actualizar Faces Resources para el proyecto de prueba.
  3. Seleccione el Error en la vista Problems, haga clic con el botón derecho y elija Quick Fix.
  4. Haga clic en Finish dentro del diálogo Quick Fix.
  5. Aparecerá un aviso para actualizar el proyecto Web. El URI tomahawk debería estar listado como una biblioteca con nueva configuración disponible. Haga clic en la opción Yes de este diálogo, como se indica en la figura 10.
Figura 10. Actualizar diálogo de recursos para bibliotecas de componentes JSF
you can choose Yes, Later, or Never

Si la respuesta al diálogo de actualización de recursos es Yes, se volverán a ejecutar los pasos de configuración del proyecto para Tomahawk. Examine el proyecto de prueba para confirmar si se han agregado los archivos JAR de Commons adicionales y si el filtro Extensions Filter se ha definido en web.xml.

Los pasos que se siguieron para actualizar el proyecto Web existente constituyen el típico proceso que se ejecuta cuando se cambia la configuración de la definición de biblioteca para una biblioteca de componentes JSF. En realidad, cualquier cambio en la sección Application Configuration del editor de definiciones de biblioteca requiere un aumento del número de versión para que los cambios se propaguen a los proyectos existentes.

Si la biblioteca de componentes todavía no fue usada en ningún proyecto Web, no será necesario cambiar la versión. Además, como podrá verse en el siguiente apartado, las herramientas seleccionarán inmediatamente otros cambios fuera del área Application Configuration, los cuales no requieren cambios de número de versión ni actualizaciones de recursos del proyecto.


Configuración de la biblioteca de etiquetas

A continuación exploraremos otras modificaciones de la definición de biblioteca Tomahawk que afectan el comportamiento de la herramienta en función de cada etiqueta. Si bien existen algunas configuraciones que tienen un efecto en todas las etiquetas de la biblioteca, la mayoría de las configuraciones de aquí en adelante se centrarán en etiquetas específicas.

  1. Abra el editor de definiciones de biblioteca y seleccione la sección Tag Library. Observe que la mayoría de los campos ubicados a la derecha del editor corresponden a la apariencia general (etiquetas, íconos y estado abierto/cerrado) del cajón de la paleta de esta biblioteca. Las listas de enlaces CSS y JavaScript constituyen la excepción, ya que indican referencias que deberían agregarse a una página JSP cuando se inserta en la página cualquiera de las etiquetas de la biblioteca.
  2. Para ver las configuraciones específicas de cada etiqueta, abra el nodo Tag Library dentro del editor y busque la entrada de etiqueta commandButton. Selecciónela y examine los campos de la sección. A la derecha del editor, realice los siguientes cambios:
    1. En label, ingrese Tomahawk's Command Button
    2. Haga clic en el ícono examinar o puntos suspensivos (…) de al lado de Small icon.
    3. En el diálogo que aparece, seleccione el ícono Command – Button en Standard Faces Components. De esta manera se reutilizará uno de los íconos de los componentes JSF integrados de Rational Application Developer. Deje seleccionada la casilla de verificación para establecer el ícono grande correspondiente de manera automática.
    4. Haga clic en OK. La configuración debería ser similar a la que se muestra en la figura 11.
Figura 11. Configurar apariencia de paleta para una etiqueta
referenced details
  1. Resalte la etiqueta commandButton a la izquierda del editor y haga clic en el botón Up varias veces para llevarla arriba de la lista de etiquetas. El orden de las etiquetas en el editor se reflejará en la paleta.
  2. Guarde el archivo de definición de la biblioteca.
  3. Abra el JSP de prueba creado anteriormente. Busque el cajón de la biblioteca en la paleta. Observará que ahora el botón aparece primero en el cajón, se muestra el ícono seleccionado y se utiliza la nueva etiqueta de texto en lugar del nombre de la etiqueta.

Configuración de etiquetas específicas

Para ver otras áreas de configuración además de la apariencia de la paleta, abra el nodo commandButton en el editor de definiciones de biblioteca y examine las secciones correspondientes. Los siguientes apartados analizan cada una de estas áreas y emplean diversas etiquetas Tomahawk para mostrar algunas de las diferentes opciones de configuración.

Drop Properties (Propiedades de colocación)

La sección Drop Properties, que se encuentra en todas las etiquetas, está relacionada con la definición de comportamientos de arrastrar y colocar. Estos elementos de configuración son aplicables cuando se arrastran etiquetas desde la vista paleta o Page Data y en otros casos de inserción de etiquetas.

La primera casilla de verificación de la sección indica si un formulario JSF rodeará o no rodeará la etiqueta que se está colocando. La otra casilla de verificación, llamada Allows children, indica si una determinada etiqueta JSF permitirá o no que otros componentes de IU JSF queden dentro de ella. Esta selección no se aplica a etiquetas ajenas a la IU, como convertidores, validadores o facetas JSF, por lo que permanecerá desactivada para la mayoría de los controles y se seleccionará únicamente para los controles de tipo panel que representan los elementos secundarios.

Como muchos otros elementos de configuración de la definición de biblioteca, los valores de estas casillas de verificación se establecen cuando el asistente inspecciona una biblioteca de etiquetas por primera vez. Por lo general, la mayoría de los valores estarán correctamente predeterminados, pero puede haber situaciones ambiguas en las que resulte necesario ajustar las configuraciones. Para visualizar un ejemplo, realice los siguientes pasos.

  1. Abra la página Web de prueba creada anteriormente (testPage.jsp).
  2. Desde el cajón de la paleta Tomahawk, arrastre una etiqueta dataTable hacia la página. Aparecerá como un simple cuadro gris con el nombre de etiqueta t:dataTable.
  3. Coloque una etiqueta column Tomahawk en la etiqueta dataTable. Observará que la etiqueta t:column quedó automáticamente dentro de dataTable. Esto se debe a que el valor predeterminado de la casilla de verificación Allows children de la etiqueta dataTable fue establecido correctamente.
  4. Arrastre la etiqueta Tomahawk Command Button desde la paleta e intente colocarla directamente en la etiqueta de la columna, como se muestra en la figura 12.
Figura 12. Colocar etiqueta en una columna
square icon with a plus sign in it
  1. Es posible que el botón no ingrese en la columna. Por el contrario, quedará colocado dentro de dataTable pero al lado de una columna, lo cual es inválido, como se indica en el listado 1. Esto ocurre porque el asistente que creó la definición de biblioteca no puede distinguir qué representa la etiqueta de la columna, por lo que, de manera predeterminada, evita que las etiquetas secundarias queden dentro de una columna.
Listado 1. Resultados de colocación incorrecta de columna
<t:dataTable styleClass="dataTable" id="table1">
	<t:commandButton styleClass="commandButton"id="button1"></t:commandButton>
	<t:column styleClass="column" id="column1"></t:column>
</t:dataTable>
  1. Deshaga la colocación de botón incorrecta (escriba Ctrl-Z o vaya a Edit > Undo JSF tag insertion).
  2. Vuelva al editor de definiciones de biblioteca y encuentre la etiqueta column en Tomahawk.
  3. En la sección Drop Properties, seleccione Allows children, como se indica en la figura 13. Guarde los cambios.
Figura 13. Modificar propiedades de colocación de columna
Drop Properties Details with referenced check box
  1. Vuelva a la página de prueba e intente colocar el botón en la etiqueta de la columna nuevamente. Esta vez, el botón debería quedar dentro de la columna, como se muestra en el listado 2. Si tiene problemas para lograr que la colocación se produzca en la ubicación correcta, también podrá realizar la colocación en la vista de origen del editor, en cualquier lugar de la etiqueta t:column. Por el momento, no le dé importancia a la extraña apariencia de la página de diseño: esto se corregirá a la brevedad.
Listado 2. Anidamiento de etiquetas correcto
<t:dataTable styleClass="dataTable" id="table1">
	<t:column styleClass="column" id="column1">
		<t:commandButton styleClass="commandButton" id="button1">
                  </t:commandButton>
	</t:column>
</t:dataTable>

Los otros campos de la sección Drop Properties del editor de definiciones de biblioteca definen listas de cadenas usadas por las herramientas. Las dos primeras indican enlaces CSS y JavaScript que deben agregarse a una página JSP para que un componente sea funcional. Sólo se aplicarán a una etiqueta específica. Usted deberá especificar enlaces a nivel biblioteca en la sección Tag Library.

El último campo de esta sección especifica los nombres de las facetas JSF que pueden usarse con un componente. El siguiente ejemplo muestra cómo se utilizan los nombres de las facetas en la herramienta.

  1. Abra la definición de biblioteca Tomahawk y seleccione la sección Drop Properties de la etiqueta column.
  2. Haga clic en Add para colocar un nuevo elemento al lado del área Allowed Facets.
  3. Cambie el nombre del elemento aheader.
  4. Guarde la definición de biblioteca.
  5. Regrese a la página de prueba y busque la etiqueta t:column que agregó en los pasos anteriores. Haga clic para seleccionarla.
  6. Busque o abra la vista Properties. Generalmente, esta vista se encuentra debajo del editor de páginas en la perspectiva Web. En cualquier caso, siempre se la puede traer seleccionando Window > Show View > Properties.
  7. En la vista Properties de la etiqueta de la columna, haga clic en el botón superior de la vista para agregar una etiqueta secundaria, como se indica en la figura 14. Observe que el nombre de faceta header es una opción disponible (debido al cambio de definición de biblioteca que realizó previamente).
Figura 14. Agregar faceta en la vista Properties
options are headerFacet, Parameter, and Attribute
  1. Seleccione la opción header Facet y observe que la correspondiente etiqueta f:facet se agrega debajo de la columna.

Visualization (Visualización)

Como se pudo ver en el caso de la etiqueta commandButton de Tomahawk, por lo general, las herramientas JSF en Rational Application Developer pueden visualizar componentes de terceros correctamente en el editor de páginas sin necesidad de ninguna configuración adicional. Esto se puede lograr ejecutando parte de la lógica de representación JSF para emitir una representación HTML del componente.

A veces, sin embargo, este proceso de seudorrepresentación falla, ya sea porque la lógica de representación del componente es demasiado compleja o porque algunos elementos necesarios del tiempo de ejecución del servidor real no están presentes en el entorno de desarrollo. Cuando esto ocurre, suele aparecer un ícono gris genérico, como en el caso de las etiquetas dataTable y column.

Para alcanzar una mejor experiencia de desarrollo respecto de los componentes que no se pueden visualizar automáticamente, la definición de biblioteca ofrece un enfoque basado en plantilla para generar una representación visual de una etiqueta determinada. Si se incluye un patrón de visualización en una definición de biblioteca, el proceso de representación automática se omitirá y el patrón HTML será evaluado y usado directamente por el editor de páginas.

Existen diferentes variables que se pueden aplicar a un patrón de visualización. La mejor manera de explorar estas opciones es observar las plantillas de muestra incluidas en la herramienta. Estas muestras representan algunos de los tipos de controles JSF más comunes. Ahora crearemos visualizaciones definidas por el usuario para los componentes dataTable y column de Tomahawk, que brindarán una mejora sustancial respecto de la experiencia del usuario que hemos visto hasta ahora.

Siga estos pasos:

  1. Busque la etiqueta dataTable en la definición de biblioteca y seleccione la sección Visualization que se encuentra debajo de ella.
  2. Haga clic en el botón Edit ubicado a la derecha de la pantalla (el área de texto del patrón es de sólo lectura).
  3. En el diálogo Modify Visualization (Modificar visualización) que aparece, haga clic en Insert from Template.
  4. Seleccione la opción Data table y haga clic en OK. Observará texto de marcado en la sección de visualización.
  5. Repita estos pasos con la etiqueta column, eligiendo esta vez la plantilla Column in a data table.
  6. Guarde la definición de biblioteca.
  7. Busque y cierre la página JSP de prueba si está abierta en algún editor. Los cambios de visualización sólo surtirán efecto una vez que se reabra la página.
  8. Abra la página de prueba nuevamente en el editor y observe que ahora dataTable y column tienen una apariencia mucho más agradable. Asimismo, la acción de arrastrar nuevos componentes es mucho más simple con la nueva visualización, como se indica en la figura 15.
Figura 15. Visualización personalizada de tabla de datos
Submit Query button

En la figura 15, la etiqueta commandButton que está adentro de la columna ahora aparece correctamente en la página. Esto se debe a la variable ${children} de la plantilla de muestra que se utilizó para la etiqueta column. Cuando se calcula la visualización, esta variable se reemplaza con todas las etiquetas secundarias de la columna de manera que aparezcan en la posición correcta dentro de la página.

Observe que la faceta header que se agregó anteriormente a la columna se muestra con el texto Drop a component here (Coloque un componente aquí). Este texto se debe a la variable${facet:header}de la plantilla de la columna. Esta variable busca una etiqueta de faceta JSF con el nombre especificado (header), y reemplaza la etiqueta secundaria encontrada en la faceta o, de lo contrario, el texto explicativo mencionado. También se puede colocar una nueva etiqueta (por ejemplo,outputText) en el área de la faceta: verá que aparece en el lugar correcto debajo del cuerpo de la columna.

Existen más plantillas de muestra para otros tipos de componentes habituales. Si así lo desea, usted podrá explorar cada uno de ellos a fin de ver más ejemplos de variables de sustitución que se pueden usar en una visualización personalizada.

Tag Attributes (Atributos de etiqueta)

Busque la etiqueta command button de Tomahawk en el editor de definiciones de biblioteca y abra la sección Tag Attributes para ver la lista de nombres de los atributos. Esta lista de atributos, creada al generarse la definición de biblioteca, es una lista fija. Sin embargo, es posible ajustar el orden de estos atributos en la definición de biblioteca; el orden afectará el comportamiento de las herramientas. Para ver cómo ocurre esto, ejecute los siguientes pasos:

  1. Abra la página JSP de prueba en el editor de páginas.
  2. Si no hubiera ningún botón de comando Tomahawk en la página, coloque uno desde la paleta.
  3. Cuando la etiqueta tenga foco en el editor de páginas, seleccione la vista Properties.
  4. Observe que la lista de atributos está ordenada alfabéticamente. Esta ordenación se realizó al crearse la definición de biblioteca.
  5. Abra el editor de definiciones de biblioteca de la biblioteca Tomahawk.
  6. Busque la etiqueta commandButton y abra la sección Tag Attributes.
  7. Seleccione el atributo dir y haga clic en el botón Up varias veces hasta que ocupe el primer lugar.
  8. Guarde la definición de biblioteca.
  9. Vuelva a la página JSP de prueba. Seleccione un componente JSF distinto de commandButton (coloque uno desde la paleta si fuera necesario) y seleccione nuevamente la etiqueta de botón para actualizar las herramientas.
  10. Observe que el atributo dir ocupa el primer lugar de la lista.

Este mecanismo de ordenación se puede utilizar para reordenar la vista Properties de manera que los atributos más importantes y más habituales ocupen los primeros lugares. Por ejemplo, es posible que los atributos value y styleClass se modifiquen de manera frecuente para numerosos componentes.

Otro aspecto de la configuración de los atributos de las etiquetas consiste en especificar cuál es el tipo que representa el atributo. Por ejemplo, en la mayoría de los casos onclick representa un evento JavaScript, readonly es un booleano y styleClass especifica el nombre de una clase CSS. Todos los atributos que siguen las convenciones de nomenclatura JSF (como los ejemplos anteriores) son preestablecidos con los valores correspondientes.

Los tipos de atributo se reflejan en el comportamiento de la vista Properties. Por ejemplo, si usted hace clic en el área de edición contigua a readonly de una de las etiquetas Tomahawk, aparecerá un cuadro combinado con las opcionestrue(verdadero),false(falso) o una expresión de valor que se puede enlazar con los datos de la aplicación.

Algunas etiquetas de terceros tienen atributos únicos y específicos, y valores posibles, que se pueden configurar usando la definición de biblioteca. Por ejemplo:

  1. Vaya a la etiqueta dataTable del editor de definiciones de biblioteca y busque el atributo newspaperOrientation.
  2. Haga clic en el botón de edición que se encuentra al lado del elemento Type.
  3. En el diálogo que aparece, elija el tipo Enum. Este tipo representa una enumeración de posibles valores válidos.
  4. Haga clic en el botón Add para agregar valores correspondientes a horizontal y vertical, que son los valores que el texto de descripción de atributos señala como valores permitidos.
  5. Haga clic en OK para fijar el nuevo tipo, como se indica en la figura 16.
Figura 16. Especificar un tipo de atributo
the Select an Attribute Type dialog

Haga clic para ampliar

  1. Vuelva a la página JSP de prueba. Seleccione una etiqueta dataTable de Tomahawk (coloque una nueva desde la paleta si fuera necesario) y vaya a la vista Properties.
  2. Busque el atributo newspaperOrientation y observe que, al hacer clic en el campo de edición, los valores que usted especificó se muestran como opciones.

Data Binding (Enlace de datos)

La sección Data Binding del editor de definiciones de biblioteca permite cambiar algunos detalles de la manera en que las herramientas enlazan datos con componentes JSF específicos. Como de costumbre, la definición de biblioteca se crea con valores predeterminados apropiados para la mayoría de los casos, pero puede haber algunos casos especiales o nombres de atributos no estándar que requieren cambios.

Busque la etiqueta commandButton en la definición de biblioteca y abra la sección Data Binding para ver los valores configurables. Observará que, de manera predeterminada, el valor del atributo es utilizado para enlazar. Esta opción especifica cuál es el atributo que se modifica cuando se arrastran datos desde la vista Page Data hasta la etiqueta JSF de una página. Algunas veces se usa un atributo diferente para los enlaces típicos, en cuyo caso se podrá seleccionar la opción alternativa en el menú desplegable.

Observer la sección Data Binding de la etiqueta Tomahawk dataTable. En este caso, la casilla de verificación que especifica datos de múltiples valores está seleccionada. Esto indica que el componente dataTable prevé la iteración de una colección de datos al representar sus datos de salida. Si se selecciona este recuadro, las expresiones de valor se escribirán de una forma ligeramente diferente (omitiendo un[0]del final de la cadena de enlace).

El último elemento de la sección Data Binding especifica un atributo que se usa al visualizar una colección de datos. Observará que, para dataTable de Tomahawk, se ha establecido el atributo JSF estándar var. Este atributo se asigna al enlazar la etiqueta dataTable y además se usa para generar expresiones de enlace para otros componentes JSF anidados dentro de dataTable. Por lo general, se especifica junto con la casilla de verificación de múltiples valores mencionada anteriormente.

Los componentes Tomahawk suelen estar correctamente configurados, pero, si así lo desea, podrá explorar la funcionalidad Data Binding cambiando los valores de esta sección para una etiqueta determinada. Observe que si se colocan datos desde la vista Page Data, se alterarán los diferentes atributos.

Child Tags (Etiquetas secundarias)

Child Tags es una sección opcional que se puede agregar a una etiqueta de una definición de biblioteca. Esta sección contiene un patrón que permite generar nuevas etiquetas que se incorporan a la etiqueta seleccionada, así como un práctico patrón para ciertas operaciones habituales de edición de páginas. En el siguiente ejemplo, se facilita la agregación de nuevas columnas a una tabla de datos Tomahawk.

  1. Seleccione la etiqueta dataTable en la definición de biblioteca Tomahawk.
  2. Haga clic en el botón Add del editor. Cuando aparezca el diálogo, seleccione Child Tags (la única opción) y haga clic en OK.
  3. Especifique New Column como el nombre del patrón.
  4. Si lo desea, escriba una descripción opcional.
  5. Agregue el texto que aparece en el listado 3 en el campo Pattern como se muestra en la figura 17. Observe que el patrón define otras etiquetas JSF para formar una nueva columna y su sección de encabezado dentro de dataTable. Todos los prefijos de las etiquetas y algunos valores de los atributos deberían usar variables computadas (las expresiones${}), que se pueden agregar a un patrón usando el botón Insert Variable.
Listado 3. Etiquetas de patrón
<${t}:column styleClass=column id=${id}>
  <${f}:facet name=header>
    <${t}:outputText value=Column Name />
  </${f}:facet>
</${t}:column>
Figura 17. Crear un nuevo patrón Child Tags
dialog with Name, Description, and Pattern fields
  1. Haga clic en OK para guardar el nuevo patrón Child Tags.
  2. Guarde la definición de biblioteca.
  3. Vuelva a la página JSP de prueba y coloque un nuevo componente dataTable desde el cajón Tomahawk de la paleta.
  4. Con la etiqueta dataTable seleccionada, vaya a la vista Properties y haga clic en el botón para agregar nuevas etiquetas secundarias. Seleccione New Column en el menú desplegable (este es el nombre que se ha especificado para el patrón).
Figura 18. Agregar una nueva columna a dataTable
New Column, Parameter, and Attribute menu options
  1. Observe que una nueva etiqueta de columna se ha agregado a dataTable con los valores correspondientes reemplazados con los prefijos de las etiquetas y la ID del componente.

Data Templates (Plantillas de datos)

Data Templates es una sección opcional de la sección Faces Library Definition que se puede usar para mejorar el comportamiento de la vista Page Data. Cuando se arrastra un dato desde la vista Page Data hasta una página JSP, se visualiza un asistente que le permitirá elegir qué tipos de controles de IU se van a generar. La creación de nuevas plantillas de datos para las etiquetas de la biblioteca de componentes generará más opciones en el asistente.

Existen dos tipos de plantillas de datos disponibles en el editor de definiciones de biblioteca. Las plantillas Property se utilizan para los tipos de controles más básicos. Por ejemplo, se podría crear una plantilla para el componente inputDate de Tomahawk y asociarlo con un tipo java.util.Date. Por otro lado, las plantillas Iterative se emplean para generar controles anidados más complejos asociados con colecciones de datos. Por ejemplo, se podría crear una plantilla iterativa para generar las etiquetas Tomahawk dataTable y column al colocar una lista de datos.

El sistema de plantillas usado en las definiciones de biblioteca es el mismo que el que se emplea en la configuración a nivel producto, que se encuentra en Window > Preferences > Web > JavaServer Faces Tools > Generation Templates. La inclusión de plantillas de datos en una definición de biblioteca simplemente ofrece un método coherente para compartir opciones de plantillas de los componentes de una biblioteca con todos los usuarios de esa biblioteca.


Mejores prácticas

Ya hemos visto la manera de configurar muchos de los elementos comunes de una definición de biblioteca a fin de mejorar la experiencia de desarrollo usando componentes JSF de terceros. Después de configurar una definición de biblioteca satisfactoria, probablemente querrá compartir la biblioteca con otros desarrolladores. La mejor manera de lograrlo es verificar el proyecto de definiciones de biblioteca en un sistema de control de código fuente, y que los demás también lo hagan en sus espacios de trabajo. Recuerde que la presencia de la definición de biblioteca en un especio de trabajo es lo único que se necesita para que las herramientas se comporten de la manera deseada.

Existen otros puntos a tener en cuenta cuando se genera una definición de biblioteca:

  • Si una biblioteca de componentes JSF requiere múltiples archivos JAR, es conveniente especificarlos directamente en el asistente de Faces Library Definition. Para este ejemplo con Tomahawk, solamente se seleccionó el archivo JAR tomahawk en el asistente; los otros archivos JAR Apache Commons se agregaron a la configuración más adelante. Este proceso funciona bien para Tomahawk, pero en algunos casos, es necesario que los archivos JAR estén en classpath a efectos de un análisis adecuado de los componentes JSF cuando la herramienta genera una definición de biblioteca. Un ejemplo lo constituye la biblioteca de componentes MyFaces Trinidad, en la cual se utiliza el archivo jar trinidad-impl jar para definir la biblioteca de componentes, pero también se necesita el archivo jar trinidad-api en la segunda página del asistente de definiciones de la biblioteca para evitar errores.
  • Como se vio anteriormente, las herramientas usan el número de versión de una definición de biblioteca para gestionar la actualización de los recursos del proyecto cuando se disponga de una nueva definición. Este mecanismo se traduce en ciertas convenciones que deberían adoptarse:
    • Cambie el nombre de los archivos JAR incluidos en la biblioteca de componentes de manera que utilizar nombres genéricos. Por ejemplo, use tomahawk.jar en lugar de tomahawk-1.1.8.jar. De esta manera, las futuras actualizaciones se vuelven mucho más sencillas ya que, cuando se lance tomahawk-1.1.9.jar (por ejemplo), se podrá actualizar la definición de biblioteca manteniendo el nombre de archivo. Así, cualquier actualización de los proyectos Web existentes simplemente reemplazará tomahawk.jar sin necesidad de seguir ningún otro paso.
    • Si en su especio de trabajo existen múltiples definiciones de biblioteca para la misma biblioteca de etiquetas, las herramientas omitirán todas las definiciones menos aquella que tenga el número de versión más alto. A efectos de una mayor claridad, especialmente si se cambian los nombres de los archivos JAR eliminando la información específica de la versión, sería conveniente que la cadena de versiones de la definición de biblioteca tenga algún sentido. La versión inicial es 1.0, pero puede consistir en cualquier número que corresponda a la forma a.b.c.d (el patrón coincide con las reglas de versiones del complemento Eclipse). Siguiendo el ejemplo anterior, fije la versión de la biblioteca en 1.1.8 a fin de tener presente qué archivo JAR Tomahawk se usó.

Resumen

En este artículo se exploraron nuevas capacidades para usar componentes JSF de terceros en Rational Application Developer. La creación de una definición de biblioteca constituye una manera sencilla de que las herramientas reconozcan las nuevas bibliotecas de componentes. Existen numerosos parámetros de configuración que permiten ajustar diversos comportamientos. Una vez configurada una definición de biblioteca satisfactoria, es posible compartir fácilmente esa configuración con otros desarrolladores para que todos los que trabajen con los componentes tengan la misma experiencia.

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Rational
ArticleID=417807
ArticleTitle=Definiciones de biblioteca Faces para controles JavaServer Faces de terceros
publish-date=06182009