Utilidades de Desarrollo de Aplicaciones (funcional)

(1)

Consultoría de Áreas de Conocimiento

(2)

Introducción

Componentes de UDA

Arquitectura tecnológica

Librería de funciones comunes [x38]

Patrones de Usabilidad (RIA)

Componentes implementados

Plugin UDA

Demo

Kit de desarrollo

Análisis y Desarrollo de aplicaciones con UDA

Evolución de UDA

Documentación

Índice

(3)

UDA es un conjunto de herramientas, tecnologías, componentes y

normativas funcionales y técnicas que permiten acelerar y normalizan el proceso de construcción de aplicaciones JEE en el ámbito de Gobierno Vasco – EJIE:

– Determina la arquitectura conceptual básica de los nuevos sistemas JEE, así como la selección y configuración de tecnologías que

implementan sus componentes.

– Potencia la ayuda al desarrollo, posibilitando mediante herramientas la generación de forma automatizada y asistida del código de las

nuevas aplicaciones a construir, en coherencia con la arquitectura definida.

– Proporciona componentes reutilizables y adaptables que implementan patrones de interacción para la construcción de

(4)

Arquitectura basada en estándares y tecnologías comúnmente aceptadas, utilizando modelos arquitectónicos generalmente aceptados frente a otros más especializados. Prima la sencillez y el conocimiento generalizado en la comunidad de desarrolladores Java.

Arquitectura sencilla, fácil de entender y aplicar para el desarrollador,

reduciendo la curva de aprendizaje y acelerando al máximo el proceso de desarrollo

Modelo arquitectónico escalable, extensible, de fácil mantenimiento y utilización

Es una apuesta tecnológica, habiéndose realizado una selección de tecnologías estándar frente a desarrollos a medida

Prima el uso de código Open Source frente a soluciones propietarias

Establece la división de responsabilidades en los componentes de la arquitectura: modelo de 3 capas

Introducción

(5)

Busca independizar el código de las tecnologías de cada momento del entorno de ejecución final, es decir, mejora la adaptabilidad y reutilización del código en un futuro

Trabaja sobre Oracle Weblogic 11g, pero con el objetivo de ser operativa sobre otros contenedores JEE Open Source hasta donde sea posible

Se potencia la reutilización de código para los nuevos desarrollos

Acoplamiento débil e independencia tecnológica. Facilita el cambio o evolución de los distintos componentes o subsistemas

Adopta y modela el conjunto de patrones de diseño tecnológico más adecuados para cada subsistema y sus componentes

Favorece la normalización de la capa de presentación para todas las aplicaciones que se construyan, pero posibilitando por supuesto la

personalización de los estilos visuales específicos para cada departamento

(6)

Posibilita la interacción con aplicaciones Geremua2 (Weblogic 8)

Maximiza la usabilidad de la capa de presentación de las aplicaciones

Contempla el cumplimiento de normas de accesibilidad WCAG 2.0, nivel AA, sentando las bases para el cumplimiento de WAI-ARIA

Contempla la compatibilidad de las interfaces gráficas de las aplicaciones con los navegadores más usados del mercado (IExplorer, Firefox, Chrome, Opera, y Safari)

Alineado con el Libro de Estilos de la Dirección de Atención a la Ciudadanía (DAC) del Gobierno Vasco

Introducción

(7)

GEREMUA 2

Weblogic 8

t29a

UDA

Weblogic 11g

x21a

Presente

(8)

Introducción

Plugin UDA

Demo

Documentación

Índice

(9)

UDA

x38.jar

Plugins Kit

Desarrollo

Estándares

RIA

(10)

Arquitectura tecnológica basada en estándares

Librería de funciones comunes (x38): seguridad, validación, trazas...

Componentes RIA para la capa de presentación (patrones de usabilidad)

Generadores de código en local (plugin Eclipse IDE) – Asistentes para generación de proyectos

– Asistentes para generación de código (en base al modelo relacional) – Asistentes para generación de vista (interfaces de usuario)

Componentes de UDA

(11)

Plugin UDA

Demo

Documentación

(12)

Arquitectura tecnológica

Presentación

Control Vista

Servicios de Negocio

Acceso a datos

Spring JDBC JPA 2.0 Remoto

Spring Beans

Modelo

Spring MVC

(13)

Plugin UDA

