1. Taller:
Aplicación de DSDM con
MOSKitt
Begoña Bonet Pérez de León
(bonet_beg@gva.es)
1 Diciembre 2010

2. Taller: Objetivo
1) Practicar la cadena de modelos y
transformaciones propuesta por gvMétrica con
MOSKitt.

3. Pasos: Creación del D.Clases

4. Pasos: Creación del D. Clases
1) Crear un nuevo proyecto MOSKitt y llamarlo miniproyecto:
File/New/MOSKitt project...
2) Crear un nuevo diagrama de Clases:
● Sobre el proyecto miniproyecto, con el botón derecho, seleccionar en el menú
contextual:
New/MOSKitt UML Diagram
● Pulsar Next.
● Pulsar Next.
● Darle nombre al diagrama persona.uml_diagram
● Darle nombre al modelo: persona.uml
● Pulsar Finish.
3) Añadir la Clase persona (Class)
4) Añadir las propiedades de la clase persona (property).
5) Añadir el Enumerado Sexo (Enumeration)
6) Añadir los posibles valores del enumerado (Enumeration Literal).

5. Pasos: Creación del Sketcher

6. Pasos: Creación del Sketcher

7. Pasos: Creación del Sketcher
1) Crear un nuevo diagrama de Sketcher (Bocetos de Pantallas):
● Sobre el proyecto miniproyecto, con el botón derecho, seleccionar en el menú
contextual:
New/MOSKitt Sketcher Diagram
● Darle nombre al diagrama persona.sketcher_diagram
● Pulsar Next.
● Seleccionar la opción Iniciatize from template (para disponer de las plantillas de
la Guía de Estilo de la CIT).
● Abajo, en la lista de selección seleccionar el único elemento disponible por el
momento: Patrones de la CIT para gvHidra con Sketcher
(sketcher_gvhidra.sketcher_diagram).
● Pulsar Next.
● Pulsar Finish (así seleccionamos que se carguen las imágenes y las fuentes por
defecto definidas para las plantillas de la Guía de Estilo).
El resultado será un diagrama con una Ventana llamada CIT Menu Principal y se habrá
abierto una vista llamada MOSKitt Artifacts Library.

8. Pasos: Creación del Sketcher

9. Pasos: Crear Sketcher
2) Situarse sobre el canvas del diagrama inicial (allí donde no haya ninguna figura).
3) Pulsar botón derecho y seleccionar la opción Show Properties View.
4) Propiedades del Diagrama:
• Diagram Name: Personas (¡¡Eliminar nombre por defecto Aplicación gvHidra!!)
• Id: Personas (¡¡Eliminar nombre por defecto Aplicación gvHidra!!)
5) Situarse sobre la ventana CIT Menu Principal y dar el siguiente valor a sus
propiedades:
• Id: Menu Personas

10. Pasos: Creación del Sketcher
6) Situarse sobre la vista MOSKitt Artifacts Library.
7) Situarse sobre la carpeta CIT Sketch Pattern y desplegarla.
8) Seleccionar el patrón CIT 1CEI Registro (el segundo de la lista).
9) Arrastrar y Soltar sobre el Diagrama.

11. Pasos: Creación del Sketcher
10) Modificar las propiedades del Diagrama:
● Situarse sobre el canvas del diagrama inicial (allí donde no haya ninguna figura).
● Pulsar botón derecho y seleccionar la opción Show Properties View.
● Diagram Name: Personas (¡¡Eliminar nombre por defecto Aplicación gvHidra!!)
● Id: Personas (¡¡Eliminar nombre por defecto Aplicación gvHidra!!)
11) Situarse sobre la ventana CIT Menu Principal y dar el siguiente valor a sus
propiedades:
• Id: Menu Personas
12) Situarse sobre la ventana CIT 1CEI Registro y dar el siguiente valor a sus propiedades:
• Id: Mantenimiento Personas

12. Pasos: Creación del Sketcher
13) Sobre la ventana del Menú hacer doble click para abrir su diagrama asociado en un
ESTADO INICIAL.

