Vinculación personalizada de datos a controles de JavaServer Faces de terceros en Rational Application Developer

Este artículo muestra cómo emplear el IBM® Rational® Application para personalizar el comportamiento de la vinculación de datos a controles de Java™ Server Faces de terceros. Usted también puede crear sus propias plantillas de datos para bibliotecas de etiquetas de terceros y personalizar su experiencia con el Rational Application Developer.

Christie Rice, Software Engineer, IBM  

Christie RiceChristie Rice es desarrollador en el equipo de Rational Application Developer que trabaja en las herramientas de JavaServer Faces.



18-02-2011

Introducción

IBM Rational Application Developer Version 7.5.5 cuenta con amplio soporte integrado para las bibliotecas de etiquetas estándar de Java™Server Faces (JSF). Por otro lado, el Rational Application Developer también brinda soporte para librerías de etiquetas de terceros. Utilizando una Faces Library Definition, usted puede personalizar la interacción del Rational Application Developer con estos controles y alinear las herramientas con sus necesidades personales. Las Faces Library Definitions contienen atributos para especificar de qué manera un determinado control puede vincularse a los datos. Este artículo muestra tales atributos y plantea estrategias para configurar diversos tipos de controles. Por otro lado, usted verá cómo pueden usarse las platillas de datos del Rational Application Developer con las Faces Library Definitions y controles de terceros.

Existen principalmente dos formas para diseñar su página web y conectar sus componentes a datos. Se pueden ubicar los controles primero en la página y luego vincularlos a datos, o bien se pueden configurar plantillas de datos que crearán automáticamente los controles para usted sobre la base de los datos que usted ha seleccionado. Este artículo describe ambos métodos, y usted apreciará lo sencillos que son, incluso con una biblioteca de etiquetas de un tercero.

Se comienza creando un proyecto web y una Faces Library Definition sobre la base de la biblioteca de etiquetas MyFaces Tomahawk. A continuación, se edita la Faces Library Definition para darle más información al Rational Application Developer acerca de estos controles. Luego se crean plantillas de datos basadas en algunos datos de muestra y se generan controles Tomahawk dirigidos a esos datos. Por último, se añaden controles Tomahawk individuales a una página web y se los vincula a nuestros datos de muestra.

En el curso de este artículo usted creará:

  • Una Faces Library Definition basada en Tomahawk
  • Un proyecto web de dos páginas:
    • Una página que contiene los controles generados a partir de las plantillas de datos
    • Una página que tiene los controles primero ubicados en ella y luego vinculados a datos

Ambas páginas web mostrarán información básica acerca de una empleada ficticia en MyCompany: su nombre y el cargo que ocupó en la empresa.

Requisitos previos

Estos artículos developerWorks previos brindan información de base. Se recomienda leer ambos antes de leer este artículo.

  1. Una introducción a las Faces Library Definitions y un resumen sobre el soporte del Rational Application Developer para bibliotecas de terceros
  2. Una introducción a JavaServer Faces Data Templates

Configuración

Crear un proyecto web

Comience creando un proyecto web. Este es un proyecto simple que le permite probar y configurar las interacciones del Rational Application Developer con los controles Tomahawk.

  1. Seleccione Archivo > Nuevo > Proyecto Web Dinámico a partir del menú.

Aparece en pantalla el asistente para el New Dynamic Web Project. Seleccione las siguientes opciones, como se muestra en la Figura 1.

  1. Llame al proyecto MyWebProject.
  2. Diríjase al servidor de su elección.
  3. En la caja combo de Configuration, seleccione JavaServer Faces v1.2 Project.
  4. Haga clic en Finish.
Figura 1. Asistente para New Dynamic Web Project
Asistente para New Dynamic Web Project completado

Ahora cree dos páginas web.

  1. Haga clic con el botón derecho sobre MyWebProject en el Enterprise Explorer y seleccione New > Web Page.
  2. En el asistente para New Web Page, llame a la página createControls, como se muestra en la Figura 2.
  3. Haga clic en Finish.