Demo

Documentación

(14)

Librería de funciones comunes [x38]

x38.jar (x38ShLibClasses-x.x.jar):

– Se integra en las aplicaciones a nivel de EAR – Solventa requerimientos estructurales de Ejie

– Podrá evolucionar según se detecten nuevos requerimientos – Bajo acoplamiento con las aplicaciones desarrolladas con UDA

Funcionalidades incluidas:

– Seguridad (incluye adaptador XLNetS)

– Validación (facilita validación de campos en servidor) – Trazas (aplica formato estándar para Bitácora)

– Utilidades y complementos – …

(15)

Plugin UDA

Demo

Documentación

(16)

Patrones de Usabilidad (RIA)

Antecedente: “Diseño de aplicaciones web centrado en el usuario (RIA)”:

– Guía de buenas prácticas de diseño de aplicaciones web centrado en el usuario, estableciendo los procesos y tareas que deben ejecutarse – Conjunto de patrones de referencia que deben ser aplicados

(comportamientos, estilos visuales, etc.)

– Selección de la tecnología para implementar los patrones de referencia, definidos: jQuery

– Catálogo de componentes de presentación implementados – Contexto:

Servidor: Weblogic 8

Framework: Geremua2

Aplicación de referencia: t29a

http://www.euskadi.ejiedes.net/t29aPilotoPatronesWar/

(17)

UDA ofrece un conjunto de componentes desarrollados que implementan patrones de comportamiento funcional comúnmente usados en las

aplicaciones web:

– Definidos a partir del estudio de usabilidad realizado anteriormente con aplicaciones departamentales

– Primando la usabilidad y el mejorando la experiencia del usuario – Cumpliendo accesibilidad o bien favoreciendo su cumplimiento

mediante alternativas

– Basados en tecnologías JavaScript, AJAX y CSS

Facilita, mejora y normaliza el diseño funcional de la interfaz gráfica de las aplicaciones

(18)

Introducción

Plugin UDA

Demo

Documentación

Índice

(19)

Los patrones implementados actualmente son los siguientes:

– Feedback – Mensaje – Diálogo – Idioma – Menú

– Migas de pan – Combo

– Autocomplete

– Fecha – Hora

– Botonera – Tabla

– Mantenimiento – Pestañas

– Tooltip – Upload

(20)

Patrones de Usabilidad (RIA)

Descripción:

– Canal informativo por el que se comunica al usuario los posibles errores o problemas acaecidos, los resultados de su interacción con los elementos de la aplicación y las posibles medidas a tomar para solucionar ciertas

inconsistencias

Casos de uso:

– Cuando el usuario tenga una necesidad de información, ya sea por cambios en el sistema, ejecución de procesos, realización de tareas o confirmación de

acciones. Los tipos básicos de feedback tratados son los siguientes:

Mensajes de sistema o informativos

Mensajes de confirmación

Mensajes de error y aviso

Feedback de formularios y edición

Estado de un proceso

Mensajes previos / previsualización

Feedback

(21)

Características destacables:

– Especificación de iconos:

Tipos base (alert, ok, error)

Personalizado – Animación:

Efecto de desaparición

Destrucción

Ubicación de la página al inicio

Link de cierre manual

Feedback

(22)

Patrones de Usabilidad (RIA)

Descripción:

– Tiene como objetivo mostrar al usuario de forma homogénea, clara y llamativa, los posibles mensajes que pueden desencadenar las acciones en la aplicación.

Estos mensajes predefinidos pueden ser de diferente tipología: error, confirmación, aviso o alerta

Casos de uso:

– En los casos en los que se tenga la necesidad de informar a los usuarios sobre mensajes que requieran de su plena atención o interacción (ventana modal)

– En los casos en los que no sea tan crítica la noción de los usuarios sobre una notificación específica, bastara con presentar los mensajes mediante el sistema de notificación de la propia pantalla (componente Feedback)

Mensaje

(23)

– Configuración de los eventos del componente – Definición del texto presentado en el mensaje

– Especificación del literal utilizado en el titulo del mensaje

– El mensaje de tipo “alert” sustituye a la función “alert()” de JavaScript

Mensaje

(24)

Patrones de Usabilidad (RIA)

Descripción:

