miércoles, 26 de febrero de 2014

Ordenar una tabla (af:table) desde la cabecera

Resumen: En este post vamos a ver cómo dar la opción al usuario, para que pueda ordenar los resultados, según el orden y criterio que quiera.

Para ellos nos ayudaremos de las propiedades sortable y sortProperty.

Con sortable, estamos indicando que se ve a permitir a esa columna o a la cabecera, ordenar los resultados de toda la tabla.

Con sortProperty, indicaremos qué propiedad utilizaremos para ello. Puede ordenarse por un valor distinto al que muestra la columna actual.
Para entender esto veamos nuestro ejemplo:


vista del aftable pagina resultados
vista inicial de la tabla af:table

atributos afcolumn
atributos de af:column


 Cambiamos el valor del atributo sortable por "true", así indicamos que Sí, queremos que se use como elemento de ordenación. 

cambio atributo sortable a true
cambio atrituto sortable




Guardamos los cambios y refrescamos la página (aunque ya saben que puede darnos resultados inesperados). 

vista ejecucion pagina
vista ejecución de la página



Como se puede observar ha habido un pequeño cambio en la cabecera de las columnas que hemos cambiado la propiedad sortable.   
Aparece un pequeño borde, y también si pasamos el ratón por ahí, al cabecera parece clickable. 

Si pinchamos en la cabecera de Nombre sucede esto:

tabla ordenada cabecera afcolumn
tabla ordenada por la cabecera
 
Los resultados de "toda" la tabla (no de la columna) se ordenan alfabéticamente por el campo Nombre. 
También nos aparece una flechita que nos indica el orden que se está siguiendo en ese momento (de menor a mayor). 

Si volvemos a pinchar en la cabecera Nombre, lo ordena de forma descendente.

pagina resultados aftable orden descendiente
aftable ordenado de forma descendente

Bien hagamos lo mismo con la columna Salario. 

aftable ordenada columna salario
tabla ordenada por columna salario



Como podemos observar, los resultados de la columna Salario, NO son los esperados. 
¿Qué es lo que ha pasado?

Si miramos el código nuevamente observamos una cosa: 

revision valor sortproperty
revisión valor sortproperty



El atributo sortProperty pone el valor "LastName" en vez de Salary, que era el esperado. 
Esto ha ocurrido porque anteriormente para crear esta columna decidimos copiar la columna de al lado, y cambiar el valor de la columna, pero no nos fijamos en otras propiedades que quedaron pendientes del cambio. 
En otras ocasiones, puede ocurrir que al ser un campo String, y los valores que guarde representen cantidades, la ordenación se haga como String, y no como cantidad (que es como lo vemos nosotros), y nos lleve a darle muchas vueltas del por qué de este fallo cuando todo "parece estar bien". 

Cambiar cabecera de columnas en una tabla (af:table)

Resumen: En artículo se va a explicar cómo cambiar el texto que aparece en la cabecera de una columna (af:column)

En el ejemplo que estamos siguiendo tenemos la siguiente tabla:

vista tabla navegador
vista de la tabla


Como podemos observar, los títulos de las columnas tienen los mismos nombres que los atributos del viewObject.

Este es el código de la tabla:

vista codigo aftable
vista código af:table



Dentro de cada columna tenemos el atributo headerText, que es quien contiene el título de la columna.
Por defecto lo toma de bindings, los atributos label y luego nombre del campo.
Esta parte lo iremos viendo mejor a medida que vayamos conociendo los Business Components y las facilidades que ofrece para configurar elementos de cara a la vista.

Vamos a cambiar los atributos:
- FirstName por Nombre
- LastName por Apellido
y el otro le ponemos Salario (tiene lastName porque anteriormente habiamos copiado la columna LastName).


source de la tabla af:table
vista del af:table con los atributos modificados



aftable resultados en el navegador
vista de los resultados

Otros artículos relacionados:
-

-
-
 
Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter

domingo, 23 de febrero de 2014

Añadir una nueva columna a una tabla (af:table) III

