Consumiendo REST Web Services Externos en APEX 5.0

La gran mayoría de las aplicaciones hoy en día de una u otra manera terminan consumiendo servicios web, es por ello que es muy grato saber que Apex nos provee todo lo necesario para poder consumir servicios web ya sea internos desde nuestra base de datos como también servicios web externos a nuestra aplicación.

Todas las grandes compañías ofrecen servicios web como Facebook, Flickr, YouTube, LinkedIn y muchas más, y a medida que más y más aplicaciones tienden a interconectarse con todos estos servicios, es necesario que podamos aprovechar todas estas funcionalidades para enriquecer nuestras aplicaciones y sin duda para eso necesitamos conocer cómo “consumir” o “producir” RESTful Web Services. Para la fortuna de todos, Apex 5.0 tiene una manera simple y directa de consumir Servicios Web.

En este artículo quiero compartir con todos lo que aprendí al tener que utilizar un recurso web externo en mi aplicación en Apex.

El ejemplo que veremos a continuación se basa en un servicio web externo y como con Apex podemos consumir los datos desde el archivo XML.

Lo primero que necesitamos tener en cuenta es cuál es el servicio web que vamos a utilizar.

Identificar el servicio Web que deseamos utilizar

Para este ejemplo vamos a utilizar el servicio web que nos provee la “Federal Aviation Administration” del Departamento de Transporte de Estados Unidos.

http://services.faa.gov/docs/services/airport/

Este Servicio obtiene el estado del aeropuerto para cualquier aeropuerto importante, incluyendo demoras conocidas y datos meteorológicos del NOAA. (National Oceanic and Atmospheric Administration)

Para utilizar un servicio web necesitamos de primera instancia conocer la URI. Un URI (Uniform Resource Identifier) que en español es un Identificador Uniforme de Recursos, sirve para identificar recursos en Internet. La URL es simplemente un subgrupo dentro de la URI.

El Servicio web nos provee de la siguiente información:

URI: http://services.faa.gov/airport/status/airportCode

Método HTTP:

GET

Parámetros:

Todos los siguientes parámetros son requeridos:

airportCode. Requerido. Es necesario ingresar el código del aeropuerto de tres letras para recuperar los datos y mostrarlos en la aplicación, por ejemplo, “SFO” que representa el aeropuerto “San Francisco International”

Ejemplo de Solicitud XML:

http://services.faa.gov/airport/status/SFO?format=application/xml

Cuando ingresamos la URI en nuestro navegador podemos ver el resultado del servicio web en formato XML y en base a dicha visualización podemos determinar qué datos vamos a mostrar en nuestra aplicación. Claro que lo más importante es que cuando consumimos servicios web estudiemos bien la API del servicio ya que allí podemos encontrar la información de los parámetros requeridos y los opcionales.

En la imagen de abajo, (resaltado con flechas naranjas), definimos los datos que vamos a mostrar en la aplicación.

Datos que consumiremos: Delay, IATA, State, Name, Visibility, Weather, Temp, Wind, City.

Como podemos ver en el URI de ejemplo:

http://services.faa.gov/airport/status/SFO?format=application/xml

SFO representa el parámetro airportCode y necesitamos además indicar qué tipo de formato será usado, en este caso el tipo es xml, por ello vamos a tener otro parámetro llamado Format que utilizaremos como parámetros de entrada en nuestra aplicación para solicitar el servicio web.

Crear Aplicación de Escritorio en Blanco

Ahora es momento de pasar a Apex y crear una Aplicación en blanco de tipo Escritorio, la llamaremos RESTful Services Demo.

Está de más decir, pero para trabajar con Servicios Web, debemos tenerlo habilitado en nuestra aplicación.

Crear Referencias de Servicios Web

Desde la página de inicio de la aplicación RESTful Services Demo recién creada nos dirigimos a Componentes Compartidos.

En la sección Referencias de Datos hacemos clic en Referencias de Servicios Web.

Para crear una nueva Referencia de Servicio Web, hacemos clic en el botón Crear >

Se inicia el asistente para crear la Referencia de Servicio Web.

Seleccionamos REST y hacemos clic en el botón Siguiente >

En Detalles de REST ingresamos los siguientes Datos:

Nombre: AirportStatus

URL: http://services.faa.gov/airport/status

Proxy: http://www-proxy.us.oracle.com

Método HTTP: GET

Autenticación Básica: No

No agregamos ninguna cabecera

Hacemos clic en el botón Siguiente >

En Entradas REST vamos a añadir los dos parámetros que necesitamos para realizar la solicitud.

AirportCode: Cadena

Format: Cadena

Hacemos clic en el botón Siguiente >

En Salidas REST configuramos los siguientes datos:

  • Formato de Salida: XML
  • XPath a Parámetros de Salida: /AirportStatus

Es muy importante conocer el XPath a Parámetros de Salida, si observamos la salida XML de ejemplo podemos ver que la primer etiqueta se llama AirportStatus y luego se desprenden las demás etiquetas en jerarquía hacia abajo, el cual nos indica donde está el dato a consumir en el archivo XML, como vamos a mostrar datos de distintas partes del XML usaremos la primer etiqueta para que sea nuestro punto de partida del XPath.

  • Parámetros de Salida REST