– Permite lanzar un subproceso o un mensaje de confirmación dentro de un proceso principal sin salirse de este. Es una evolución del patrón mensaje.

Casos de uso:

– Su uso está indicado en situaciones en las que se precise la ejecución de un proceso secundario frente a un proceso principal

Diálogo

(25)

– Carga del contenido:

DIV

TEXT

AJAX

– Configuración del tamaño, posición y funcionamiento:

El componente permite la definición de su tamaño, su posición inicial en la pantalla, su comportamiento dentro de la pantalla (movible, agrandable,…) y algunas otras funciones

Diálogo

(26)

Patrones de Usabilidad (RIA)

Descripción:

– El componente de idioma está diseñado para permitir al usuario elegir de forma intuitiva el idioma en el que se le presenta la aplicación

Casos de uso:

– Situaciones en las que se disponga de varias versiones idiomáticas del sitio Web y se desee que el usuario pueda cambiar el idioma durante su interacción con la aplicación

Idioma

(27)

– No hay datos reseñables

Idioma

(28)

Patrones de Usabilidad (RIA)

Descripción:

– Menú de la aplicación mantenido a lo largo de todas las páginas de forma consistente que muestra entradas directas a secciones clave de la aplicación

Casos de uso:

– Cuando exista un sitio web estructurado jerárquicamente y relativamente amplio

– Cuando se desee facilitar y agilizar la navegación y dar contexto al usuario

Menú

(29)

– Tres tipos de menús:

Menú horizontal

Menú vertical

Menú mixto

– Configuración de los literales del menú integrados con el sistema de internacionalización de UDA

– Posibilidad de integrar submenús compuestos

Menú

(30)

Patrones de Usabilidad (RIA)

Descripción:

– Muestra a los usuarios los pasos de navegación seguidos durante su interacción con la aplicación y les facilita enlaces para volver a páginas precedentes o la página de inicio

Casos de uso:

– Cuando se desea mostrar al usuario la ruta de navegación que ha seguido, en qué página se encuentra y permitirle volver fácilmente a niveles superiores

Migas de pan

(31)

– Literales de las migas asociados al sistema de internacionalización – Posibilidad de crear migas desplegables con varios niveles

Migas de pan

(32)

Patrones de Usabilidad (RIA)

Descripción:

– Permite al usuario recuperar un elemento de una gran lista de elementos o de varias listas dependientes de forma sencilla y ocupando poco espacio en la interfaz

Casos de uso:

– Cuando la entrada de datos dependa de una selección de información previa sobre un conjunto pequeño de elementos (tamaño máximo 20).

El ejemplo más común es la selección de provincia y municipio.

Combo

(33)

– Recuperación de datos:

Local

Remoto

– Combos enlazados o dependientes:

Es posible el encadenado de dos o más combos. De tal manera que, los valores que se cargarán en uno dependan directamente del valor seleccionado en el otro.

– Posibilidad de combos con imágenes – Combos agrupados:

El componente posibilita, dentro del propio combo, la presentación agrupada de elementos bajo una misma denominación o categoría

Combo

(34)

Patrones de Usabilidad (RIA)

Este nuevo formato, diferente al tradicional, facilita la asociación y presentación de conjuntos de datos, sin la obligatoriedad de utilizar varios combos enlazados

Combo

(35)

Descripción:

– En cuanto el usuario comienza a escribir una búsqueda se le sugieren

búsquedas relacionadas con lo que ha escrito que pueden ser de su interés

Casos de uso:

– Cuando se desea mejorar la búsqueda ofreciendo sugerencias a los usuarios – Cuando la entrada de datos dependa de una selección de información previa

sobre un conjunto amplio de elementos sobre los que se realiza una búsqueda

Autocomplete

(36)

Patrones de Usabilidad (RIA)

– Recuperación de datos:

Local

Remoto

– Búsqueda por:

Empieza por

Contiene (defecto)

Autocomplete

(37)

Descripción:

– Permite al usuario introducir y seleccionar una fecha, tanto de forma manual como visual, moviéndose fácilmente por días, meses y años. Además, para minimizar las posibilidades de introducir una fecha incorrecta, ofrece al usuario ayudas y sugerencias de formato.

Casos de uso:

– Cuando el usuario tenga que introducir una fecha y se quiera ofrecer flexibilidad para escribirla manualmente o seleccionándola de un calendario

