Saturday 31 December 2011

Curso ADF 11g - Parte 2

Tema: Creación de Componentes de Negocio.

Como se comento en la primera parte. Las aplicaciones ADF están compuesto de dos proyectos un asociado al modelo y otra a la parte WEB. Lo que desarrollaremos en este capitulo es lo asociado a la parte de modelo.

Requerimiento:

  • Oracle Jdeveloper 11g. 11.1.1.3
  • Oracle Database Express 11g
  • Haber culminado la parte 1 del tutorial. Ir al capitulo 1

1. Conceptos Básicos. La existencia de componentes de negocio se ha vuelto común en cualquier framework moderno. ADF cuenta por ello con un framework denominado ADF Business Components cuya arquitectura esta compuesta principalmente de tres tipos de componentes.

Entity Objects: Representan al modelo de datos en la capa de negocio. Entre sus características podemos mencionar:

    •Brindan la capacidad del mapeo O/R

    •Alojan las reglas de negocio y las validaciones de dato

    •Añaden funcionalidades de caching

    •Permite representar una tabla como un Entity Object

View Object : Representa a un grupo de datos (colección) que se pudo haber generado en base a las entidades ó a un query de base de datos. Sus características son :

    •Se puede basar en uno ó mas EO para mostrar un grupo de datos a los clientes de las aplicaciones

    •Genera un sentencia SQL que representa el grupo de datos obtenidos

    •Presenta la información de la capa de Business Service

    •Cuenta con capacidades de ordenar y filtrar la información seleccionada

Application Module : Define el facade de la aplicación. Es decir el componente que aloja las reglas de negocio en el framework.

    •Manejan las transacciones

    •Agrupa a los componentes que son expuestos al resto de capas de la aplicación

    •Implementa las reglas de negocio que tendrá la aplicación y que usará los View Objects para extraer la información.

    Gráficamente podríamos definir la arquitectura de la siguiente manera

image

En la figura se muestra como sería la distribución de componentes. Este escenario serviría para un sistema de matriculas. Note que el modelo de datos son representados como entidades y generalmente mapearían  a las tablas de base de datos.

Los View Objects (de color rojo) están asociados a los grupos de datos (cursores, colecciones) que se usarán los métodos de negocio que se implementarán en el Modulo de aplicaciones. En esta caso tenemos una vista que recuperará información de los alumnos matriculados por curso. Obviamente las entidades involucradas serán la entidad Alumnos y Cursos. Por otro lado, tenemos otra vista “Empresas Activas” que ofrecerá todas empresas activas, las cuales se podrían interpretar por un indicar de actividad cuando se defina la consulta.

EL último elemento a desarrollar será el módulo de aplicaciones. Este componente define la reglas de negocio de la aplicaciones. Si hiciéramos un paralelo con componentes en la base de datos, el módulo de aplicaciones sería los store procedures.

En el caso del sistema de matriculas, el modulo de aplicaciones implementaría los métodos de empezarProcesoMatricula() ó registrarMatricula().

Ahora, luego de conocer los principios de ADF Business Components desarrollemos un ejercicio práctico al respecto.

El proceso de creación de componentes, deberá cubrir lo siguientes pasos :

  • Mapear componentes de negocio en base a modelo de datos.  En este paso se crearán entidades, View Objects y el módulo de aplicación. Este paso es muy sencillo, y prácticamente lo realiza la herramienta.
  • Personalizar los componentes . En esta etapa si es necesario adaptar lo que el framework te ofrece a tus necesidades.  Recuerde que el framework reduce las líneas de código que debemos programar, pero nunca lo elimina. Este paso es un buen ejemplo de eso.

Desarrollemos los pasos indicados anteriores

MAPEO DE COMPONENTES.

1. Haciendo clic derecho sobre el proyecto Modelo,  elija la opción New.

image

 

2.A continuación, aparecerá la galeria de componentes. Esta galeria ofrece la relación de componentes que se pueden incluir en la aplicación. Al elegir la categoría ADF Business Components, podremos incluir los Business Componentes que describimos al inicio de este post. Para empezar crearemos las entidades, para esta eso elija la opción Entity Object y haga OK

image 

 

3. La Siguiente pantalla indicará que usará la conexión Ventas que creamos en la primera parte del curso.

image

 

4. A continuación aparecerá  el asistente para crear la entidad. Asignemos los siguientes valores :

Package : com.ventas.model.entities (simplemente estamos definiendo un paquete donde tendremos las entidades llamado entities)

Name: Cliente (Nombre de la entidad, no tiene que coincidir con el nombre de la tabla asociada)

