Utilidades de Desarrollo de Aplicaciones (funcional)

Transcripción

1 Utilidades de Desarrollo de Aplicaciones (funcional) Consultoría de Áreas de Conocimiento Diciembre 2011

2 Índice 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 2

3 Introducción 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 aplicaciones de Internet enriquecidas (RIA). 3

4 Introducción 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 4

5 Introducción 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 de GV 5

6 Introducción 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 6

7 Introducción Pasado Presente GEREMUA 2 UDA Weblogic 8 Weblogic 11g t29a x21a 7

9 Componentes de UDA Estándares Kit Desarrollo x38.jar UDA Plugins RIA 9

10 Componentes de UDA 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) Kit de desarrollo 10

12 Arquitectura tecnológica Presentación Vista Control Spring MVC Remoto Servicios de Negocio Modelo Spring Beans Acceso a datos Spring JDBC JPA

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 14

16 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 16

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 17

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 19

20 Feedback 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 20

21 Características destacables: Especificación de iconos: Tipos base (alert, ok, error) Personalizado Feedback Animación: Efecto de desaparición Destrucción Ubicación de la página al inicio Link de cierre manual 21

22 Mensaje 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) 22

23 Mensaje Características destacables: 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 23

24 Diálogo 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 24

25 Características destacables: Carga del contenido: DIV TEXT AJAX Diálogo 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 25

26 Idioma 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 26

27 Características destacables: No hay datos reseñables Idioma 27

28 Menú 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 28

29 Características destacables: Tres tipos de menús: Menú horizontal Menú vertical Menú mixto Menú Configuración de los literales del menú integrados con el sistema de internacionalización de UDA Posibilidad de integrar submenús compuestos 29

30 Migas de pan 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 30

31 Migas de pan Características destacables: Literales de las migas asociados al sistema de internacionalización Posibilidad de crear migas desplegables con varios niveles 31

32 Combo 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. 32

33 Características destacables: 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: Combo El componente posibilita, dentro del propio combo, la presentación agrupada de elementos bajo una misma denominación o categoría 33

34 Combo 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 34

35 Autocomplete 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 35

36 Características destacables: Recuperación de datos: Local Remoto Búsqueda por: Empieza por Contiene (defecto) Autocomplete 36

37 Fecha 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 Cuando el usuario tenga que introducir un intervalo y se quiera ofrecer flexibilidad para escribirla manualmente o seleccionándola de un calendario 37

38 Fecha Características destacables: 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. 38

39 Fecha 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. 39

40 Fecha 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). 40

41 Hora 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 para escribirla manualmente o seleccionándola de un calendario 41

42 Hora Características destacables: 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 42

43 Botonera 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 Cuando se requiera agrupar las funciones (botones) por categorías mediante un desplegable 43

44 Características destacables: Botonera Se posibilita la presentación de los botones en solitario o agrupados en desplegables 44

45 Tabla 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 facilitar la búsqueda de datos 45

46 Características destacables: Tabla 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 46

47 Mantenimiento 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 especificaciones establecidas en la guía de desarrollo de UDA 47

48 Características destacables: Diferentes tipos de mantenimientos: Selección simple Multiselección Edición en línea Maestro Detalle Mantenimiento 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 48

49 Pestañas 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: Cuando se pretende separar grupos de contenidos mutuamente excluyentes 49

50 Pestañas Características destacables: 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 50

51 Tooltip 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 componente de tal manera que se muestre al interaccionar con él 51

52 Características destacables: No hay datos reseñables Tooltip 52

53 Upload 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. 53

54 Características destacables: Upload 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. 54

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) 56

59 Kit de desarrollo 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 ) Java 6 Acceso a Base de Datos Oracle 10g Enterprise Edition Repositorio SVN 59

61 Análisis y Desarrollo de aplicaciones con UDA 3 FN 61

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 62

63 Análisis y Desarrollo de aplicaciones con UDA 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 63

65 Evolución de UDA 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 65

67 Documentación UDA en Google Code: Los documentos de UDA se dividen en 3 áreas: Arquitectura Ámbito Arquitectura conceptual Selección de tecnologías Documento Arquitectura_Conceptual.pdf Seleccion_Tecnologias.pdf 67

68 Documentación Guías de uso Ámbito Instalación de entorno Guía de desarrollo Guía de uso de herramientas para contenido estático Guía de uso del plugin UDA Patrones Documento Instalacion_PC_local_WLS11_proveedores.pdf Guia_Desarrollo.pdf Herramientas_para_contenido_estatico.pdf Plugin_UDA-Guia_de_uso_del_plugin.pdf Componentes RUP - Autocomplete.pdf Componentes RUP - Botonera.pdf Componentes RUP - Combo.pdf Componentes RUP - Dialogos.pdf Componentes RUP - Fecha.pdf Componentes RUP - Feedback.pdf 68

69 Documentación Ámbito Estructura de los Plugins Documento Componentes RUP - Hora.pdf Componentes RUP - Idioma.pdf Componentes RUP - Mantenimiento.pdf Componentes RUP - Mensajes.pdf Componentes RUP - Menu.pdf Componentes RUP - Migas.pdf Componentes RUP - Pestañas.pdf Componentes RUP - Tabla.pdf Componentes RUP - Tooltip.pdf Componentes RUP - Upload.pdf Componentes RUP - Estructura Base y Extensibilidad.pdf 69

70 Documentación Plugin UDA Ámbito Extensión del plugin UDA Documento Plugin_UDA-Guia_de_desarrollo.pdf Plugin_UDA-Guia_de_uso_de_plantillas.pdf 70

71 Conclusiones 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. 71

72 ESKAERAK ETA GALDERAK RUEGOS Y PREGUNTAS

73 MILA ESKER!! MUCHAS GRACIAS!!