Nombre Ruta de Acceso Tipo
State /State Cadena
City /City Cadena
Name /Name Cadena
IATA /IATA Cadena
Temp /Weather/Temp Cadena
Weather /Weather/Weather Cadena
Visibility /Weather/Visibility Cadena
Wind /Weather/Wind Cadena
Delay /Delay Cadena

Hacemos clic en el botón Crear

Podemos visualizar que se ha creado una nueva referencia de Servicio Web.

Probar El Servicio Web

Podemos probar la referencia haciendo clic en el botón de “play”

Ingresamos los Parámetros de Entrada:

AirportCode: SFO

Format: Application/xml

Y hacemos clic en el botón Probar

En la ficha Respuesta podemos ver la salida del archivo XML.

Crear Página Pantalla e Informe Basados en Servicio Web

Desde la página de Inicio de la Aplicación hacemos clic en el botón Crear Página >

Interfaz de usuario: Escritorio

Seleccione un Tipo de Página: Pantalla  — Pantalla e Informe Basados en Servicio Web.

  1. En el paso “Seleccionar Servicio y Operación”
    1. Referencia de Servicio Web: AirportStatus
    2. Tipo de Referencia de Servicio Web: RESTful
    3. Operación: doREST
    4. Hacemos clic en el botón Siguiente
  2. En el paso “Atributos de Página y de Región”
    1. Aceptamos los valores por defecto y hacemos clic en el botón Siguiente
  3. En el paso “Elementos de Entrada”
    1. Nombre del Elemento: P2_AIRPORTCODE — Crear: Sí
    2. Nombre del Elemento: P2_FORMAT — Crear: Sí
    3. Hacemos clic en el botón Siguiente
  4. En el paso “Parámetros del Informe”
    1. Seleccionamos y tildamos todos los parámetros del Informe
    2. Hacemos clic en el botón Siguiente
  5. En el paso “Menú de Navegación”
    1. Preferencia de Navegación: Crear nueva entrada del menú de navegación
    2. Nueva Entrada del Menú de Navegación: RESTful Services Demo
    3. Entrada de Menú de Navegación Principal: Seleccionado Inicio
    4. Hacemos clic en el botón Siguiente
  6. En el paso “Confirmar”
    1. Verificamos los datos y hacemos clic en el botón Crear

Ejecutar la Aplicación

Desde la página de Inicio de la Aplicación hacemos clic en el icono “Ejecutar Aplicación”

Iniciamos la sesión ingresando nuestras credenciales y accedemos a la Página “RESTful Services Demo”

Es el momento de probar el consumo del Servicio Web que creamos, para ello ingresamos los siguientes parámetros de entrada:

Airportcode: SNA

Format: Application/xml

Hacemos clic en el botón Ejecutar

Como podemos ver, Apex nos facilita en gran medida el consumo de Servicios Web externos para ser utilizados en nuestras aplicaciones web.

Ejemplo Archivo XML con atributos

Antes de terminar sólo quiero mostrar otro ejemplo de archivo XML el cual dentro de las etiquetas que representan los elementos del archivo XML podemos tener atributos que nos dan información adicional sobre el elemento por medio del valor que llevan asociado.

Tenemos esta URI para el consumo de Servicios Web:

http://api.openweathermap.org/data/2.5/weather?q=London&mode=xml

Que tiene dos parámetros:

q = Ciudad

mode = xml

El Archivo XML se muestra de la siguiente forma:

Como podemos observar la estructura del archivo es diferente a la que vimos en el primer ejemplo.

Cuando estamos configurando la Referencia del Servicio Web en los Parámetros de Salida debemos ingresar la Ruta de Acceso, y en el caso de que el elemento contenga atributos varía la forma que en se representa el acceso a los datos, agregando la @ antes del nombre del atributo.

Por ejemplo para mostrar los parámetros de Salida de País, Temperatura, Temperatura Mínima, Temperatura Máxima, Longitud, Latitud y Velocidad del Viento, debemos configurarlos de la siguiente manera:

Nombre Ruta de Acceso Tipo
País /city/country Cadena
Temperatura /temerature/@value Cadena
Temp Min /temerature/@min Cadena
Temp Max /temerature/@max Cadena
Longitud /city/coord./@lon Cadena
Latitud /city/coord./@lat Cadena
Velocidad del Viento /wind/speed/@value Cadena

De esta forma podemos consumir los datos desde Apex según la estructura del Archivo XML.

Conclusión

Finalmente, según mi opinión, lo más más importante en este caso es identificar el servicio web externo que vamos a usar e identificar la URI con sus respectivos parámetros de entrada requeridos porque el resto como pudimos observar es muy simple de configurar, gracias a los asistentes que nos provee Apex.

Hemos aprendido en este artículo a:

  • Identificar el Servicio Web que deseamos utilizar
  • Crear una Referencia de Servicio Web en Apex
  • Crear una Página del tipo Pantalla e Informe Basados en Servicio Web
  • Consumir Servicios Web RESTful Externos

Personalización de Informes Interactivos en Oracle Apex 5.0