Figura 2. Asistente para New Web Page
Plantilla a la izquierda, Previsualización a la derecha

Se creará una nueva Página JavaServer (JSP) Faces llamada createControls que se abrirá para usted.

Cree la segunda página web.

  1. Haga clic con el botón derecho sobre MyWebProject en el Enterprise Explorer y seleccione New > Web Page.
  2. En el asistente para New Web Page, llame a la página existingControls.
  3. Haga clic en Finish.

Se creará una segunda JSP Faces llamada existingControls que se abrirá para usted.

Ahora importe algunos datos de muestra al proyecto. Estos datos describirán a la empleada de prueba y brindarán cierta información básica sobre ella.

  1. Descargue el archivo Employee.zip adjunto a este artículo.
  2. En el Enterprise Explorer, expanda MyWebProject > Java Resources.
  3. Haga clic con el botón derecho sobre src y seleccione Import.
  4. En el asistente de Import, expanda General y seleccione Archive File.
  5. Haga clic en Next.
  6. Busque la ubicación del archivo .zip en su computadora
  7. Haga clic en Finish.

Se importará al proyecto un nuevo paquete con tres clases de JavaBean. Éstas contienen un simple registro de empleado.

Ahora que los beans de muestra ya están en el proyecto, póngalos a disponibilidad de sus páginas web.

  1. Diríjase a createControls.jsp. Si esta página no está ya abierta, expanda MyWebProject > WebContent y haga doble clic en createControls.jsp.
  2. En la vista Page Data, haga clic con el botón derecho sobre Faces Managed Beans y seleccione New > Faces Managed Bean.
  3. En el asistente de Add JavaBean, ingrese emp para Name y com.MyCompany.TestEmployee para Class, como se muestra en la Figura 3.
  4. Haga clic en Finish.
  5. Guarde la página seleccionado File > Save.
Figura 3. Añadir una nueva Faces Managed Bean
Opciones arriba, botón de Initialize Properties abajo

Crear una definición de biblioteca

Ahora, cree una Faces Library Definition. Tal como se describe en el primer artículo mencionado en la sección de Requisitos previos, las Faces Library Definitions le permiten personalizar la interacción del Rational Application Developer con la biblioteca de etiquetas FSF de un tercero.

Este artículo emplea la biblioteca de etiquetas Tomahawk como ejemplo de biblioteca de etiquetas JSF de terceros, de manera que usted debe obtener una copia del archivo Java™ (JAR) de componentes Tomahawk. Este archivo puede descargarse del sitio web Apache MyFaces.

  1. Descargue el archivo JAR Tomahawk.
  2. Diríjase a File > New > Other.
  3. Expanda Web y seleccione Faces Library Definition.
  4. Haga clic en Next.
  5. Llame a la biblioteca Tomahawk, como se muestra en la Figura 4.
  6. En la sección Select a JAR file, haga clic en el botón Browse y navegue a su copia del archivo JAR.
  7. Haga clic en Finish.

Se abrirá la Faces Library Definition. Este archivo, que tiene una extensión .jld, le dice al Rational Application Developer cómo interactuar con los controles Tomahawk.

Figura 4. Ventana de New Faces Library Definition
Resumen a la izquierda, Detalles a la derecha

Configurar visualizaciones

Ahora usted configurará las visualizaciones para algunos de los controles Tomahawk. Las visualizaciones afectan la forma en que operan los controles. Usted personalizará esto para que algunos de los controles que utilizará sean más fáciles para trabajar. También actualizará los íconos y rótulos de la paleta de controles para que sean más fáciles de identificar y localizar.

Configurar el texto de salida

  1. Expanda Faces Library Definition > Tag Library (Tomahawk) > outputText.
  2. Haga clic en outputText.
  3. A la derecha, cambie el Label a Output Text.
  4. Haga clic en el botón junto al ícono Small.
  5. Expanda Standard Faces Components y haga clic en Output.
  6. Haga clic en OK.

