Crear un Viewlink

Descripción: En este artículo veremos cómo se crea un ViewLink en ADF 11g.
Esta descripción es muy similar a ADF 10g, por lo que puede utilizarse como guía.

Nota: En este ejemplo vamos a  crear un viewlink que nos permita enlazar la entidad Departmentos y Empleados, para más adelante, al selecionar un departamento, se muestre automáticamente los empleados.

El viewLink es un Business Component (BC), por lo que iremos al proyecto Model, y con el menú contextual seleciconamos "New View Link".

selección New View Link desde Model

Una vez seleccionada esta opción del menú contextual, se nos presentará un asistente que nos llevará paso a paso a la creación del viewLink. 
En este paso, pondremos el nombre del viewLink. Recomiendo que en el sufijo del nombre se indique que este objeto es un viewLink. La razón, es que visualmente sabemos el tipo de componente del que se trata sin tener que mirar sus propiedades.

A continuación nos muestra la relación entre entidades. Seleccionamos en este caso las asociaciones (Associations) que están en nuestro proyecto, y que ya une las entidades que queremos relacionar.
Al seleccionar tanto en el Source (fuente) como en el Destination (destino), completaremos la operación pulsando el botón "Add".

selección de origen y destino de la relación

A continuación nos consulta si queremos crear los accesors tanto para la fuente como el destino. Dependiendo de lo que vayamos a necesitar, podemos marcarlo o dejarlo por defecto. 

crear accesors para source y destination

El apartado Source Query, viene a reflejar la query que se esconde detrás del viewLink.
Aunque el viewLink, nos pueda dar la sensación de que no tenemos que preocuparnos por la consulta o consultas que se gestionan por debajo, esto no tiene que ser exactamente así.
En el caso de consultas "pesadas" o entre entidades que tienen una gran cantidad de registros, sería recomendable echarle un vistazo a esto. 

editar consulta fuente

A continuación nos indica si queremos incluir el ViewLink dentro de un Application Module. Esto puede ser útil, aunque personalmente suelo añadir la relación editando el Application Module. 

incluir en Application Module

Pantalla Summary o Resumen, en este paso, vemos un resumen de lo que hemos ido configurando en cada uno de los pasos vistos anteriormente. Tras pulsar "Finish" terminamos el proceso de creación del ViewLink.

vista resumen del viewlink

Si queremos incluir el viewlink, o mejor dicho, la relación entre entidades en el Application Module, deberemos ir al Data Model (editar Application Module).
Podemos ver en la parte izquierda la relación entre las entidades (Entity) Departamento y Empleados a través del Viewlink.

incluir viewlink en el Application Module

Solo tendremos que seleccionar y pasar la relación a la parte derecha para que ésta ya esté disponible para su uso. 

Nota: Cada vez que incluimos algo en el Application Module, hay que tener ojo con que nos añade un número al final del nombre. Puedes mantenerlo, o quitarlo (si no existe otro objeto con el mismo nombre en el mismo Application Module).

Puedes seguir el blog por Blogger ,  Twitter @ADFSalvaje

Crear un Application Module en 11g

Descripción: En este artículo veremos cómo crear un Application Module en Oracle ADF 11g.

Nota: Si estás trabajando en Oracle ADF 10g, puedes leer el artículo Crear un Application Module (AppModule).

Para crear un Application Module debemos ir al apartado Model de nuestra aplicación (Model Project),  e indicar con el menú contextual que queremos crear un Application Module.

menú contextual en el Model

Al hacer esto se abrirá un asistente que nos guiará paso a paso en la creación del application Module.

vista asistente creación application module

En este primer paso le indicaremos el nombre.
Se recomienda que el fichero tenga como parte del nombre el sufijo AppModule. Esto nos ayudará a distintinguirlo de otros ficheros en el acaso de que queramos modificarlo desde un lugar distinto al JDeveloper.
Además, ayuda a situar rápidamente el nombre que utilicemos en el futuro.

asignar nombre Application Module