Para todas aquellas personas que no conocen Oracle Apex puedo decirles que en este artículo podrán encontrar una de las funcionalidades que más se utiliza en los desarrollos en Apex que son el uso de los Informes Interactivos.

Si estamos trabajando con una base de datos Oracle, de nada nos sirve tener una base de datos llena de información si no tenemos las herramientas adecuadas para mostrar esa información y que dicha información sea visualmente fácil de interpretar por nuestros usuarios.

Es por ello que Oracle Apex con sus Informes Interactivos nos brindan una solución muy rápida y eficiente a la hora de presentar los datos de nuestra base de datos a nuestros usuarios.

Después de ir viendo el pasaje de las diferentes versiones de Apex, esta funcionalidad ha mejorado muchísimo en ésta última versión, entre todas las capacidades de personalización del Informe, podemos además crear múltiples Informes Interactivos en una misma página, algo que muchos desarrolladores anhelaban disponer, además de muchas otras mejoras.

Lo que más me gusta de los Informes Interactivos es que no tengo que pensar en el diseño del mismo, eso es una gran ventaja a la hora de optimizar el trabajo y desarrollar aplicaciones potentes y modernas en un lapso de tiempo corto.

En esta guía te quiero mostrar cómo rápidamente podemos crear y personalizar Informes Interactivos, y cómo crear múltiples Informes Interactivos en una misma página en Apex.

Formas de tener un Espacio de Trabajo

Dentro de nuestro Espacio de Trabajo, creamos una nueva aplicación Demo.

Nota: Si no cuentas con un Espacio de Trabajo:

  • Puedes: registrarte gratis en la página de Oracle APEX desde este enlace y solicita allí un Espacio de Trabajo, o
  • Puedes instalar y configurar Oracle Developer Day en una VirtualBox y acceder a Oracle Apex 4.2, desde este enlace
  • Si tienes Apex 4.2 instalado en tu PC, puedes actualizar Oracle APEX a la versión 5.0 desde este enlace
  • Si ya tienes Oracle Apex 5.0, y quieres crear un nuevo Espacio de Trabajo, puedes hacerlo desde este enlace

Ingresar a nuestro Espacio de Trabajo

Para ingresar a Apex simplemente abrimos nuestro navegador e ingresamos la siguiente URL: http://localhost:8080/apex (Nota: localhost hace referencia al Servidor y 8080 es el puerto donde se instaló Apex)

Se abre la página de Inicio de Sesión e ingresamos las credenciales correspondientes: Espacio de Trabajo, Usuario y Contraseña.

Crear Aplicación Demo Informes Interactivos

Para Crear una aplicación de Base de Datos en Apex hacemos clic en el icono Creador de Aplicaciones.

Se abre la página del Creador de Aplicaciones y hacemos clic en el icono Crear

Se inicia el asistente de creación de la aplicación:

En la pantalla ¿Qué tipo de Aplicación desea Crear? hacemos clic en el icono Escritorio y hacemos clic en el botón azul Siguiente.

En la pantalla Nombre, ingresamos el nombre de la aplicación, para el resto de los valores lo dejamos por defecto.

Nombre: Demo Informes Interactivos

Hacemos clic en el botón azul Siguiente.

En la pantalla Páginas, eliminamos la página de Inicio haciendo clic en el botón de la cruz (+) y creamos una página de tipo Informe:

Origen de la Tabla: Tabla

Nombre de la Tabla: DEMO_PRODUCT_INFO

Tipo de Informe: Interactiva

Hacemos clic en el botón azul Agregar Página

Luego, hacemos clic en el botón azul Siguiente

En la pantalla Componentes Compartidos, aceptamos el valor por defecto y hacemos clic en el botón azul Siguiente.

En la pantalla Atributos, asignamos:

Idioma de preferencia: Español (Estados Unidos) (es-us) [Indicar el idioma que corresponda]

Preferencia de Idioma de Usuario Derivada de: Idioma Primario de la Aplicación

Hacemos clic en el botón azul Siguiente.

En la pantalla Confirmar, verificamos los datos ingresados y hacemos clic en el botón azul Crear Aplicación.

Ejecutamos la aplicación y la página de inicio mostrará nuestro Informe Interactivo recién creado.

Tipos de Informes Interactivos según tipo de usuario

En Oracle Apex tenemos la posibilidad de crear diferentes tipos de Informes dependiendo el rol que tengamos en un momento dado, si trabajamos con Apex como un usuario desarrollador o trabajamos como un usuario final.

Informe Primario (este informe es configurado por defecto) (Sólo para usuarios desarrolladores). El informe primario es el que se muestra inicialmente. Los informes primarios por defecto no se pueden renombrar o eliminar.

Informes Alternativos (Sólo para usuarios desarrolladores). Permite a los desarrolladores crear varios diseños de informes. Solamente los desarrolladores pueden guardarlos, renombrarlos o borrar un Informe Alternativo. 

Informe Público (Usuario finales y desarrolladores). Este informe puede ser visto por todos los usuarios. Sin embargo, sólo el usuario que crea un informe público puede guardarlo, renombrarlo o borrarlo. Aunque todos los usuarios pueden ver un informe público, ellos solamente pueden guardarlo con un nuevo nombre de Informe.