Configurar la grilla del panel

  1. Expanda Faces Library Definition > Tag Library (Tomahawk) > panelGrid.
  2. Haga clic en panelGrid.
  3. A la derecha, cambie el Label a Panel Grid.
  4. Haga clic en el botón junto al ícono Small.
  5. Expanda Standard Faces Components y haga clic en Panel - Grid.
  6. Haga clic en OK.
  7. Ahora haga clic en Visualization debajo de panelGrid.
  8. Haga clic en el botón Edit.
  9. En la ventana de Modify Visualization, haga clic en Insert from Template.
  10. Haga clic en Grid.
  11. Haga clic en OK dos veces.

Configurar tabla de datos

  1. Expanda Faces Library Definition > Tag Library (Tomahawk) > dataTable.
  2. Haga clic en dataTable.
  3. A la derecha, cambie el Label a Data Table.
  4. Haga clic en el botón junto al ícono Small .
  5. Expanda Standard Faces Components y haga clic en Data Table.
  6. Haga clic en OK.
  7. Ahora haga clic en Visualization debajo de dataTable.
  8. Haga clic en el botón Edit.
  9. En la ventana de Modify Visualization, haga clic en Insert from Template
  10. Haga clic en Data table
  11. Haga clic en OK dos veces.

Configurar la columna

  1. Haga clic en Faces Library Definition > Tag Library (Tomahawk) > column > Visualization.
  2. Haga clic en el botón Edit.
  3. En la ventana de Modify Visualization, haga clic en Insert from Template.
  4. Haga clic en Column in a data table
  5. Haga clic en Ok dos veces.
  6. Guarde la Faces Library Definition seleccionando File > Save.

Crear plantillas nuevas

MyCompany está diseñando un nuevo sitio web. Ellos quisieran crear una página que muestre el nombre de una empleada y sus anteriores cargos en la empresa. Puesto que usted ya ha importado sus datos de muestra, creará plantillas de datos basadas en esos datos. Estas plantillas de datos pueden usarse entonces para generar muy rápidamente la página web que usted está buscando. El segundo artículo en la sección de Requisitos previos brinda más detalles acerca de las Data Templates.

Comience creando una plantilla simple que creará un control de Tomahawk Output Text para un objeto Java.

  1. Haga clic en Faces Library Definition > Data Templates.
  2. Haga clic en el botón Add.
  3. En la ventana de Add Item, haga clic en Property Template y luego haga clic en OK.

Aparecerá la ventana de Edit Template, como se muestra en la Figura 5.

  1. Ingrese Tomahawk Output Text para Name.
  2. Ingrese java.lang.Object para Class.
  3. Ingrese un control de Output Text a partir de la biblioteca de etiquetas Tomahawk para Description.
  4. Deje las opciones Default template for this class y Use for input en blanco.
  5. Pegue esto para Pattern:
<${t}:outputText id="${id}" value="#{${value}}"></${t}:outputText>
  1. Haga clic en OK.
  2. Guarde la definición de la biblioteca.
Figura 5. Plantilla de propiedades
Opciones arriba, botón de Insert Variable abajo

En el diseño de una plantilla, las variables se designan por ${variableName}. Por ejemplo, ${id} es una variable. Las variables son bits de la plantilla que serán computados dinámicamente cuando la plantilla es utilizada. Esta plantilla tiene tres variables distintas:

  • id
  • value
  • t (una variable prefijo de la biblioteca de etiquetas)

El id es una variable para asegurarse que el ID de esa página será exclusivo.

La variable value vinculará el texto de salida a una porción específica de los datos.

Las variables prefijo taglib sustituirán al prefijo adecuado para la página específica en la cual se utiliza el texto de salida; muy posiblemente, el prefijo será "t".

