Documente Academic
Documente Profesional
Documente Cultură
Bien toca realizar una página de búsqueda la cual permita obtener de manera tabular a
todos los clientes cuyo nombre coincida con un dato que el usuario ingrese por la pantalla.
Pulse OK,
3. Note que se ha creado una nueva página que hereda los datos del template y define una
región denominada “contenido” donde podremos colocar nuestros componentes.
4. Tenemos primero que darle un título a la página creada. Para eso elija en la paleta de
estructura la opción de pageTemplate y en la paleta de propiedades cambie el valor de titulo
por “Listado de Clientes”
5. Ahora empezaremos a poblar la página de componentes gráficos. Sin embargo, una regla
clave es colocar siempre un contenedor debajo de cualquier componente gráfico. En este
caso y siguiendo la pauta del capitulo a anterior debemos colocar layouts que sean flexibles
al cambio de tamaño que sufra la página por parte del usuario final. En este caso el layout
que nos asegura este comportamiento es el PanelStrechLayout. Arrastremos este contenedor
sobre la página :
8. Ahora si, arrastre desde la paleta de Data Control la referencia a ClienteVO1. Elija la
opción Table | ADF Read only Table.
9. La siguiente ventana permitirá definir la manera en la que se mostrará la tabla. En este
caso seleccione la opción Single Row y Enable Sorting las cuales permiten seleccionar una
fila de la tabla y habilitan enlaces en la cabecera para permitir el ordenamiento de la tabla
en base a un fila. Pulse OK.
10. Bien, se debe haber generado la tabla con datos. Un primer inconveniente que vemos es
que las columnas tiene un ancho fijo, lo cual no aprovecha la totalidad del espacio. Para
solucionar esto indiquemos a la tabla que columna tendrá un tamaño variable en base a las
dimensiones del browser. Ubíquese en la tabla y en la paleta de propiedades cambie la
propiedad ColumnStreaching por last.
11. Bien, hasta acá tenemos la pantalla con una tabla que tiene la propiedad de expandirse ó
contraerse en función al tamaño del browser. Puede probarlo haciendo clic derecho sobre la
pantalla y pulsando Run.
13. Ahora lo que toca por hacer es colocar criterios de búsqueda en la pantalla. En este caso
sólo colocaremos un criterio de búsqueda por nombre. Para lograr esto, es necesario
modificar el view object que hemos usado para crear la tabla e incluir una característica
llamada ViewCriteria. Aprovechemos este paso para brindar una rápida inducción a lo que
son View Criterias.
VIEW CRITERIAS.
Los view criterias son como filtros que tiene un query que se definen en tiempo de diseño.
Si hacemos una analogía con los conceptos de base de datos, un view object vendría a ser el
query, por ejem:
SELECT *
FROM CLIENTE
El view criteria vendría a ser un criterio o filtra de esa consulta por ejemplo
La ventaja de el uso de view criterias es que podrías tener más de uno sobre la misma
consulta, y dinámicamente podrías escoger cual de los criterios aplicar dependiendo de las
circunstancias. Siguiendo con el ejemplo podría tener otro criterio que busque a los clientes
por su email, entonces tendríamos otro criterio cómo
14. Definamos el view criteria . Para ello haga doble clic sobre la vista ClienteVO y
seleccionando la categoría Query pulse el botón “Create new View criteria” tal como se
muestra a continuación.
15. Sobre la pantalla mostrada defina el criterio. En este caso pulse el botón “Add Criteria”
y seleccione el atributo nombre como el campo sobre el cual se hará la búsqueda-
20. Sobre esas clase agreguemos un nuevo método denominado filtrarCliente el cual
recibirá como parámetro una cadena y filtrará la vista de ClienteVO con el viewcriteria.
24. Una vez que hemos incluido la caja de texto, será necesario definir sobre que variable
se almacenará el contenido de la caja de texto. Para eso usted puede apoyarse en la capa de
bindings. Por default cada vez que se crea una página se incluye un bindings llamado
variable que puede ser usado para alojar variables locales. Bien entonces crearemos esta
variable llamada b_nombre y la enlazaremos a la caja de texto creada en el paso anterior.
Para eso aperture la seccion de bindings de la página .
25. Ubíquese en la paleta de estructura y haciendo clic derecho sobre el bindings variable
elegir la opción Insert inside variables | variable tal como se muestra en la figura.
26. Defina como nombre variable b_nombre y del tipo String.Pulse OK.
27. Lo que ha hecho es simplemente crear una variable a nivel iterador. Sin embargo las
variables a nivel iterador no pueden ser accedidas directamente por la página sino que
deben pasar a travez de un value binding. Puede leer nuestro capitulo anterior para
comprender más sobre esta arquitectura. Bien entonces el siguiente paso será crear un value
binding . Para eso en la seccion de bindigs pulse el botón “Create control bindings”
30. Notará que se ha creado un nuevo value bindigs denominado b_nombre1. Este último
será el nombre que usaremos como variable temporal para almacenar los valores de la
página.
#{bindings.b_nombre1.inputValue}
33. Bien en este punto tenemos una pantalla con una caja de texto que guarda todos sus
valores ingresados en una variable llamada b_nombre1. Bien lo que nos faltaría sería
invocar al método filtrarCliente (del punto 20) y pasarle como parámetro el valor de la
variable b_nombre1. Estamos de acuerdo?. Para eso simplemente vayamos a la paleta de
datacontrols ,que como hemos explicado expone nuestra capa de modelo automáticamente,
y arrastremos la operación filtrarCliente hacia la página, al costado de la caja de texto
eligiendo la opción Method | ADF Button, tal como se muestra en la siguiente figura.
34. Aparecerá una ventana que permitirá definir el valor que tendrá el parámetro del
método. Lo que haremos será utilizar las expresiones para asociarlas a la variable
b_nombre. Pulse Ok en las pantallas modificadas.
35. Finalmente modifiquemos el valor del texto del botón por : Buscar.
36. Probemos nuevamente nuestra pantalla. Repita el paso 11 y verá que ahora la pagina
inicialmente recupera todos loa valores
37. Ahora si colocamos la palabra “la” y pulsamos Buscar, nos mostrará todas las
coincidencias.
Curso ADF–Parte 9
Vamos a continuar con la pantalla de listado, pues es desde ahí donde empezaremos a
realizar el mantenimiento de datos. Primero vamos a agregar un toolbar desde donde se
realizará las operaciones descritas previamente.
1. Abra la página de listaCliente.jspx y haciendo clic derecho sobre la región toolbar elija la
opción “Toolbar” tal como muestra la siguiente figura. Lo que va a pasar es que se creará
un control toolbar el cual es un contenedor de botones. Entre sus ventajas esta que aplica un
separador entre cada botón.
2. Ahora será necesario insertar los botones para los operaciones. Lo que vamos a hacer a
continuación es utilizar el framework para agilizar esta operaciones. Si bien el proceso es
muy sencillo, sólo es un drag and drop, lo importante es entender que es lo que sucede
detrás de escena. Por eso hagamos una breve explicación del proceso antes de empezar a
programar esto.
Bien, que otra cosa importante debemos considerar: los datos cargados en memoria son
preservados por el framework entre varios HTTP request (termino técnico: State
management ) . Es decir los datos cargados no se pierden gracias a que el framework
maneja el estado de los datos. DE manera más sencilla, es como si los datos que son
cargados por estas instancias se guardarán en session. De esta forma si el usuario por
ejemplo selecciona una fila de la tabla (en la pantalla), el framework guarda esa referencia
en memoria y nosotros la podemos conocer con lógica en nuestro código. O mejor aún
podemos recuperar los datos que el usuario ha filtrado para poder realizar algún tipo de
procesamiento.
Bien, una vez que entendemos esto vamos a realizar estas operaciones.
3. La primera operación que realizaremos será el de Creación. Bien en este caso crearemos
un botón en la sección de toolbar haciendo clic derecho sobre esa zona y eligiendo la
opción “Insert inside Toolbar | Toolbar Button”
7. El Popup define una región cuyo contenido es recuperados, por default, al momento que
abrir el popup. En ese momento es guardado en cache. Sin embargo nosotros queremos que
su contenido no se guarde en cache sino que se actualice cada vez que abra el botón.
Entonces será necesario cambiar la propiedad Content Delivery por LazyUncached.
Puede conocer más teoría sobre este componente en el siguiente enlace.
http://jdevadf.oracle.com/adf-richclient-demo/docs/tagdoc/af_popup.html
8. Ahora debemos definir el contenido que tendrá el popup. En nuestro caso, será una
ventana de dialogo que incluirá cajas de texto donde el usuario colocará la información del
nombre y email del cliente. Entonces arrastremos ahora el contro Dialog dentro del popup.
11. El asistente sugerirá que se indique los campos (cajas de texto) que tendrá la pantalla.
En nuestro casos eliminaremos el campo ClienteId debido a que el usuario no ingresa ese
dato (se genera en base al sequencial) Pulse OK.
12. El resultado será algo similar a lo mostrado a continuación.
13. Bien, analicemos la situación hasta este momento. Hemos creado un botón que levanta
un popup con los datos de la instancia de la misma vista que usamos para poblar la tabla de
la página. En este punto es importante destacar lo siguiente.
13.1 Como hemos explicado previamente, lo que vemos en la pantalla es una instancia de la
vista ClienteVO. Es la misma vista que hemos usado para crear los datos de la tabla así
como para crear los datos del formulario que esta en el popup. Cuando hablamos de una
instancia de la vista ClienteVO usted lo puede ver como una colección de objetos
(registros) en memoria.
13.2 Al abrirse la ventana, la operación que debería ejecutarse debe ser crear un nuevo
registro en la instancia de la vista. Esto sería como crear un nuevo objeto sobre la
colección de datos que representa la vista. Adicionalmente, el formulario que levantamos en
el popup debería mostrar justamente ese nuevo registro y no otro registro de la colección.
13.3 Al pulsarse el botón OK, lo que debe pasar es que los datos que el usuario ingreso
sobre el nuevo registro debería aplicarse sobre la BD.
Ok, para solucionar esto aprovecharemos algunas capacidades que ofrece ADF.
13.4 Para poder crear una nuevo registro sobre la vista ClienteVO, usaremos una operación
llamada CreateInsert que es proporcionada por el framework (Todas las vistas tiene esa
operación “out-of-the-box”)
13.6 Para poder volcar los datos que están en memoria debemos usar otra operación
llamada “commit”.
13.7 Para llamar a la operación de commit usaremos un listener que tiene el control de
dialogo y que justamente es invocado cuando el usuario pulse el botón OK. El listener se
llama Dialog Listener.
13.8 Adicionalmente debemos capturar la acción de Cancelar, la cual debería eliminar los
cambios que tiene actualmente el registro. La operación que invocaremos en este caso es
“Rollback” que tambien lo ofrece el framework.
14. Bien, si ha notado se invocan tres operaciones del framework : CreateInsert, Commit,
Rollback. Antes de poder usarlo, es necesario que estas operaciones estén disponibles en la
página que estamos construyendo. Para registrar estas operaciones, haga clic sobre la
pestaña de bindings.
15. Ahora pulse el botón (+) de la sección de Bindings . En la ventana mostrada elija la
opción action . Pulse OK.
18. En este momento usted debe tener algo similar a lo mostrado a continuación.
19. Ahora tenemos que programar los listener. Primero vamos a realizar el que indicamos
en el punto 13.2. Elija el popup y en el propiedad PopupFetchListener defina el método
cargarPopup()
21. Ahora toca programar los botones de OK y Cancel. En este caso, ambas acciones son
ejecutadas por el listener DialogListener. Define el método ejecutar() sobre dicha
propiedad.
if (dialogEvent.getOutcome().name().equals("ok"))
{
DCBindingContainer bindings =
(DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
OperationBinding operationBinding =
bindings.getOperationBinding("Commit");
operationBinding.execute();
}
else if (dialogEvent.getOutcome().name().equals("cancel"))
{
DCBindingContainer bindings =
(DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
OperationBinding operationBinding =
bindings.getOperationBinding("Rollback");
operationBinding.execute();
}
Es claro que estamos capturando la acción del dialogo y ejecutando el método respectivo.
23. Finalmente, para que este popup pueda mostrarse es necesario indicar que el botón
agregar del punto 4, debe invocar al popup del punto 6. Para ello haremos uso de la
operación ShowPopupBehavior . Arrastre esta operación desde la paleta de componentes
hacia el Boton Agregar que creamos previamente.
23. La página podría disponer de muchos popups, así que debemos indicar en la propiedad
PopUpId del componente que popup vamos a usar. Entonces, ubíquese en dicha propiedad
y haciendo clic sobre la opción Edit.
24. Elija el popup que creamos previamente. Pulse OK.
25. Finalmente, hay que forzar a que la tabla se refresque cada vez que se produzca alguna
acción en el popup o en la ventana de dialogo. Entonces elija la tabla en la paleta de
estructura.
26. Modifique sus propiedad PartialTriggers usando el menú contextual. Pulse la opción
Edit.
29. Pulse el botón Agregar y registre información de un nuevo cliente. Pulse Aceptar.
30. La tabla debe mostrar el nuevo registro agregado.