Informe Privado (Usuario finales y desarrolladores). Sólo el usuario que crea el informe privado puede verlo, guardarlo, renombrarlo o eliminarlo.

Personalizar Informe Interactivo

Como podemos ver, el Informe Interactivo necesita de varias personalizaciones para que se ajuste a un reporte entendible por parte de nuestros usuarios.

Como usuarios desarrolladores podemos crear una gran variedad de informes que representen requerimientos por parte de nuestros usuarios. Veremos varios ejemplos de personalización.

Ejemplo 1

Nos solicitan que mostremos los productos disponibles de las diferentes categorías con su respectiva imagen de producto.

Para mostrar u ocultar columnas en el Informe Interactivo usamos el botón Acciones estando en modo de ejecución de la página 1 y seleccionamos la opción Seleccionar Columnas.

Mostrar las siguientes columnas:

Product Id, Product Name, Product Description, List Price, Produc Image

Ocultar las siguientes columnas:

Category, Filename, Image Last Update, Mimetype, Product Avail y Tags

Movemos hacia arriba la columna Product Image para que sea la primera columna que se visualiza y aplicamos los cambios haciendo clic en el botón azul Aplicar.

Editar Nombres de Columnas del Informe

Hacemos clic en Editar Página 1 en la barra del desarrollador que se encuentra en la parte inferior de la pantalla.

Desde el Panel de la izquierda, estando en la vista árbol de Presentación, hacemos clic sobre el Informe Interactivo DEMO_PRODUCT_INFO y posamos nuestra mirada en el panel de la derecha en propiedades de la región y cambiamos el Titulo del Informe Interactivo por “Informe de Productos”.

Expandimos las columnas desde el panel de la izquierda y modificamos los nombres de las columnas visibles, colocando su nombre en el atributo Cabecera en la sección de Cabecera del panel de la derecha en propiedades de la columna: Código, Nombre, Descripción, Precio e Imagen y guardamos los cambios haciendo clic en el botón Guardar en la parte superior derecha de la página.

Asignar formato moneda para la columna Precio

Seleccionamos la columna LIST_PRICE y en el panel derecho de propiedades de la columna  en la sección Apariencia, seleccionamos en Máscara de Formato: $5.234,10 (FML999G999G999G999G990D00)

Mostrar Imagen en el Informe Interactivo

Hacemos clic en Editar Página 1 en la barra del desarrollador que se encuentra en la parte inferior de la pantalla.

Desde el Panel de la izquierda, estando en la vista árbol de Presentación, hacemos clic sobre la columna PRODUCT_IMAGE y pasamos nuestra mirada al panel de la derecha en propiedades de la columna en la sección Identificación, en el atributo Tipo seleccionamos Mostrar Imagen, luego hacemos clic en el botón Guardar.

Guardar Informe como Informe Principal

Si a esta instancia cerramos nuestra aplicación y salimos del navegador perderemos todos los cambios que hemos realizado en el Informe Interactivo, por ello es momento de guardar el Informe como el Informe Principal.

Desde la ejecución de la página de Inicio hacemos clic en el botón Acciones y seleccionamos la opción Guardar Informe.

Seleccionamos: Guardar: Como Valores de Informe por Defecto

Tipo de Informe por Defecto: Primario

Hacemos clic en el botón Aplicar

Crear Informe Alternativo

Ejemplo 2

En este caso vamos a crear un Informe Alternativo que nos muestre todos los productos (disponibles y no disponibles) agrupados por categorías de productos y que los productos que no están disponibles se muestren en el informe como una fila con un color naranja.

Para realizar esta personalización, vamos al botón Acciones y seleccionamos la opción Seleccionar Columnas y pasamos la columna Category al cuadro de Mostrar columnas.

Nuevamente hacemos clic en el botón Acciones y seleccionamos la opción Formato y dentro de ella seleccionamos División de Control. Se abre una ventana de diálogo y en ella ingresamos:

Columna: Category

Estado: Activado

Hacemos clic en el botón Aplicar para cerrar la ventana de Diálogo.

De esta forma mostramos en el Informe Interactivo los productos agrupados por categoría de productos.

Resaltar Filas

Para resaltar filas dependiendo de una condición dada, como por ejemplo mostrar todas las filas de productos no disponibles con un color rosado, hacemos clic en el botón Acciones y seleccionamos la opción Formato y dentro de ella seleccionamos Resaltar y realizamos las siguientes configuraciones:

Nombre: Productos No Disponibles

Tipo de Resaltado: Fila

Color de Fondo: #FF7755

Color de Texto: #000000

Condición:

Columna: Product Avail

Operador: =

Expresión: N

De este modo muy simple podemos ver que las filas resaltadas en color naranja son aquellas que corresponden a los productos no disponibles.

Guardar Informe Alternativo

Para guardar los cambios realizados al informe sin perder el informe principal, hacemos clic en el botón Acciones y seleccionamos Guardar Informe.

Seleccionamos:

Guardar: Como Valores de Informe por Defecto

Tipo de Informe por Defecto: Alternativo

