ADF Bindings 2/3

Descripción: Este post es continuación del anterior en el que hacíamos una introducción a los ADF Bindings.

En esta ocasión vamos a responder a la pregunta: ¿De dónde salen los objetos del bindings?

Si miramos en nuestro ejemplo, hemos visto que al arrastrar una tabla desde el DataControl Palette a la página, se creaba tanto la tabla, como su contraparte en la página de definición.

View en el DataControl Palette

tabla en la página de definición.

Lo mismo ocurre con el commit que arrastramos desde el apartado Operations dentro de PlantillaAppModuleDataControl.

Como podemos observar, tanto las operaciones (action), como la tabla (table), como otros elementos que se encuentran en la página de definición, provienen del Appmodule,y por lo tanto de la capa de datos.
Por eso se dice que los Bindings está relacionado con la parte del Modelo (model).

Ahora bien, como vimos en el post anterior, no todo está definido de forma explícita, es decir, que se ha tenido que hacer arrastrando elementos o escribiéndolos a mano, sino que existen acciones o propiedades de estos objetos que existen implícitamente, y por lo tanto, puede ser útil conocerlos por encima para ver lo que nos ofrece.

Vamos ver un poquito lo que nos ofrece el ADF, y así vamos conociendo ciertas interioridades.

Seleccionemos el botón que dice “Commit”, y vayamos al inspector de propiedades (property inspector).
Pulsamos dos veces para que se nos abra la pestaña a pantalla completa y observemos.

propiedades del bottón Commit

Miremos en la propiedad “Disabled”, y vayamos a la parte derecha, haciendo click sobre la expresión que se encuentra ahí.
Nota: Este tipo de expresión se llama Expresión del lenguaje (Expression Language), y ya lo veremos más adelante. Lo adelanto sólo para abrir boca :-)

Si nos fijamos nos aparece un boton con unos puntos suspensivos, pulsemos ese botón.

expression builder

Este cuadro es una especie de asistente (Expression builder) que nos muestra datos o propiedades que se encuentran en objetos de la aplicación, y que nos puede ayudar a buscarla y escribirla de forma correcta.
En este proyecto de pocas páginas, no es difícil saber dónde está cada cosa, o cómo se llama una variable, pero cuando el proyecto empieza a crecer, puede ser útil contar con una herramienta así.

Despleguemos el apartado que dice “ADF Bindings”

expresión resultante

Bueno ahí esta nuestra propiedad “enabled” que nos puso el Jdeveloper cuando arrastramos la operación “Commit”.
También podemos ver otras propiedades, tanto para el Commit, como para EmpleadosView o del EmpleadosViewIterator.
Son propiedades que están disponibles para ser utilizadas si es necesario.
Ya iremos viendo algunas de éstas a medida que vayamos avanzando.
También me gustaría que se quedara con la idea de que en Bindings están los objetos que hemos utilizado en la página, y no otros que pueden existir en la aplicación pero que no hemos utilizado.

Seguiremos ahondando sobre el ADF Bindings en el siguiente post.

Puedes estar al tanto de las novedades en twitter @ADFSalvaje.

Otros artículos relacionados:
- ADF Bindings (1/3)
- ADF Bindings 3/3
- Introduccion a Expresión del lenguaje (Expression language)

 

ADF Bindings (1/3)

Descripción: En esta serie de artículos vamos a ver lo que son los ADF Bindings, y su papel en ADF como parte de la capa del Modelo (Model).
Nos apoyaremos para su estudio en el ejemplo que hemos visto en el artículo anterior por lo que puedes descargarte el fichero zip que contiene el ejemplo para verlo mejor con el JDeveloper.

Descarga del ejemplo Descargar

ADF Bindings o como se suele decir muchas veces “bindings”, es la parte de la página que va a contener los datos que vamos a mostrar en la página.
Esta definición, es un poco simple, pero nos servirá para ir aproximándonos a este aspecto tan importante en ADF.

Como hemos visto la página tiene una parte de vista(visual), que es el fichero jspx que los ejemplos que hemos visto.
Aparte de lo visual, también incluiremos datos. Estos datos los hemos arrastrado desde el DataControl Palette hasta nuestra página, para crear una tabla, un listado, poner un botón, etc.
Cada vez que hemos hecho esto, hemos visto que se ha añadido algo a la página de definición (pagedef).

Pues bien, esta página de definición se puede decir que es eso que llamamos "bindings". Es decir, que se puede ver como un receptáculo para los datos que contiene la página o que va a mostrar la página, así como las acciones y variables.

¿Todo se encuentra en la página de definición?
La respuesta es NO.

Vayamos al botón Commit de nuestro ejemplo y observemos sus propiedades:

commandbutton property inspector

