Oracle ADF y Mapas (parte I): Integración de ADF 11g con Oracle MapViewer

Por Marcelo Vásquez
Publicado en junio 2012

En esta serie de artículos veremos cómo podemos llegar a usar mapas en nuestras aplicaciones Oracle ADF 11g.

Objetivo de este artículo

En este artículo veremos cómo utilizar los componentes de ADF para integrar un Oracle MapViewer y usar información geoespacial para mostrarla.

Tecnologías utilizadas en este artículo

• Oracle JDeveloper 11.1.2.1
• Oracle MapViewer 11.1.1.5.1 (Ver11_1_1_5_B110603)
• Oracle Database XE 10g
• Esquema de datos HR.
 

Sobre Oracle MapViewer (breve reseña)

Oracle MapViewer es parte de Oracle Fusion Middleware y es una herramienta para poder visualizar las geometrías almacenadas en la base de datos, generalmente son mapas o geometrías resultado de alguna análisis de datos de geo-localización.

Los principales componentes son:

• Un motor de renderizado llamado SDOVIS (en Java). Mediante un Servlet se exponen las funciones de renderizado a las aplicaciones web.
• Una suite de APIs que nos permiten acceder a las características de Mapviewer. Estas APIs incluyen XML, JAVA, PL/SQL y una librería Ajax basada en una API de Javascript.
• Una herramienta gráfica llamada MapBuilde que nos permite crear símbolos, definir reglas de renderizado para los datos espaciales, crear y editar los objetos de Mapviewer.
• Oracle Map, incluye cache de mapas y FOI (feature of interest) servers que facilitan el desarrollo de interactividad en aplicaciones web geoespaciales.

El motor de renderizado está conectado a una base de datos Oracle usando JDBC. Este motor lee la metadata (definiciones de mapas, reglas de estilo, simbologías creadas con la herramienta MapBuilder) del mapa guardado en la base de datos y utiliza esta metadata durante las operaciones de renderizado.

Flujo básico de acción con MapViewer

A continuación de muestra una imagen (fuente www.oracle.com) que muestra como es flujo de acción básico con Mapviewer:

flujo de acción básico con Mapviewer

Arquitectura de MapViewer

Con respecto a la arquitectura del Mapviewer la podemos mostrar en la siguiente figura (fuente www.oracle.com):

arquitectura Mapviewer

Contexto del ejemplo del artículo

Para aclarar mejor la utilidad de este artículo voy a plantear una problemática inicial para poder entender mejor el problema y como lo podemos solucionar haciendo uso de estas tecnologías.

En este caso vamos a usar el MapViewer que Oracle brinda gratuitamente y de acceso público, este servicio se llama "eLocator" y dispone de la URL: http://elocation.oracle.com/, usaremos el mapa de eLocator para poder visualizar la localización de los departamentos y mostrar por cada uno de ellos la lista de empleados en dicho departamento.

Modificaciones al esquema de datos HR para soportar el ejemplo:

ALTER TABLE HR.LOCATIONS
 ADD (COOR_X  NUMBER);

ALTER TABLE HR.LOCATIONS
 ADD (COOR_Y  NUMBER);
-- modificacion de LOCATIONS por direcciones reales
update locations
set street_address = 'Salta 1056', postal_code = '4600', city = 'San Salvador de Jujuy',
 state_province = 'Jujuy', country_id = 'AR', coor_x = '-65.3078737', coor_y = '-24.1818835'
where location_id = 1700;

update locations 
set street_address = 'Las Americas 153', postal_code = '4608', city = 'Perico', state_province = 'Jujuy',
 country_id = 'AR', coor_x = '-65.1138684', coor_y = '-24.3924698'
where location_id = 1400;

update locations 
set street_address = 'Belgrano 673', postal_code = null, city = 'Tilcara', state_province = 'Jujuy', 
 country_id =  'AR', coor_x = '-65.3958571', coor_y = '-23.5766891'
where location_id = 1500;

update locations
set street_address = 'Belgrano 50', postal_code = null, city = 'San Antonio', state_province = 'Jujuy',
 country_id = 'AR', coor_x = '-65.3322078', coor_y = '-24.3705819'
where location_id = 1800;

update locations
set street_address = 'Catamarca 100', postal_code = null, city = 'Palpala', state_province = 'Jujuy',
 country_id = 'AR', coor_x = '-65.2073598', coor_y = '-24.2596365'
where location_id = 2400;

update locations
set street_address = 'Rivadavia 200', postal_code = null, city = 'Tilcara', state_province = 'Jujuy', 
 country_id = 'AR', coor_x = '-65.393102', coor_y = '-23.5773028'
where location_id = 2500;

update locations
set street_address = 'Corrientes 300', postal_code = null, city = 'Humahuaca', state_province = 'Jujuy', 
 country_id = 'AR', coor_x = '-65.3473937', coor_y = '-23.2081747'
where location_id = 2700;

Lo que hicimos hasta ahora fue agregar los campos para guardar las coordenadas X e Y, le cambiamos la dirección a algunos datos en LOCATIONS ya que las direcciones originales no existen y no pude obtener las coordenadas X e Y.

