Ejemplo de maquetación. Parte 2

Descripción: En este artículo vamos a continuar dando formato a la página de buscador, en 10g.

En el artículo anterior (Ejemplo de maquetación parte 1) vimos lo que pretendíamos hacer así como los primeros pasos para personalizar la página.

Nota: Puedes descargar el ejemplo completo en este enlace: Descargar Ejemplo

Nos habíamos quedado en el este punto:

vista buscador

Miremos a la tabla af:table, y vamos a quitar el texto que acompaña al botón que se encuentra en la parte superior izquierda (Select and).
Para ello debemos ir en la estructura al elemento facet-selection, y dentro a af:tableSelectOne. Quitamos de ahí el texto.

cambia elemento tableSelectOne

se quita el texto en af:tableSelectOne

Ahora nos queda colocar los elementos el panelForm y el aftable dentro de una estructura que permita disponer de ellos de forma vertical y algo más centrada.

Para ello tenemos el componente PanelGroup, que permite agrupar componentes y maquetarlos según la orientación que nos interese.
Añadimos el PanelGroup dentro del h:form.

añadimos elemento panelGroup

Una vez colocado el componente, tenemos que arrastrar, primero el panelForm, y luego el afTable.
En un componente de este tipo, cada elemento que arrastremos se colocará al final de los que ya se encuentren. Por esta razón lo hacemos en este orden.

Nota: Si nos equivocamos, bastará con arrastrar el componente al lugar que nos interese.

elementos dentro del panelGroup

Indicamos la orientación de los elementos que están dentro del panelGroup con el atributo Layout.

atributo Layout del PanelGroup

vista como queda la estructura

También vamos a aumentar el ancho del aftable (width) al 100% para que ocupe todo el ancho de la página.
Nota: Este porcentaje debemos entenderlo como el porcentaje del espacio dentro del cual se encuentra el objeto af:table. 

cambiar atributo width del aftable

Al ejecutar la aplicación este es el aspecto que presenta.

aspecto de la aplicación

En el siguiente artículo vamos a mejorar la personalización de la tabla af:table. Utilizaremos el elemento afh:TableLayout, así como centraremos la tabla y veremos el atributo banding para presentar los resultados con colores alternados.

Artículos relacionados:
- Ejemplo de maquetación de una página (Parte 1)
- Ejemplo de Maquetación. Parte 3