Resumen: En este artículo veremos una forma algo más "elegante" de añadir una columna a una tabla (af:table).
En el
tuvimos que recurrir al código para salir de la situación, y en este caso usaremos las herramientas gráficas que nos ofrece JDeveloper y ADF.

Para empezar, miremos a la página de definición, antes de que empezáramos a hacer cambios.

vista pagina definicion
vista página definición


Si vamos a la pestaña estructura (de la página de definición), podemos ver lo siguiente:

estructura page definition
estructura page definition



Haciendo doble click en este elemento, que representa la tabla, desde el punto de vista de la página de definición.

table binding editor
vista table binding editor

Podemos ver un editor, en el que podemos añadir el nuevo campo a los que actualmente tenemos, y que aparecen en la parte derecha (Display Attributes).

table binding editor incluir nuevo campo
table binding editor incluir nuevo campo



Podemos ver los cambios tanto en la página de definición como la estructura.

cambios en pagina definicion
vista de cambios en la página definición

Ahora nos queda añadir la columna en la parte visual (fichero jspx).
Para ello vamos a la estructura, y seleccionar la columna dentro de la tabla. Una vez seleccionada, con el menú contextual (botón derecho), podemos indicar que queremos añadir una nueva columna despues de la columna seleccionada.

nueva columna afcolumn desde pagina jspx
añadir nueva columna desde la página de diseño



Al hacerlo se mostrará un asistente para que podamos añadir los valores adecuados a la columna.

cuadro insert column
cuadro diálogo Insert Column

Editamos Component Value y esto es lo que nos encontramos:

cuadro expression builder
cuadro Expression Builder


Bien está claro que no se saber por dónde encontrar lo que queremos añadir que es #{row.Salary} (fijémonos en las otras columnas).
Lo podemos añadir manualmente escribiendo esto en el cuadro "Expresión", pero creo que esa no era la idea.
Evidentemente es algo que se echa en falta en este asistente.
(Nota: mirar en versiones posteriores a 10g, seguramente lo habrán solucionado).

Y ahora pensarás ¿solucionar el qué?
Bien, pulsemos "Cancelar" para salir completamente de este Editor /Asistente.

Volvamos a la estructura, y seleccionemos la columna inferior, y en el menú contextual elijamos "Copy" (sí, vamos a hacer un copy-paste de una columna).



Ahora seleccionemos a la tabla, y con el menú contextual o con el teclado, pegamos la columna.




Ahora hagamos doble click en la nueva columna, y miremos el asistente:

vista column properties
vista de las propiedades de la columna



Si miramos en el asitente de Componente Value, podemos ver que se encuentra el objeto row, cosa que antes no veíamos.

cuadro expression builder
cuadro expression builder con el objeto row



Desplegando el elemento row (que se encuentra dentro de JSP Objects), podemos seleccionar la nueva
columna, y con doble click, se actualiza el campo Expresión.

Guardamos todo, y ejecutamos la página:

vista resultado navegador
vista resultado navegador

Podemos ver que la nueva columna contiene los datos.
Sólo nos ha quedado atrás la cabecera de la columna. Cosa que ya veremos en otro artículo.

Artículos relacionados:
-

-

Añadir una nueva columna a una tabla (af:table) II

Resumen: En esta artículo vamos a ver cómo añadir una columna ( af:column) a una tabla ya existente. La forma será muy manual, observando el código. En otro artículo veremos cómo se puede hacer gráficamente ()
En el nos encontramos con que la columna Salary, no mostraba ningún resultado.


vista resultados navegador
vista resultados navegador


Sospechábamos que podría estar relacionado con el attributeValue
que se había creado en la página de definición.


attributeValues page definition
attributeValues en página definición

La solución rápida sería:
Bueno, hemos visto cómo están los demás campos, ¿por qué no poner el código como los demás campos?
Por lo que podemos ir a la página de definición, y poner dentro de la tabla, un nuevo campo que sea Salary.


incluir columna page definition
vista página definición