Las coordenadas X,Y servirán para posicionar un punto en el mapa de eLocator.

Creación de Fusion Application

Vamos crear una aplicación llamada "EjemploADF-Maps-I", con sus respectivos proyectos Model y ViewController.

En el modelo crearemos las EO y VO de las siguientes tablas:

• EMPLOYEES
• DEPARTMENTS
• LOCATIONS
• COUNTRIES
• JOBS

En la imagen siguiente vemos el resumen final del wizard cuando creamos los ADF Business Component.

wizard cuando se crea los ADF Business Component

Lo que más nos interesa es Departments y Locations, ya que Locations tiene las coordenas X,Y.

El siguiente paso es crear una pantalla con el mapa y mostrar en él la localización de los departamentos.

Creación de página y agregado de mapa

Creamos una pantalla JSF llamada "localizacionDepartamentos.jsf" tal como se indica en la siguiente imagen.

creación de página y agregado de mapa

Para agregar el mapa debemos seguir los siguientes pasos:

Paso 1: Agregado del mapa base

Seleccionamos de la paleta de componentes "ADF Data Visualizations" el componente "Geographic Map" y lo arrastramos al panel box, nos aparece una pantalla en donde debemos crear la configuración del mapa.

Por defecto no hay ninguna configuración y debemos crear una con los siguientes datos:

Agregado del mapa base

Como podemos ver en este caso estamos usando el MapViewer de eLocation.

Elegimos las coordenadas -54,-30 como el centro del mapa y el zoom en 3.

Si ejecutamos la página vamos a poder ver el mapa, por ahora solo visualizamos el mapa.

Paso 2: Presentación en el mapa de los departamentos

Si observamos la tabla DEPARTMENTS, vemos que posee una referencia a LOCATIONS por medio el campo LOCATION_ID.

Lo que haremos será modificar la View Object DepartmentsView y agregaremos los atributos COOR_X y COOR_Y a DepartmensView

Abrimos la View Object DepartmentsView y agregamos en la Entity Location, vemos que automáticamente por la FK que posee nos genera la relación entre las Entities.

Luego agregamos los atributos de la entity Locations como atributos de DepartmensView, tal como se indica en la figura.

agregamos los atributos de la entity Locations

Hacemos lo mismo para la Entity "Country" y agregamos COUNTRY_NAME en la View Object de "DepartmentsView".

Por último debemos agregar al WHERE de QUERY de "DepartmentsView" una condición para que filtre solo por el país Argentina, ya que solo esas localizaciones tienen valor en los campos COOR_X y COOR_Y

Paso 3: Representación de los departamentos en el Mapa.

Existen algunos componentes en ADF que podemos usar para agregarlos en el Mapa.

Nosotros vamos a usar el "Point Theme". Este componente en base a las coordenadas X,Y grafica un icono en el mapa indicando la posición de dichas coordenadas.

Debemos seleccionar del DataControl "DepartmentsView1" y arrastrarlo hasta el componente Mapa allí nos permite seleccionar el tipo de Theme que queremos crear, seleccionamos "Point Theme" y nos mostrará una pantalla para configurar el THEME. Completamos con los siguientes valores.

create point map theme

Con esto finalizamos, ahora debemos ejecutar la aplicación y vemos el resultado siguiente.

resultado

Paso 4: Agregado de detalle de empleados

En este paso vamos agregar una tabla con los datos de los empleados relacionados a un departamento una vez que seleccionamos un departamento en el mapa.

Desde el DataControl seleccionamos "EmployeesView3" que es la VO producto de la relación entre Departamento y Empleado, esta VO mostrará la lista de empleados según el Departamento seleccionado (que es el maestro)

Desde el DataControl seleccionamos EmployeesView3

Cuando arrastramos EmployeesView3 hasta la página, nos pregunta qué tipo de componente queremos generar, elegimos "ADF Table Read-Only" y nos quedará la pantalla similar a:

elegimos ADF Table Read-Only

Paso 5: aplicación corriendo

Finalmente corremos la aplicación y nos debería mostrar una pantalla similar a esta:

aplicación corriendo

En donde podemos ver, que al seleccionar un departamento nos muestra una ventana de información con el ID del departamento, y en el panel de la derecha nos muestra los empleados del departamento seleccionado.

Ventajas

Mencionamos alguna de las ventajas:

• Fácil integración de mapas con componentes ADF
• Posibilidad de vincular los datos mostrados en el mapa con datos de otros componentes como ser tablas, formularios, etc.
• Poca o nula programación, con los componentes se puede llegar a crear pantallas bastante sofisticadas
• Podemos mostrar no solo puntos, sino también polígonos (lo veremos en próximo artículos de esta seria)
 

Referencias y fuente de algunas imágenes:

http://docs.oracle.com/cd/E14571_01/web.1111/e10145/toc.htm#




Publicado por Marcelo Vásquez. Especialista en Java y Oracle ADF, posee más de 13 años de experiencia en tecnologías ORACLE. Se desempeña como consultor, arquitecto y capacitador en JSDK, JEE, Frameworks y Oracle ADF.