Fecha

(38)

Patrones de Usabilidad (RIA)

– Limitación de rango:

Según las necesidades de uso, el componente es configurable para acotar las fechas límites de selección

– Intervalos de fechas:

El componente fecha proporciona la posibilidad de asociar varios componentes fecha para selección de intervalos. Una vez seleccionada por ejemplo la fecha de inicio (from) la fecha de fin (to) no podría ser anterior a esta y viceversa.

Fecha

(39)

– Fechas múltiples:

El componente permite la selección de varias fechas sobre el mismo

componente fecha. Este tipo de uso es apropiado cuando los usuarios deban seleccionar más de una fecha a la vez (por ejemplo: selección de días de vacaciones).

Una vez realizada la selección, las fechas escogidas aparecerán separadas por comas en el campo asociado.

Fecha

(40)

Patrones de Usabilidad (RIA)

– Fecha y hora:

El componente permite la selección una fecha indicando también la hora. Este tipo de uso es apropiado cuando los usuarios deban indicar una hora y fecha concreta (por ejemplo: día y hora de una cita médica).

Fecha

(41)

Descripción:

– El usuario puede introducir y seleccionar una hora tanto de forma manual como visual, moviéndose fácilmente por las horas y los minutos, recibiendo ayudas y sugerencias para minimizar las posibilidades de introducir una hora incorrecta

Casos de uso:

– Cuando el usuario tenga que introducir una hora y se quiera ofrecer flexibilidad

Hora

(42)

Patrones de Usabilidad (RIA)

– Definir el formato en el que se presentara la hora (internacionalización) – Posibilita la definición de una hora por defecto

– Permite acotar los rangos de las horas seleccionadas

– Posibilita de especificar las funciones lanzadas para cada evento

Hora

(43)

Descripción:

– Se les presenta a los usuarios una barra de botones con diversas

funcionalidades relacionadas con elementos de la página. Gracias a este componente se presentan, ordenan y agrupan las distintas funcionalidades gestionadas por las aplicaciones.

Casos de uso:

– En los casos en los que sea preciso presentar, ordenar y agrupar múltiples funciones sobre una misma página o componente

Botonera

(44)

Patrones de Usabilidad (RIA)

– Se posibilita la presentación de los botones en solitario o agrupados en desplegables

Botonera

(45)

Descripción:

– Se les presenta a los usuarios los datos tabulados para que la información se visualice de manera ágil y rápida, facilitando así su comprensión y manejo

Casos de uso:

– Cuando se tenga que presentar a los usuarios filas de datos y se desee

Tabla

(46)

Patrones de Usabilidad (RIA)

– Ordenación y configuración de las columnas que presentan los datos:

Orden

Tipo de dato

Tamaño

Literal de cabecera

…

– Definición de filas visualizadas por página – Configuración de los eventos de la tabla

Tabla

(47)

Descripción:

– El componente implementa un nuevo patrón definido para facilitar la lógica necesaria en las acciones básicas, denominadas CRUD (create, read, update y delete), sobre una tabla

Casos de uso:

– Cuando se realicen mantenimientos de tablas haciendo uso de las

Mantenimiento

(48)

Patrones de Usabilidad (RIA)

– Diferentes tipos de mantenimientos:

Selección simple

Multiselección

Edición en línea

Maestro – Detalle

– Adición de botones en la botonera asociada al mantenimiento

– Permite la especificación de los tipos y los tamaños de las columnas – Personalización del formulario utilizado para cargar los nuevos datos – Configuración de los eventos del mantenimiento

Mantenimiento

(49)

Descripción:

– Permiten dar acceso de forma compacta a grupos de contenidos mutuamente excluyentes pudiendo ser integradas en zonas muy reducidas de la interfaz

Casos de uso:

Pestañas

(50)

Patrones de Usabilidad (RIA)

– Carga del contenido de pestañas mediante llamadas AJAX

– Cacheo de contenido de las pestañas (posible recarga del contenido) – Posibilidad de habilitar y deshabilitar pestañas

– Pestañas de varios niveles (recomendado el uso máximo de 2 niveles) – Posibilita de especificar las funciones lanzadas para cada evento

Pestañas

(51)

Descripción:

– Todas las aplicaciones deben tener un sistema de ayuda aunque algunas necesiten uno más completo y preciso que otras. El objetivo del sistema de ayuda debe ser, por un lado ayudar al impaciente y/o al usuario ocasional tan extensamente como sea posible y, por otro,

ayudar a los usuarios expertos.

Casos de uso:

– Cuando se desea añadir una ayuda/descripción extra sobre algún

Tooltip

(52)

Patrones de Usabilidad (RIA)

– No hay datos reseñables

Tooltip

(53)

Descripción:

– Permite a los usuarios realizar subidas de archivos al servidor mediante la aplicación.

Casos de uso:

– Cuando sea necesario realizar subidas de archivos mediante la aplicación.

Upload

(54)

Patrones de Usabilidad (RIA)

– Permite seleccionar varios archivos y encolarlos a una lista de subida.

– Permite realizar la subida de los ficheros encolados de manera individual o conjunta.

– Muestra información relacionada con los ficheros seleccionados (tipo de fichero, tamaño…).

– Presenta una barra de progreso de la operación de subida de los archivos.

– Posibilita la visualización y borrado de los ficheros subidos.

Upload

(55)

Plugin UDA

Demo

Documentación

(56)

Plugin UDA

UDA incluye una serie de plugins de Eclipse para facilitar la creación de aplicaciones:

– Crear una nueva aplicación (estructura de proyectos) – Generar código fuente aplicación (operaciones CRUD)

– Definir un mantenimiento básico (sobre una entidad de BD) – Añadir proyectos a la aplicación:

Proyectos de aplicaciones web (WAR)

Proyectos de negocio (EJB)

– Generación de interfaces de comunicación con otras aplicaciones:

Cliente

Servidor

Snippets para facilitar la configuración de patrones de diseño (RIA)

(57)

Plugin UDA

Demo

Documentación

(58)

Introducción

Plugin UDA

Demo

Documentación

Índice

(59)

Kit de desarrollo de UDA contiene:

– Eclipse Helios OEPE

– Apache Maven (resolución de dependencias / librerías) – Plugin UDA:

Plugin Eclipse

Plantillas (templates)

– Reglas de validación de la calidad del código:

PMD / Checkstyle / FindBugs

Requiere:

– Servidor de aplicaciones Weblogic 11g (v.10.3.5) – Java 6

– Acceso a Base de Datos Oracle 10g Enterprise Edition – Repositorio SVN

(60)

Introducción

Plugin UDA

Demo

Documentación

Índice

(61)

3 FN

(62)

Análisis y Desarrollo de aplicaciones con UDA

Realizar el análisis de la aplicación

Diseño del modelo de datos (entidad-relación en 3ª Forma Normal)

Desarrollo inicial con herramientas de UDA:

– Generación del esqueleto de la aplicación mediante las herramientas de UDA

Estructura de proyectos

Código fuente de la aplicación (operaciones CRUD)

Mantenimientos simple sobre entidades (parte visual)

Aplicación Java básica desplegable

Implementar funcionalidades que quedan fuera del ámbito de UDA:

– Análisis del resto de las necesidades de negocio

– Implementación de las funcionalidades del negocio necesarias

Obtención de aplicación final

(63)

Análisis y Uso de los componentes de presentación (RIA):

– Conocer y analizar el comportamiento definido por los patrones, así como la funcionalidad de los componentes implementados

– Cotejar los patrones con los requisitos funcionales del negocio, analizando cada página de nuestra aplicación e identificando el patrón/es a utilizar

– Enfocar el análisis y el diseño de la interfaz gráfica, intentando aprovechar al máximo las prestaciones ofrecidas por los

componentes

– Identificar la necesidad o conveniencia de construir nuevos

componentes para nuevos patrones de interacción, que no se hayan cubierto hasta ahora

(64)

Introducción

Plugin UDA

Demo

Documentación

Índice

(65)

Open Source

Accesibilidad hacia WAI-ARIA y WCAG 2.0

Desarrollo y soporte multinavegador (IExplorer 9, Firefox, Chrome…)

Incorporar componentes de nuevos patrones de interacción que se identifiquen y se aporten desde las aplicaciones departamentales

Incluir necesidades estructurales que vayan surgiendo

(66)

Introducción

Plugin UDA

Demo

Documentación

Índice

(67)

UDA en Google Code: http://code.google.com/p/uda/