Nombre: Productos por Categoría

Hacemos clic en el botón Aplicar

 Podemos ver que se ha creado una lista de selección en el lado izquierdo del botón acciones que nos permite seleccionar el Informe que queremos visualizar.

Nota: Al pasar al informe principal veremos los cambios realizados para crear el informe alternativo, si salimos de nuestra sesión y volvemos a iniciar sesión podremos ver que el Informe Principal es el que habíamos guardado primero y luego si seleccionamos el Informe Alternativo vemos el Informe de Categoría de Productos.

Añadiendo Columnas Calculadas

Ejemplo 3

Es posible crear columnas calculadas para agregar a nuestro Informe Interactivo. Por ejemplo podemos querer tener una columna que se muestre el precio con impuestos incluidos y que aquellos productos que su precio sea mayor a $100 se muestren en color verde.

Para ello, hacemos clic en el botón Acciones y seleccionamos Formato y luego seleccionamos Calcular. Se abre la ventana de diálogo e ingresamos los siguientes datos:

Cabecera de Columna: Precio con Impuesto

Expresión de Cálculo: F * 1.07 (el F representa la columna Precio y el impuesto es del 7% adicional), hacemos clic en el botón Aplicar

De esta forma se agrega una columna calculada a nuestro Informe Interactivo.

Para resaltar las los productos cuyo precio son mayores a $100, hacemos clic en el botón Acciones y luego en Formato y seleccionamos Resaltar.

Realizamos las siguientes configuraciones:

Nombre: Productos Productos con Precio > $100

Tipo de Resaltado: Fila

Color de Fondo: #99FF99

Color de Texto: #000000

Condición:

Columna: Precio

Operador: >

Expresión: 100

Hacemos clic en el botón Aplicar

Guardamos el Informe como un Informe Alternativo llamado: Productos Con Impuestos Incluidos

Múltiples Informes Interactivos en una Página

Actualmente en la página de inicio disponemos de un solo Informe Interactivo.  A partir de la versión 5.0 podemos tener varios Informes Interactivos en una misma página de Apex.

Vamos a crear otro informe Interactivo que se acomode en el lado derecho del Informe Actual.

Desde el Diseñador de Páginas de la Página de Inicio, estando ubicados en el panel izquierdo en la ficha Presentación, hacemos clic con el botón derecho del ratón en Regiones y seleccionamos Crear Región.

Seleccionamos la Región y pasamos nuestra mirada al panel derecho de propiedades de la región y le indicamos que sea una Región de Tipo: Informe Interactivo y le cambiamos el nombre por: Informe de Clientes.

Ingresamos la siguiente Consulta SQL:

SELECT * FROM demo_customers;

En la sección Cuadrícula:

Iniciar Nueva Fila: No

Columna: 7

Ampliación de Columna: Automático

De este modo podemos visualizar que el primer Informe de Productos se inicia en la columna 1 hasta la 6 y el Informe de Clientes se inicia en la columna 7 para terminar en la columna 12. Como el Informe de Clientes es mucho más amplio horizontalmente, se puede ver que se activa la barra de desplazamiento horizontal para poder navegar por todo el Informe Interactivo.

Conclusiones

Podemos seguir trabajando en innumerables personalizaciones de los Informes Interactivos y guardarlos como diferentes Informes ya sean Alternativos, Privados o Públicos y eso va a depender de las necesidades de nuestros usuarios o clientes.

No he abarcado todas las posibilidades de personalización de los Informes Interactivos, pero como podemos observar Oracle Apex nos provee de esta potente característica para mostrar todos los datos de nuestra base de datos en forma rápida, clara y altamente personalizable al gusto del usuario.

Hemos aprendido en este artículo:

  • Como crear y guardar Informes Interactivos
  • Cómo crear y guardar Informes Alternativos
  • Personalizar los Informes Interactivos usando columnas resaltadas, columnas calculadas, filtros, formatos, etc.
  • Cómo crear múltiples Informes Interactivos en una misma página en Apex.

Nuevo “Look and Feel” en nuestras aplicaciones desarrolladas con Oracle APEX

Hoy les quiero acercar a todos las nuevas características que la versión 5.0 de APEX nos brinda con la utilización del Tema Universal.

Para aquellos que han trabajado con APEX una de las principales discusiones era la dificultad para que las aplicaciones luzcan modernas y atractivas a los ojos de nuestros clientes y ahora gracias al Tema Universal # 42, desde mi punto de vista, hemos llegado a esa gran facilidad.

