Archive

Posts Tagged ‘ADF 11g’

ADF tips: Cambiar el estilo de un componente por su id

ADF tips

Si queremos cambiar la apariencia de un componente normalmente utilizamos Skinning y los selectores que nos ofrece. Aunque no es una forma usual de aplicar diferentes estilos a componentes, voy a mostraros como aplicarlos utilizando la id del componente.

Si por ejemplo tenemos un botón en una página, y este componente no está rodeado de ningún naming container (como puede ser un PanelCollection o una región), podemos utilizar su id sin hacer ninguna modificación más.

Podéis observar el código de la página, el css y el resultado.

 

1

2

3

 

Si por el contrario el componente está rodeado de un naming container, la id generada en html no será la misma, por ejemplo será ‘pc1:b2’ si lo tenemos dentro de un panelCollection o ‘r1:0:b2’ si el botón está dentro de una región.

Al ejecutar la página podremos inspeccionarla utilizando nuestro navegador preferido.

2-1

4

Leer más…

Categorías:ADF / Java Etiquetas: , , , ,

ADF tips: Mostrar el registro seleccionado en un af:tree

ADF tips

En ocasiones para presentar la estructura de nuestros datos utilizamos un af:tree ya que es una forma simple y elegante de poder mostrar el maestro y el detalle en un mismo componente. En este ADF tip vais a poder ver cómo mostrar el registro seleccionado es un af:tree basado en un view object recursivo.

Supongamos que tenemos esta estructura basada en la tabla empleados del schema hr de Oracle.

1

Lo primero que tenemos que hacer es arrastrar la vista de la paleta de data controls a nuestra página para crear el árbol.

2

 

Una vez creado el árbol, para mostrar el registro seleccionado, añadiremos un formulario basado en la vista de empleados. Aquí tenemos el problema: ¿en qué instancia de la vista basamos el formulario? Si lo hacemos en la instancia padre sólo se mostrará en el formulario el registro padre cuando seleccionemos alguno de los hijos.

3

Leer más…

ADF tips: Mostrar los valores de un Map en una af:table

ADF tips

Cuando queremos rellenar una tabla pragmáticamente es una práctica habitual utilizar una collection basada en un POJO (por ejemplo List<MyClass>), pero en este post de los foros de JDeveloper & ADF requerían rellenar una tabla utilizando un Map. Es un proceso bastante sencillo y voy a enseñaros cómo conseguirlo.

Para empezar vamos a crear en nuestro bean el Map que vamos a utilizar para rellenar la tabla.

1

Si intentamos rellenar la tabla sólo con lo que tenemos, vemos que necesitamos saber las keys del Map para poder obtener los valores.

3

Como podéis ver, muestra el valor del Map para la ‘Key 1’, pero de la forma que es muestro en la imagen anterior, no sería posible que fuese dinámico.

4

Para solucionar esto, necesitaremos añadir a nuestro bean un array con las claves del Map.

2

Una vez que ya tenemos creado en el bean lo que necesitamos, vamos a proceder a crear la tabla.

Sobre la tabla que os enseñé anteriormente hay que realizar algunos cambios. Para empezar, en vez de utilizar el objeto mapTable del bean tenemos que utilizar el array de keys que hemos creado como value de la tabla.

Y para poder acceder a los valores del Map tenemos que poner las columnas dentro de un af:iterator que utilice como value el objeto mapTable del bean.

De esta forma para acceder a las keys utilizaremos #{row} y para acceder a los valores utilizaremos #{var[row]}.

5

Una vez hemos introducido estos cambios a nuestra tabla, si ejecutamos la aplicación podemos ver que nos muestra dinámicamente, sin que necesitemos saber las keys del Map, todos los valores del mismo.

6

Categorías:ADF / Java Etiquetas: , , , ,

ADF tips: Menú contextual personalizado de un af:tree utilizando valores del nodo seleccionado

ADF tips

Cuando hacemos click derecho sobre un nodo de un árbol, podemos ver que aparece un menú con algunas opciones como expandir o contraer los nodos. También es posible añadir opciones personalizadas utilizando la facet contextMenu. En este ADF tips os voy a mostrar como añadir opciones personalizadas al menú contextual y utilizar valores del nodo seleccionado. Podéis ver el post de los foros que me ha inspirado este post.

 

Para crear la estructura del árbol que vamos a utilizar en este ejemplo vamos a utilizar la tabla Employees del schema HR.

Necesitamos crear la siguiente estructura.

1

