Desarrollo de Interfaces de Usuario con MOSKitt UIM

1. Desarrollo de Interfaces de
Usuario con MOSKitt UIM
Joan Fons Marc Gil
Universitat Politècnica Prodevelop
de València
dimarts 1 de desembre de 2009

2. Índice
Contexto
¿Qué es MOSKitt UIM?
MOSKitt UIM 1.0
Próximas Características
Demo
dimarts 1 de desembre de 2009

3. Contexto
dimarts 1 de desembre de 2009

4. Contexto
En la CIT se desarrollan diferentes tipos de
sistemas, con diferentes enfoques, plataformas
de desarrollo, recursos software, etc...
Problema en disponer de un soporte de
herramientas integral
Dificultad para gestionar dependencias entre
proyectos
dimarts 1 de desembre de 2009

5. Contexto
La CIT utiliza una adaptación de Métrica III,
gvMétrica, para el desarrollo de sus proyectos
Uso extensivo de Modelos, tanto como
documentación y como activos en el desarrollo
Estos modelos se usan como documentación de
intercambio entre los diferentes roles
En desarrollo, los programadores usan frameworks
propios (ej: gvHidra para interfaz web) para cumplir
y garantizar los requisitos de las aplicaciones CIT
dimarts 1 de desembre de 2009

6. Contexto
El principal problema es que no existe una
herramienta (específica y unificada) que dé
soporte completo a gvMétrica
PowerDesigner, Microsoft Word, papel ...
Las relaciones y dependencias entre diagramas,
documentos, recursos se gestionan manualmente
Dificultad de adaptarse a nuevas necesidades
dimarts 1 de desembre de 2009

7. Contexto
Se necesita una herramienta que dé soporte estas
necesidades
Sea en el ámbito del software libre
MOSKitt
dimarts 1 de desembre de 2009

8. Contexto
Esta herramienta debe dar soporte a la definición y
desarrollo de:
Procesos de Negocio (BPMN)
Gestión de Requisitos (Diag. Casos Uso,
Escenarios, ...)
Estructuras de Datos (Diag. Clases UML, ER, ...)
Comportamiento (Diag. Secuencia UML, Diag.
Actividad UML, ...)
Interfaz de Usuario
dimarts 1 de desembre de 2009
?

9. Contexto
No hay estándares que formalicen el
desarrollo de interfaces de usuario:
!!
lenguaje de especificación
soportado por herramientas
ampliamente aceptado
flexible y adaptable a necesidades
dimarts 1 de desembre de 2009

10. Contexto
... y además, se require una solución en el
ámbito del software libre
dimarts 1 de desembre de 2009

11. Contexto
El proyecto MOSKitt UIM (User Interface Modelling)
surge con el objetivo de proporcionar soporte
metodológico (con herramienta) al desarrollo
de Interfaces de Usuario
Pueda aplicarse a la CIT
En el ámbito de software libre
Solución que se integra en MOSKitt con el resto de
herramientas y editores
Soporte completo al proceso de desarrollo
dimarts 1 de desembre de 2009

12. Contexto
Objetivos
Soporte a Documentación de interfaz de usuario
Describir los requisitos de interfaz y obtener
informes a partir de éstos (de análisis, de diseño,
de implementación, ...)
Usar y construir repositorios de proyectos
Gestionar las relaciones entre los diferentes
diagramas/modelos/herramientas que puedan ser
de interés para la interfaz de usuario (trazabilidad)
dimarts 1 de desembre de 2009

13. Contexto
Objetivos
Mecanismo de intercambio de
información, de manera colaborativa
Entre los diferentes roles en desarrollo
(analistas, diseñadores interfaz,
implementadores, ...)
Entre las fases del proyecto (definición de
procesos de negocio, análisis, diseño,
codificación, testing, ...)
dimarts 1 de desembre de 2009

14. Contexto
Objetivos
Adaptable al proceso de desarrollo
Pueda ser usado fácilmente en cualquier proceso
o enfoque de desarrollo basado en modelos
Sistemas orientados a procesos, orientados a
datos, orientados a interfaz, etc.
Proporcione una guía metodológica flexible para
desarrollar según los parámetros de la CIT
dimarts 1 de desembre de 2009