Pero antes de continuar hablando sobre las bondades que nos trae este tema quisiera compartir contigo, cómo surgió que el equipo de desarrollo de APEX designara al tema Universal con el número 42, seguro que ni te imaginas el por qué…Hace bastante tiempo una radio-comedia que después pasó a la TV, se hicieron libros y llegó al cine, se comenzaba a transmitir por la BBC en 1978 escrita por Douglas Adams llamada “The Hitchhiker’s Guide to the Galaxy” que en español se conocía como “Guía del viajero intergaláctico” en la historia, el sentido de la vida, el universo y todo los demás es buscado por un superordenador llamado Deep Thought (Pensamiento Profundo) y el sentido dado por el superordenador conduce a los protagonistas a una aventura para averiguar la pregunta que da lugar a la respuesta. Después de 7 millones y medio de años meditando la pregunta, el superordenador Pensamiento Profundo declara que la respuesta es 42, en definitiva la historia plantea que el 42 es la respuesta al sentido de la vida, el universo y todo lo demás y con eso en mente el equipo de desarrollo de APEX nombró al tema Universal con el número 42 denotándolo como la solución a todos los problemas en APEX! No sé si será la solución a todo pero lo que sí puedo decir que soluciona en gran medida la apariencia de nuestra aplicación y ya eso es un gran avance! Claro que todo esto del número 42 es simplemente una anécdota muy peculiar sobre el Tema Universal.

Ahora si es momento de pasar a conocer lo más interesante que tiene este tema para embellecer nuestras aplicaciones desarrolladas con APEX.

El Tema Universal nos permite disponer de los estilos CSS de cada componente simplemente asignándoles los atributos apropiados del componente seleccionado.

Para conocer cómo trabajar con los diferentes componentes del Tema Universal, el equipo de desarrollo de APEX ha creado una aplicación que muestra cómo aplicar cada estilo a cada componente.

En el módulo de Aplicaciones Empaquetadas de APEX, disponemos de la aplicación “Universal Theme Sample Application” la cual podemos instalar en nuestro Espacio de Trabajo y tener acceso a la edición de los componentes mostrados.

La Aplicación nos muestra 6 grupos de componentes:

  • Páginas
  • Regiones
  • Listas
  • Informes
  • Botones
  • Formularios (Pantallas)
  • Calendarios

En la aplicación empaquetada podemos ver los diferentes grupos de componentes y las Listas (List), a mi modo de ver por lejos fue uno de los componentes que más se nota el cambio de estilos, mostrándolo mucho más moderno como los que se usan actualmente en los sitios web en general.

Uno de los templates nuevos de tipo Lista que se añadieron son los Cards que nos permite mostrar una variedad de información y pueden ser mostrados en 3 estilos diferentes, con íconos o letras iniciales y además podemos controlar el layout del mismo.

Para ver cómo aplicar estos estilos a una aplicación en APEX, vamos a crear una aplicación básica dentro de un Espacio de Trabajo nuevo.

Crear Espacio de Trabajo

Para empezar – vamos a asumir que ya tenemos instalada una instancia de Oracle Database en nuestra PC y que ya hemos actualizado APEX a la versión 5.0.

Para ingresar a APEX simplemente abrimos nuestro navegador favorito e ingresamos la siguiente URL: http://localhost:8080/apex

Ahora vemos la pantalla de inicio de sesión de APEX e ingresamos las credenciales: Espacio de Trabajo: INTERNAL y la contraseña será la misma que se suministró cuando se realizó la actualización de APEX a la versión 5.0.

Cuando nos conectamos vemos la Página Principal de Administración:

Hacemos clic en el botón azul Crear Espacio de Trabajo que se encuentra en la esquina superior derecha.

En la pantalla Identificar Espacio de Trabajo, ingresamos lo siguiente:

Espacio de Trabajo: DEMO

Identificador Espacio de Trabajo: 100000

Hacemos clic en el botón Siguiente

En la pantalla de Identificación de Esquema, ingresamos lo siguiente:

Desea volver a utilizar esquema existente? : No
Nombre de Esquema: DEMO

Contraseña de Esquema: demoapex

Cuota de Espacio (MB): valor por defecto 100

Hacemos clic en el botón SiguienteEn la pantalla Identificar Administrador:Necesitamos especificar las credenciales del usuario ADMINNota – El campo de email es obligatorio por ello debemos ingresarlo, podemos usar un email irreal que solo servirá a efectos de demostración.Usuarios Administrador: ADMINContraseña: demo123Correo Electrónico: mi@email.com

Hacemos clic en el botón Siguiente

En la pantalla Confirmar Solicitud nos muestra el resumen de la configuración del Espacio de Trabajo:

Hacemos clic en el botón azul Crear Espacio de Trabajo

Hacemos clic en el botón azul Listo

Ahora necesitamos cerrar la sesión de la página de administración de APEX.

Crear Aplicación de Base de Datos

Para ingresar al nuevo Espacio de Trabajo recién creado, desde el navegador ingresamos la URL: http://localhost:8080/apex

Se presenta la pantalla de inicio de sesión de APEX, e ingresamos las siguientes credenciales:

Espacio de Trabajo: DEMO

Usuario: ADMIN

Contraseña: demo123

Una vez ingresadas las credenciales, APEX solicitará un cambio de contraseña del usuario ADMIN, por ello ingresamos una nueva contraseña y volvemos a iniciar sesión con las nuevas credenciales.

Una vez ingresadas las nuevas credenciales se desplegará la página de Inicio de APEX donde podemos visualizar los 4 módulos generales:

  • Creador de Aplicaciones
  • Taller de SQL
  • Desarrollo de Equipos
  • Aplicaciones Empaquetadas

Para Crear una aplicación de Base de Datos en APEX hacemos clic en el icono Creador de Aplicaciones.