Y en la página de vista (jspx), la nueva columna corregimos el nombre para que sea similar a lo que hemos añadido a la página de definición.


incluir afcolumn en codigo jspx
vista código jspx



Si probamos la página podemos ver el resultado:

vista resultado aftable nueva columna
vista navegador
Hemos resuelto el problema, aunque de una forma poco ortodoxa (por algo esto es adfsalvaje
y no adfElegante).
Ya veremos más adelante, cómo se debería haber hecho correctamente.
Pero la razón de mostrar esto, es que a veces nos puede tocar "mancharnos" y tocar código, aunque sea para algún detalle. También que existe más de una forma de hacer las cosas, y sobre todo, para empezar a entrenarnos a resolver problemas (cosa que no siempre se suele ver en la documentación que hay en Internet).

Artículos relacionados:
- Añadir una nueva columna a una tabla (af:table) gráficamente I
- Añadir una nueva columna a una tabla (af:table) gráficamente III


Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter

Añadir una nueva columna a una table (af:table) gráficamente

Nota importante: este artículo va a llegar en su desarrollo a una situación de error. Habrá que seguirlo paso a paso, para comprender el tipo de error que podemos cometer y que luego no sabemos cómo resolver.
Si se quiere ver correctamente vaya a este artículo "Añadir una nueva coumna un af:table gráficamente II". 

En el artículo anterior se vio cómo se añadió un nuevo campo al viewObject cuyos datos generan la tabla.
En este artículo vamos a añadir la nueva columna de forma visual, más adelante veremos cómo hacerlo a través del código.

En primer lugar vamos a Data Control Palette (parte superior derecha), y despleguemos la view, para localizar el nuevo campo.


data control palette
vista Data Control Palette




Lo seleccionamos y lo arrastramos hasta la columna que tenemos en la página jspx (de vista).

arrastrar elemento data control palette como nueva columna
arrastrar elemento como nueva columna




Este es el resultado de la página:


En el código fuente de la página podemos observar el cambio que se ha añadido:


vista codigo fuente jspx
vista codigo fuente


En la página de definición, también se ha añadido cambios.
A diferencia que en el artículo anterior, no ha añadido una nueva columna, sino que ha añadido un elemento atributevalue
.

vista page definition
vista página definición


Cuando ejecutamos esta página este es el resultado.

vista de resultado
vista de resultado
Nuestra columna Salary aparece en blanco. Evidentemente algo ha salido mal.
El que apareciera el atributeValue en la página de definición es un indicativo, pues si se comporta de manera similar al resto de columnas debería estar en la misma estructura.




Esto que podría ser un traspiés para aprender ADF, lo podemos aprovechar para empezar a desarrollar la búsqueda de fallos. Y es que los errores más difíciles de encontrar no son aquellos que nos devuelve el compilador, o un mensaje de error en tiempo de ejecución, sino aquellos que aparentemente no recibimos ningún tipo de aviso.


En el siguiente artículo veremos como se hace correctamente.

Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter

Añadir un campo nuevo a un viewobject

Resumen: En este post vamos a añadir un nuevo campo (attribute) a un viewobject

En nuestro ejemplo, tenemos a la vista un viewobject el cual sólo muestra los campos EmployeeId, FirstName y LastName.

Estos campos los tomamos del viewobject EmpleadosView.

edit viewobject
editar viewobject

Si quisieramos añadir un nuevo campo, habría que editar el ViewObject de la tabla. (menú contextual editar o bien doble click)

viewobject entity object
viewobject editor


En el editor de Viewobject vemos las entidades que tiene asociadas, y nos vamos a los atributos (campos), para seleccionar lo que queremos añadir.



En este caso, vamos a añadir el campo "Salary" al viewobject. y pulsamos "Aplicar".
Enseguida vemos en la parte izquierda que se incorpora el nuevo campo junto con los otros tres.


attributes viewobject
editor de ViewObject

Aplicamos los cambios y Guardamos.