Scheme Object: Asignemos sobre este campos la tabla Cliente. Use el botón browse para que el asistente ubique la tabla. Pulse Next.

 

image

 

5. Mantenga los valores por default en el resto de pasos. Para eso simplemente pulse Next hasta el paso 6.

6. La última pantalla brinda un resumen de lo que la herramienta va a construir. Pulse Finish para culminar la creación del componente.

 

image 

 

7. Repita los pasos 4,5 y  6 para crear las entidades Producto, Movimiento y Detalle en base a las tablas de nuestro modelo.

8. Note que se han creado unos componentes en rojo, denominados Asociaciones. Las asociaciones permiten relacionar entidades para poder acceder a su información.

image

9 Para poder entenderlo imagine como diseñaría las clases Cliente y Movimiento. En ese escenario, probablemente usted tendría una clase Cliente y un atributo del tipo Colección que agrupe a los movimientos asociados a ese cliente. Bien, en este framework, se modela de manera distinta, en vez de definir una collection de movimientos relacionadas a la entidad cliente, lo que se hace es crear una asociación  entre ambas entidades. Obviamente lo que ha hecho el asistente es tomar las foreing keys de la base de datos y en base a eso crear las asociaciones. La pregunta obvia es como se define la cardinalidad de ambas entidades, pues para eso simplemente haga doble clic sobre cualquiera de las asociaciones, elija la categoria RelationShip y pulsando el botón editar  verá las entidades involucradas en la relación y la cardinalidad, en este caso 1 a *

image

 

10 .A continuación crearemos las vistas. En este caso, las vistas dependerán de las entidades, aunque las vistas podrían no depender de una entidad sino directamente en base a una consulta SQL.

Bien para crear una vista puede realizar un procedimiento similar a lo mostrado en el caso anterior, eligiendo el componente View Objet en vez de Enttity Object ó como haremos a continuación haciendo clic derecho sobre una de las entidades, por ejemplo Cliente, y eligiendo la opción New Default View Object

image

 

9. Cambie el paquete destino, por queries y defina el nombre con el postfijo VO, por ejemplo  ClienteVO. Pulse Ok

image

 

10. Repita el procedimiento para crear las Vistas Producto VO, MovimientoVO y DetalleVO .

11. Usted debería tener los siguientes componentes, al culminar el último paso.

image

 

12. Así como las entidades se relacionan para permitir el acceso de datos, los view objects también tienen se pueden relacionar, por medio de un componente llamado view link. Su utilidad?, pues la utilidad es sincronizar datos, imagínese que planeamos construir una consulta, que cada vez que se navegue por un dato del movimiento, automáticamente se muestre los detalles del movimiento elegido. Para lograr eso, es probable que usted podría planear en “programar” para esa sincronización. Bien, el framework evita eso, permitiendo que definiendo esta relación, automáticamente los datos de dos vistas se sincronizan. Es decir si el usuario se ubica en el movimiento 545, entonces los detalles se filtran para mostrar los detalles correspondientes al movimiento 545. Bien para crear la relación, simplemente repita el paso 1 y elija la opción View link.

image

 

13. Cambie, el paquete destino por “com.ventas.model.queries” y defina un nombre para este tipo de componente por : MovimientoDetalleVL.

image

 

14. La siguiente pantalla permite definir la vista involucradas en el view Link. En este caso, definimos el atributo de la  vista origen “MovimientoVO.MovimientoId” (Será el padre) y la vista destino (DetalleVO.MovimientoId). Pulse Add para agregar la relación.

image

Noté que esta relación es muy similar a la de una asociación de entidades, pero no se confunda. Mientras la asociación entre entidades sirva para un acceso de datos entre entidades, por ejemplo se podría “personalizar el código” para que desde el movimiento se acceda a todos sus detalles para por ejemplo, calcular el total de detalles . Mientras que cuando usamos los viewLink lo que logramos es sincronizar datos “sin necesidad de personalizar código alguno” y que es muy útil para mostrar resultados anidados en la pantalla.

15. Pulse Next y luego Finish para culminar la creación del viewLink. Usted debería tener una imagen como la siguiente :

image

 

16. Ahora, procederemos a crear le módulo de aplicaciones. Repita los pasos 1 y 2 para mostrar la galería de componentes y elegir la opción Application Module.

image

 

17. Cambie le nombre del paquete por com.ventas.model.applications y el nombre del applications module por VentasAM. Pulse Next.

image

 