Se abre la página del Creador de Aplicaciones y hacemos clic en el icono Crear

Se inicia el asistente de creación de la aplicación:

En la pantalla ¿Qué tipo de Aplicación desea Crear? hacemos clic en el icono Escritorio y hacemos clic en el botón azul Siguiente.

En la pantalla Nombre, ingresamos el nombre de la aplicación, para el resto de los valores lo dejamos por defecto.

Nombre: Demo Tema Universal

Hacemos clic en el botón azul Siguiente.

En la pantalla Páginas, tenemos una página de Inicio seleccionada, no necesitamos agregar ninguna página y hacemos clic en el botón azul Siguiente.

En la pantalla Componentes Compartidos, aceptamos el valor por defecto y hacemos clic en el botón azul Siguiente.

En la pantalla Atributos, asignamos:

Idioma de preferencia: Español (Alfabeto Tradicional) (es)

Preferencia de Idioma de Usuario Derivada de: Idioma Primario de la Aplicación

Hacemos clic en el botón azul Siguiente.

En la pantalla Confirmar, verificamos los datos ingresados:

Hacemos clic en el botón azul Crear Aplicación.

De esta manera tan sencilla tenemos nuestra aplicación de Base de Datos creada que consiste en una página en blanco de Inicio y una página de Inicio de Sesión.

Ejecutar Aplicación Demo

Para ejecutar la aplicación, hacemos clic en el icono Ejecutar Aplicación.

Se presenta la página de Inicio de Sesión, e ingresamos las credenciales del usuario ADMIN.

Vamos a visualizar la Página de Inicio de la Aplicación que en estos momentos se encuentra en blanco.

Modificar Orientación del Menú de Navegación

Como podemos ver disponemos del menú de navegación en la lateral izquierda de nuestra aplicación mostrado como un sidebar. Si nosotros deseamos cambiar el modo en que se visualiza dicho menú, necesitamos ingresar a la Definición de la Aplicación.

Desde la barra de menú del desarrollador que se encuentra la parte inferior de la pantalla, hacemos clic en Aplicación 104.

En la pantalla de Inicio del Creador de Aplicaciones hacemos clic en el botón Editar Propiedades de la Aplicación, que se encuentra en la parte superior derecha, arriba del icono Exportar/Importar.

Hacemos clic en la ficha Interfaz de Usuario y luego hacemos clic en Interfaces de Usuario

Para modificar el menú necesitamos acceder a la interfaz de usuario de Escritorio, (si tuviéramos la aplicación realizada para móviles, también se vería debajo de la Interfaz de Escritorio la interfaz Móvil)

Hacemos clic en el icono de lápiz, se despliega la página con diferentes fichas y hacemos clic en la ficha Menú de Navegación y seleccionamos lo siguiente:

Posición: Principal

Plantilla de Lista: Top Navigation Menu

Hacemos clic en el botón azul Aplicar Cambios y ejecutamos la Aplicación para ver los resultados:

Quizás no es muy intuitivo el cambio de orientación del menú, pero puedo decir que esta característica es algo que muchos desarrolladores en Apex estábamos esperando!

Conociendo el Diseñador de Páginas

Desde la página de Inicio de la Aplicación, hacemos clic en la Página en blanco llamada Inicio, de esta forma ingresamos al Diseñador de Páginas, una nueva característica de APEX 5.0 que nos brinda un completo entorno de desarrollo integrado (IDE) diseñado para maximizar la productividad de los desarrolladores para el mantenimiento de las páginas de la aplicación.

El Diseñador de Páginas se divide en tres paneles:

Panel Izquierdo

El panel izquierdo muestra las regiones, elementos de página, botones, la lógica de la aplicación (por ejemplo, cálculos, procesos y validaciones), acciones dinámicas, bifurcaciones y los componentes compartidos como nodos en un árbol.

Panel Central

El panel central en el diseñador de páginas contiene cuatro pestañas primero se muestra el Diseño de Cuadrícula que es una representación visual de las regiones, los elementos y los botones que definen una página. Podemos añadir nuevas regiones, elementos y botones para una página seleccionándolos de la Galería en la parte inferior de la página. Podemos ajustar el tamaño de cuadrícula de diseño utilizando los divisores de ventana. Como alternativa, podemos hacer clic en el botón Ampliar para agrandar el panel del Diseño de Cuadrícula y luego en Restaurar para volver al tamaño anterior. Luego se disponen de las pestañas Mensaje, Búsqueda de Página y Ayuda.

Panel Derecho

El panel derecho muestra el editor de propiedades. Utilizamos este panel para editar las propiedades de los componentes seleccionados en el panel vista de árbol o en el Diseño de Cuadricula de la página.

Al seleccionar los diferentes componentes, ya sea en vista de árbol o de diseño de cuadrícula, el Editor de Propiedades se actualiza automáticamente para reflejar la selección actual. Los atributos se organizan en grupos funcionales que describen su propósito. Los atributos obligatorios muestran un triángulo rojo en la esquina superior izquierda por encima de la etiqueta de atributo.