Podemos ver que si nos vamos a la página de Definición ( page definition), del ejemplo, y seleccionamos la tabla, nos aparecerá la opción de añadir la nueva columna en la página de definición.



table editor binding
editor binding

vista structure page definition
vista structure page definition


Luego habría que añadir la columna con el nuevo campo en la página jspx.
En el siguiente artículo (
) vamos a mostrar cómo añadir una nueva columna a la tabla de forma visual, y sin tener que dar tantos pasos ni picar código.



viernes, 21 de febrero de 2014

Colores alternados para una tabla aftable (banding)

Resumen: En este ejemplo veremos cómo podemos tener nuestra tabla de empleados con colores alternados por filas.

Para ayudarnos podemos utilizar el ejemplo usado en el anterior artículo:
Tenemos nuestra tabla ( aftable
) como resultado de nuestra de ponerla al 100% de ancho.


vista aftable

Volvemos a mirar el Inspector Properties, y buscamos la propiedad banding
. De las opciones que nos ofrece seleccionamos row, y guardamos los cambios.


atributo banding

Al refrescar en nuestra aplicación, vemos que los colores aparecen alternados.


resultado aftable

Hay otra propiedad como BandingInterval
, que podemos cambiarla por si queremos que los colores alternen cada dos, tres o N filas.
También podemos jugar a cambiar las columnas, si es que lo que nos interesa es tener una mayor separación visual entre éstas más que por filas.

Puedes jugar con estas propiedades, y ver los resultados.

Cambiar ancho de una tabla (af:table)

Este post vamos a cambiar una propiedad visual de la tabla.

En ADF se nos ofrece algunas propiedades muy útiles para cambiar el aspecto de un componente de manera que podemos ahorrar tiempo.
Existen en ADF otras herramientas también potentes, como son las hojas de estilo y los Selectores (Selectors), y los skins. Pero todos ellos los iremos viendo más adelante.


Tenemos el ejemplo de nuestra tabla de trabajadores de la empresa.

listado de personas
listado trabajadores

Nos vamos a la estructura y seleccionamos el elemento tabla, para poder acceder a sus propiedades:

structure tab
pestaña Structure

Si clickamos dos veces en la pestaña de Inspector de propiedades (inspector properties), nos encontraremos con un buen conjunto de propiedades que tiene la tabla.
Tomémonos un momento para verlas aunque no vayamos a hacer nada, sólo para familiarizarnos.

Tras ese momento, podemos ir a la propiedad width (ancho), y ponerle 100%.
Esta propiedad también acepta pixels y otras unidades, por lo que es interesante adaptarlo a nuestro diseño.

Importante: En ADF 11g, es más estricto el tema de las unidades y se tiende a utilizar
del tipo em, ex, frente a porcentajes %. Cuando estén probando esto en el JDeveloper habrá que estar atento a si nos aparece un aviso.


property inspector de aftable

Guardamos los cambios y refrescamos la página (cosa que no se debe hacer si estamos trabajando en algo serio o si tenemos más datos).
Podemos ver que nuestra tabla ocupa todo el ancho de la página.


vista resultado





jueves, 20 de febrero de 2014

Mostrar todos los elementos de una tabla (aftable)

Siguiendo el ejemplo anterior de cómo cambiar el número de elementos a presentar en la tabla, vamos a mostrar todos los resultados disponibles.

Para ello, vamos a la página de definicion ( page definition), y cambiamos el valor RangeSize a "-1".

vista pagina definicion
vista página definición


Paramos la aplicación, si no estaba parada ya, y la volvemos a arrancar porque los cambios en la página de definición, no los toma hasta que inicie de nuevo.

vista resultados rangesize -1
vista ejecuión

Ya podemos ver todos los resultados de la página de una sola vez.

Nota sobre esto: El que se muestre todo a la vez tiene sus costes, pues en el caso de ficheros donde haya muchos resultados va a hacer que la página sea lenta.
Más adelante veremos cómo se cargan los datos en una página y los problemas que suelen ocurrir, así como métodos para hacerlo más llevadero.