Ahora vea a su plantilla en acción.

  1. Abra createControls.jsp.
  2. En la vista Page Data, expanda Faces Managed Beans > emp (com.MyCompany.TestEmployee) > employee (com.MyCompany.Employee), como se muestra en la Figura 6.
  3. Haga clic en name (java.lang.String) debajo de employee y arrastre el nombre hacia la página.
Figura 6. Vista de Page Data
Vista en árbol con íconos, arriba a la derecha

Cuando usted suelta el mouse, aparece el asistente de Insert JavaBean.

  1. Haga clic en el botón de Displaying data (read-only)
  2. Ubique la caja combo debajo de Control Type.
  3. Seleccione Tomahawk Output Text, como se muestra en la Figura 7
  4. Haga clic en Finish.
Figura 7. Asistente de Insert JavaBean
Opción desplegable de Tomahawk Output Text seleccionada

Ahora la página web contiene una nueva tabla HTML. La tercera columna de esta tabla contiene un control de Tomahawk Output Text, lo mismo que su plantilla. Advierta que no tuvo que hacer nada especial en createControls.jsp para crear estos controles: toda la configuración fue realizada en la Faces Library Definition.

  1. Guarde la página.

Crear una plantilla compleja

Ahora usted creará una plantilla de datos más compleja: una que generará una tabla de datos. Esta tabla de datos mostrará trabajos previos realizados por los empleados.

  1. Cambie a Library Definition.
  2. Haga clic en Faces Library Definition > Data Templates.
  3. Haga clic en el botón Add.
  4. En la ventana de Add Item, seleccione Iterative Template.
  5. Haga clic en OK.

Aparece la ventana de Edit Template, como se muestra en la Figura 8.

  1. Ingrese Tomahawk Data Table para Name
  2. Ingrese java.lang.Object[] para Class
  3. Deje las dos casillas sin marcar.
  4. Ingrese A Data Table with multiple Columns from the Tomahawk tag library para Description.
  5. Pegue esto en Wrapper pattern:
<${t}:dataTable id="${id}" value="#{${value}}" var="${var}">
	${iterativeTemplate}
</${t}:dataTable>
  1. Pegue esto en el Iterative pattern:
<${t}:column id="${id}column">
	${propertyTemplate}
</${t}:column>
  1. Haga clic en OK.
  2. Guarde la Library Definition.
Figura 8. Plantilla de Data Table
Ventana de Iterative Template completada

Ahora que tiene una plantilla, úsela.

  1. Cambie a createControls.jsp.
  2. En la vista de Page Data, expanda Faces Managed Beans > emp (com.MyCompany.TestEmployee) > employee (com.MyCompany.Employee)
  3. Haga clic en positionsHeld y arrástrelo hacia la página.
  4. Suéltelo debajo de la tabla HTML.

Aparecerá la ventana de Insert JavaBean

  1. Busque la caja combo Data control to create y seleccione Tomahawk Data Table.
  2. En la columna Control Type, cambie las tres filas de Display Text a Tomahawk Output Text.
  3. Haga clic en Finish.

Se ha generado una tabla de datos con tres columnas. Puesto que positionsHeld tiene tres propiedades (payrollCode, positionCode, y título), se generó una columna para una.

Ahora esta página (Figura 9) muestra el nombre de la empleada y sus cargos previos. Todos los controles fueron creados sobre la base de los datos que usted quiso mostrar, y se generaron automáticamente para usted.

Figura 9. Tabla de datos
Visualización y etiquetas de origen para una tabla de datos de tres columnas

Editar una plantilla en preferencias

¿Cómo hacer para ver todas las plantillas de datos disponibles en el Rational Application Developer (no sólo las que usted creó en su Library Definition)? Para ver todas las plantillas, usted puede mirar las preferencias en el Rational Application Developer.

  1. Diríjase a Window > Preferences.
  2. Expanda Web > JavaServer Faces Tools > Generation Templates.

Las tres sub-páginas (Data Templates, Iterative Templates y Method Templates) contienen todas las plantillas de datos. Esto incluye tanto las plantillas estándar que vienen con el Rational Application Developer como las plantillas que usted creó al ejecutar los ejercicios de este artículo.