Lo interesante del Diseñador de Páginas es que ahora podemos crear todos los componentes de nuestra página y asignarle sus atributos sin salirnos del Diseñador de Páginas permitiendo que el mantenimiento o el desarrollo de las páginas sean mucho más rápido y eficiente.

Crear Lista

Para Crear una visualización utilizando un nuevo template de tipo Lista llamado Cards, necesitamos crear una Lista.

Vamos a crear una Lista con 4 enlaces, para ello desde la página de Inico de la Aplicación hacemos clic en el icono de Componentes Compartidos.

Esta página se divide en 9 secciones, vamos a la sección Navegación y hacemos clic en el enlace Listas y posteriormente hacemos clic en el botón azul Crear.

En la pantalla Origen, seleccionamos Nuevo y hacemos clic en el botón azul Siguiente.

En la pantalla Nombre y Tipo, ingresamos:

Nombre: Lista_Demo

Tipo: Estático

Hacemos clic en el botón azul Siguiente.

En la pantalla Valores Estáticos o de Consulta, ingresamos la siguiente información:

Etiqueta de Entrada:

  1. DBA Remoto
  2. Desarrollo
  3. Consultoría
  4. Entrenamiento

ID de Página de Destino o URL Personalizada: colocamos en cada uno la almohadilla #

Hacemos clic en el botón azul Siguiente.

En la pantalla Confirmar, simplemente verificamos la información y hacemos clic en el botón azul Crear Lista.

Para que la lista luzca como se muestra en el ejemplo de la aplicación del Tema Universal aún debemos ingresar en cada elemento de la lista cierta información.

Hacemos clic en el enlace de Lista que recién hemos creado Lista_Demo

Visualizamos los cuatro enlaces y hacemos clic en el primero, en DBA Remoto.

En la página de Entrada de Lista, hacemos clic en la ficha Entrada e ingresamos en Imagen/Clase el icono que se mostrará que será una base datos fa-database.

Luego hacemos clic en la ficha Atributos Definidos por el Usuario e ingresamos la siguiente información demo:

  1. Mauris nulla. Integer urna. Vivamus molestie dapibus ligula. Aliquam erat volutpat. Nulla dignissim. Maecenas ornare egestas ligula. Nullam feugiat placerat
  2. 4 Widgets
  3. AM

En el cual el punto uno es una breve descripción del servicio, el punto 2 corresponde a la leyenda que se encuentra en la esquina izquierda de la card y el punto 3 es referente a las letras que se usaran si no se muestra el icono.

Hacemos clic en el botón Aplicar Cambios.

Realizamos lo mismo para el resto de los elementos de la lista, asignando para la Imagen los siguientes iconos:

  • Desarrollo — Imagen/Clase: fa-mobile
  • Consultoría — Imagen/Clase: fa-laptop
  • Entrenamiento — Imagen/Clase: fa-graduation-cap

Crear Región de Tipo Lista

Desde el Panel de la izquierda, estando en la vista árbol de Presentación, hacemos clic sobre Regiones con el botón derecho del mouse y hacemos clic en Crear Región.

Podemos observar que se agregó la región y no nos hemos ido de la página del diseñador. Para cambiar el nombre de la región, ponemos la mirada en el panel de la izquierda donde se encuentra el editor de propiedades del componente recién creado, en este caso la Región.

En la sección Identificación:

Título: Diferentes Listas

Tipo: Lista

Ni bien se indica que el tipo de Región es una Lista, el Diseñador de Páginas nos indica que hay un error y se muestra en el panel central en la ficha Mensajes.

Podemos también ver que en el Panel de la Izquierda queda indicado donde se encuentra el error, en la sección Origen debemos indicar cuál es la Lista que debe usar como Origen, que en este caso usaremos la Lista recién creada Lista_Demo.

En  la sección Apariencia, seleccionamos la Plantilla: Blank with Attibutes.

Pasamos nuestra vista ahora al panel derecho en la vista árbol en la ficha Presentación, hacemos clic en Atributos (debajo de la Región Diferentes Listas) luego posamos nuestra vista en el panel izquierdo del editor de propiedades y en la sección Apariencia, en la opción Plantilla de Lista seleccionamos Cards.

En Opciones de Plantilla, hacemos clic en el botón para abrir una ventana modal y seleccionar los siguientes atributos:

Hacemos clic en el botón Aceptar y luego guardamos la página haciendo clic en el botón Guardar ubicado en la parte superior derecha de la página.

Finalmente ejecutamos la página para ver el resultado.

Conclusión

De esta forma y con muy poco esfuerzo podemos crear aplicaciones visualmente muy atractivas para nuestros clientes utilizando el Tema Universal que nos provee de diferentes estilos para cada uno de los componentes en APEX.

Les recomiendo instalar en su Espacio de Trabajo la aplicación empaquetada que muestra cada uno de los componentes de APEX y cómo el Tema Universal puede mostrar dichos elementos en las diferentes páginas de nuestra aplicación.

En el presente artículo hemos aprendido a:

  • Crear un Espacio de Trabajo
  • Crear una Aplicación de Base de Datos
  • Modificar la Orientación del Menú de Navegación
  • Crear una Lista Estática
  • Crear una Región de Tipo Lista