15. Contexto
Objetivos
Facilite el desarrollo mediante herramientas y
editores editores que permitan:
aprovechar la información de otros modelos y
diagramas que se usen en el desarrollo
validar y completar las especificaciones
obtener prototipos (semi)automáticamente
adaptarse a las necesidades concretas del proyecto
(expresividad, proceso, recurso, etc.)
dimarts 1 de desembre de 2009

16. ¿Qué es MOSKitt
UIM?
dimarts 1 de desembre de 2009

17. ¿Qué es MOSKitt UIM?
Un módulo (conjunto de plugins) de MOSKitt
Responsable de gestionar todo lo referente a la
interfaz de usuario
recursos, editores, herramientas, etc.
independiente de otros editores/herramientas
MOSKitt
separación de conceptos
relacionado con otros editores/herramientas MOSKitt
integración de soluciones
dimarts 1 de desembre de 2009

18. ¿Qué es MOSKitt UIM?
Entorno MDD (Model Driven Development) para el
desarrollo de interfaces de usuario con MOSKitt
Lenguaje (MetaModelo) para especificar la interfaz
de usuario
Editores y Diagramas para especificar las
diferentes partes del lenguaje
Transformadores entre modelos, prototipadores y
generadores de código
dimarts 1 de desembre de 2009

19. ¿Qué es MOSKitt UIM?
La principal aportación de MOSKitt UIM es un
lenguaje gráfico para la especificación de la
interfaz de usuario
Basado en la definición de un conjunto de
unidades de interacción (representan
pantallas) modulares
Permite especificar comportamiento de interfaz*
Mantiene relaciones con otros diagramas
* Separación de comportamiento: lógica negocio vs. interfaz de usuario
dimarts 1 de desembre de 2009

20. ¿Qué es MOSKitt UIM?
El lenguaje UIM
Usa el concepto de Usuario (Rol) y de Vista
MOSKitt UIM dispone de un editor/diagrama para
especificar los usuarios y las
vistas que podrán acceder a la interfaz de usuario
Editor de Vistas
Punto de inicio de la especificación de la interfaz
de usuario
dimarts 1 de desembre de 2009

21. ¿Qué es MOSKitt UIM?
El lenguaje UIM
Usuarios y Vistas
dimarts 1 de desembre de 2009

22. ¿Qué es MOSKitt UIM?
El lenguaje UIM
Se basa en el concepto de Unidad de Interacción
Una UI representa a una pantalla
MOSKitt UIM proporciona editores/diagramas para
especificar “pantallas”
Se basa en la idea de catalogar las pantallas en base
al (tipo de) contenido que ofrece
dimarts 1 de desembre de 2009

23. ¿Qué es MOSKitt UIM?
El lenguaje UIM. Ejemplo
Contenidos: Visualización de Datos, Filtro de información, menú de navegación,
enlaces a otras pantallas, ejecución de operaciones
dimarts 1 de desembre de 2009

24. ¿Qué es MOSKitt UIM?
El lenguaje UIM. Ejemplo
Contenidos: Introducción de datos para la búsqueda en un catálogo bibliográfico,
menú de navegación (anidados)
dimarts 1 de desembre de 2009

25. ¿Qué es MOSKitt UIM?
El lenguaje UIM
Los tipos de pantallas (UIs) predefinidas en UIM
son:
de Información (listados), de Información Editable
(listados editables)
de Operación (formularios)
de Navegación (menús)
Composición de las anteriores (patrones)
Los Patrones permiten definir nuevas UIs
Núcleo de MOSKitt UIM
dimarts 1 de desembre de 2009

26. ¿Qué es MOSKitt UIM?
El lenguaje UIM
Composición de piezas UIM
Piezas básicas de UIM
dimarts 1 de desembre de 2009

27. ¿Qué es MOSKitt UIM?
De esta manera se constituye como un entorno
MDD flexible y adaptable:
Posibilidad de usar un diagrama/editor adecuado
para cada necesidad (independiente)
Relacionar, transformar y/o sincronizar con otros
diagramas* en cualquier momento según el
proceso de desarrollo seguido
Ej: UIM -> Clases, Clases -> UIM, BPMN -> UIM
* Algunas de estas características están pendientes de implementación
dimarts 1 de desembre de 2009

