Tema : Agregar Clientes
En el post anterior trabajamos en un pantalla de búsqueda. Ahora vamos a completar dicha pantalla con la operación de creación
Requerimiento:
· Oracle Jdeveloper 11g. 11.1.1.5
· Oracle Database Express 11g
· Haber culminado la parte 8 del tutorial.
Capítulos Anteriores
Parte 1: Creación del Modelo de Datos.
Parte 2: Creación de Componentes de Negocio
Parte 3: Personalización de Entidades
Parte 4: Personalización de View Objects.
Parte 5: Lógica en el Módulo de Aplicaciones
Parte 6: Manejo de Bindings
Parte 7: Creación de Templates
Parte 8: Página de Búsqueda
Opcional :
Si no culminó los capítulos anteriores y quiere empezar desde este capítulo, puede descargar el siguiente código para continuar el curso.
Código previo.
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.
Los pasos a realizar son los siguientes:
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.
Si usted recuerda en la parte de creación del modelo creamos entidades y view objets(basadas en tablas de BD) que abstraen la capa de modelo. Bien esos componentes que hemos definido son usados para poder crear la pantalla que estamos mostrando en este momento. En este caso hemos usado el view object de Cliente para mostrar dicha información. El punto más importante a entender es que lo que se muestra no es el view object propiamente dicho, sino una instancia del view object en memoria. Es la misma analogía que la definición de clase y objeto. Ahora porque hacemos hincapié en esto?, pues básicamente para resaltar que las operaciones que vamos a realizar en este momento se aplicarán sobre los DATOS EN MEMORIA.
Eso significa que acciones como agregar ó eliminación de un registro se realizarán sobre los datos cargados en memoria del servidor y NO en la base de datos. Para que esos datos cargados e memoria puedan impactar en la BD se usará una operación llamada “commit”, de la misma forma si queremos que esos cambios no se apliquen podremos usar la operación “rollback”
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”
4. Modifiquemos la propiedad Text por “Agregar”.
5. Nuestra próxima acción será crear un formulario “de escritura” que permita manipular los datos de la fila instanciada. Para esos haremos uso de un ventanas emergentes.
6. Incluyamos la ventana emergente dentro de la página. Para ello, haciendo uso de la paleta de estructura, arrastre el control popup dentro de la sección af:form de manera similar a lo mostrado en la siguiente página.
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.
9. En el title coloque : “Gestión de Clientes”
10. Ahora será necesario colocar las cajas de texto para insertar los valores hacia la página. En este punto nos vamos a apoyar en el DataControl y utilizando las referencias a las instancias de las vistas, arrastrarlas y mostrarlas como un formulario. Vaya al data control y arrastre la referencia ClienteVO1 hacia la ventana de dialogo. Elija la opción ADF Form.
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.5 Para llamar a la operación de inserción indicada en el paso anterior usaremos un listener que tiene el popup llamado PopupFetchListener que justamente se invoca cuando se levanta la ventana del popup.
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.
16. En la siguiente ventana mostrada elegir la Vista ClieteVO1 y la operación CreateInsert tal como muestra la siguiente figura. Pulse OK.
17. Repita el mismo proceso para crear las operaciones de Commit y Rollback, sólo que en este caso se debe elegir la raíz VentasAMDataControl.
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()
20. Ahora diríjase al backing bean de la página
21. Ubique le método definido y coloque las siguientes líneas de código.
public void cargarPopup(PopupFetchEvent popupFetchEvent) {
// Add event code here...
DCBindingContainer bindings = (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
OperationBinding operationBinding =
bindings.getOperationBinding("CreateInsert");
operationBinding.execute();
}
Lo que estamos haciendo básicamente es llamar al método CreateInsert creado en el punto 16.
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.
22. En el backing, sobreescribimos el método de la siguiente manera :
public void ejecutar(DialogEvent dialogEvent) {
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();
}
// Add event code here...
}
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.
27. Seleccione el popup y la ventana de dialogo y pulse OK.
28. Probemos hasta acá el funcionamiento de la página. Haga Run.
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.
Si desea puede comparar su código con el proyecto culminado hasta este punto.
Descargar Código Final.