Busquemos su plantilla de Output Text, y hagámosle una pequeña modificación. Puesto que ésta es una Property Template (una plantilla simple), puede hallarse bajo Data Templates.

  1. Haga clic en Data Templates.

La caja combo de Show le permite filtrar según el origen de las plantillas. Filtre todo menos sus plantillas Tomahawk.

  1. Cambie la caja combo de Show a Tomahawk.

En la lista ahora sólo aparecerá su plantilla Tomahawk, como se muestra en la Figura 10.

Figura 10. Preferencias
Plantilla de Tomahawk Output Text en la ventana de Preferences

Edite esta plantilla y añada un atributo styleClass.

  1. Seleccione la plantilla y haga clic en Edit.
  2. En el campo Pattern, añada esto a continuación del atributo de valor: styleClass="outputText"
  3. Ahora usted debería tener este diseño:
<${t}:outputText id="${id}" value="#{${value}}" 
styleClass="outputText"></${t}:outputText>
  1. Haga clic en OK dos veces.

Ahora puede ver los resultados de su cambio.

  1. En la vista de Page Data, expanda Faces Managed Beans >emp (com.MyCompany.TestEmployee) > employee (com.MyCompany.Employee)
  2. Haga clic en name y arrástrelo hacia la página.
  3. Suéltelo en el extremo inferior de la página.

Aparecerá la ventana de Insert JavaBean.

  1. Cambie la caja combo de Control Type a Tomahawk Output Text.
  2. Haga clic en Finish.

Se ha generado una nueva tabla HTML. El texto de salida dentro de esta tabla tendrá el atributo styleClass.

  1. Guarde la página.

Examine la plantilla original nuevamente en la Library Definition.

  1. Cambie a Library Definition.
  2. Haga clic en Faces Library Definition > Data Templates > Tomahawk Output Text (Property Template).

Arriba a la derecha puede verse el diseño de esta plantilla. Este diseño es el diseño original que usted ingresó. NO contiene el atributo adicional styleClass. Esto es porque las modificaciones de la plantilla que se hicieron en Preferences no se vuelven a escribir en la Library Definition. Las Library Definitions están diseñadas para ser compartidas entre los miembros de un equipo. Si la modificación de una plantilla fuera útil para otros, entonces debería hacerse y guardarse en la definición de biblioteca. Sin embargo, si se trata de algo de que usted necesita sólo temporariamente, o que nadie más necesita, usted puede hacer la modificación en forma privada en sus preferencias. Las modificaciones hechas en la ventana de Preferences invalidan las plantillas leídas desde la Library Definition.


Vinculación a los controles

Ahora que usted ha visto cómo generar controles a partir de cero, aprenderá cómo vincularse a controles preexistentes. Añadir controles de a uno y luego vincularse a ellos lleva más tiempo pero le permite un mayor control sobre su página.

  1. Abra existingControls.jsp.
  2. En la vista de Palette, asegúrese de que el Tomahawk drawer esté expandido y abierto.
  3. Ubique el control de Output Text y arrástrelo hacia la página.

Se ha añadido un control t:outputText a la página. Ahora usted vinculará el nombre del empleado a este texto de salida.

  1. En la vista de Page Data, expanda Faces Managed Beans >emp (com.MyCompany.TestEmployee) > employee (com.MyCompany.Employee)
  2. Haga clic en name y arrástrelo hacia el outputText.
  3. A medida que usted recorre el outputText verá una caja que dice "Drop here to bind name to the control text1".
  4. Suelte el nombre por sobre el outputText.

De esta manera se vinculó el outputText al nombre del empleado al añadir este atributo de valor: value="#{emp.employee.name}"

¿Por qué funciona esto? ¿Cómo supo el Rational Application Developer que debía vincular el atributo de valor? Para averiguar esto, mire la definición de biblioteca.

  1. Guarde la página.