13. Pasos: Creación del Sketcher
14) Sobre el Menú Módulos Principales (el primero de la izquierda) veremos que
tenemos 3 Menú Item de ejemplo.
15) Situarse sobre el primer Menú Item llamano Acción Ejemplo 1 y modificar sus
propiedades:
● Text: Mantenimiento Personas
● Target UI: Seleccionar Window Mantenimiento Personas desde la ventana que se
abre al pulsar el botón de selección a la derecha del todo de la propiedad.
16) Situarse sobre el Menú Item llamano Acción Ejemplo 2.
17) Pulsar botón derecho y del menú contextual seleccionar la opción Delete from
model.
18) Situarse sobre el Menú Item llamano Acción Ejemplo 3.
19) Pulsar botón derecho y del menú contextual seleccionar la opción Delete from
model.
20) Cerrar el diagrama correspondiente al Menú Personas (desde las pestañas de abajo).

14. Pasos: Creación del Sketcher

15. Pasos: Creación del Sketcher
21) Volver al diagrama Personas.
22) Hacer doble clikc sobre la ventana Mantenimiento Personas para abrir su diagrama
asociado.
23) Situarse sobre la pestaña correspondiente a la búsqueda y completarla hasta que
tenga el mismo aspecto que en la figura:

16. Pasos: Creación del Sketcher
24) Volver al diagrama Personas.
25) Hacer doble clikc sobre la ventana Mantenimiento Personas para abrir su diagrama
asociado.
26) Situarse sobre la pestaña correspondiente a la búsqueda y completarla hasta que
tenga el mismo aspecto que en la figura:

17. Pasos: Creación del Sketcher
27) Con botón derecho ¡¡sobre el canvas!! seleccionar en el menú contextual Load
Resource... para cargar el modelo UML.
28)En la ventana File Selection que se abre, navegar y seleccionar en el proyecto
minniproyecto el fichero persona.uml.
29) Enlazar cada TexBox con el atributo correspondiente de la clase persona. Para ello:
En la pestaña de propiedades de cada uno de los TextBox, pulsar el botón de
selección de la propiedad Data Model Element.
En la ventana Select the Element Model buscar la propiedad deseada.
Para que nos salgan datos de prueba rellenar la propiedad Sample Text.
30) Para cada elemento Label actualizar la propiedad Text con el nombre que queremos
que aparezca en la etiqueta.

18. Pasos: Transf. Sketcher-UIM
1)Desde el modelo persona.dashboard_sketcher pulsar botón derecho y seleccionar
en el menú contextual la opción MOSKitt Transformation → Sketcher to UIM.
2) Darle el nombre de persona al modelo uim de salida:
File name: persona
3) Pulsar Next.
4)Pulsar Next. (no hacer caso de los 3 warnings que aparecen)
5) Pulsar Finish si la transformación se ha realizado sin problemas.
6) Si entrarmos en persona.uim_diagram podremos ver algo como lo que aparece en
la figura (correspondiente a la ventana Mantenimiento de Personas).

19. Pasos: Transf. UIM-gvHidra
1) Sobre el proyecto miniproyecto pulsar botón derecho y en el menú contextual
seleccionar la opción New Folder.
2) Llamar a la carpeta persona.
3)Desde el modelo persona.uim pulsar botón derecho y seleccionar en el menú
contextual la opción MOSKitt Transformation → Generation of a gvHidra
prototype.
4) Seleccionar la carpeta que acabamos de crear a través del botón Select
Resource...
5) Pulsar Next. (Fin de entrada de parámetros)
6) Pulsar Next. (Seleccionamos Configuración por defecto)
7) Pulsar Next. (Validaciones de los parámetros de entrada correctas)
8) Pulsar Finish. (Transformación sin problemas)

20. Pasos: Probar el prototipo
9) Sobre la carpeta persona pulsar botón derecho y en el menú contextual seleccionar la
opción Copy.
10) Soltar el contenido de la carpeta en el directorio htdocs del directorio apache2 del
wapp.
11) Abrir el navegador.
12) Poner la url http://localhost:8080/persona

21. Pasos: Probar el prototipo

22. Pasos: Probar el prototipo

23. Pasos: Probar el prototipo

24. Aplicación de DSDM con
MOSKitt
Begoña Bonet Pérez de León
(bonet_beg@gva.es)
1 Diciembre 2010