18. En la siguiente pantalla se define las vistas que serán expuestas por la aplicación que vamos a desarrollar.Este punto es importante destacarlo para comprender este tipo de componentes. Cuando construimos un modulo de aplicación tenemos que definir que vistas (View Object) serán usadas y expuestas hacia la capa WEB. Como explicamos en la parte introductoria, el módulo de aplicaciones concentrará la lógica de negocio de la aplicación y obviamente para poder implementar estas reglas, es necesario acceder a datos. Justamente estos datos son proveídos por los view objects, y este paso, es para que el modo de aplicación “vea” las vistas que necesita.

Si hacemos un analogía, es como si usted construyera un store procedures (Application Module) y declarará el uso de cursores creados previamente.

19.  En este caso, exponemos las vistas Cliente, Producto y Detalle. Para eso selecciónelas y use los botones de desplazamiento para agregarlas.

image

 

20.  Bien la vista que nos faltaría añadir sería la de movimiento. En este punto es importante recordar lo que hicimos en el paso 12 para crear el ViewLink entre Movimiento y Detalle. Note que se creo una relación entre las vistas para lograr sincronizar los datos. Bien, esta “jerarquia” tiene que ser expuesta para poder ser utilizada posteriormente. Entonces, para esto primero elija la vista movimiento y desplazela a la izquierda.

image

 

21. Ahora lo que hay que hacer es pasar la vista de detalle hacia la derecho, para eso en la region de la izquerda seleccione la vista detalle y en la región de la derecha seleccione la vista MovimientoVO, agregada previamente, luego pulse el boton de desplazamiento. Usted debería tener una imagen similar a lo mostrado a continuación. Pulse Finish para culminar la construcción del módulo de aplicaciones.

image

 

22. Bien todo lo construido debería tener la siguiente imagen.

image

 

23. Ok, para culminar la parte de mapeo vamos a usar una de las funcionalidades que ofrece el framework que es la capacidad de visualizar los datos una vez construido la capa de modelo. Que significa eso, pues que usted puede inspeccionar datos, probar métodos y actualizar información directamente desde el modelo, sin necesidad de crear una interfaz de usuario como una página jsf. Esto es muy útil, porque ayuda a hacer debug y probar la capa de modelo antes de iniciar el desarrollo del  la capa WEB, y de esa manera miminizar los errores en la aplicación.

24. Bien, para lograr esto simplemente haga clic derecho sobre el módulo de aplicaciones y eliga la opción Run.

image

 

25. Haga doble clic sobre la vista ClienteVO y use las flechas de desplazamiento para navegar entre los datos de esa vista.

image

 

26. Finalmente si hace doble clic sobre el viewLink  MovimientoDetalleVL1, vera la relación entre la vista movimiento y detalle. Si usted se desplaza entre los datos del movimiento, notará que automaticamente se refrescan los datos del detalle. Que es el efecto que queriamos lograr.

image

 

27. Si llegó hasta aquí, felicitaciones ya su aplicación va tomando forma y estamos seguros que esta listo para las siguientes entradas del curso. Si no llegó y tiene dudas, puede descargar el código del proyecto para que revise la solución.

 

CODIGO FUENTE

Curso ADF 11g - Parte 1

Tema : Creación de Modelo de Datos





Este es el primer capitulo de nuestro curso de ADF versión 11g. Dado que este es un framework que ofrece muchas funcionalidades en cuanto al manejo de datos, primero debemos crear nuestro modelo de datos.





Para los ejercicios que trabajaremos durante el resto de capitulos usaremos un esquema denominado ventas que dispondrá de las clásicas tablas de facturación: Cliente, Producto, Movimiento y Detalle.





Requerimientos.









  • Jdeveloper 11.1.1.3.0



  • Oracle Database Express Edition 11g,




1. Entonces, primer paso crear su esquema ventas y correr en ese esquema los scripts que adjunto.





Script de Estructuras.





Script de Datos.





2. Conceptos Básicos del proyecto a desarrollar. Antes de empezar a desarrollar la aplicación, es importante que usted entienda como estructura las aplicaciones ADF y Jdeveloper.





Para empezar existe el concepto de Application que es básicamente el que contiene ,valga la redundancia, toda la aplicación. Técnicamente hablando esto se plasma en un archivo *.jws que se creará dentro de la carpeta que usted defina durante su creación.





Existirá siempre un application en su desarrollo ADF e incluirán, generalmente, 2 proyectos. Model y ViewController. Recordemos que ADF es un framework basado en el patrón MVC y en consecuencia tendrá un proyecto para albergar los componentes que implementan el negocio y otro donde residirán los componentes que implementan la parte WEB.





Una mayor explicación sobre las capas de la arquitectura ADF las puede encontrar en el siguiente link.