Sección Data Binding en una definición de biblioteca

  1. Cambie a Library Definition.
  2. Expanda Faces Library Definition > Tag Library (Tomahawk) > outputText.
  3. Haga clic en Data Binding.

Esta sección controla cómo y cuándo el Rational Application Developer vinculará los datos a los controles, y consiste de cuatro controles:

  • Una casilla rotulada Binds to multi-valued data (Collection or array)
  • Una caja combo de Default attribute for binding que presenta una lista de todos los atributos del outputText como opciones
  • Una caja combo de Attribute for repeating values que también presenta una lista de todos los atributos del outputText como opciones
  • Una caja combo de Behavior for drops from Page Data view. Las tres opciones de esta caja combo son Bind, Insert child controls, y Bind and insert child controls.

Usted debería seleccionar la casilla Binds to multi-valued si el control se vinculara comúnmente a un conjunto o matriz (vale decir, si los datos incluyen múltiples valores). Por ejemplo, un control de Data Table comúnmente se vincula a un conjunto o matriz, de forma que los controles de Data Table deberían tener seleccionada esta casilla.

La caja combo de Default attribute establece el atributo primario en el control para vincular a datos. Si los datos se sueltan desde la vista de Page Data hacia el control, el Default attribute elegido aquí será vinculado a los datos. En muchos casos, debe seleccionarse el atributo value.

El Attribute for repeating values se usa comúnmente junto con la casilla Binds to multi-valued data. Si un control se vincula a un conjunto de datos y puede aceptar hijos, entonces el valor vinculado de los hijos frecuentemente se determina sobra la base de un atributo repeating value. Por ejemplo, los controles de Data Table generalmente tienen un atributo var. Para un control de Data Table, se seleccionaría la opción Binds to multi-valued, y el Attribute for repeating values se establecería como var.

El combo de Behavior se usa cuando los datos son arrastrados desde la vista de Page Data hacia un control. Si se establece como Bind, entonces los datos simplemente serán vinculados al control. Si se establece como Insert, entonces los nuevos controles hijos serán generados dentro del control deseado. Si se establece como Both, entonces el control deseado será vinculado y los nuevos controles hijos serán generados dentro del control deseado. Más abajo se verán todas estas opciones con más detalle.

Para su control outputText:

  • Binds to multi-valued debe quedar sin marcar, ya que este control comúnmente se vincularía a un único objeto Java y no a un conjunto de datos.
  • El Default attribute es value (como usted vio, el nombre del empleado fue vinculado al atributo value).
  • El Attribute for repeating values está en blanco, ya que no se necesita.
  • El Behavior se establece como Bind.

Estas selecciones fueron previamente hechas para usted cuando se creó la Faces Library Definition. Esto es porque el Rational Application Developer intenta examinar la biblioteca de etiquetas seleccionada y elegir puntos de partida razonables. Sin embargo, hay muchas instancias en las que querría ir más allá de estos puntos de partida y realizar otras configuraciones usted mismo.


Insertar nuevos controles hijos

¿Cómo hacer para crear nuevos controles hijos dentro del control deseado? A menudo los controles del panel contienen otros controles. Ahora usted personalizará una Panel Grid y luego añadirá un control dentro de ella para el nombre del empleado.

  1. Expanda Faces Library Definition > Tag Library (Tomahawk) > panelGrid
  2. Haga clic en Data Binding.
  3. En forma predeterminada, el Behavior for drops from Page Data view está establecido como Bind. Cámbielo a Insert child controls.
  4. Guarde la Faces Library Definition.
  5. Vuelva a cambiar a existingControls.jsp.
  6. Arrastre una Panel Grid desde el Tomahawk Drawer de la Palette hacia la página.
  7. En la vista de Page Data, expanda Faces Managed Beans >emp. (com.MyCompany.TestEmployee) > employee (com.MyCompany.Employee)
  8. Haga clic en name.
  9. Arrastre el name hacia la página y suéltelo en panelGrid.
  10. En la ventana de Insert JavaBean, cambie la caja combo de la columna Control Type a Tomahawk Output Text.
  11. Haga clic en Finish.

