Descripción: En este artículo se va a explicar cómo realizar el refresco de un componente sin necesidad de refrescar toda la página, con el atributo partialSubmit y PartialTriggers.
Nota: Puedes descargar el ejemplo para hacer tus propias pruebas.Dentro del proyecto "PaginaBuscador.jspx" Descargar Ejemplo
Para realizar este refresco ADF incluye en sus componente AJAX que permite enviar datos al servidor y recibirlos sin la necesidad de refrescar una pantalla completa.
Utilizaremos para explicarlo un ejemplo en el que tenemos, una tabla (aftable), en el que actualmente disponemos un botón que realiza un refresco.
En este proceso de uso de partialTriggers, se hace referencia al atributo id del componente que genera el cambio.
Por ejemplo, queremos que cuando se seleccione un elemento en la tabla, se cambia el valor que tiene el OutputText, y muestre el valor de la columna LastName de la fila seleccionada.
En los siguientes pasos vamos a ir viendo los elementos que se van nombrando:
Ponemos en el campo Id de la tabla (aftable) el valor idTable. Así cuando queramos referirnos a la tabla como "disparador" del cambio, utilizaremos el Id que le hemos dado.
Si queremos también que el botón seleccionar pueda ser "disparador", haríamos lo mismo, pondríamos un valor en el atributo Id.
Nota: En 11g, no es necesario este paso, porque ya pone un valor por defecto a este atributo. De hecho todos los elementos de la página suelen tener un id asignado. Se recomienda eso sí, personalizarlo para que sea más fácil programarlo.
En esta imagen, hemos indicado que el botonSeleccionar sea el disparador del outputText. Si queremos que sea la tabla, podemos añadir el id de la tabla.
Nota: partialTriggers permite más de un disparador.
Al botón Seleccionar le podemos indicar que cuando sea pulsado, no haga un submit en el que refresque toda la página sino que lo haga parcialmente. Para ello usamos el atributo partialSubmit.
Con esto, el botón que se encuentra en la tabla, actualizaría el OutputText con el valor que tuviera la tabla en ese momento.
Si queremos que el cambio se haga sin necesidad de pulsar el botón, sino simplemente con la selección de un elemento de la tabla, utilizaremos el atributo autosubmit, que se encuentra dentro del facet Selection, en el elemento af:tableSelectOne.
No olvidar, que si hacemos esto del autosubmit, debemos indicar en el campo partialTriggers del botón, el valor "idTable", si no, no hará caso al cambio que se ha producido en la tabla.
Mostrando entradas con la etiqueta facets. Mostrar todas las entradas
Mostrando entradas con la etiqueta facets. Mostrar todas las entradas
martes, 5 de agosto de 2014
martes, 29 de julio de 2014
Ejemplo de maquetación de una página (Parte 1)
Descripción: En este artículo vamos a ver cómo mejorar el aspecto de una página en Oracle ADF 10g. Tomaremos como ejemplo un formulario de búsqueda (search form).
No es un ejemplo sobre maquetación, sino que está orientado a perder el miedo a la hora de trabajar con la estructura de la página.
Nota: Puedes descargar el ejemplo completo en este enlace: Descargar Ejemplo
En este artículo vamos a modificar la maquetación de una página con el fin de mejorar el aspecto de ésta.
No es un artículo específico de maquetación, sino para dos cosas:
- Manejarnos con la pestaña de estructura de la página jspx, y operar a través de ahí.
- Empezar a conocer las opciones que nos ofrece ADF para personalizar la aplicación.
Para ayudarnos a entender lo que se quiere hacer, se puede hacer como en esos anuncios para adelgazar: El ANTES, y el DESPUÉS.
Vamos a ir viendo cada uno de los cambios que vamos haciendo para que podamos comprenderlos.
En primer lugar podemos ver ese botón de búsqueda que está aislado a la izquierda, justo encima del listado de resultados.
Lo normal suele ser colocarlo debajo del formulario.
Es más, podemos ver ese botón como parte del formulario, así que debemos moverlo a una situación más cercana a éste.
Para ello, vamos a hablar de los facets.
Los componentes tienen aspectos específicos que son propios de ese componente. Los aftables tienen los suyos, así como en este caso el Panel Form tiene su propio facet.
Este facet se llama footer (pie), y como podemos imaginar, es la parte inferior del componente Panel Form.
Una cosa a tener en cuenta es que los facets, no están visibles en el panel de Estructura. Eso no significa que no existan, simplemente que hasta que no se usan no se ponen. Supongo que si se pusieran todos, aunque fueran vacíos se llenaría la vista de estructura y ésta sería impracticable.
Por eso en el ejemplo, se selecciona el componente, y éste se inserta en el panel de estructura (Structure tab).
Ya con el facet a la vista, se arrastra el botón al facet que lo va a contener.
Podemos ver el cambio en nuestra aplicación.
El aspecto ha mejorado un poco. El botón de búsqueda se encuentra más cerca del cuadro de búsqueda que antes, que parecía estar perdido.
Ahora vamos a separar el cuadro de búsqueda del botón.
Para ello, vamos a utilizar el objeto ObjectSpacer que lo que añade es un separador en forma de imagen transparente.
Al arrastrar el componente a la pestaña de estructura, lo podemos colocar justo debajo del componente inputText.
Nota sobre alineación de objetos
Hay objetos que alinean los objetos uno debajo de otro, como es el caso del Panel Form. Hay otros objetos que tienen un comportamiento distinto o incluso que podemos definirlo a través de un atributo.
Podemos ver el resultado de este cambio cuando ejecutamos la aplicación (o si pulsamos F5, aunque en ocasiones puede dar problemas).
Faltaría cambiar un par de detalles del buscador, la etiqueta que acompaña al campo de búsqueda (inputText) , y el texto que hay en el botón de búsqueda (commandButton).
Para ello vamos al cuadro de inspector properties, y cambiamos el atributo Value del inputText, y ponemos el nombre del campo (Nombre).
Para cambiar el texto en el commandButton, modificamos el atributo Label.
Este es el aspecto que tiene nuestro buscador.
En cuando se coge el ritmo de dónde está cada cosa, el hacer estas tareas es bastante más rápido.
En el próximo artículo completaremos el ejemplo para que se pueda tener un aspecto más presentable de nuestro buscador.
Artículos Relacionados:
- Ejemplo de maquetación de una página. Parte 2.
- Ejemplo de Maquetación. Parte 3
No es un ejemplo sobre maquetación, sino que está orientado a perder el miedo a la hora de trabajar con la estructura de la página.
Nota: Puedes descargar el ejemplo completo en este enlace: Descargar Ejemplo
En este artículo vamos a modificar la maquetación de una página con el fin de mejorar el aspecto de ésta.
No es un artículo específico de maquetación, sino para dos cosas:
- Manejarnos con la pestaña de estructura de la página jspx, y operar a través de ahí.
- Empezar a conocer las opciones que nos ofrece ADF para personalizar la aplicación.
Para ayudarnos a entender lo que se quiere hacer, se puede hacer como en esos anuncios para adelgazar: El ANTES, y el DESPUÉS.
![]() |
| ANTES |
![]() |
| DESPUÉS |
Vamos a ir viendo cada uno de los cambios que vamos haciendo para que podamos comprenderlos.
En primer lugar podemos ver ese botón de búsqueda que está aislado a la izquierda, justo encima del listado de resultados.
Lo normal suele ser colocarlo debajo del formulario.
Es más, podemos ver ese botón como parte del formulario, así que debemos moverlo a una situación más cercana a éste.
Para ello, vamos a hablar de los facets.
Los componentes tienen aspectos específicos que son propios de ese componente. Los aftables tienen los suyos, así como en este caso el Panel Form tiene su propio facet.
Este facet se llama footer (pie), y como podemos imaginar, es la parte inferior del componente Panel Form.
Una cosa a tener en cuenta es que los facets, no están visibles en el panel de Estructura. Eso no significa que no existan, simplemente que hasta que no se usan no se ponen. Supongo que si se pusieran todos, aunque fueran vacíos se llenaría la vista de estructura y ésta sería impracticable.
Por eso en el ejemplo, se selecciona el componente, y éste se inserta en el panel de estructura (Structure tab).
![]() |
| insertar facet de panel Form |
![]() |
| facet en la vista de estructura |
Ya con el facet a la vista, se arrastra el botón al facet que lo va a contener.
![]() |
| botón de búsqueda dentro del facet |
Podemos ver el cambio en nuestra aplicación.
![]() |
| vista resultado |
El aspecto ha mejorado un poco. El botón de búsqueda se encuentra más cerca del cuadro de búsqueda que antes, que parecía estar perdido.
Ahora vamos a separar el cuadro de búsqueda del botón.
Para ello, vamos a utilizar el objeto ObjectSpacer que lo que añade es un separador en forma de imagen transparente.
![]() |
| componente ObjectSpacer en Component Palette |
![]() |
| objectSpacer dentro del Panel Form |
Nota sobre alineación de objetos
Hay objetos que alinean los objetos uno debajo de otro, como es el caso del Panel Form. Hay otros objetos que tienen un comportamiento distinto o incluso que podemos definirlo a través de un atributo.
Podemos ver el resultado de este cambio cuando ejecutamos la aplicación (o si pulsamos F5, aunque en ocasiones puede dar problemas).
![]() |
| vista resultado |
Faltaría cambiar un par de detalles del buscador, la etiqueta que acompaña al campo de búsqueda (inputText) , y el texto que hay en el botón de búsqueda (commandButton).
Para ello vamos al cuadro de inspector properties, y cambiamos el atributo Value del inputText, y ponemos el nombre del campo (Nombre).
Para cambiar el texto en el commandButton, modificamos el atributo Label.
![]() |
| seleccionamos commandButton en Structure |
![]() |
| cambio en el CommandButton con el atributo Label |
Este es el aspecto que tiene nuestro buscador.
![]() |
| vista resultado buscador |
En cuando se coge el ritmo de dónde está cada cosa, el hacer estas tareas es bastante más rápido.
En el próximo artículo completaremos el ejemplo para que se pueda tener un aspecto más presentable de nuestro buscador.
Artículos Relacionados:
- Ejemplo de maquetación de una página. Parte 2.
- Ejemplo de Maquetación. Parte 3
Suscribirse a:
Entradas (Atom)

