En el siguiente paso nos consulta sobre el Data Model. Es decir, qué views (y otros elementos, como viewlinks) va a contener.
Al hacer la selección debemos tener en cuenta de que el asistente nos va a poner un número al final del nombre de la view o del viewlink.
En algunos casos es posible quitar los números para que se utilice le nombre del componente sin más, pero en otros casos, en los cuales podamos querer más de una instancia de la view en nuestro Appmodule, no nos quedará más remedio que recurrir a los números (o añadirle algo que distinta uno de otro).
Importante: Es muy típico, confundirse cuando te colocan el número y no te has dado cuenta. Doy fe.

vista asistente incluyendo viewobjects

vista asistente corrección del nombre del viewobject

Selección de Application Modules. Se puede incluir dentro de un Application Module, otros Application Modules.
Eso se escapa un poco de este post, aunque en internet hay algunos ejemplos de usos, y que pueden explicar para qué sirve esta práctica.

inclusión de otros Application Module

Creación de ficheros Java para gestionar operaciones del Application Module.
En ocasiones puede que nos haga falta incluir operaciones en ciertos momentos (comprobación de conexión con la base de datos, que los datos estén correctos antes de insertar, etc).
Para eso ADF nos ofrece la posibilidad de crear un fichero que nos permite incluir estas funcionalidades.

creación de clases Java

Vista resumen. En esta vista veremos el resultado del proceso de creación de nuestro Application Module, las views incluidas, los ficheros que hemos creado, etc.

vsita resumen

Artículos relacionados:
- Crear un Application Module (appmodule) en 10g
- Crear un ViewObject en 11g
- Crear una Entity en 11g

ADF Bindings 3/3

Resumen: En esta entrada se mostrará la estructura y el papel que tiene ADF Bindings dentro de la arquitectura ADF.

Para terminar con esta introducción a ADF Bindings, podemos ir a la documentación oficial de ADF, para ver lo que nos dice.

Nota: Se podría haber empezado por aquí, pero he preferido ver los ADF Bindings en acción en vez de presentarlo como algo abstracto.

Como habíamos visto en otro post dedicado a la arquitectura de ADF, ésta se separa en distintas áreas: Vista Modelo y Controlador (view, model y controller, MVC).

Arquitectura de ADF

Como hemos visto en el ejemplo de estos artículos dedicados a ADF Bindings (artículo 1, artículo), los Bindings gestionan la información que muestra la página, y por lo tanto, estaría colocado dentro de la capa : Model (si seguimos el modelo MVC).

En la imagen que tenemos, ADF Bindings se encontraría dentro de la capa ADF Model.

En el artículo del manual de referencia de 10g (en el de 11g también hay un texto similar encontramos lo siguiente) declarative Data Binding with Oracle ADF Model Layer donde se habla de dos mecanismos data controls y declarative bindings:

Data controls abstract the implementation technology of a business service by using standard metadata interfaces to describe the service’s operations and data collections, including information about the properties, methods, and types involved. At design time, visual tools like JDeveloper can leverage the standard service metadata to simplify binding UI components to any datacontrol operation or data collection.

Si miramos a nuestro DataControl Palette, y vemos lo que nos ofrece, podemos ver con claridad, que nos está proporcionando una forma de acceder a los datos, propiedades, métodos, de elementos que fueron creados ( ADF Business Components, en el esquema anterior de la arquitectura ADF).


Al arrastrar un elemento del Data Control Palette, se nos mostraba un menú contextual en el que se nos solicitaba la forma en que se iba a mostrar los datos.
Esta “forma de mostrar” los datos, es lo que se refiere con UI Components (User Interface Components), y por lo tanto, a la parte visual de la página.

añadiendo un componente desde DataControlPalette

En este mismo artículo se habla de sus ventajas:

- Escribir menos código
- Trabajar de la misma manera que cualquier otro elemento de UI o de Business service (homongeneidad)
- Disponer de características que sería difíciles de obtener si las tuviéramos que codificar.

Estas características las hemos visto en los ejemplos que hemos utilizado en este blog, por lo que nos suena todo ello.

La otra parte que se refiere dicho artículo es a lo que estábamos hablando comúnmente como Bindings,

Declarative bindings abstract the details of accessing data from data collections in a

data control and of invoking its operations.

Es decir, que nos permite manejar colecciones de datos de un data control, e invocar sus operaciones.