¿Qué sucedió aquí? Se añadió un Output Text dentro de la Panel Grid, pero también se añadió una tabla HTML. ¿Y si usted sólo quería el Output Text? Usted podría eliminar manualmente las etiquetas de la tabla HTML a partir del origen, o podría configurar la Faces Library Definition de forma que pueda usar esta configuración en otras páginas y en otros proyectos. Configuremos la Faces Library Definition.

  1. Diríjase a Edit > Undo para eliminar la tabla HTML de la página.

Si usted quiere formatear especialmente los controles hijos, necesitará crear una plantilla especial de Child Tags para ellos. Esta plantilla es similar a otras Data Templates usadas en el Rational Application Developer.

  1. Vuelva a Faces Library Definition.
  2. Haga clic en Library Definition > Tag Library (Tomahawk) > panelGrid
  3. Haga clic en el botón Add.
  4. En la ventana de Add Item, haga clic en Child Tags.
  5. Haga clic en OK.

Aparecerá la ventana de Edit Template.

  1. Ingrese Panel Grid Child para Name.
  2. Ingrese Formatting for the child of a Panel Grid en Description.

El diseño para esta plantilla será muy simple: lo único que usted quiere generar como hijo es el control del Input Text.

  1. Haga clic en el botón de Insert Variable y seleccione ${propertyTemplate}, como se muestra en la Figura 11.
Figura 11. Etiquetas del hijo de la grilla de panel
Nombre, Descripción y Diseño.
  1. Haga clic en OK.
  2. Guarde la Faces Library Definition.
  3. Vuelva a existingControls.jsp.
  4. En la vista de Page Data, haga clic en name.
  5. Arrastre el name hacia la página y suéltelo en panelGrid.
  6. En la ventana de Insert JavaBean, cambie la caja combo de la columna Control Type a Tomahawk Output Text.
  7. Haga clic en Finish.

Éxito! Esta vez el único hijo es un nuevo control de Output Text.

  1. Guarde la página.

Vinculación de los datos a una tabla de datos

Ahora veamos un control más complejo: Data Table. Los controles de una Data Table se usan frecuentemente junto con controles de Column, así que usted va a configurar las secciones de Data Binding tanto en Data Table como en Column, en nuestra Faces Library Definition.

Primero usted configurará la sección de Data Binding para una Data Table.

  1. Cambie a Library Definition.
  2. Expanda Faces Library Definition > Tag Library (Tomahawk) > dataTable.
  3. Haga clic en Data Binding.

Si usted mira esta sección, verá que el Rational Application Developer ya ha hecho algunas selecciones en forma automática para usted:

  • Se seleccionó Binds to multi-valued
  • El Default attribute es value
  • El Attribute for repeating value es var.

Todo esto significa que si usted arrastrara una matriz desde esa vista de Page Data hacia una Data Table, el resultado se vería similar a este código:

<t:dataTable styleClass="dataTable" id="table1"
value="#{emp.employee.positionsHeld}" var="varpositionsHeld">
</t:dataTable>

Esto está bien, pero usted lo puede hacer mejor. Usted puede configurar su Library Definition para añadir columnas automáticamente.

  1. Cambie el Behavior for drops from Page Data view a Bind and insert child controls.

Ahora usted necesita añadir una plantilla Child, tal como lo hizo para la panelGrid.

  1. Haga clic en Faces Library Definition > Tag Library (Tomahawk) > dataTable
  2. Haga clic en el botón Add.
  3. En la ventana de Add Item, seleccione Child tags.
  4. Haga clic en OK.

En la ventana de Edit Template, usted creará una plantilla para una columna.

  1. Ingrese Column para Name.
  2. Puede dejar la descripción en blanco (las descripciones de la plantillas son opcionales).
  3. Para el diseño, pegue este código, como se muestra en la Figura 12:
<${t}:column styleClass="column" id="${id}column">
	${propertyTemplate}
</${t}:column>
  1. Haga clic en OK.
  2. Guarde la Library Definition.
Figura 12. Etiqueta hija de la columna
Ventana de Edit Template completada para Data Table

Este diseño es muy similar al diseño que usted usó anteriormente para la plantilla iterativa de su Data Table. Esto es porque las etiquetas hijas son en realidad plantillas iterativas.

  1. Vuelva a existingControls.jsp.
  2. Arrastre una Data Table desde el Tomahawk Drawer de la Palette y añádala a la página debajo de la Panel Grid.
  3. En la vista de Page Data, expanda Faces Managed Beans >emp (com.MyCompany.TestEmployee) > employee (com.MyCompany.Employee)
  4. Haga clic en positionsHeld y arrástrelo hacia la página.
  5. Suéltelo en la Data Table.
  6. En la ventana de Insert JavaBean, cambie todas las cajas combo en la columna de Control Type a Tomahawk Output Text.
  7. Haga clic en Finish en el asistente.

La Data Table ahora tendrá tres columnas, como se muestra en la Figura 13.

Figura 13. Data Table con nuevas columnas
Data Table con tres columnas

Se generaron los atributos value y var de dataTable, y se vincularon a la matriz positionsHeld, y luego se generaron columnas dentro de esta tabla de datos. Cada columna contiene un outputText (propertyTemplate), y el valor del outputText hace uso del var de la dataTable.

Para avanzar aún más en su configuración de la Tomahawk Library Definition, usted también podría configurar la sección de Data Binding del control de la columna. Puesto que algún usuario podría querer soltar datos en el control de la columna y generar un nuevo texto de Entrada o de Salida dentro de ella, puede establecerse la caja combo de Behavior para Column a Insert. Por otro lado, puede crearse una nueva plantilla de Child Tags con el contenido: ${propertyTemplate}.


Lo que se usted ha aprendido

Con plantillas de datos y Faces Library Definitions, el Rational Application Developer le facilita la configuración de una biblioteca de etiquetas JavaServer Faces de un tercero. Usted puede crear primero las plantillas de datos y generar nuevos controles a partir de ellos, o puede añadir controles en forma manual y luego vincularlos a datos. De una u otra manera, el Rational Application Developer proporciona un amplio conjunto de herramientas pata ayudarlo a personalizar la experiencia para sus necesidades individuales.


Descargar

DescripciónNombretamaño
Sample data for this article624_Employee.zip2KB

Recursos

Aprender

  • Conozca los detalles acerca de otras aplicaciones en IBM Rational Software Delivery Platform, incluyendo herramientas de colaboración para desarrollo paralelo y equipos geográficamente dispersos, además de software específico para gestión de arquitectura, administración de activos, gestión de cambios y de entrega, administración de requisitos integrados, administración de procesos y portfolios, y gestión de calidad.
  • Usted puede hallar manuales de productos, guías de instalación y otros documentos en IBM Rational Online Documentation Center.
  • Visite el área de software Rational en developerWorks para conocer sobre recursos técnicos y mejores prácticas para productos de Rational Software Delivery Platform.
  • Explore los cursos Rational en línea basados en computadoras, basados en la web y dirigidos por instructores. Perfeccione sus habilidades y conozca más acerca de las herramientas Rational con estos cursos, que abarcan desde el nivel introductorio al avanzado. Los cursos de este catálogo están disponibles para la venta a través de entrenamiento basado en computadoras o entrenamiento basado en la web. Además, algunos cursos de iniciación están disponibles sin cargo.
  • Suscríbase a IBM developerWorks newsletter, una actualización semanal sobre los mejores instructivos developerWorks, artículos, descargas, actividades comunitarias, webcasts y eventos.

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=627787
ArticleTitle=Vinculación personalizada de datos a controles de JavaServer Faces de terceros en Rational Application Developer
publish-date=02182011