Una vez que hemos añadido las vistas al application module, ya podemos arrastrar EmployeesView1 de la paleta de DataControls y crear un tree.

El siguiente paso es añadir un hijo en el tree binding así que pulsaremos en la cruz verde y seleccionaremos ‘EmployeeView’.

En el ejemplo vamos a utilizar solo un atributo, ‘First Name’ pero se pueden añadir tantos como se quieran.

1a

Después de hacer click en el botón ‘OK’ podemos añadir un menú personalizado utilizando la siguiente estructura de componentes:

2

Leer más…

Categorías:ADF / Java Etiquetas: , , , , ,

ADF tips: Modificar estilos de elementos dentro de componentes

ADF tips

Últimamente ha habido varios posts en los foros de Oracle acerca de cómo modificar los estilos de varios componentes de ADF (post 1, post 2).

En ambos posts tenían la necesidad de modificar los estilos de uno de los botones del af:query.

Como podéis ver en este post de Ashish es posible modificar mediante skinning la apariencia de todos los botones, pero por ejemplo utilizando solo estos selectores  no es posible modificar únicamente la apariencia del botón de guardar.

En css3 existen unos selectores que nos permiten modificar la apariencia de los componentes, por ejemplo:

  • Elementos que el atributo especificado contiene el valor: [atributo*=valor]
  • Elementos que el atributo especificado empieza por el valor: [atributo^=valor]
  • Elementos que el atributo especificado termina por el valor: [atributo$=valor]

Todo esto lo podemos aplicar a los selectores de skinning para modificar elementos que normalmente no nos es posible modificar.

 

Supongamos que tenemos este query panel.

1

 

Para poder averiguar el atributo que tenemos que usar para poder modificar el elemento, hay que inspeccionar el código fuente generado con las herramientas que nos ofrece el navegador que usamos normalmente.

En este caso podemos observar que el botón de buscar se genera como un div con el id qryId1:_search. Este id es generado con el id del af:query mas el identificador de la acción del botón.

2

 

Una vez que ya sabemos el atributo a utilizar, usaremos uno de los selectores que hemos visto anteriormente.

Utilizaremos el selector “termina en” ya que podremos diferenciar el botón fácilmente con el valor “_search”.

3

 

Si volvemos a ejecutar la aplicación podremos ver que sólo hemos cambiado el estilo del botón ‘Buscar’.

4

Categorías:ADF / Java Etiquetas: , , , ,

ADF tips: Etiquetas dinámicas desde base de datos para los atributos de una entidad

ADF tips

En este post de los foros de Oracle preguntaban cómo se podía  asignar valores dinámicos a las etiquetas de los atributos de una entidad. Utilizando parte de este otro post de Amis voy a contaros como conseguirlo.

Por defecto las etiquetas en los atributos de las entidades se asignan unos valores, por ejemplo, en la tabla Departments del schema HR de Oracle:

000

 

Para empezar, tenemos que crear en la base de datos la estructura necesaria para almacenar y obtener las diferentes etiquetas.

Primero creamos la tabla donde almacenaremos las etiquetas:

001

 

También añadimos los valores de las etiquetas para los diferentes idiomas.

0021

 

Para obtener las etiquetas asociadas al locale actual de la aplicación vamos a crear un paquete PL/SQL.

002

 

Ya tenemos terminadas las piezas de la base de datos, ahora tenemos que crear un método en el Application Module que efectúe la llamada al paquete que hemos creado.

Leer más…

ADF tips: Incorporar un selector de fecha a un af:inputText

ADF tips

Hace unos días un desarrollador posteó en los foros de Oracle que requería introducir el selector de fecha en un af:inputText que admitiría tanto valores de texto como fechas. En este ADF tips voy contaros la solución que aporté (link al post)

Para empezar debemos añadir un inputText y un inputDate:

00

El siguiente paso es asociar al inputText el valor que seleccionemos en el inputDate.

Para ello es necesario, poner en el inputDate la propiedad autoSubmit = true y utilizar el valueChangeListener para poder asignar el valor al inputText. También tenemos que añadir un partialTrigger al inputText para que se refresque automáticamente al seleccionar la fecha en el inputDate.

01

El valueChangeListener que utilizaremos es el siguiente.

02

También es necesario cambiar la fecha para adecuarla al formato que queramos, ya que por defecto tendríamos el siguiente formato: Tue Jul 07 00:00:00 CEST 2015

El método findComponentInRoot lo podemos encontrar en la clase JSFUtils.

Leer más…

Categorías:ADF / Java Etiquetas: , , ,