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