28. ¿Qué es MOSKitt UIM?
Editores de UIs
Configurador de Patrones
Comportamiento Interfaz
... Editor Visual
Prototipador gvHidra
Generador Java/SWT
...
Transformador Repositorio Código
Modelo a Modelo de Modelos Fuente
UIM->UML
Transformador
UML->UIM
BPMN->UIM MetaModelos: Modelo a Texto
UIM->BPMN UIM, (UML, BPMN, ...)
...
dimarts 1 de desembre de 2009

29. MOSKitt UIM 1.0
dimarts 1 de desembre de 2009

30. MOSKitt UIM 1.0
MOSKitt 1.0 es la primera versión pública del
proyecto
Esta versión incluye también la primera versión
pública de UIM (1.0)
dimarts 1 de desembre de 2009

31. MOSKitt UIM 1.0
Instalación y Configuración
En la versión actual, para tener MOSKitt UIM 1.0,
basta con instalar MOSKitt 1.0
www.moskitt.org/ult_version_estable/
MOSKitt 1.1.0 RC1 (MOSKittDay’09)
dimarts 1 de desembre de 2009

32. MOSKitt UIM 1.0
El Entorno
Comparte la misma interfaz que MOSKitt:
Perspectiva MOSKitt (Explorador de
Recursos y de Modelos MOSKitt)
Editores de Diagramas
Inspectores de Propiedades
Barras de Herramientas
Paleta de elementos del Lenguaje
dimarts 1 de desembre de 2009

33. MOSKitt UIM 1.0
Editores/Diagramas Disponibles
Herramientas Disponibles
Validación del Modelo
Trabajo con patrones de interfaz
Prototipador sobre gvHidra
Integración con el módulo Dashboard
dimarts 1 de desembre de 2009

34. MOSKitt UIM 1.0
Editor de Usuarios y Vistas
dimarts 1 de desembre de 2009

35. MOSKitt UIM 1.0
Editor del contenido de una vista (UIs)
dimarts 1 de desembre de 2009

36. MOSKitt UIM 1.0
Editor de una Unidad de Interacción (UI de Información)
dimarts 1 de desembre de 2009

37. MOSKitt UIM 1.0
Validación del Modelo
Obtener especificaciones correctas
Ayudar a detectar dónde se han cometido
errores/incongruencias
Comprobar y asegurar las correspondencias con
otros modelos
dimarts 1 de desembre de 2009

38. MOSKitt UIM 1.0
Validación de un Diagrama
dimarts 1 de desembre de 2009

39. MOSKitt UIM 1.0
Proporciona herramientas para dar soporte al
trabajo con patrones de interfaz, para
adecuarse a necesidades particulares de las
organizaciones
Un editor/configurador de patrones
Un wizard para ayudar a aplicar un patrón
Un conversor entre UIs (wizard migrador entre
Patrones)
dimarts 1 de desembre de 2009

40. MOSKitt UIM 1.0
Conversión entre UIs
Definición de un
nuevo patrón
dimarts 1 de desembre de 2009

41. Próximas
Características
dimarts 1 de desembre de 2009

42. Próximas Características
En la actualidad, se está trabajando en MOSKitt UIM:
mejorar el desarrollo existente
incorporación de novedades
nuevas herramientas: editores y diagramas
nuevas funcionalidades (M2M y M2T)
dimarts 1 de desembre de 2009

43. Próximas Características
Nuevas Herramientas
Editor WYSIWYG (sketcher) y
previsualizador para el lenguaje UIM
Simplificar la tarea de definir la interfaz de usuario
Permitir arrastrar elementos
visuales (botones, listas
desplegables, tablas de
datos, etc.) en vez de las
primitivas conceptuales
(operación, conjunto de
visualización, etc.)
dimarts 1 de desembre de 2009

44. Próximas Características
Nuevas Funcionalidades
Transformaciones M2M
Generación a partir de otros
modelos (BPMN, UML Clases, UML
Actividad, ...)
Generación de otros modelos (BPMN,
UML Clases, UML Actividad)
Sincronización de modelos
dimarts 1 de desembre de 2009

45. Próximas Características
Nuevas Funcionalidades
dimarts 1 de desembre de 2009

46. Próximas Características
Prototipación M2M
de BPMN a UIM
dimarts 1 de desembre de 2009

47. Demo
dimarts 1 de desembre de 2009