página de Definición

Existen tres tipos de objetos que manejan esta parte:

■ Iterator bindings to bind to an iterator that tracks the current row in a data

collection

■ Value bindings to connect UI components to attributes in a data collection

■ Action bindings to invoke custom or built-it operations on a data control or its

data collections

De estos tres tipos de objetos, en el ejemplo podemos ver dos de ellos, el iterator (iterador), y el Action (acción, método, función).

Veremos más adelante cada uno de estos tres elementos, su papel y cómo funcionan con ejemplos prácticos.

La idea de este post es:

- Tener una imagen clara de dónde está el ADF Bindings en la arquitectura ADF

- Saber lo que nos permite hacer y no hacer

- Familiarizarse con algunos términos para que cuando vayamos a leer otros blogs o bibliografía podamos entenderlo con cierta claridad.

Otros artículos relacionados:
- ADF Bindings 2/3
- ADF Bindings (1/3)
- Arquitectura ADF

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

Introducción a Control Hints para un ViewObject

Oracle ADF nos ofrece la posibilidad de personalizar desde los Business Components la presentación de éstos de cara a la vista.
Control Hints es un apartado que tienen los ViewObjects, Entities y otros, y que permiten dar formato a los datos que contienen de cara a la la presentación de éstos. Desde el nombre con el que se presentarán, hasta el formato de los datos (por ejemplo en datos de tipo Date es muy útil).

Para tener un primer contacto con lo que son los Control Hints, vamos a indicar a nuestra aplicación, qué nombre va a tener los atributos del viewObject.

En un post anterior, al crear la tabla, renombramos la cabecera de las columnas, con nombres distintos a los de los atributos (attributes).
Ahora lo que vamos a hacer es que sin necesidad de renombrarlo, podamos tener las columnas con los nombre que queremos.

Para ello, hacemos doble click (o con el menú contextual del ViewObject), seleccionamos "edit".

Editar ViewObject

Dentro del editor de ViewObject (ViewObject Editor), vamos a los atributos, y seleccionamos aquellos a los que vamos a añadirle el nombre que queremos que aparezca.

ViewObject Editor

En la pestaña Control Hints, observamos que hay varios campos. Cada uno de estos campos sirven para situaciones distintas. Nos centraremos en el campo "Label Text".

Dentro de este campo, ponemos el nombre que queremos que aparezca en la cabecera de la columna.

Guardamos los cambios.
Es importante guardar los cambios, porque si no lo hacemos, el resto de la aplicación no se da por enterada de lo que hemos hecho.
Igual que habíamos hecho en otro ejemplo, nos vamos al Data Control Palette, y arrastramos el viewObject EmpleadosView a nuestra página (jspx), y una vez ahí seleccionamos "Read-Only Table".

data control palette

Observemos el código resultante.
Nota: Es bueno acostumbrarse a leer el código y saber dónde están las cosas. :-)

Si ejecutamos la página podemos observar el resultado, que es similar al de la tabla inferior, en cuanto a la cabecera se refiere, y no hemos tenido que tocar el atributo headerText.

Como podemos observar podemos tener el mismo resultado por dos vías distintas. Una que podemos aplicar para un caso puntual, modificando headerText, y otro que se efectúa cada vez que mostramos alguna representación del viewObject.

Puedes descargar este ejemplo Descargar

Otros artículos relacionados:
- Crear un ViewObject
- Crear un ApplicationModule (appmodule)
- Crear una Entity

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 inicial de la tabla af:table

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 atrituto sortable

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

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

aftable ordenado de forma descendente

Bien hagamos lo mismo con la 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: 

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

Otros artículos relacionados
- Cambiar cabecera de columnas en una tabla (af:table)
- Cambiar ancho de una tabla (af:table)
- Colores alternados para una tabla aftable (banding)
- Mostrar un número diferente de elementos de una tabla (aftable)

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

vista del af:table con los atributos modificados

vista de los resultados

Otros artículos relacionados:
- Ordenar una tabla (af:table) desde la cabecera
- Colores alternados para una tabla aftable (banding)
- Cambiar ancho de una tabla (af:table)
 

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

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