Si observamos la propiedad “disabled”, nos encontraremos con la expresión
#{bindings.Commit.enabled}

Este valor, no se encuentra en nuestra página de definición. Entonces ¿dónde se encuentra?

Son propiedades que ya vienen dentro del objeto (built-in) por lo que podemos usarlos sin tener que declararlos.



Lo que se ha visto en este primer artículo es sólo un primer paso, y es necesario seguir los siguientes artículos para tener una imagen más completa.

Artículos relacionados:
- ADF Bindings 2/3
- ADF Bindings 3/3

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 anterior artículo (Añadir una nueva columna a una tabla II) 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 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

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

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

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

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.

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 diálogo Insert Column

Editamos Component Value y esto es lo que nos encontramos:

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 de las propiedades de la columna

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

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

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 table (af:table) gráficamente
- Añadir unan nueva columna a una tabla (af:table) III

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 (Añadir una nueva columna a una tabla III)
En el articulo anterior nos encontramos con que la columna Salary, no mostraba ningún resultado.

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 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.

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.

vista código jspx

Si probamos la página podemos ver el resultado:

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 @ADFSalvaje

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.

vista Data Control Palette

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

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

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 página definición

Cuando ejecutamos esta página este es el 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 @ADFSalvaje

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 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 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.

Mostrar un número diferente de elementos de una tabla (aftable)

En el ejemplo de mostrar los datos en forma de tabla (aftable), vimos que nos mostraba hasta 10 elementos.
Para ir viendo la potencialidad de los componentes vamos a hacer que la tabla nos muestre un número diferente de resultados en cada vez.

Como vamos a modificar la forma de mostrar los datos, iremos a la página de definición (pagedef):

vista página definición

Hay una propiedad dentro de iterator, que es RangeSize. Actualmente tiene el valor "10".
Si lo cambiamos por "20", podremos ver el cambio en la página.

A diferencia que el jspx, cuando se cambia algo en la página de definición, no se puede refrescar la página para ver los resultados.
En este caso hay que parar la aplicación, y ejecutarla de nuevo para ver los cambios.

Viendo la página de Definicion (pagedef) tras el ejemplo

En el ejemplo de incluir una tabla en la página pudimos ver cómo con sólo arrastrar un elemento desde el Data control palette, tenemos un componente con cierta funcionalidad.

listado de empleados

Ahora observemos en la página de definición, que anteriormente habíamos pasado por encima sin decir apenas mucho, qué es lo que sucede.

página definición

En primer lugar nos encontramos el iterador ( iterator), que se puede entender como el conjunto de datos que muestra en la página o el iterador que recorrerá ese conjunto de datos.
Vemos que está vinculado a EmpleadosView, es decir que los datos los toma de ese viewobject, y que quien lo gestiona es "PlantillaAppModuleDataControl".
Esto parece obvio, pero es que ADF nos permite tener el mismo vieobject en varios Appmodules, con lo que un error a la hora de elegir el Appmodule es difícil de localizar porque no es un error de los que podamos encontrar un mensaje.

En la sección " Bindings" encontramos el elemento table, que viene a indicarnos la forma en que se presenta en pantalla, aunque realmente no es así. Podemos encontrarnos que objetos que utilizan listados de valores, pueden tener una representación parecida en la página de definición, pero comportamientos muy distintos en la parte de vista.

Dentro de Table, podemos ver cada uno de los elementos que estamos mostrando.

Crear una página de definición (page definition)

La página de definición ( page definition) gestiona los datos que se van a mostrar en pantalla.
Aunque estos datos, también pueden gestionarse a través de otros elementos ( beans, por ejemplo), ésta es la forma más habitual de hacerlo.

Por así decirlo, por beans (código en java) vamos a tener un mayor control de los datos, pero también vamos a tener que ser más "manuales", y picar bastante código,
mientras que si nos aprovechamos de las ventajas que nos ofrecen los componentes de ADF podemos tener mucho avanzado con sólo configurar algunos parámetros.

Esto es importante porque merece la pena sumergirse en todo lo que nos ofrece ADF antes de lanzarse a escribir código.

Se puede crear la página de definición desde varios lugares, aunque todos al final harán los mismos pasos.

Pinchando en fondo del código fuente (source)

vista código fuente

Desde el fondo de la página de diseño (design)

vista design

En la pestaña de Application Navigator, seleccionando la página sobre la cual queremos crear la página de definición.

Application Navigator

En el menú contextual seleccionamos la opción " Goto Page Definition".
Una vez hecho esto, nos aparece lo siguiente:

aviso creacion de página definición

Si elegimos (Yes), se nos mostrará un fichero nuevo con el siguiente aspecto:

vista página definición

Finalmente guardamos todos los cambios.

Más adelante veremos en ejemplos prácticos el papel que tiene la página de definición