Un Recuadro de grupo también puede organizar componentes en formato de tabla.
Un
Recuadro de grupo de tipo Lista sólo puede tener una fila o columna, pero un Recuadro
de grupo de tipo Rejilla puede tener varias filas o columnas. En estos pasos, se moverán
los componentes {PRICE} y {PHONE} a la columna DESCRIPTION de la tabla de datos
e incluiremos etiquetas para ellos.
- Arrastre un componente Panel - Recuadro de grupo de la bandeja Componentes Faces ampliados
de la paleta a la columna DESCRIPTION de la tabla de datos. Se abrirá la ventana Seleccionar tipo.
- Pulse Rejilla como tipo del componente a añadir y luego Aceptar.
- Pulse sobre el Recuadro nuevo de grupo de rejilla.
- Utilice la vista Propiedades para establecer el número de Columnas de este recuadro de
grupo en 2.
- Arrastre un componente Salida de la bandeja Componentes Faces de la
paleta al Recuadro de grupo de rejilla. Este componente de salida será una
etiqueta para la descripción del elemento a la venta.
Cada componente de salida
tendrá una etiqueta como esta en la celda izquierda de la tabla.
- Pulse el componente Salida (en Page Designer aparece como
outputText) y utilice la vista Propiedades para asignarle el Valor
Description:
- Arrastre el componente {DESCRIPTION} existente al extremo
inferior del recuadro de grupo de cuadrícula. Si tiene problemas arrastrando los componentes al lugar
adecuado del recuadro de grupo, pruebe pulsando el botón del ratón y observe
el cursor. La ubicación del cursor en el recuadro de grupo indica el lugar en que aparecerá
el componente cuando suelte el botón del ratón. En este ejercicio, debe soltar el
botón del ratón cuando el cursor esté a la derecha del componente previo.
- Arrastre otro componente Salida de la paleta y suéltelo en la parte
derecha del recuadro de grupo.
- Utilice la vista Propiedades para asignarle un Valor Price:.
- Arrastre el componente de salida {PRICE} existente a la derecha del texto de
salida Precio.
- De la misma forma, arrastre un componente Salida para la etiqueta para el componente
{PHONE} y llámelo Phone:.
- Arrastre el componente {PHONE} existente en el recuadro de
grupo de cuadrícula a la derecha del texto de salida de Phone. La página debería tener el aspecto
siguiente:
- Suprima las columnas PRICE y PHONE vacías de la tabla de datos. Para suprimir una columna, pulse sobre la columna
y abra la vista Propiedades. A continuación pulse h:dataTable de la lista de códigos HTML que hay a la
izquierda de la vista, seleccione la columna que quiere eliminar de la lista de la derecha de la vista y pulse Eliminar.
- Pulse sobre la cabecera de la columna Descripción y utilice la vista Propiedades
para cambiar su campo Valor a Detalles. La página debería
tener el aspecto
siguiente:
- Guarde la página y pruébela. Si no está familiarizado con la ejecución de las
aplicaciones en el servidor, consulte la
Lección 1.3: Probar el sitio Web.
Cuando pruebe la página, debería tener
el aspecto
siguiente:
Los anuncios que no tengan una imagen asociada visualizarán un
enlace dañado. En la próxima lección, aprenderá a añadir un componente de subida de archivos a la página para añadir o
cambiar la imagen de un anuncio.
situado junto al campo 