Arquitectura ADF





El proyecto que tendrá los componentes de la parte de negocio se llamará Model y el de los componentes de la aplicación WEB será viewController . Este gráfico le ayudará a tener una mejor comprensión al respecto





image









3. Bien, luego de conocer la arquitectura ADF y de crear su esquema en la BD, procederemos a crear la aplicación. Ejecute el Jdeveloper 11g, y use la opción File New del menú, para lanzar el asistente de creación de aplicaciones.









4. En la primera pantalla se define los datos básicos de la aplicación. Es importante destacar en esta pantalla, que Jdeveloper 11g, es la herramienta clave de la plataforma fusion. En consecuencia ofrece plantillas para desarrollar sobre las diversas tecnologías de la plataforma como Oracle WebCenter, ADF, SOA, etc. Por eso en la sección de Application Template, se lista todas las plantillas. En este caso elegiremos Fusion Web Application que es la asociada a las aplicaciones que incluyen ADF. Pulse Next.





image





5. La siguiente pantalla define el nombre del proyecto de la capa de modelo. Note que se definen en la región de Selected las tecnologías usadas en esta capa. Deje los valores por default y pulse Next





image





6. La siguiente pantalla simplemente define el lugar físico donde se guardará el código.Pulse Next





image





7. Al igual que en el caso del proyecto Model, en este paso se define el proyecto ViewController, acepte este paso y lo siguientes para culminar el desarrollo de la aplicación.





image









8. Finalmente, usted debería tener algo similar a lo mostrado a continuación.





image





9. Analizaremos en próximos capítulos como trabajar con cada uno de los proyectos, pero para culminar esta primera parte asegurémonos de asociar la aplicación que hemos desarrollado con el schema “Ventas” . Para eso elija del menú del Jdeveloper la opción View Database Database Navigator.





image





10. Se debe mostrar todos las aplicaciones que usted ha desarrollado. En este caso haga clic derecho sobre la aplicación de Ventas y elija la opción New Connection. Complete los datos según su conexion y pulse Test Connection para comprobar





image









11. Si sale Success!, felicitaciones ya tiene su primera aplicación ADF lista para ser construida.





Descargar Código Finalizado

Friday 30 December 2011

Copiar y Pegar de EXCEL a ADF

Hace unas semanas recibí el requerimiento de realizar un proceso de copiado y pegado de Excel hacia una aplicación ADF. Esto debido a que los usuarios obtenían mucho de los datos que ingresaba desde varias hojas de cálculo.



Solucioné este requerimiento usando pasos muy similares a los que describo en este post, y el resultado final que usted tendrá al culminar este ejercicio será así.






image






Tenga en cuenta que se utiliza una tabla ADF como destino, y un menú emergente para que el usuario pueda situar sobre que columna quiere realizar el copiado.



Puede descargar el ejemplo completo en el siguiente enlace.



Código Fuente.



Bien vemos como solucionamos este requerimiento en ADF.




Requerimientos :



Jdeveloper 11.1.1.3




1.Para el ejemplo primero crearemos una aplicación ADF. Los pasos de creación los omito debido a que uso las opciones por default.





2. En el proyecto ViewController agregaremos el bean “EmpleadoBean” con los datos de código y nombre de empleado. Asegúrese de incluir los métodos accesores.





3.Crearemos además una managed Bean “DatosBean” de JSF a nivel de sesión donde almacenaremos los datos ingresados desde la página. Noté que esta clase tendrá una lista de Empleados. Asegúrese de incluir los métodos accesores.







4.Sobre escribimos el constructor de este bean para agregar un empleado al iniciar la pagina.


    public DatosBean() {
     
        super();
        EmpleadoBean empleado = new EmpleadoBean();
        listaEmpleados.add(empleado);
           
     
    }



5.Para definir a la clase como un managed bean de sesión es necesario configurarlo en el adfc-config.xml




6.Ahora creamos la pagina ADF




7.Arrastramos de la paleta el control Table hacia la pagina




8.Asociamos los datos mostrados a la lista creada previamente.




9. Configuramos el contenido de nuestra tabla, estamos cambiando los headers, values y el tipo de componente por inputText, tal como se muestra en la figura.




Ojo, debe respetar los nombres de los atributos de manera similar como lo definió en el bean : EmpleadoBean.




10.Ejecutamos la página. En una primera prueba, esto debería mostrarse.



11. Bien, la idea ahora será que el usuario haga clic derecho sobre algunas de las celdas y se muestre un menú contextual que ofrezca una opción de pegado de contenido de una hoja excel.




