Ejemplo de Maquetación. Parte 3

Descripción: En este artículo vamos a centrar un aftable, utilizando el componente tableLayout.También veremos cómo presentar los resultados con colores alternados en el aftable con el atributo banding.

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


En el artículo anterior nos habíamos quedado la página tenía el siguiente aspecto:

vista de la página resultado

Si nos ponemos a jugar con el porcentaje del ancho de la tabla (width), vemos que ésta se encuentra alineada en el lado izquierdo de la página.

Si queremos centrarla podemos utilizar el componente afh:tableLayout.
El componente tableLayout, recuerda mucho al elemento Table del HTML, en el que el contenido se coloca dentro de elementos <TD>, que su vez estaban dentro de elementos <TR>.
En este caso utiliza otros componentes afh:rowLayout y afh:cellFormat. 

vista estructura página

Como podemos observar hemos añadido los elementos afh:tableLayout, afh:rowLayout y afh:cellFormat, y también se ha colocado dentro de este último elemento nuestra tabla.
Si observamos el resultado, la página se nos queda como sigue:

vista página resultado

A primera vista parece que hemos salido perdiendo con el cambio.
Para empezar tenemos que el ancho de la tabla (af:table) ya no ocupa todo el ancho de la página, sino que ha encogido.
La razón es que habíamos definido el ancho (width) de la tabla con el 100%. En la estructura anterior significaba ocupar el 100% del elemento que lo contiene, en ese caso el elemento era el af:panelGroup.
Si éste, hubiera tenido el ancho definido al 50%, nuestra tabla (af:table) hubiera ocupado la mitad del ancho de la pantalla (el 100% ancho definido por el elemento contenedor).

Entonces si queremos ampliar el ancho del elemento contenedor (afh:tableLayout), lo haremos a través de sus propiedades, y cambiando el atributo width.

selecionamos el elemento contenedor afh:tablelayout

En el Inspector Properties cambiamos el ancho (width) a 70%, y también alineamos la tabla, al centro (Halign = center). 

atributos halign y width

Con estos cambios el aspecto de la página es el siguiente:

aspecto de la página

Como podemos observar ya se parece bastante al aspecto que queríamos tener.

Para terminar, vamos a hacer que los resultados de la tabla aparezcan de forma alternada (banding).
Para ello, seleccionamos el af:table que contiene los resultados.

selección af:table en la estructura

Y cambiamos el atributo banding en el inspector properties.

atrubto banding

Como podemos observar, banding, nos permite varias opciones, y eligiremos que los colores alternados se muestren a nivel de filas (row).

También vamos a cambiar el ancho de una de las columnas, para que no aparezcan ambas columnas con el mismo tamaño.
Vamos a poner la columna del FirstName, algo más corta que las del LastName.

cambio ancho columna FirtsName (af:column)

cambio del ancho de la columna

El resultado que nos queda es el siguiente

vista resultado

Con esto termina este ejepmlo de maquetar/perder el miedo a mover objetos, dentro de una página en Oracle ADF. 

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