Los documentos de UDA se dividen en 3 áreas:

– Arquitectura

Seleccion_Tecnologias.pdf Selección de tecnologías

Arquitectura_Conceptual.pdf Arquitectura conceptual

Documento Ámbito

(68)

– Guías de uso

Documentación

Plugin_UDA-Guia_de_uso_del_plugin.pdf Guía de uso del plugin UDA

Componentes RUP - Fecha.pdf

Componentes RUP - Autocomplete.pdf Patrones

Herramientas_para_contenido_estatico.pdf Guía de uso de

herramientas para contenido estático

Guia_Desarrollo.pdf Guía de desarrollo

Componentes RUP - Botonera.pdf Componentes RUP - Combo.pdf Componentes RUP - Dialogos.pdf

Componentes RUP - Feedback.pdf

Instalacion_PC_local_WLS11_proveedores.pdf Instalación de entorno

(69)

Componentes RUP - Hora.pdf Componentes RUP - Idioma.pdf

Componentes RUP - Upload.pdf

Componentes RUP - Estructura Base y Extensibilidad.pdf Estructura de los Plugins

Componentes RUP - Migas.pdf Componentes RUP - Menu.pdf Componentes RUP - Mensajes.pdf

Componentes RUP - Pestañas.pdf Componentes RUP - Tabla.pdf Componentes RUP - Tooltip.pdf

Componentes RUP - Mantenimiento.pdf Documento

Ámbito

(70)

– Plugin UDA

Documentación

Plugin_UDA-Guia_de_uso_de_plantillas.pdf Plugin_UDA-Guia_de_desarrollo.pdf

Extensión del plugin UDA

(71)

U.D.A. Utilidades de Desarrollo de Aplicaciones

Fundamento: Proporcionar una estructura y código base asociado al modelo de negocio de forma automática que agilice el inicio del desarrollo en la infraestructura de EJIE.

Objetivo: Facilitar y determinar un conjunto de librerías y clases de base autogeneradas a partir del modelo de base de datos cumpliendo las diferentes normativas de desarrollo en EJIE

Resultado: Una vez ejecutados los asistentes de generación de código los desarrolladores dispondrán de un esqueleto inicial de la aplicación compuesto por un conjunto de clases base (capa de servicio, dao…), librerías y componentes.

Nota: El código generado es propiedad de la propia

aplicación, pudiendo ser cambiado, modificado o alterado en base a las necesidades del negocio de la propia aplicación.

Utilidades de Desarrollo de Aplicaciones (funcional)

Índice

Introducción

Introducción

Presente

Índice

Componentes de UDA

Arquitectura tecnológica

Librería de funciones comunes [x38]

Patrones de Usabilidad (RIA)

Índice

Patrones de Usabilidad (RIA)

Feedback

Feedback

Patrones de Usabilidad (RIA)

Mensaje

Mensaje

Patrones de Usabilidad (RIA)

Diálogo

Diálogo

Patrones de Usabilidad (RIA)

Idioma

Idioma

Patrones de Usabilidad (RIA)

Menú

Menú

Patrones de Usabilidad (RIA)

Migas de pan

Migas de pan

Patrones de Usabilidad (RIA)

Combo

Combo

Patrones de Usabilidad (RIA)

Combo

Autocomplete

Patrones de Usabilidad (RIA)

Autocomplete

Fecha

Patrones de Usabilidad (RIA)

Fecha

Fecha

Patrones de Usabilidad (RIA)

Fecha

Hora

Patrones de Usabilidad (RIA)

Hora

Botonera

Patrones de Usabilidad (RIA)

Botonera

Tabla

Patrones de Usabilidad (RIA)

Tabla

Mantenimiento

Patrones de Usabilidad (RIA)

Mantenimiento

Pestañas

Patrones de Usabilidad (RIA)

Pestañas

Tooltip

Patrones de Usabilidad (RIA)

Tooltip

Upload

Patrones de Usabilidad (RIA)

Upload

Plugin UDA

Índice

Índice

3 FN

Análisis y Desarrollo de aplicaciones con UDA

Índice

Índice

Documentación

Documentación

U.D.A. Utilidades de Desarrollo de Aplicaciones

ESKAERAK ETA GALDERAK

RUEGOS Y PREGUNTAS

¡¡ MUCHAS GRACIAS !!