Para eso primero crearemos el menú contextual. Arrastre el control popup hacia la página,




image






12. Incluya dentro del popup, los componentes Menu (Que define el menú vertical) y finalmente un “Menu Item” que será el botón que pulsará el usuario. Al final usted debe tener algo similar a lo mostrado a continuación.





image



Tenga en cuenta que se cambio la propiedad Text del Menu Item por “Pegar Contenido” y además la propiedad ContetDelivery del popup por “Inmediate” lo cual acelerará la presentación del contenido del popup y que es recomendada para las ventanas emergentes que serán siempre usadas en las pantallas, como es el caso de esta opción.




13 Ahora será necesario programar un evento a nivel de las celdas que lancen el popup que acabamos de crear. Para ello, usaremos un componente llamado Client Listener que permite invocar a funciones javaScript en nuestra página. Arrastremos este componente sobre la primera celda (inputText) de nuestra tabla.





image






Note que estamos indicando que se invocará a la función mostrarPopup y el evento asociado es el contextMenu. Este evento se ejecuta cuando hacemos clic derecho sobre la celda (input text)


14. Colocamos la función JavaScript en la página tal como se indica a continuación.




function mostrarPopup(popupId)
{
return function(evt)
{
evt.cancel();
var clientId = evt.getSource().getClientId();
var popup = AdfPage.PAGE.findComponentByAbsoluteId(popupId);
var hints = {align:"end_before", alignId:clientId};
popup.show(hints);
}
}





Note que la función java script cancela el comportamiento por default del evento, define la variable clienId asociado al control que recibe el evento (la caja de texto),define la varible popup, asociado al control popup que creamos previamente, define la varible hints permite definir la ubicación donde aparecerá nuestra ventana emergente y finalmente muestra el popup (popup.show).




15. Probemos la pantalla hasta este punto. Al hacer clic derecho sobre la celda, debe mostrar el menú contextual.





image

16.Es momento ahora de programar el listener de botón “Pegar Contenido”. El código usará un inputText como intermediario entre el contenido de la hoja excel y la tabla de ADF. Por eso primero vamos a agregar un control input Text. Arrastre el inputText a la página. Verifique el id del control, en este caso se creo el id it3.





image



En la paleta de estructura se debería reflejar lo siguiente :



image



17. Ahora asociaremos el botón “Pegar Contenido” con una rutina JavaScript. Para eso arrastraremos un control clientListener hacía el control commandMenuItem.



image



Verifique que tenga un resultado similar a lo mostrado a continuación.



image





Tenga en cuenta que se invoca a una función mostrarContenido pasando como parámetro el id del popup.




18. La función JavaScript tendrá la siguiente implementación.




function pegarContenido(popupId)
{
return function(evt)
{

var txtContenido = document.getElementById("it3::content");
txtContenido.focus();
txtContenido.select();

rangeExcel=txtContenido.createTextRange();
rangeExcel.execCommand("Paste");

}
}




Las dos últimas líneas sólo funcionan para IE y permiten obtener el contenido del portapapeles de wndows hacía el control inputText it3.




19. Probemos hasta este punto cual es el efecto en tiempo de ejecución.




image




Noté que el contenido ahora reside en el control inputText en la página. Lo que requerimos ahora es mover el contenido hacía la tabla ADF. Para eso usaremos un listener ligado a un botón. Para eso, arrastremos un button hacía la página y la asociamos al método “pegarDatos”




image











20. Implementamos el método en el backig bean.




public String pegarDatos() {
// Add event code here...

FacesContext ctx = FacesContext.getCurrentInstance();
DatosBean desarrolloBean = (DatosBean)ctx.getExternalContext().getSessionMap().get("datosBean");

EmpleadoBean empleado = desarrolloBean.getListaEmpleados().get(0);

StringTokenizer st = new StringTokenizer(it3.getValue().toString(), "\t");

empleado.setCodigo(st.nextToken());
empleado.setNombre(st.nextToken());

return null;
}




21. Finalmente, tenemos que modificar el javaScript “Pegar Contenido” para que posteriormente a la obtención de datos de la hoja excel, invoque al botón cb1, creado en el paso anterior.




function pegarContenido(popupId)
{
return function(evt)
{

var txtContenido = document.getElementById("it3::content");
txtContenido.focus();
txtContenido.select();


rangeExcel=txtContenido.createTextRange();
rangeExcel.execCommand("Paste");

var component = AdfPage.PAGE.findComponentByAbsoluteId("cb1");
AdfActionEvent.queue(component, component.getPartialSubmit());
}
}




22. El resultado final será el siguiente.




image