jsUML2 - A lightweight HTML5/javascript library for UML 2 diagramming

 

Guía del programador

 

Rev. 003/Spanish

 

 

 

CONTACTO DEL PROYECTO:

 

Dr. José Raúl Romero

Dpto. Informática y Análisis Numérico

Edificio Marie Curie (C3), planta baja

Campus de Rabanales, Universidad de Córdoba

14071 Córdoba (Spain)

Email:          jrromero@uco.es

Web:           http://www.jrromero.net/tools/jsUML2

                   http://code.google.com/p/jsuml2

 

 

 

Por favor cite este documento como:

 

J.R. Romero. jsUML2: A lightwaight HTML5/Javascript library for UML 2 diagramming, Dept. of Computer Science and Numerical Analysis, University of Córdoba, Spain. Available for download from http://www.jrromero.net/tools/jsUML2

 

 

 

 

Última actualización: Oct 2012


 

DISEÑO Y COORDINACIÓN:

·         JRR: José Raúl Romero, PhD

 

PARTICIPANTES [Por orden alfabético]:

·         AAH: Alejandro Arrabal Hidalgo, BSc

·         RML: Rafael Molina Linares, BSc (former member)

·         MVL: Martín Vega-Leal, BSc (former member)

 

 

 

 

HISTORIAL DE CAMBIOS:

 

Fecha

Versión

Participante

Descripción

Oct 30, 2012

003

General revision; code refactoring; new elements (UMLGeneralizationSet, UMLNAssociation); new styles (fonts, lines, etc.) for nodes and relations.

AAH, JRR

Jan 11, 2012

002

Alpha Behavioural diagrams improved. Profiling included. Some code refactoring and encapsulation

RML, JRR

Oct 10, 2011

001

Alpha Activity diagrams, full message sequence diagrams and state charts added. Import/export improved. New style edition

RML, JRR

Feb 27, 2011

000

Alpha Initial version released, incl. class diagrams, component diagrams, use case diagrams, basic MSC; and some other features: import/export, image generation

MVL, JRR

 


 

 

Índice General

 

 

 

1.     INTRODUCCIÓN. 11

1.1.     Alcance y propósito. 11

1.2.     Licencia. 12

1.3.     Agradecimientos. 12

1.4.     Descripción del documento. 12

2.     INSTALACIÓN Y DESINSTALACIÓN. 13

2.1.     Instalación de la librería. 13

2.2.     Empaquetado de la librería. 14

2.2.1.      Sprocketize. 14

2.2.2.      YUICompressor 15

2.2.3.      Empaquetado y compresión. 15

2.3.     Desinstalación. 16

3.     DESCRIPCIÓN DE LOS OBJETOS. 17

3.1.     Capa de núcleo gráfico: UDCore. 17

3.1.1.      Objeto Diagram.. 18

3.1.2.      Objeto Node. 20

3.1.3.      Objeto SuperNode. 25

3.1.4.      Objeto Relation. 26

3.1.5.      Objeto NodeFigure. 28

3.2.     Capa de diagramado UML: UDModules. 30

3.3.     Diagramas de la librería jsUML2. 33

3.3.1.      Diagrama de casos de uso. 33

3.3.2.      Diagrama de clases. 33

3.3.3.      Diagrama de componentes. 34

3.3.4.      Diagrama de secuencias. 34

3.3.5.      Diagrama de máquinas de estado. 34

3.3.6.      Diagramas de actividad. 35

3.3.7.      Diagramas de definición de perfiles UML. 35

3.4.     Objetos para el desarrollo de nuevos elementos. 35

3.4.1.      Diagram.. 36

3.4.2.      Node. 36

3.4.3.      Relation. 37

3.4.4.      Component 38

3.4.5.      NodeFigure. 39

3.4.6.      RelationLine. 39

3.4.7.      RelationEnd. 40

4.     DIAGRAMAS DE CASOS DE USO.. 41

4.1.     Objeto: Diagrama de casos de uso. 41

4.2.     Objeto: Actor 41

4.3.     Objeto: Caso de uso. 42

4.4.     Objeto: Sistema. 42

4.5.     Objeto: Subsistema. 43

4.6.     Objeto: Relación de comunicación. 43

4.7.     Objeto: Relación de extensión. 43

4.8.     Objeto: Relación de inclusión. 44

4.9.     Objeto: Generalización. 44

4.10.       Objeto: Generalización múltiple. 44

5.     DIAGRAMAS DE CLASES. 46

5.1.     Objeto: Diagrama de clases. 46

5.2.     Objeto: Paquete. 46

5.3.     Objeto: Paquete contenedor 47

5.4.     Objeto: Clase. 47

5.5.     Objeto: Componente. 47

5.6.     Objeto: Interfaz extendido. 48

5.7.     Objeto: Agregación. 48

5.8.     Objeto: Asociación. 49

5.9.     Objeto: Asociación n-aria. 49

5.10.       Objeto: Relación de composición. 50

5.11.       Objeto: Relación de dependencia. 50

5.12.       Objeto: Generalización. 50

5.13.       Objeto: Relación de realización. 51

5.14.       Objeto: Relación de uso. 51

5.15.       Objeto: Relación de combinación de paquetes. 51

5.16.       Objeto: Relación de importación pública de paquetes. 52

5.17.       Objeto: Relación de importación privada de paquetes (acceso) 52

6.     DIAGRAMAS DE COMPONENTES. 53

6.1.     Diagrama de componentes. 53

6.2.     Objeto: Componente (contenedor) 53

6.3.     Objeto: Interfaz (lollipop) 54

6.4.     Objeto: Puerto. 54

6.5.     Objeto: Relación de uso de la interfaz (lollipop) 54

6.6.     Objeto: Relación de realización de la interfaz (lollipop) 55

6.7.     Otros objetos. 55

7.     DIAGRAMAS DE SECUENCIA. 56

7.1.     Objeto: Diagrama de secuencia. 56

7.2.     Objeto: Línea de vida. 56

7.3.     Objeto: Bucle. 57

7.4.     Objeto: Rotura de secuencia. 57

7.5.     Objeto: Opcionalidad simple. 58

7.6.     Objeto: Alternativa. 58

7.7.     Objeto: Mensaje de envío. 59

7.8.     Objeto: Mensaje de llamada. 59

7.9.     Objeto: Mensaje de respuesta. 60

7.10.       Objeto: Mensaje de borrado. 60

7.11.       Objeto: Mensaje de Creación. 60

7.12.       Objeto: Mensaje de Destrucción. 61

8.     DIAGRAMAS DE MÁQUINAS DE ESTADO.. 62

8.1.     Objeto: Diagrama de máquinas de estado. 62

8.2.     Objeto: Estado inicial 62

8.3.     Objeto: Estado final 63

8.4.     Objeto: Pseudo-estado Terminar 63

8.5.     Objeto: Punto de entrada. 63

8.6.     Objeto: Punto de salida. 64

8.7.     Objeto: Pseudo-estado de unión. 64

8.8.     Objeto: Estado simple. 64

8.9.     Objeto: Estado compuesto. 65

8.10.       Objeto: Región vertical 66

8.11.       Objeto: Región horizontal 66

8.12.       Objeto: Transición. 67

9.     DIAGRAMAS DE ACTIVIDAD. 68

9.1.     Objeto: Diagrama de actividad. 68

9.2.     Objeto: Acción de aceptación de un evento. 68

9.3.     Objeto: Evento de tiempo. 69

9.4.     Objeto: Acción de envío de señal 69

9.5.     Objeto: Acción. 69

9.6.     Objeto: Nodo objeto. 70

9.7.     Objeto: Actividad. 70

9.8.     Objeto: Almacén de datos. 71

9.9.     Objeto: Conector 71

9.10.       Objeto: Partición horizontal 71

9.11.       Objeto: Partición vertical 72

9.12.       Objeto: Partición jerárquica horizontal 72

9.13.       Objeto: Partición jerárquica vertical 73

9.14.       Objeto: Pin. 74

9.15.       Objeto: Nodo de expansión. 74

9.16.       Objeto: Nodo de parámetro. 74

9.17.       Objeto: Flujo de control 75

9.18.       Objeto: Manejador de excepciones. 75

9.19.       Objeto: Nodo de Decisión y Combinación. 75

9.20.       Objeto: Nodo de Bifurcación y Unión. 76

9.21.       Objeto: Nodo inicial 76

9.22.       Objeto: Nodo final de  flujo. 77

9.23.       Objeto: Nodo final de actividad. 77

10.        PERFILES UML 2. 78

10.1.       Objeto: Perfil UML. 78

10.2.       Objeto: Metaclase. 78

10.3.       Objeto: Estereotipo. 79

10.4.       Objeto Extensión. 79

11.        MÓDULO GENÉRICO.. 80

11.1.       Nota. 80

11.2.       Línea simple. 80

11.3.       Estereotipos. 81

12.        CASO DE ESTUDIO: Editor UML simple. 83

12.1.       Crear la estructura. 84

12.2.       Modificar el nombre del diagrama. 85

12.3.       Borrar un elemento de un diagrama. 86

12.4.       Cambiar de diagrama. 87

12.5.       Generar imagen de un diagrama. 87

12.6.       Cambiar el color 88

12.7.       Desarrollo de un diagrama de secuencia en código. 89

12.8.       Desarrollo de un diagrama de actividad mediante código fuente. 92

12.9.       Desarrollo de un diagrama de máquinas de estado mediante código fuente. 96

12.10.     Definición de un perfil UML. 99

12.11.      Definición de un perfil UML sin representación gráfica. 105

12.12.     Exportación de un diagrama. 107

12.13.     Importación de un diagrama. 108

12.14.     Añadir un elemento al diagrama. 109

13.        MANTENIMIENTO EVOLUTIVO.. 111

13.1.       Fichero diagram.js. 111

13.2.       Fichero objects.js. 112

Bibliografía. 115

 


 


 

Lista de Figuras

 

 

 

Figura 3.1: Estructura de elementos canvas en capas. 20

Figura 3.2: Tipos de figuras para un nodo. 30

Figura 3.3: Principales tipos de nodos. 37

Figura 3.4: Tipos de figuras para un nodo. 39

Figura 3.5: Tipos de línea para una relación. 40

Figura 3.6: Tipos de inicios y finales de la línea de relación. 40

Figura 4.1: Actor 41

Figura 4.2: Caso de uso. 42

Figura 4.3: Caso de uso extendido. 42

Figura 4.4: Sistema. 42

Figura 4.5: Subsistema. 43

Figura 4.6: Relación de comunicación. 43

Figura 4.7: Relación de extensión. 43

Figura 4.8: Relación de inclusión. 44

Figura 4.9: Generalización. 44

Figura 4.10: Generalización múltiple. 44

Figura 5.1: Paquete. 46

Figura 5.2: Paquete contenedor 47

Figura 5.3: Clase. 47

Figura 5.4: Componente. 47

Figura 5.5: Interfaz extendido. 48

Figura 5.6: Agregación. 48

Figura 5.7: Asociación. 49

Figura 5.8: Asociación N-aria. 49

Figura 5.9: Composición. 50

Figura 5.10: Dependencia. 50

Figura 5.11: Generalización. 50

Figura 5.12: Realización. 51

Figura 5.13: Relación de uso. 51

Figura 5.14: Combinación de paquetes. 51

Figura 5.15: Importación pública de paquetes. 52

Figura 5.16: Relación de importación privada de paquetes (acceso) 52

Figura 6.1: Componente (contenedor) 53

Figura 6.2: Interfaz (lollipop) 54

Figura 6.3: Puerto. 54

Figura 6.4: Relación de uso de la interfaz (lollipop) 54

Figura 6.5: Relación de realización de la interfaz (lollipop) 55

Figura 7.1: Línea de vida. 56

Figura 7.2: Bucle. 57

Figura 7.3: Rotura de secuencia. 57

Figura 7.4: Opcionalidad simple. 58

Figura 7.5: Alternativa. 58

Figura 7.6: Mensaje de Envío. 59

Figura 7.7: Mensaje de llamada. 59

Figura 7.8: Mensaje de respuesta. 60

Figura 7.9: Mensaje de borrado. 60

Figura 7.10: Mensaje de creación. 60

Figura 7.11: Mensaje de Destrucción. 61

Figura 8.1: Estado Inicial 62

Figura 8.2: Estado final 63

Figura 8.3: Pseudo-estado Terminar 63

Figura 8.4: Punto de entrada. 63

Figura 8.5: Punto de salida. 64

Figura 8.6: Pseudo-estado de Unión. 64

Figura 8.7: Estado simple. 64

Figura 8.8: Estado compuesto. 65

Figura 8.9: Región vertical 66

Figura 8.10: Región horizontal 66

Figura 8.11: Transición. 67

Figura 9.1: Acción de aceptación de un evento. 68

Figura 9.2: Evento de tiempo. 69

Figura 9.3: Acción de envío de señal 69

Figura 9.4: Acción. 69

Figura 9.5: Nodo objeto. 70

Figura 9.6: Actividad. 70

Figura 9.7: Almacén de clave. 71

Figura 9.8: Conector 71

Figura 9.9: Partición horizontal 71

Figura 9.10: Partición vertical 72

Figura 9.11: Partición jerárquica horizontal 72

Figura 9.12: Partición jerárquica vertical 73

Figura 9.13: Pin. 74

Figura 9.14: Nodo de expansión. 74

Figura 9.15: Nodo de parámetro. 74

Figura 9.16: Flujo de control 75

Figura 9.17: Manejador de excepciones. 75

Figura 9.18: Nodo de Decisión y Combinación. 75

Figura 9.19: Nodo de Bifurcación y Unión. 76

Figura 9.20: Nodo inicial 76

Figura 9.21: Nodo final de  flujo. 77

Figura 9.22: Nodo final de actividad. 77

Figura 10.1: Metaclase. 78

Figura 10.2: Estereotipo. 79

Figura 10.3: Extensión. 79

Figura 11.1: Nota. 80

Figura 11.2: Línea simple. 80

Figura 12.1: Esquema general aplicación. 83

Figura 12.2: Modificar nombre de diagrama. 86

Figura 12.3: Borrar elemento de un diagrama. 87

Figura 12.4: Cambiar color 89

Figura 12.5: Diagrama de secuencia. 90

Figura 12.6: Diagrama de actividad. 93

Figura 12.7: Diagrama de máquinas de estado. 96

Figura 12.8: Perfil UML. 99

Figura 12.9: Aplicación de un perfil UML en un diagrama de clases. 102

Figura 12.10: Uso de imágenes de un estereotipo en un diagrama de clases. 103

Figura 12.11: Aplicación de un perfil UML no representado gráficamente en un diagrama de clases. 107

 


 

Índice de Tablas

 

 

Tabla 3.1: Plantilla para definir características de un objeto. 31

Tabla 4.1: Características de Actor 41

Tabla 4.2: Características de Caso de uso. 42

Tabla 4.3: Características de Sistema. 42

Tabla 4.4: Características de Subsistema. 43

Tabla 4.5: Características de Relación de comunicación. 43

Tabla 4.6: Características de relación de extensión. 44

Tabla 4.7: Características de Relación de inclusión. 44

Tabla 4.8: Características de Generalización. 44

Tabla 4.9: Características de Generalización múltiple. 45

Tabla 5.1: Características de Paquete. 46

Tabla 5.2: Características de Paquete contenedor 47

Tabla 5.3: Características de Clase. 47

Tabla 5.4: Características de Componente. 48

Tabla 5.5: Características de Interfaz extendido. 48

Tabla 5.6: Características de Agregación. 48

Tabla 5.7: Características de Asociación. 49

Tabla 5.8: Características de Asociación N-aria. 49

Tabla 5.9: Características de Relación de composición. 50

Tabla 5.10: Características de Relación de dependencia. 50

Tabla 5.11: Características de Generalización. 51

Tabla 5.12: Características de Relación de Realización. 51

Tabla 5.13: Características de Relación de uso. 51

Tabla 5.14: Características de Relación de combinación de paquetes. 52

Tabla 5.15: Características de Importación pública de paquetes. 52

Tabla 5.16: Características de Relación de importación privada de paquetes (acceso) 52

Tabla 6.1: Características de Componente (contenedor) 53

Tabla 6.2: Características de Interfaz (lollipop) 54

Tabla 6.3: Características de Componente (contenedor) 54

Tabla 6.4: Características de Relación de uso de la interfaz. 55

Tabla 6.5: Características de Relación de realización de la interfaz. 55

Tabla 7.1: Características de Línea de vida. 57

Tabla 7.2: Características de Bucle. 57

Tabla 7.3: Características de Rotura de secuencia. 58

Tabla 7.4: Características de Opcionalidad simple. 58

Tabla 7.5: Características de Alternativa. 59

Tabla 7.6: Características de mensaje de Envío. 59

Tabla 7.7: Características de mensaje de llamada. 59

Tabla 7.8: Características de mensaje de respuesta. 60

Tabla 7.9: Características de mensaje de borrado. 60

Tabla 7.10: Características de mensaje de creación. 61

Tabla 7.11: Características de mensaje de destrucción. 61

Tabla 8.1: Características de estado Inicial 62

Tabla 8.2: Características de estado final 63

Tabla 8.3: Características de pseudo-estado Terminar 63

Tabla 8.4: Características de punto de entrada. 64

Tabla 8.5: Características de punto de salida. 64

Tabla 8.6: Características de pseudo-estado de unión. 64

Tabla 8.7: Características de estado simple. 65

Tabla 8.8: Características de estado compuesto. 65

Tabla 8.9: Características de región vertical 66

Tabla 8.10: Características de región horizontal 67

Tabla 8.11: Características de transición. 67

Tabla 9.1: Características de acción de aceptación de un evento. 68

Tabla 9.2: Características de evento de tiempo. 69

Tabla 9.3: Características de acción de envío  de señal 69

Tabla 9.4: Características de acción. 70

Tabla 9.5: Características de objeto. 70

Tabla 9.6: Características de actividad. 70

Tabla 9.7: Características de almacén de clave. 71

Tabla 9.8: Características de conector 71

Tabla 9.9: Características de partición horizontal 72

Tabla 9.10: Características de partición vertical 72

Tabla 9.11: Características de partición jerárquica horizontal 73

Tabla 9.12: Características de partición jerárquica vertical 73

Tabla 9.13: Características de pin. 74

Tabla 9.14: Características de nodo de expansión. 74

Tabla 9.15: Características de nodo de parámetro. 74

Tabla 9.16: Características de flujo de control 75

Tabla 9.17: Características de manejador de excepciones. 75

Tabla 9.18: Características de nodo de decisión y combinación. 76

Tabla 9.19: Características de bifurcación y unión. 76

Tabla 9.20: Características de nodo inicial 76

Tabla 9.21: Características de final de flujo. 77

Tabla 9.22: Características de nodo final de actividad. 77

Tabla 10.1: Características de metaclase. 78

Tabla 10.2: Características de estereotipo. 79

Tabla 10.3: Características de extensión. 79

Tabla 11.1: Características de Nota. 80

Tabla 11.2: Características de extensión. 81

 


 


 

 

 

Capítulo 1


 

 

1.INTRODUCCIÓN   

1.1.    Alcance y propósito

 

       jsUML2 [1] es una librería JavaScript/HTML5 que permite a cualquier desarrollador generar aplicaciones que requieran el manejo de diagramas UML2 en su web, de forma fácil y rápida, sin necesidad de programar toda la funcionalidad desde cero. Haciendo uso de un número reducido de funciones de interfaz, se pueden generar los diagramas más habituales de los tipos especificados en el estándar. De la misma forma, la librería ofrece soporte para definir perfiles UML como medio para extender el propio UML [2], y así poder extender los elementos UML ya incorporados en la librería. Esto permite la personalización de los diagramas presentados al usuario.

       Otro punto de gran importancia es el referente a la posibilidad de extensión de la librería a partir de métodos y objetos diseñados para este propósito. De esta forma, se da la posibilidad de extender las funcionalidades ofrecidas por la librería, así como la mejora y depuración de las ya existentes, con el fin de que la librería se pueda adaptar lo máximo posible a las necesidades de la aplicación externa que la use.

       Uno de los aspectos fundamentales en el diseño de jsUML2 ha sido el uso de UML 2 como lenguaje de modelado, según la definición establecida por OMG (Object Management Group) [3]. UML fue diseñado para ser un lenguaje de modelado de propósito general, lo que da una mayor flexibilidad a la hora de modelar sistemas. Al ser un lenguaje de propósito general, hay ocasiones en las que no se puede utilizar adecuadamente en dominios concretos de un problema, por lo que se tiene que extender el propio lenguaje para adaptarlo a los mismos. OMG ofrece varias soluciones, entre las que cabe destacar el uso de perfiles UML o UML profiles, los cuales especializan y restringen algunos de los conceptos del lenguaje UML.

            En una primera versión de esta librería se llevó a cabo el desarrollo de la arquitectura inicial, además de:

 

§  Objetos más importantes del núcleo de la librería (diagrama, nodo y relación).

§  Objetos finales de la librería que cumplen el estándar UML2 y que están incluidos en los diagramas de casos de uso, clases, componentes y secuencia (sólo elementos básicos).

§  Un editor demostración de la librería que pretende mostrar el uso de las distintas funcionalidades de la librería proporcionadas hasta el momento.

 

       En una segunda evolución se extienden estos objetos y se incorporan nuevos diagramas (diagramas de máquinas de estado y actividad), así como la extensión de diagramas existentes, caso  del diagrama de secuencia, que tenían una estructura básica. Junto a cada diagrama se ofrece información sobre los objetos finales de los que dispone. Otro punto que tiene en cuenta este manual es el correspondiente a la definición de perfiles y de los distintos objetos válidos para un perfil. Para finalizar, se presenta  un ejemplo práctico de una aplicación que hace uso de la librería y que muestra las nuevas funcionalidades incorporadas a ésta: el editor jsUML2. Nótese que este editor es una herramienta de demostración y no pretende ser exhaustivo en términos de usabilidad, compleción y diseño.

       El presente manual está destinado al programador que desee hacer uso de las funcionalidades de la librería sin necesidad de conocer la forma en que estas funcionalidades están internamente desarrolladas, y no se debe considerar un manual de usuario del editor de demostración incluido.

 

1.2.    Licencia

       Este software se suministra con licencia GPL3. Sin embargo, tenga en cuenta la siguiente recomendación:

 

Notice that we freely but gladly share our effort with you, so please send us any modification or addition to the library or editor code. We also appreciate if you report any tool or website that you make using this library. This will cost you only a very short time, but would help us to improve the library in the future.

 

       Toda distribución del software debe contener una referencia a los autores originales, y contener los ficheros LICENSE y README suministrados con la distribución.

 

1.3.    Agradecimientos

 

       Nuestro más sincero agradecimiento a aquellos programadores que nos han hecho llegar sus comentarios y reconocimiento acerca de la librería jsUML2. También queremos agradecer su apoyo al Dr. Antonio Vallecillo (University of Málaga, Spain) y al Dr. Jordi Cabot (ATLAS research group, INRIA, Nantes, France).

       Finalmente, a aquellos que han contribuido directa o indirectamente tanto en mayor como en menor medida en alguna pieza de código o partes de este proyecto:

-       Agradecemos a Antonio Villegas Niño y José María Gómez Hernández (Universitat Politècnica de Catalunya - Barcelona Tech, Spain) por el código de estilos en fuentes y sus ideas acerca de los elementos UMLGeneralizationSet y UMLNAssociation (release 004, 2012).

 

1.4.    Descripción del documento

 

Este documento no pretende ser un manual exhaustivo de desarrollo con la librería, la cual por otra parte queda abierta a modificaciones del programador. El objetivo es marcar las guías necesarias para el completo entendimiento del código de la librería y facilitar su posterior integración en proyectos de terceras partes.

En los siguientes capítulos se describen las distintas capas que conforman el desarrollo, así como sus elementos básicos. Posteriormente se introduce cada tipo de diagrama y sus objetos, incluyendo los perfiles UML. Finalmente se discute acerca de la aplicación de ejemplo y otros aspectos de desarrollo relacionados con la librería.

 


 

 

 

Capítulo 2


 

2.  INSTALACIÓN Y DESINSTALACIÓN

 

       Para comprender correctamente el proceso de instalación de la librería hay que conocer su estructura, la cual está compuesta de dos partes o capas:

 

§  UDCore: Es el núcleo de la librería, por lo que concentra la mayor parte de la funcionalidad  y complejidad. Sus funciones comprenden desde el dibujo de líneas y formas, hasta el manejo y la interacción con los elementos del diagrama, todo ello independientemente de las características inherentes a UML.

§  UDModules: Se trata de una capa superior a la anterior, se encarga de diseñar los elementos específicos de UML2 sobre elementos generados por la capa núcleo. En ella se implementan los objetos finales de los diagramas, dotando a estos de la forma y características requeridas por el estándar.

 

       Cualquier aplicación que haga uso de la librería constituirá una tercera capa superior, que se apoyará en UDModules.

       Los componentes de la librería se componen de multitud de ficheros de clases, hojas de estilo e imágenes. Sin embargo, para su uso dentro de una aplicación web es requisito indispensable reducir al mínimo el número de ficheros para mejorar la transferencia de la librería a través de la red. Por defecto la librería completa se ha empaquetado y comprimido en sólo dos ficheros JavaScript, una hoja de estilo común y un directorio de imágenes. Sin embargo, recomendamos que el programador regenere los ficheros incluyendo únicamente los elementos UML que vaya a utilizar.

       Su instalación es detallada a continuación en el apartado 2.1. Sin embargo, si la librería requiere algún cambio o está interesado en ampliar su funcionalidad con nuevos diagramas, requerirá el uso de herramientas especiales y un conocimiento más amplio que se explicará en el apartado 2.2.

 

2.1.    Instalación de la librería

 

       Los ficheros finales para la librería, listos para su uso en una aplicación, se encuentran en el directorio ./build, cuya estructura es detallada a continuación.

           

 /build: Directorio que contiene los archivos para el uso de la aplicación

·         ./css  - Directorio de hojas de estilo necesarias para los elementos de la librería.

·         ./img – Directorio de imágenes necesarias para el uso de la librería.

·         UDCore.js – Fichero empaquetado y comprimido con el núcleo de la librería.

·         UDModules.js – Fichero empaquetado y comprimido con los diagramas finales de UML2.

 

       Para el correcto funcionamiento de la librería, deberá incluir los directorios /css, /img, así como los ficheros UDCore.js y UDModules.js.

       A continuación, será necesario añadir las etiquetas que enlacen con los ficheros fuente de JavaScript y la hoja de estilos, dentro de la etiqueta <head></head>, siendo ésta la cabecera del documento HTML:

 

            <link type=‘text/css’ rel=‘stylesheet’ href=‘css/UDStyle.css’ media=‘screen’ />

<script type=‘text/javascript’ src=‘UDCore.js’></script>

<script type=‘text/javascript’ src=‘UDModules.js’></script>

 

       Aunque el código presentado en las líneas anteriores escoge como ruta para los ficheros UDCore y UDModules al documento actual de la aplicación, esto no significa que dichos ficheros deban estar incluidos obligatoriamente aquí. Sin embargo, es importante el orden de dependencia de las cajas anteriormente indicadas y, por tanto, que el enlace al fichero UDCore.js se produzca antes que ningún otro relacionado con la librería, ya que es el encargado de proporcionar las funciones y elementos básicos a la siguiente capa. A continuación UDModules.js proporciona los objetos finales para los diagramas de UML2.

      

2.2.    Empaquetado de la librería

 

       En la mayoría de los casos no es necesario realizar esta tarea, sólo si:

§  Quiere añadir o eliminar algún diagrama de la librería.

§  Ha modificado la funcionalidad de la librería y necesita volver a empaquetarla.

 

       En cualquier caso, serán necesarias las siguientes aplicaciones explicadas en los siguientes apartados. Para su comodidad se recomienda ejecutarlos en entorno Linux.

 

2.2.1.  Sprocketize

 

       Sprocketize [5] es la aplicación que permite resolver las dependencias entre los distintos módulos de Javascript, ya que el lenguaje no tiene un modo nativo de realizar esta tarea. Tras haber instalado correctamente la aplicación, ésta se encarga de analizar todos los ficheros fuente de JavaScript y empaquetarlos en uno sólo.

       Nótese que es necesario tener instalada previamente una versión actual del lenguaje de programación Ruby para un correcto funcionamiento de Sprocketize. Puesto que esto escapa del objetivo de este manual, se recomienda al lector consultar la guía rápida de instalación [6].

       Una vez se tiene el entorno de Ruby completamente instalado, se debe proceder a la instalación de Sprocketize, que es tan sencillo como ejecutar la siguiente línea de comandos bajo cualquier entorno Linux.

 

gem install --remote sprockets

 

       En caso de encontrar algún error, puede dirigirse a la página web de la aplicación [5].

 

2.2.2.   YUICompressor

 

       YUICompressor [7] es una pequeña aplicación cuya función es comprimir el código JavaScript, produciendo ficheros fuente igualmente pero con una reducción en tamaño muy apreciable, en torno al 40% dependiendo del contenido.

       Dicha aplicación es un componente de la librería de programación en Javascript de Yahoo,

YUI (Yahoo User Interface) incluido en la distribución de la librería yuicompressor.jar, para comodidad de los desarrolladores. Puesto que su lenguaje de desarrollo es Java, para su uso debe tener instalada la máquina virtual de Java.

 

2.2.3.   Empaquetado y compresión

 

       Una vez se tienen instaladas las aplicaciones necesarias es importante conocer la distribución de los ficheros dentro del directorio de fuentes de jsUML2.

Todos los ficheros necesarios para la librería, así como hojas de estilo e imágenes, se encuentran ubicados dentro del directorio /src como se detalla a continuación:

 

/src/ - Directorio de fuentes de la librería.

·         core/ - Directorio con los ficheros correspondientes al núcleo de la librería, esto es, el componente UDCore.

·         modules/ - Directorio formado por los directorios que contienen a los ficheros correspondientes a cada uno de los diagramas de UML2.

o    class/ - Directorio con los objetos finales disponibles para el diagrama de clases.

o    usecase/ - Directorio con los objetos finales disponibles para el diagrama de casos de uso.

o    component/ - Directorio con los objetos finales disponibles para el diagrama de componentes.

o    generic/ - Directorio que contiene los objetos finales de uso genérico para cualquier diagrama y las propiedades referentes al estereotipado de los elementos finales de la librería.

o    sequence/ - Directorio con los objetos finales disponibles para el diagrama de secuencia.

o    activity/ - Directorio con los objetos finales disponibles para el diagrama de actividad.

o    stateMachine/ - Directorio con los objetos finales disponibles para el diagrama de máquinas de estado.

o    profile/ - Directorio con los objetos finales disponibles para la definición de un perfil UML.

 

       Así cuando la librería es empaquetada extrae la información sobre los diagramas del directorio /modules, por tanto si desea ciertos diagramas concretos dentro de su aplicación, sólo deberá añadir o eliminar los que desee dentro de ese directorio y empaquetar todo de nuevo.

       El proceso de empaquetado y compresión de la librería es simple: se proporciona un fichero denominado make.sh en la distribución de la librería, asumiendo un entorno Linux. Ejecutando este script se realiza todo el proceso y los ficheros del directorio /build son sobrescritos por los nuevos, liberando al desarrollador de la comprensión de los comandos utilizados en las aplicaciones Sprocketize y YUICompressor.

 

       Una vez realizado el proceso, los archivos empaquetados de la librería son sobrescritos, la instalación de los nuevo ficheros se realiza de forma idéntica a como se realiza con los ficheros distribuidos por defecto y no requieren de ningún procedimiento adicional.

 

2.3.    Desinstalación

 

       El proceso de desinstalación de la librería es simple, basta con eliminar los ficheros que se han copiado a la hora de instalar la librería.

       Además, hay que recordar que durante la instalación se añadieron unas líneas de código HTML, necesarias para la inclusión de los ficheros Javascript de la librería y la hoja de estilo correspondiente. Dichas líneas deben ser borradas también. Si cabe alguna duda, presentan el siguiente aspecto (o similar):

 

<link type=‘text/css’ rel=‘stylesheet’ href=‘css/UDStyle.css’ media=‘screen’ />

<script type=‘text/javascript’ src=‘UDCore.js’></script>

<script type=‘text/javascript’ src=‘UDModules.js’></script>

 

 


 

 

 

 

Capítulo 3


 

3.     DESCRIPCIÓN DE LOS OBJETOS

 

       Como decíamos a comienzos del capítulo 2, la librería está constituida por una arquitectura de dos capas: la capa UDCore, que corresponde al núcleo gráfico de la librería, y la capa UDModules, que contiene tanto los diagramas soportados por la librería como los objetos finales de UML2. En este capítulo, se llevará a cabo una descripción en profundidad de cada una de las capas, dando a conocer los objetos base sobre los que se sustenta la funcionalidad de la librería para que un desarrollador pueda hacer uso de ellos.

 

3.1.    Capa de núcleo gráfico: UDCore

 

       En esta sección detallaremos la interfaz de los objetos más importantes dentro del núcleo de la librería. Primero, debemos ser conscientes de que jsUML2 estructura sus especificaciones en diagramas independientes (con excepción de los perfiles), que básicamente están formados por elementos gráficos unidos como un grafo en términos de lados y aristas (Relation). Estos nodos y relaciones tienen comportamientos comunes, independientemente del aspecto visual y funcionalidad particulares que exhiben cuando se especialicen en un elemento UML2 concreto.

 

§  Diagram: Comprende el lienzo de dibujo y su lógica interna. Su función es organizar los elementos del diagrama y manipularlos a deseo del programador, así como ofrecer un manejo adecuado de los eventos generados por parte del usuario y transmitir estos a los diferentes elementos que componen el diagrama. De esta clase heredan todos los diagramas específicos de UML2, y con ello toda su funcionalidad.

§  Node: Son cada uno de los elementos simples con forma que componen un diagrama, por ejemplo una clase o un paquete. Entre sus funciones está ofrecer la posibilidad de movimiento, redimensión y modificación de sus propiedades. Todos los elementos no compuestos presentes en el diagrama y que no son relaciones heredan de esta clase.

§  SuperNode: Son cada uno de los elementos compuestos con forma que están presentes en el diagrama, compuestos por dos o más objetos Node (denominados regiones). Por ejemplo, pueden ser un ‘Combined Fragment’ (Alternative, Loop, Break, Option), una región o una Activity Partition. Entre sus funciones se encuentran todas las ofrecidas por el objeto Node, así como nuevas funciones relacionadas con la creación de nuevos nodos dentro de su estructura, y con la redimensión y modificado de las propiedades de estos.

§  Relation: Son las relaciones existentes entre los distintos elementos del diagrama, ya sean nodos o relaciones. Permiten modificar sus atributos así como mover su posición a través del diagrama generando puntos intermedios. Todas las relaciones del diagrama heredan de esta clase.

§  NodeFigure: Es el objeto encargado de definir la representación gráfica de un nodo. Todas las figuras que son usadas para la representación gráfica de un objeto final heredan de esta clase.

 

       A continuación se explicarán detalladamente otros objetos. Posteriormente, en la sección 3.4  (Objetos para el desarrollo de nuevos elementos) se detallarán funciones adicionales específicas en el caso de que el programador desee crear su propio tipo de diagramas, y no sólo los ya disponibles.

 

3.1.1.  Objeto Diagram

 

       Es el objeto principal de la librería encargado de gestionar los elementos del diagrama. Las funciones disponibles para la gestión de diagramas son:

 

·         Constructor({ id: String, width: Number, height: Number }) Llamaremos así a la función que es invocada cuando se crea el elemento mediante la palabra clave new, esto es, para instanciar un nuevo objeto de la clase. Se utiliza la notación JSON para pasarle los parámetros a las funciones constructoras, puesto que proporciona importantes ventajas en la herencia de las clases. Por tanto los parámetros que aquí se indican deben ser introducidos entre llaves y con su identicador adecuado, el orden no es importante.

o    id (String) El nombre del id de un elemento div del documento HTML. Este elemento será el encargado de contener la estructura HTML del diagrama que se va generar.

o    width (Number) Anchura del diagrama que se creará.

o    height (Number) Altura del diagrama que se creará.

·         Constructor() Una segunda opción es invocar al constructor sin parámetros. Esto creará un elemento de diagrama, pero requerirá su inicialización posterior mediante la función initialize. Es útil cuando la gestión de los elementos Canvas la realiza la aplicación y no el diagrama. Por tanto, será necesario pasarle esa información al diagrama antes de utilizarlo.

·         addElement( Element ) Añade un elemento de tipo Element al diagrama en su posición relativa respecto a los que ya existen dentro. Por ejemplo, si se añade una clase UML en el lugar que ya hay un paquete UML mediante esta función, esta clase pasa automáticamente a formar parte del paquete.

·         addRelationFromPoints( Relation, Number, Number, Number, Number ): Boolean  Añade una relación, que se pasa como parámetro, entre dos elementos. Estos elementos son identificados mediante sus coordenadas x e y respectivamente. El método devuelve verdadero si la relación pudo ser añadida al diagrama con éxito, en caso contrario devuelve falso.

·         checkForParent( Element ) Comprueba mediante la posición del elemento si su padre actual ha dejado de contenerlo. En caso afirmativo, se cambia la referencia del padre al elemento que ahora lo contenga.

·         delElement( Element ) Elimina un elemento del diagrama, lo que implica eliminar todos los elementos contenidos o dependientes del mismo. Por ejemplo, si eliminamos un paquete UML, los elementos que se encuentran dentro del mismo serán eliminados y, también, sus relaciones.

·         draw() Actualiza en el objeto Canvas con el estado actual del diagrama.

·         getElementByPoint( x : number, y : number ): Element Devuelve el objeto de tipo Element que se encuentre en la posición indicada dentro del diagrama.

·         getId(): Number Proporciona el número de identificación del diagrama, previamente asignado al mismo. Este método es útil cuando se controlan varios diagramas en la misma aplicación.

·         getName(): String Devuelve el nombre asignado al diagrama. Este nombre es el que muestra el diagrama en su representación gráfica, normalmente arriba a la izquierda, dentro de una pestaña. Puede ser modicado mediante la función setName.

·         getXML(): XMLObject Devuelve un objeto de tipo XML manejado por Javascript, que contiene el árbol de la estructura del diagrama en formato XML.

·         getXMLString(): String Devuelve la estructura del diagrama serializada en formato XML dentro de una cadena de caracteres.

·         initialize( id, div, mainContext, motionContext, width, height ) Esta función es la encargada de asignar los elementos que utilizará el diagrama para su representación, así como, algunos valores de tamaño.

o    id (Number): Indica el número de identicación del diagrama, al igual que el método setId.

o    div (HTMLElement) Es la referencia al nodo del documento, de tipo div, donde se encuentra ubicado el diagrama.

o    mainContext (CanvasRenderingContext2D) Es el elemento de contexto que utiliza Canvas como interfaz para dibujar sobre él. Se obtiene mediante la función getContext('2d') del elemento Canvas.

o    motionContext (CanvasRenderingContext2D) Es el contexto del objeto Canvas que dibuja las animaciones del diagrama, como los desplazamientos de los objetos al arrastrar el ratón. Debe estar por encima del Canvas principal para que se vean correctamente.

o    width (Number) La anchura del objeto Canvas que se está utilizando.

o    height (Number) La altura del objeto Canvas que se está utilizando.

·         interaction( Boolean ) Este método activa o desactiva la edición/interacción con el usuario. En otras palabras, paraliza el flujo de eventos provenientes del usuario y no permite al mismo interactuar con el diagrama. Esta función se activa o desactiva mediante una variable de tipo Boolean.

·         isVisible(): Boolean Devuelve si el elemento es visible.

·         notifyChange() Este método, habitualmente llamado por otro objeto, notifica al diagrama que un objeto ha sido modificado y, por lo tanto, el canvas ha de ser refrescado.

·         notifyDeleted(Element) Notifica al diagrama  que un elemento a sido borrado y por tanto si pertenece al diagrama ha de ser borrado de este también.

·         notifyDraw() Este método, habitualmente llamado por otro objeto, notifica al diagrama que el canvas ha de ser refrescado. Este método realiza la misma funcionalidad que notifyChange() en el caso del objeto Diagram. Sin embargo, no ocurre así en los objetos Node.

·         reassignRelationTo( Relation, Number, Number ) Devuelve el elemento coincidente con las coordenadas pasadas como parámetro, siempre y cuando éste sea distinto a la relación recibida como argumento. Este método es habitualmente invocado por un elemento de tipo Relation, con el fin de conocer qué elemento coincide con un extremo del mismo.

·         setBackgroundNodes( String ) Este método se encarga de establecer el color de fondo de los elementos del diagrama. cambiando el color por defecto que mostrarán los elementos del lienzo.

·         setId( Number ) Asigna el número de identificación indicado al diagrama, para así poder identicarlo dentro de una aplicación más grande.

·         setName( String ) Asigna el nombre indicado al diagrama. Esta modificación es visualmente mostrada en la esquina superior izquierda del lienzo de dibujo.

·         setUpdateHeightCanvas( boolean )  Este método activa o desactiva la redimensión de la altura del canvas en caso de que un objeto definido sobre un diagrama sobrepase la altura máxima establecida en el canvas. En otras palabras, este método tiene como objetivo liberar a la aplicación externa de cualquier programación extra para conseguir redimensionar el canvas. Para ello, sólo basta con introducir como parámetro del método un valor booleano true/false.

·         setXML( XMLObject ) Genera los elementos del diagrama contenidos en la estructura XML que se le pasa como parámetro. Esta función es útil cuando el diagrama se encuentra dentro de otra aplicación más grande con una estructura propia de XML, si hay que inicializar varios diagramas a la vez.

·         setXMLString( String ) Genera los elementos de un diagrama contenidos en la cadena de caracteres con un formato XML valido para la librería.

·         stopEvents() Paraliza el flujo de eventos de usuario si está activo. Por ejemplo, si hay un elemento seleccionado o una ventana abierta, estos son cerrados. Sin embargo, no evita que el usuario pueda seguir interactuando con él, como lo hace el método interaction.

·         UpdateHeightCanvas() Redimensiona el canvas para que ningún elemento quede fuera de este.

 

Un detalle importante a la hora de crear una aplicación con la librería es entender cómo ésta maneja los elementos Canvas, y lo mejor es expresarlo con el esquema mostrado en la Figura 3.1. Como se puede observar en la imagen, se superponen dos objetos de tipo Canvas. En la capa inferior (main canvas) se refleja el estado del diagrama y en la superior (motion canvas) el resultado de la interacción con el usuario, como puede ser el desplazamiento de las figuras. Esto es necesario para no sobrecargar de trabajo al motor de renderizado con constantes y complejas actualizaciones, lo que se hace más notable en los diagramas de mayor tamaño.

 

 

 

Figura 3.1: Estructura de elementos canvas en capas

 

3.1.2.  Objeto Node

 

       Es todo nodo no compuesto en el grafo del diagrama. En general, puede haber diferentes tipos de nodos dependiendo de su forma, pero todos comparten la interfaz que los define.

 

·         Constructor({ x: Number, y: Number }) Es el constructor de la clase. Admite el paso de las coordenadas mediante notación JSON.

o    x (Number): Posición en el eje x del nodo que se va a crear.

o    y (Number): Posición en el eje y del nodo que se va a crear.

·         Constructor() Esta clase permite el uso de un constructor sin parámetros, lo que sitúa al nodo en el origen de coordenadas por defecto.

·         addChild(Element) Añade un elemento a lista de hijos del nodo. De esta forma, cuando un cambio sea realizado sobre el nodo, éste se propaga de forma correcta a sus hijos.

·         addItem(Array, HTMLDiv) Añade un objeto al menú que contiene el DIV. Este objeto se especifica mediante un Array cuya primera posición indica que acción debe ser realizada cuando se presione y su segunda posición indica cuál será el texto mostrado en dicha opción de menú.

 

f.addItem( [ f.showDirectionDialog(), 'Direction' ], 'divBlock1' );

 

·         addRelation(Relation) Añade un elemento de tipo Relation al nodo, esto significa que el nodo pasa a formar parte de la relación y además guardará una referencia a la misma para poder propagar correctamente los futuros cambios que puedan ser realizados en el mismo.

·         addValue( String, String ) Su función es parecida a la de setValue, pero aplicada a componentes cuyo contenido es múltiple y no se retrae a un valor único. Por ejemplo, las etiquetas estereotipo de un objeto o los atributos de una clase pueden ser varias. Cada vez que llamamos a esta función se crea un componente nuevo dentro del nodo, que contendrá el valor indicado en el segundo parámetro. Por ejemplo, si queremos añadir un atributo a una clase de UML 2, bastará con ejecutar el siguiente código:

 

var c = new UMLClass();

c.addValue( 'attributes', '+nuevo_atributo_de_la_clase:int' );

 

·         delChild(Element) Borra un elemento de lista de hijos del nodo. Así, cuando un cambio sea realizado sobre el nodo, éste no se propagará al elemento en cuestión.

·         delComponent(Component) Borra el componente en cuestión siempre que pertenezca al nodo.

·         delRelation(Relation) Elimina un nodo de una relación.

·         deselect() Deselecciona el nodo actual y cierra todos los diálogos abiertos relacionados con el mismo.

·         draw(Canvas) Dibuja el nodo, sus figuras y componentes en el canvas.

·         drawShape(Canvas) Dibuja el borde del nodo en el canvas.

·         getArea() : Number  Devuelve el área ocupada por el nodo, calculada a partir de la altura y anchura del rectángulo que lo encuadra.

·         getCentralPoint():Point Devuelve el punto central del nodo.

·         getComponents( ) : Array Devuelve una lista con los componentes del nodo invocante.

·         getElementXML(Element): XMLNode Devuelve el nodo serializado en formato XML. Es necesario pasar el padre del elemento como parámetro.

·         getFontColor(): String Este método devuelve el color de fuente que es asignada por defecto a cada componente nuevo que se añada al nodo. El formato  es el definido por el estándar de CSS 2.1 para definir el color.

·         getFontFamily():String Este método devuelve la familia de fuente, que es asignada por defecto a cada componente que se añada al nodo. El formato es el definido por el estándar de CSS 2.1 para definir familias de fuentes.

·         getId():Number Proporciona el número de identificación del nodo, previamente asignado al mismo. Este método es útil cuando se controlan varios nodos en la misma aplicación y hay que identificar a cada uno de ellos para poder diferenciarlos. Puede ser modificado mediante la función setId().

·         getLineWidth():Number  Este método devuelve el ancho de linea con el cual es dibujado el nodo.

·         getLineColor(): String Devuelve el color de la línea con el cual es dibujado el nodo.

·         getLinkCentered ( Number, Number ) : Point  Devuelve el punto perteneciente al borde del nodo desde el cual se podría trazar una línea recta hasta las coordenadas pasadas como parámetro, sin pasar por el interior del nodo y de tal forma que la longitud de la recta sea la menor posible. Esta función es utilizada para averiguar desde qué punto del borde del nodo se puede trazar una línea (p.ej. asociación) que comience o termine en el borde del mismo, hasta las coordenadas de otro nodo.

·         getMovement():Point Devuelve un punto que indica el movimiento del nodo con respecto a su última posición. El punto guarda la distancia entre las coordenadas x e y de su posición actual y su posición justamente anterior.

·         getMenu():Array Devuelve el Array de información referente al menú contextual del nodo. Puede ser establecido mediante la función setMenu().

·         getNodeChilds( ) : Array Devuelve una lista con los nodos hijos del nodo invocante.

·         getParent():Node Devuelve el nodo padre del actual.

·         getParticularHeigth( Number ):Array  Devuelve el valor de la coordenada y y la anchura del nodo si la coordenada y, pasada como parámetro, pertenece al rango en el que existe el nodo para el eje de abscisas, es decir si el valor del parámetro esta comprendido entre la coordenada x inicial del nodo y su anchura más el valor inicial. El valor de retorno es un Array cuya primera posición concuerda con la coordenada y del nodo y la segunda con su altura.

·         getParticularWidth( Number ):Array Devuelve el valor de x y la anchura del nodo si la coordenada y pasada como parámetro pertenece al rango del nodo para el eje de abscisas, es decir si el valor del parámetro esta comprendido entre la coordenada y inicial del nodo y su altura más el valor inicial. El valor de retorno es un Array cuya primera posición concuerda con la coordenada x del nodo y la segunda con su anchura.

·         getX():Number Devuelve la coordenada x relativa a la posición del nodo.

·         getY():Number Devuelve la coordenada y relativa a la posición del nodo.

·         height( Number ) : Boolean  Presenta el mismo comportamiento que la función setHeight(Number), pero además realiza la comprobación del tipo del parámetro como Number, devolviendo false en caso contrario o si se produce algún error. Si todo es correcto, actualiza el nodo una vez establecida la nueva altura de éste.

·         isChildOf(Node):Boolean Indica si el nodo es hijo del nodo pasado como parámetro.

·         isContainer() : Boolean Indica si el nodo es un contenedor, es decir, si el nodo puede incluir en su interior cualquier tipo de elemento creado en el diagrama. Esta propiedad puede ser establecida durante la definición del elemento Node mediante la función setContainer().

·         isOver(Number, Number) Comprueba si el punto dado está posicionado sobre el nodo. En caso afirmativo devuelve verdadero, en otro caso falso.

·         isOverBeforePosition( Number, Number ) Comprueba si el punto dado está posicionado sobre la anterior posición del nodo. En caso afirmativo devuelve verdadero. En otro caso falso. La posición anterior se refiere al punto central del nodo antes de que éste se moviera por última vez. Si no se movió o se igualaron las posiciones actual y anterior mediante el método resetMovement(), la posición anterior coincidirá con la actual.

·         notifyChange() Indica al nodo (objeto Node) que alguno de los elementos relacionados han sido modificados y, por tanto, ha de actualizarse para reflejar su nuevo estado.

·         notifyDeleted( Relation )  Notifica al nodo que una relación (objeto Relation) ha sido eliminada y, por tanto, su referencia ha de ser borrada también.

·         notifyDraw() El nodo indica a su diagrama que debe actualizar el canvas, debido a que alguno de los elementos que conforman el nodo ha sido modificado.

·         position( Number, Number ) Modifica las coordenadas del nodo a la posición indicada. El primer argumento es la coordenada en el eje x y el segundo la coordenada en el eje y. Dicha posición corresponde a la esquina superior izquierda del nodo, respecto a la esquina superior izquierda del diagrama.

·         remove() Borra el nodo, así como la referencia que su padre guardara sobre el mismo y todos los elementos que dependieran de su existencia. En concreto, estos elementos son: los hijos del nodo (si es éste es un nodo contenedor) y las relaciones de las que participe. Además notifica el cambio a su elemento padre mediante una llamada al método notifyChange() utilizando la referencia interna que almacena sobre éste.

·         removeContextualMenu() Borra el menú contextual del documento HTML.

·         resetMovement() Establece la anterior posición del nodo como la actual. El movimiento del nodo pasa a ser 0.

·         select(Number, Number) Comprueba si el nodo coincide con las coordenadas indicadas como parámetro. En caso afirmativo, se selecciona el nodo. Si además dichas coordenadas  coinciden con alguno de sus componentes, este también es seleccionado.

·         setBackgroundColor( String ) Este método se encarga de definir el color con que las figuras del nodo serán dibujadas. Tiene como parámetro un string que corresponde al color RGB que se quiere asociar al nodo.

·         setDiagram(Diagram) Modifica la propiedad que determina el diagrama al cual pertenece el nodo.

·         setElementXML(XMLNode) Establece las propiedades del nodo mediante la información contenida en el nodo XML. Se puede obtener la información de un nodo serializada en formato XML mediante la función getElementXML().

·         setFontColor(color: String) Modifica el color de fuente que es asignado por defecto a cada componente nuevo que se añada al nodo, y el color de fuente de todos sus componentes actuales, como parámetro pasado a la  función:

o    color: string Define el color de fuente definido por el estándar de CSS 2.1.

·         setFontFamily(font-family: String) Modifica la familia de fuente que es asignada por defecto a cada componente nuevo que se añada al nodo, y la familia de fuente de todos sus componentes actuales del nodo:

o    font-family: string Define la familia de fuente que se dará a cada componente que se añada al nodo por defecto. Dicho formato debe respetar el definido por el estándar de CSS 2.1 para definir familias de fuentes.

·         setHeigth( Number ) Modifica la altura del elemento a la indicada por el valor numérico pasado como parámetro a la función. Si el parámetro es menor que el mínimo de altura definido para el nodo se establecerá este último como altura del nodo. Recuerde que este valor mínimo puede ser modificado mediante la función setMinHeigth().

·         setId(Number) Asigna el número de identificación indicado al nodo, para así poder identificarlo dentro de la aplicación.

·         setLineColor(color: String) Modifica el color de la línea con la cual es dibujado el nodo:

o    color: string Define el color de línea. El formato debe respetar el definido por el estándar de CSS 2.1.

·         setLineWidth(Number) Modifica la anchura, pasada como parámetro, de la línea con la cual se dibuja el nodo.

·         setMenu( array ) Este método se encarga de definir los distintos ítems o elementos que va a contener el menú contextual de un nodo cuando se pulsa sobre éste con el botón derecho del ratón. El parámetro consiste en un array bidimensional donde se define cada una de las opciones del menú contextual, junto con las acciones a realizar cuando se pulsa sobre cada opción. A continuación se muestra un ejemplo para aclarar un poco más el formato que debe tener este array:

 

                     f.setMenu(    [[acciones0,nombre_opción0],

                                          [acciones1,nombre_opción1],

                                          [acciones2,nombre_opción2]]);

 

                     f.setMenu(

                                    [[f.showColorDialog(),” Color del nodo”],

                                   [setVisibility(!isVisible()),” Ocultar/Mostrar”]]);

 

     siendo f algún objeto UML definido en el fichero objects.js de algún diagrama, el menú contextual creado en el primer ejemplo genérico para este objeto constaría de 3 opciones con sus correspondientes acciones al pulsar sobre cada una de ellas.

·         setParent(Node) Establece como nodo padre el nodo pasado como parámetro.

·         setSelectedFigure(Number) Indica qué figura del nodo va a ser dibujada de la lista de figuras del mismo. En caso de que la figura sea una imagen no se mostrarán los componentes del nodo. Pueden añadirse o borrarse figuras con los métodos addFigure() y delFigure(). Posteriormente, en la sección 3.4.5, se explicarán los diferentes tipos de figuras que existen definidas.

·         setValue( String, String ) Esta función sirve para modificar los valores de las subpartes que componen el nodo. Cada componente del nodo recibe un identificador en forma de cadena de texto, y mediante este identificador podemos modificar sus valores. Por ejemplo, el objeto UMLClass determina su nombre mediante un componente cuyo identificador es name. Ejecutando el siguiente código podemos cambiar el nombre que una clase.

 

var c = new UMLClass();

c.setValue( 'name', 'Nuevo nombre de la clase' );

 

·         setVisibility( boolean ) Este método es el encargado de establecer la visibilidad de un nodo. Es decir, un valor true del método hará visible al nodo, así como cualquier elemento contenido dentro de éste. Por el contrario, un valor false hará que el nodo (y cualquier elemento contenido dentro de él) no sea representado gráficamente en el diagrama, y no permitirá ningún tipo de interacción con dicho nodo por parte del usuario. Es recomendable limitar el uso de este método.

·         setWidth( Number ) Modifica la anchura del elemento a la indicada por el valor numérico pasado como parámetro de la función. Si el parámetro es menor que el mínimo de anchura definido para el nodo, se establecerá este último valor como anchura del nodo. Recuerde que este mínimo puede ser modificado mediante la función setMinWidth().

·         showColorDialog( )  Este método es el encargado de mostrar un cuadro de diálogo al usuario, a través del cual el usuario puede modificar el color de fondo con el que está dibujado el nodo.

·         showContextualMenu(Number, Number) Muestra el menú contextual del nodo. Éste puede ser establecido mediante la función setMenu(). Las coordenadas x e y indican el punto superior derecho del menú.

·         showStyleDialog( ) Este método es el encargado de mostrar un cuadro de diálogo, a través del cual el usuario puede modificar el color de fondo, el color de la fuente, el color de línea, el ancho de línea, el tamaño de fuente, la familia de la fuente y el estilo de la fuente, del nodo y de todos sus componentes.

·         toString() : String Devuelve una cadena con el nombre del objeto, en este caso, con el valor 'Node'.

·         updateContainer() Si el nodo es un contenedor se redimensiona para albergar los elementos que contenga. El nodo puede ser establecido como contenedor mediante la función setContainer().

·         updatePosition(Number, Number, Boolean) La posición del nodo es actualizada según indique el desplazamiento en el eje x y en el eje y pasado por parámetros. El parámetro de tipo Boolean indica si el método ha sido llamado a causa de un desplazamiento producido en una región.

·         width( Number ) : Boolean  Presenta el mismo comportamiento que la función setWidth(Number), pero además realiza la comprobación del tipo del parámetro como Number, devolviendo false en caso contrario o si se produce algún error. Si todo es correcto, actualiza el nodo una vez establecida la nueva anchura de éste.

 

En la sección 3.4.2 se mostrarán las funciones específicas requeridas para la creación de un nuevo nodo.

 

3.1.3.  Objeto SuperNode

 

       Es todo objeto compuesto a su vez por dos o más nodos llamados regiones, a los cuales se les restringe la posibilidad de movimiento por el canvas de manera independiente y quedando limitados al movimiento realizado por el supernodo como unidad completa. Al ser un objeto que hereda del objeto Node de la librería, éste puede hacer uso de todas las funciones ofrecidas por el objeto Node, así como de nuevas funciones relacionadas con la creación de subnodos dentro de su estructura, y con la redimensión y modificado de las propiedades de estos.

       Detallaremos el uso de cada uno de los métodos que proporciona la clase SuperNode (excluyendo las propiedades derivadas de Node).

 

§  Constructor({ x: number, y: number, orientation: number, includeComponentByRegion: boolean})  El constructor de la clase superNode admite el paso de las coordenadas mediante notación JSON.

·         x Posición en el eje x relativa al diagrama donde se va a incluir.

·         y Posición en el eje y relativa al diagrama donde se va a incluir.

·         orientation Orientación de la estructura SuperNode, pudiendo ser vertical (valor numérico: 1) u horizontal (valor numérico: 0).

·         includeComponentByRegion: si se quiere incluir un componente para la etiqueta de nombre en cada una de las regiones contenidas en la estructura SuperNode (valor true) o no se quiere (valor false).

§  Constructor() Esta clase permite el uso de un constructor sin parámetros, lo que por defecto sitúa al elemento en el origen de coordenadas. Además, la orientación por defecto del SuperNode sería horizontal, y  se incluiría un componente para el nombre de cada una de las regiones contenidas en la estructura.

§  addRegion( Node ) Añade una región o nodo a la estructura del supernodo, siendo el primer y único argumento la región que se desea añadir como hijo.

§  deleteRegion(Node) Borra una región o nodo perteneciente al supernodo.

 

 

3.1.4.  Objeto Relation

 

Esta clase es la base de todas las relaciones (aristas entre nodos) existentes en los diagramas de la librería. Sus funciones de interfaz son las siguientes:

·         Constructor({ a: Element, b: Element }) Es el constructor de la clase, admite el paso de los elementos involucrados en la relación mediante notación JSON.

o    a (Element) Es el elemento inicial de la relación, en caso de existir una diferencia entre ambos.

o     b (Element) Es el elemento final de la relación.

·         Constructor() La clase también dispone de un constructor sin parámetros. Su uso requiere que la definición de los objetos relacionados se haga con posterioridad mediante la función setElements.

·         addRelation( Relation ) La relación invocante de la función guardará una referencia al objeto de tipo Relation pasado como parámetro, de forma que garantice que los futuros cambios serán propagados correctamente. Habitualmente este método es llamado cuando el objeto que lo invoca pasa a ser un extremo de dicha relación.

·         addValue( String, String ) Su función es parecida a la de setValue, pero ésta se aplica a componentes cuyo contenido es múltiple y no sólo un valor único. Por ejemplo, los estereotipos de una relación. Cada vez que llamamos a esta función, se crea un componente nuevo dentro del elemento, que contendrá el valor indicado en el segundo parámetro. Por ejemplo, si queremos añadir un estereotipo a una relación de agregación de UML 2, bastará con ejecutar el siguiente código.

 

var c = new UMLAggregation();

c.addValue( 'stereotype', 'nuevo_estereotipo' );

 

·         delRelation( Relation ) Se borrará la referencia que pudiera guardar el objeto invocante hacia la relación pasada como parámetro. Usualmente este método es invocado cuando el objeto en cuestión deja de ser un extremo de la relación, o cuando referencia deje de ser necesaria.

·         deselect() Deselecciona la relación actual y cierra todos los diálogos abiertos relacionados con la misma.

·         draw(Canvas) Refleja en el canvas el estado actual de la relación.

·         drawShape(Canvas) Refleja en el canvas el borde de la relación.

·         getCentralPoint():Point Devuelve el punto central de la relación.

·         getDirection() : String  Devuelve la dirección de la relación en forma de cadena: 'a' si es dirigida hacia el extremo A; 'b' si es dirigida hacia el extremo B; 'ab' si es dirigida a ambos extremos de la relación; 'none' si la relación no es dirigida.

·         getElementA( ) : Element  Devuelve el elemento asociado al extremo A de la relación.

·         getElementB( ) : Element  Devuelve el elemento asociado al extremo B de la relación.

·         getElementXML(Element): XMLNode Devuelve la relación serializada en formato XML. Es necesario pasar el padre del elemento como parámetro.

·         getId():Number Proporciona el número de identificación de la relación, previamente asignado a la misma. Este método es útil cuando se controlan varias relaciones en la misma aplicación y hay que identificar a cada una de ellas para poder diferenciarlas. Puede ser modificado mediante la función setId().

·         getLineColor():String Devuelve el color de línea de la  relación.

·         getLineStyle():String Devuelve el estilo de linea de la relación. Puede ser establecido mediante la función setLineStyle().

·         getLineWidth():Number  Este método devuelve el ancho de línea con el cual es dibujada la relación en el canvas.

·         getLinkCentered(Number, Number):Point Devuelve el punto intersección entre las coordenadas pasadas como parámetros y la relación.

·         getParent() : Node Devuelve el nodo padre de la relación.

·         isLinked(Element):Boolean Comprueba si el elemento en cuestión pertenece a la relación. En caso afirmativo, devuelve verdadero y, en caso contrario, falso.

·         isOver(Number, Number) Comprueba si el punto pasado como parámetro está posicionado sobre la relación.

·         notifyChange() Indica a la relación que alguno de los elementos relacionados con ella, o alguno de sus componentes, ha sido modificado y, por tanto, ha de actualizarse.

·         notifyDraw() La relación indica al diagrama al que pertenece que debe redibujarse, puesto que alguno de los elementos que conforman la relación han sido modificados.

·         remove() Borra la relación y todos los elementos dependientes de ella.

·         select(Number, Number) Comprueba si la relación coincide con las coordenadas indicadas. En caso afirmativo se selecciona. Si además dichas coordenadas coinciden con alguno de sus componentes, éste también es seleccionado.

·         setDiagram(Diagram) Modifica la propiedad que determina el diagrama al cual pertenece la relación.

·         setDirection( String ) Establece la dirección de la relación dibujando flechas abiertas en la dirección que determina la cadena pasada como parámetro, esto es: 'a' establece una flecha en el inicio de la relación (extremo A); 'b' establece una flecha en el final de la relación (extremo B); 'ab' establece flechas en ambos extremos de la relación; 'none' establece que no se dibuje ningún extremo.

·         setDirectionToA( Boolean ) Establece la dirección hacia el extremo A de la relación según lo indicado por el parámetro pasado a la función. Si el valor es true, entonces se establece la dirección y se dibuja.

·         setDirectionToB( Boolean ) Establece la dirección hacia el extremo B de la relación según lo indicado por el parámetro pasado a la función. Si el valor es true, entonces se establece la dirección y se dibuja.

·         setElementA(Element) Define el elemento inicial de la relación.

·         setElementB(Element) Define el elemento final de la relación.

·         setElements( Element, Element ) Esta función define los elementos pertenecientes a la relación. El primer elemento será el inicial y el segundo el final, en caso de existir alguna diferencia entre ambos.

·         setElementXML(XMLNode) Establece las propiedades de la relación mediante la información contenida en el nodo XML. Se puede obtener la información de una relación serializada en formato XML mediante la función getElementXML().

·         setId(Number) Asigna el número de identificación indicado a la relación.

·         setLineColor(color: string) Modifica el color de la línea de la relación, según se indica como parámetro:

o    color: string Define el color del elemento, que debe respetar el estándar CSS 2.1.

·         setLineStyle(String) Establece el estilo de linea de la relación. Los posibles estilos son “Dashed” y “Solid”. Posteriormente, en la sección 3.4.6, se detallan los diferentes tipos de líneas.

·         setLineWidth(Number) Modifica la anchura de la línea con la que se dibuja la relación.

·         setParent( Node ) Establece el objeto Node pasado como parámetro como nodo padre de la relación.

·         setValue( String, String ) Esta función sirve para modificar los valores de las subpartes que componen la relación, cada componente de la relación recibe un identificador en forma de cadena de caracteres, y mediante este identificador podemos modificar sus valores. Por ejemplo, la relación UMLAgreggation determina su nombre mediante un componente cuyo identificador es name. Ejecutando el siguiente código podemos cambiar el nombre que una relación de agregación.

 

var c = new UMLAggregation();

c.setValue( 'name', 'nuevo nombre' );

 

·         showDirectionDialog( ) Este método es el encargado de mostrar un cuadro de diálogo a través del cual el usuario puede modificar la dirección de la relación.

·         showStyleDialog( ) Este método es el encargado de mostrar un cuadro de diálogo a través del cual el usuario puede modificar el color, el tipo de línea y el ancho de línea de la relación.

·         toString() : String Devuelve una cadena que identifica al tipo de elemento, en este caso con valor 'Relation'.

§  updateParent() Actualiza el nodo padre de la relación. Se entiende por nodo padre aquél objeto de tipo Node que es contenedor de ambos extremos de la relación, en caso de existir.

§  updatePosition(Number, Number) Actualiza la posición de la relación y de todos sus puntos, moviéndola tanto como indiquen los parámetros en el eje x e y, respectivamente.

 

Considérese que las funciones showContextualMenu(), removeContextualMenu(), setMenu(), getMenu() y addItem() presentan un comportamiento análogo al expuesto para los métodos del objeto Node.

 

3.1.5.  Objeto NodeFigure

 

Éste es el objeto encargado de definir la representación gráfica de un nodo. Existen distintos tipos de formas disponibles:

 

§  AcceptEventActionFigure: Esta figura es usada en la representación gráfica de un elemento UMLAcceptEventAction (sección 9.2).

§  CrossEllipseFigure: Figura que muestra un círculo con una cruz en su interior como representación gráfica. Por ejemplo, aparece en los elementos UMLFlowFinal (sección 9.22) y UMLExitPoint  (sección 8.6).

§  CrossFigure: Tipo de figura que representa a un elemento circular con una cruz en forma de aspa. Como ejemplo encontramos a UMLTerminate (sección 8.4).

§  EllipseFigure: Figura que dibuja una elipse. Esta figura es utilizada en la representación de los casos de uso, elementos UMLCaseUse y UMLCaseUseExtended (véase sección 4.3).

§  ExpansionNodeFigure Esta figura consiste en un rectángulo dividido en rectángulos más pequeños por varias líneas. Crea un nodo de expansión en un diagrama de actividad,  permite la representación gráfica de éste y es utilizada en la representación gráfica del elemento final UMLExpansionNode (sección 9.15).

§  FromImageFigure: Figura que dibuja una imagen externa a la librería. Su uso es propio de los perfiles UML, gracias a los cuales los distintos elementos UML pueden tomar distintas formas personalizadas.

§  HalfFilledEllipseFigure: Este tipo de figura es representada por el contorno de un círculo que en su interior contiene un círculo más pequeño. Es usada para la representación gráfica de los elementos finales UMLActivityFinal (sección 9.23) y UMLFinalState (sección 8.3) presentes en la capa UDModules de la librería.

§  LifelineFigure: Su representación consiste en el dibujo de un rectángulo y, justo debajo de éste, una línea discontinua vertical. Este tipo de figura es utilizado exclusivamente para la representación gráfica del elemento UMLLifeline (sección 7.2) de la librería.

§  NoteFigure: Figura que representa el icono característico de las notas, como la representada por el elemento UMLNote expuesto en la sección 11.1.

§  PackageFigure: Figura que representa el icono de carpeta característico de los paquetes UML, representado en el elemento UMLPackage (véase sección 5.2).

§  RectangleFigure: Figura en forma de rectángulo.

§  RegionFigure: Tipo de figura que dibuja un rectángulo pequeño y, debajo de éste, un rectángulo más grande con sus bordes redondeados. Esta representación gráfica es usada por los elementos UMLVerticalRegion (sección 8.10), UMLHorizontalRegion (sección 8.11) y UMLCompositeState (sección 8.9).

§  RhombusFigure: Figura que representa a un elemento con forma de rombo. Esta figura es usada por el elemento UMLDecision_MergeNode (sección 9.19).

§  RoundedRectangleFigure: Tipo de figura que dibuja a un elemento como un rectángulo con los bordes redondeados. Este tipo de representación puede ser encontrada en los elementos UMLAction (sección 9.5), UMLActivity (sección 9.7) y UMLSimpleState (sección 8.8).

§  SendSignalActionFigure: Figura utilizada para la representación del elemento de la librería denominado UMLSendSignalAction (sección 9.4).

§  StickmanFigure: Figura que dibuja el contorno del hombre esquemático utilizado en los diagramas de casos de uso, correspondiente al elemento UMLActor (sección 4.2).

§  SwimlaneFigure: Figura que dibuja el contorno de un rectángulo, excepto el lado derecho de éste. Esta figura es utilizada en la representación de los elementos UMLHorizontalSwimlane (sección 9.10) y UMLHorizontalHierarchicalSwimlane (sección 9.12).

§  TimeEventFigure: Figura que permite la representación gráfica de un elemento final UMLTimeEvent (sección 9.3).

§  VerticalSwimlaneFigure: Figura que dibuja el contorno de un rectángulo, excepto el lado inferior de éste. Esta figura es utilizada en la representación de los elementos UMLVerticalSwimlane (sección 9.11) y UMLVerticalHierarchicalSwimlane (sección 9.13).

 

       La Figura 3.2 muestra la generalización de estas figuras en la clase NodeFigure.

 


Figura 3.2: Tipos de figuras para un nodo

 

Por otro lado, el constructor de la clase NodeFigure, de la cual heredan los tipos de figuras explicados anteriormente recibe los siguientes parámetros:

 

§  color: string – Define el color de fondo con que un elemento será dibujado. El formato debe respetar el definido por el estándar de CSS 2.1 [10] para definir color.

§  changeColorFigure: boolean – Permite(o no permite) el modificado del color de la figura una vez éste ha sido establecido en el constructor. Este parámetro está definido para evitar que elementos UML que siempre deben aparecer del mismo color, como puede ser el caso de un estado de inicio o estado de fin en el diagrama de máquinas de estado, puedan modificar su color y, por tanto, su correcta representación gráfica. Un valor true de este parámetro  permite el cambio de color, mientras que un valor false no permite dicho cambio.

 

3.2.  Capa de diagramado UML: UDModules

 

       En esta sección se detallarán los elementos que componen los objetos finales diseñados para cumplir con el estándar UML2.

       Los elementos que aquí se describen reciben las propiedades de sus clases padre y heredan su funcionalidad, por tanto, su manejo es idéntico a los objetos de tipo Diagram, Node, Relation o SuperNode explicados en la sección 3.1. Es importante fijarse en los identificadores que se han asignado a los componentes de cada objeto para poder manipular sus propiedades una vez han sido instanciados.

       Se han nombrado los objetos de la librería siguiendo una sencilla regla: todos comienzan por el prefijo ‘UML’ seguido del nombre del elemento en inglés, poniendo cada inicial de palabra en mayúscula (notación CamelCase).

       A continuación, para cada elemento se describirán sus características principales, así como su representación gráfica. Las características de cada elemento serán presentadas en una tabla, tal y como muestra la Tabla 3.1. En el caso en que un elemento represente a un tipo de diagrama UML, esta tabla no será utilizada, simplemente se indicará el nombre que recibe el diagrama dentro de la librería.

 

Nombre de objeto: Nombre que recibe dentro de la librería el objeto final.

Hereda de

Clase padre de la que hereda sus propiedades. Entre las posibles clases padres encontramos a Node, Relation y SuperNode.

Propiedades

Enumera las distintas propiedades que distinguen al objeto.

Componentes

Enumera los distintos componentes que incorpora el objeto y pueden ser manipulados a través de las funciones de interfaz. Se puede distinguir entre componente simple o múltiple, dependiendo de si contiene uno o varios elementos y, por tanto, se modificaría con setValue o addValue.

Restricciones

Informa de cualquier tipo de restricción que pueda limitar el uso del objeto bajo determinadas situaciones.

Tabla 3.1: Plantilla para definir características de un objeto

 

 

       Para el acceso a los distintos componentes que puede contener un objeto final se hace uso de unas funciones de interfaz creadas específicamente para dicho propósito. De esta forma, se mejora la experiencia del programador y se envuelve la estructura interna que presenta cada objeto de la librería. Así, la siguiente enumeración muestra los distintos identificadores comunes a todo tipo de componentes de objeto (nótese que el uso de estas propiedades dependerá de los componentes presentes en cada objeto, según su definición), junto con las funciones de interfaz para su acceso y modificación:

§  name [simple]: Nombre del objeto. Para acceder a este componente se pueden utilizar las siguientes funciones:

·         setName( String ): Establece el nombre del objeto.

·         getName(): Devuelve un string con el nombre del objeto.

§  stereotypes [múltiple]: Estereotipos del objeto. Para obtener y modificar la información de este componente se dispone de las siguientes funciones:

·         addStereotype( String ): Añade una etiqueta estereotipo al objeto.

·         getStereotypes(): Devuelve el conjunto de etiquetas estereotipo del objeto, de tipo StereotypeTag.

§  attributes [múltiple]: Atributos del objeto. Las siguientes funciones nos permiten el acceso al componente:

·         addAttribute( String ): Añade un atributo al objeto.

·         getAttributes(): Devuelve el conjunto de atributos del objeto de tipo AttributeItem.

§  operations [múltiple]: Conjunto de operaciones del objeto. Las funciones de interfaz del componente son:

·         addOperation( String ): Añade una operación al objeto.

·         getOperations(): Devuelve el conjunto de operaciones del objeto de tipo OperationItem.

§  interfaces [múltiple]: Interfaces del objeto que pueden ser visible desde fuera de él. Las funciones de interfaz disponibles son:

·         addInterface( String ): Añade una interfaz al objeto.

·         getInterfaces(): Devuelve el conjunto de interfaces del objeto de tipo AttributeItem.

§  realizations [múltiple]: Conjunto de clases que realizan al objeto. Para conseguir y modificar la información del componente se pueden utilizar las siguientes funciones:

·         addRealization( String ): Añade un clase al objeto.

·         getRealizations(): Devuelve el conjunto de clases del objeto de tipo AttributeItem.

§  artifacts [múltiple]: Conjunto de artefactos que manifiestan al objeto. Para este componente se dispone de las siguientes funciones:

·         addArtifact( String ): Añade un artefacto al objeto.

·         getArtifacts(): Devuelve el conjunto de artefactos del objeto de tipo AttributeItem.

§  extension [múltiple]: Acceso al punto de extensión de un caso de uso extendido (UMLUseCaseExtended).

·         addExtensionPoint( String ): Añade un punto de extensión al caso de uso.

·         getExtensionPoints(): Devuelve el conjunto de puntos de extensión del caso de uso extendido.

§  guard [simple]: Guarda UML del objeto. A este componente se puede acceder mediante las siguientes funciones:

·         setGuard( String ): Establece el texto para guarda UML del objeto.

·         getGuard(): Devuelve un string con el texto correspondiente a la guarda del objeto.

§  tagValues [múltiple]: Conjunto de tag values que tiene un objeto. Para este componente se dispone de las siguientes funciones:

·         addTagValue( String ): Añade un tag value al objeto.

·         getTagValues(): Devuelve el conjunto de tag values del objeto de tipo TagValueItem.

§  path [simple]: Ruta de una imagen asociada al objeto. A este componente se puede acceder mediante las siguientes funciones:

·         setPath( String ): Establece la ruta del objeto.

·         getPath(): Devuelve un string con el texto correspondiente a la ruta del objeto.

 

       Si bien los identificadores anteriores pueden ser utilizados para todo tipo de objeto final, ya sea de tipo Node, Relation o SuperNode, la siguiente enumeración lista los identificadores que sólo pueden ser usados en caso de que el objeto final sea una relación (Relative):

 

§  roleA [simple]: Rol del elemento A de la relación.

·         setRolA( String ): Establece el rol del elemento A de la relación.

·         getRolA(): Devuelve un string con el rol del elemento A de la relación.

§  roleB [simple]: Rol del elemento B de la relación.

·         setRolB( String ): Establece el rol del elemento B de la relación.

·         getRolB(): Devuelve un string con el rol del elemento B de la relación.

§  multiplicityA [simple]: Multiplicidad del elemento A de la relación.

·         setMultiplicityA( String ): Establece la multiplicidad del elemento A de la relación.

·         getMultiplicityA(): Devuelve un string con la multiplicidad del elemento A de la relación.

§  multiplicityB [simple]: Multiplicidad del elemento B de la relación.

·         setMultiplicityB( String ): Establece la multiplicidad del elemento B de la relación.

·         getMultiplicityB(): Devuelve un string con la multiplicidad del elemento B de la relación.

 

      Hay que tener en cuenta que en el caso concreto de los componentes con identificador múltiple (marcado por [múltiple]), la función get devuelve un conjunto de objetos. Así, para acceder a la información interna contenida en cada uno de los objetos se puede invocar la función getValue de cada uno de los objetos devueltos por el método get.

 

 

 

 

3.3.  Diagramas de la librería jsUML2

 

En este apartado se lista un resumen de los objetos desarrollados en cada tipo de diagrama. En las siguientes secciones, se detallará cada uno de estos elementos. Debe tenerse en cuenta además que algunos objetos son genéricos y pueden ser utilizados en todos los diagramas, como son:

 

§  Nota: UMLNote

§  Línea simple: UMLLine

 

Por supuesto, esta configuración puede ser modificada alterando el código de la librería, de modo que en particularice qué elementos son funcionales bajo qué diagramas.

 

3.3.1.  Diagrama de casos de uso

 

§  Diagrama de caso de uso: UMLUseCaseDiagram

§  Actor: UMLActor

§  Caso de uso: UMLUseCase

§  Caso de uso extendido: UMLUseCaseExtended

§  Sistema: UMLSystem

§  Subsistema: UMLSubsystem

§  Relación de comunicación: UMLCommunication

§  Relación de extensión: UMLExtend

§  Relación de inclusión: UMLInclude

§  Relación de generalización: UMLGeneralization

§  Relación de generalización multiple: UMLGeneralizationSet

 

3.3.2.  Diagrama de clases

 

§  Diagrama de clases: UMLClassDiagram

§  Paquete: UMLPackage

§  Paquete contenedor: UMLPackageContainer

§  Clase: UMLClass

§  Componente: UMLComponent

§  Interfaz: UMLInterfaceExtended

§  Relación de agregación: UMLAggregation

§  Relación de asociación: UMLAssociation

§  Relación de asociación múltiple: UMLNAssociation

§  Relación de composición: UMLComposition

§  Relación de dependencia: UMLDependency

§  Relación de generalización: UMLGeneralization

§  Relación de generalización multiple: UMLGeneralizationSet

§  Relación de realización: UMLRealization

§  Relación de uso: UMLUsage

§  Relación de combinación: UMLPackageMerge

§  Relación de importación pública de paquete: UMLPackagePublicImport

§  Relación de importación privada de paquete: UMLPackagePrivateImport

 

3.3.3.  Diagrama de componentes

 

§  Diagrama de componentes: UMLComponentDiagram

§  Componente: UMLComComponent

§  Interfaz: UMLInterface

§  Interfaz extendida: UMLInterfaceExtended

§  Conector: UMLConector

§  Puerto: UMLPort

§  Relación de uso de la interfaz: UMLInterfaceUsage

§  Relación de realización de la interfaz: UMLInterfaceRealization

§  Paquete: UMLPackage

§  Paquete contenedor: UMLPackageContainer

§  Relación de generalización: UMLGeneralization

§  Relación de realización: UMLRealization

§  Relación de generalización multiple: UMLGeneralizationSet

 

3.3.4.  Diagrama de secuencias

 

§  Diagrama de secuencias: UMLSequenceDiagram

§  Línea de vida: UMLLifeline

§  Bloque Bucle: UMLLoop

§  Bloque Rotura de secuencia: UMLBreak

§  Bloque Opcionalidad simple: UMLOption

§  Bloque Alternativa: UMLAlternative

§  Mensaje de envío: UMLSendMessage

§  Mensaje de llamada: UMLCallMessage

§  Mensaje de respuesta: UMLReplyMessage

§  Mensaje de borrado: UMLDeleteMessage

§  Mensaje de creación: UMLCreateMessage

§  Mensaje de destrucción: UMLDestroyMessage

 

3.3.5.  Diagrama de máquinas de estado

 

§  Diagrama de máquinas de estado: UMLStateMachineDiagram

§  Estado inicial: UMLInitialPseudoState

§  Estado final: UMLFinalState

§  Pseudoestado Terminar: UMLTerminate

§  Punto de entrada: UMLEntryPoint

§  Punto de salida: UMLExitPoint

§  Pseudoestado de unión: UMLJunction

§  Estado simple: UMLSimpleState

§  Estado compuesto: UML…

§  Región Vertical: UMLVerticalRegion

§  Región horizontal: UMLHorizontalRegion

§  Transición: UMLTransition

 

 

3.3.6.  Diagramas de actividad

 

§  Diagrama de actividad: UMLActivityDiagram

§  Acción de aceptación de evento: UMLAcceptEventAction

§  Evento de tiempo: UMLTimeEvent

§  Acción de envío de señal: UMLSendEvent

§  Acción: UMLAction

§  Nodo objeto: UMLObject

§  Actividad: UMLActivity

§  Almacén de datos: UMLDataStore

§  Conector: UMLConnectorActivity

§  Partición horizontal: UMLHorizontalSwinlane

§  Partición vertical: UMLVerticalSwinlane

§  Partición jerárquica horizontal: UMLHorizontalHierarchicalSwinlane

§  Partición jerárquica vertical: UMLVerticalHierarchicalSwinlane

§  Pin: UMLPin

§  Nodo de expansión: UMLExpansionNode

§  Nodo de parámetro: UMLParameterNode

§  Flujo de control: UMLFlow

§  Manejador de excepciones: UMLExceptionHandler

§  Nodo de decisión y combinación: UMLDecision_MergeNode

§  Nodo de atracción y unión: UMLFork_JoinNode

§  Nodo inicial: UMLInitialNode

§  Nodo final de flujo: UMLFlowFinal

§  Nodo final de actividad: UMLActivityFinal

 

 

3.3.7.  Diagramas de definición de perfiles UML

 

§  Perfil UML: UMLProfile

§  Metaclase: UMLMetaclass

§  Estereotipo: UMLStereoType

§  Extensión: UMLExtension

 

 

3.4.  Objetos para el desarrollo de nuevos elementos

 

Los objetos que aquí se explican son los que dispone la librería, junto a sus funciones de interfaz para, a partir de ellos, definir un nuevo diagrama o módulo. Se explicarán primero los objetos básicos como son Diagram, Node y Relation, así como sus derivados, para después explicar los componentes que definen para añadir funcionalidad adicional.

La mayoría de estos objetos han sido explicados en capítulos anteriores de este manual,
por lo que aquí únicamente detallaremos las funciones necesarias para diseñar un nuevo módulo.

 

3.4.1.  Diagram

 

Es un objeto principal de la librería, encargado de gestionar los elementos del diagrama, como se expone en la sección 3.1.1. Las funciones específicas de este objeto para definir nuevos diagramas son:

 

·         getType() : String Devuelve el tipo asignado al diagrama. Este tipo identifica el tipo de diagrama UML del que se trata. Puede ser modificado mediante la función setType().

·         getValidElements() : Array Devuelve el tipo de elementos UML que pueden formar parte del diagrama. Puede ser modificado mediante la función setValidElements().

·         setName( String ) Es el nombre por defecto que recibirá el diagrama al ser creado. Es aconsejable utilizar un nombre representativo y no excesivamente largo.

·         setType( String ) Es la función encargada de definir el tipo del nuevo diagrama. La cadena de caracteres introducida debe coincidir exactamente con el nombre que reciba la función constructora.

·         setValidElements( Array ) A través de esta función se validarán los elementos que se inserten en el diagrama. Es importante que los nombres de los elementos coincidan exactamente con los de su función constructora. Recibe un vector de cadenas (string), donde cada una es el nombre de un objeto.

 

3.4.2.  Node

 

Es todo objeto con forma de la librería. Puede haber diferentes tipos de nodos dependiendo de su forma, pero todos comparten la misma interfaz.

 

·         addComponent( Component ) Añade un componente al nodo. Los componentes son la forma que utiliza la librería para añadir funcionalidad a los objetos.

·           addFigure( NodeFigure ) Añade una forma gráfica al nodo. Las figuras se expusieron en 3.15.

·           delFigure( NodeFigure )  Borra una forma gráfica del nodo. Análogamente puede añadirse una figura al nodo mediante la función addFigure(). Las figuras son la forma que utiliza la librería para representar gráficamente los objetos.

·           getType() : String Devuelve el tipo asignado al nodo. Este tipo identifica el tipo de nodo UML del que se trata. Puede ser modificado mediante la función setType().

·           isAlone() : Boolean Devuelve true si la propiedad alone ha sido habilitada. False en caso contrario.

·           setAlone()  Habilita el valor de la propiedad alone indicando que el nodo no puede ser contenido por otro nodo. Esta propiedad estará desactivada por defecto, salvo que se invoque este método durante la definición del nodo.

·         setContainer() Convierte al nodo en contenedor. Así, desde que el nodo es creado podrá incluir en su interior cualquier tipo de elemento que se cree en el diagrama.

·         setHeight( Number ) Define la altura del nodo en el momento de su creación.

·         setMinWidth( Number ) Define la anchura mínima que deberá tener el nodo. Nótese que esta anchura mínima puede variar si contiene componentes.

·         setMinHeight( Number ) Define la altura mínima que tendrá el nodo.

·         setMoveable() Permite que el usuario modifique las dimensiones del nodo.

·         setProportional() Hace obligatorio que los cambios de tamaño del elemento por parte del usuario cumplan la proporción inicial altura/anchura.

·         setType( String ) Es la función encargada de definir el tipo de elemento que se está creando. El tipo que se indique debe coincidir exactamente con el nombre que reciba la función constructora.

·         setWidth( Number ) Define la anchura del nodo en el momento de su creación.

 

Además, existen distintos tipos de nodos definidos dentro de la librería, que proporcionan diferentes formas por defecto a la hora de interactuar con ellos

 

Figura 3.3: Principales tipos de nodos

 

 

3.4.3.  Relation

Es toda relación existente entre dos nodos o entre un nodo y una relación. La librería implementa la siguiente interfaz común:

 

·         addStereotype( String ) Añade un estereotipo a la relación. Puede modificarse y añadir más estereotipos por parte del usuario.

·          

·         getType() : String Devuelve el tipo asignado a la relación UML. Puede ser modificado mediante la función setType().

·         setComponentName( String ) Crea el componente de nombre, si no existe, y define el nombre de la relación. Puede ir sin parámetros, en cuyo caso también se creará el componente vacío.

·         setEnd( RelationEnd ) Define el estilo del final de la relación mediante un objeto de tipo RelationEnd.

·         setLine( RelationLine ) Define el estilo de la línea (continua, discontinua, etc.) de la relación mediante un objeto de tipo RelationLine, los tipos disponibles se explicarán posteriormente.

·         setMultiplicityA( String ) Define la multiplicidad del primer elemento de la relación. Puede ir sin parámetros, en cuyo caso se creará el componente vacío a rellenar por el usuario.

·         setMultiplicityB( String ) Define la multiplicidad del segundo elemento de la relación.

·         setRoleA( String ) Define el rol del primer elemento de la relación. Puede ir sin parámetros, en cuyo caso se creará el componente vacío a rellenar por el usuario.

·         setRoleB( String ) Define el rol del segundo elemento de la relación.

·         setStart( RelationEnd ) Define el estilo del inicio de la relación (punta de echa, punta cerrada, etc), mediante un objeto de tipo RelationEnd.

·         setStereotype( String ) Define el estereotipo de la relación. No puede ser modificado por el usuario.

·         setType( String ) Es la función encargada de definir el tipo de elemento que se está creando. El tipo que se indique debe coincidir exactamente con el nombre que reciba su función constructora.

 

 

3.4.4.  Component

 

Este objeto es una pieza imprescindible a la hora de definir nuevos objetos en la librería Su propósito es añadir funcionalidad al elemento donde se define, normalmente en forma de texto estático o editable. Puede tener diferentes formas y posiciones dentro del elemento. Los parámetros que se le pueden pasar al constructor, mediante notación JSON, son:

 

·         id ( String ) Define el identificador del componente. Es obligatorio definirlo para componentes que pueden ser editados por el usuario. Nótese que un identificador no puede repetirse dentro de un mismo elemento.

·         margin ( Number ) Define el margen aplicado a dicho componente, referido al número de píxeles de separación entre el componente y todos los elementos que le rodean.

·         position (Component.position) Define la posición del componente dentro del elemento, siendo TopRigth, Bottom, Static o, por defecto, Float.

·         centered (Boolean) En caso de estar posicionado como Component.Float, este parámetro define si el componente será centrado horizontalmente dentro del elemento.

·         text (String) Cadena de texto que contendrá el componente. Solo válido para componentes con texto.

 

Existen diferentes tipos de componentes dentro de la librería, muchos de los cuales son para un uso muy específico. Los más comunes son:


Text
Este componente representa únicamente un cuadro de texto no editable por el usuario.


TextBox
Este componente representa un cuadro de texto editable por el usuario. Su contenido puede ser cualquier cadena de texto que se introduzca en una sola línea. La cadena no tiene formato.


TextArea
Este componente representa un área de texto editable por el usuario. Su contenido puede ser cualquier cadena de texto que se introduzca en el número de líneas que se desee, no estando restringido.

 

TextFields
Este componente representa un conjunto variable de cadenas de texto. Su contenido puede ser editado por el usuario, además de añadir y eliminar cuadros de texto. Su contenido no está restringido.


StereotypeFields
Es un conjunto variable de estereotipos, editable por el usuario. Su contenido es conforme a los estereotipos definidos por UML 2.


ComponentSymbol
Añade un icono representativo de un elemento de tipo componente en el estándar de UML 2.


AttributeFields
Permite un conjunto variable de cadenas de texto restringido al formato que debe cumplir un atributo, según el estándar de UML 2. Los diferentes atributos pueden ser ocultados mediante un botón especialmente indicado para tal fin. La edición por parte del usuario de este componente es guiada mediante un formulario.

Parámetros especiales:

·         visible (Boolean) Define la visibilidad por defecto de los atributos.


OperationFields
Es un componente que permite un conjunto variable de cadenas de texto conforme al formato de operaciones prescrito por el estándar de UML 2. Las distintas operaciones pueden ser ocultadas mediante un botón. La edición por parte del usuario de este componente es guiada mediante un formulario.

Parámetros especiales:

·         visible (Boolean) Define la visibilidad por defecto del componente.

 

 

3.4.5.  NodeFigure

 

Es el objeto encargado de definir la representación gráfica de un nodo. Se pueden utilizar uno de los mostrados en la figura 5.2 El constructor puede recibir los siguientes parámetros usando una notación JSON.

·         color (String) Define el color de fondo del objeto, el formato debe respetar el definido
por el estándar de CSS 2.1 para definir colores.


Figura 3.4: Tipos de figuras para un nodo

 

FromImageFigure

Este es un tipo de figura especial, que se define mediante una imagen (p.ej. un actor en el diagrama de casos de uso). La forma de relacionar dicha imagen es mediante el paso de un parámetro especial a su constructor:

·         route (String) La ruta de la imagen que representará el nodo.

 

 

3.4.6.  RelationLine

 

Es el objeto que define el estilo de la línea de una relación. La librería proporciona los
tipos representados en la siguiente figura.

 

Figura 3.5: Tipos de línea para una relación

 

3.4.7.  RelationEnd

 

Es el objeto que define el estilo del inicio o final de una línea de relación. La librería proporciona los tipos representados en la siguiente figura.


Figura 3.6: Tipos de inicios y finales de la línea de relación

 

 

 


 


 

 

 

 

Capítulo 4


 

4.     DIAGRAMAS DE CASOS DE USO

 

 

En este capítulo se explicará brevemente los distintos objetos disponibles en la librería para representar diagramas de casos de uso.

 

4.1.  Objeto: Diagrama de casos de uso

 

El nombre que representa a este objeto es UMLUseCaseDiagram.

 

4.2.  Objeto: Actor

Figura 4.1: Actor

 

Nombre de objeto: UMLActor

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional:

- Contenedor: no

Componentes

- name [simple]: nombre del nodo

- stereotypes [múltiple]: Estereotipos

Restricciones

No se definen.

Tabla 4.1: Características de Actor

 

 

4.3.  Objeto: Caso de uso

 

Figura 4.2: Caso de uso


Figura 4.3: Caso de uso extendido

 

Nombre de objeto: UMLUseCase / UMLUseCaseExtended

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- case [simple]: Contenido del caso de uso

- extensión [múltiple]: Puntos de extensión

- name [simple]: nombre del nodo

- stereotypes [múltiple]: Estereotipos

Restricciones

No se definen.

Tabla 4.2: Características de Caso de uso

 

 

4.4.  Objeto: Sistema

Figura 4.4: Sistema


 

Nombre de objeto: UMLSystem

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: si

Componentes

- name [simple]: nombre del nodo

Restricciones

No se definen.

Tabla 4.3: Características de Sistema

 

 

4.5.  Objeto: Subsistema

 

Figura 4.5: Subsistema

 

Nombre de objeto: UMLSubsystem

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: sí

Componentes

- name [simple]: nombre del nodo

- stereotypes [múltiple]: Estereotipos

Restricciones

No se definen.

Tabla 4.4: Características de Subsistema

 

4.6.  Objeto: Relación de comunicación

 

Figura 4.6: Relación de comunicación

 

Nombre de objeto: UMLCommunication

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad:

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 4.5: Características de Relación de comunicación

 

4.7.  Objeto: Relación de extensión

 

Figura 4.7: Relación de extensión

 

Nombre de objeto: UMLExtend

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 4.6: Características de relación de extensión

 

4.8.  Objeto: Relación de inclusión

 

Figura 4.8: Relación de inclusión


 

Nombre de objeto: UMLInclude

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 4.7: Características de Relación de inclusión

 

4.9.  Objeto: Generalización

 

Figura 4.9: Generalización

 

Nombre de objeto: UMLGeneralization

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 4.8: Características de Generalización

 

4.10.              Objeto: Generalización múltiple

 

Figura 4.10: Generalización múltiple

 

Nombre de objeto: UMLGeneralizationSet

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 4.9: Características de Generalización múltiple

 

 

Funciones específicas del objeto:

 

·         addElement( Element ) Añade una relación entre la generalización y el elemento pasado como parámetro.

·         delElement( Element ) Borra la relación existente entre el elemento y el nodo.

·         getRelation( Element ) : Relation Devuelve la relación existente entre el nodo y el elemento pasado como parámetro.

·         getRelations() : Array  Devuelve un array con todas las relaciones en las que participa el nodo.

 

Este elemento está presente en los diagramas de casos de uso, de clases y de componentes.


 


 

 

 

 

Capítulo 5


 

5.     DIAGRAMAS DE CLASES

 

En esta sección se van a nombrar y explicar los distintos objetos disponibles en la librería para representar diagramas de clases.

 

5.1.  Objeto: Diagrama de clases

 

Nombre del objeto: UMLClassDiagram

 

5.2.  Objeto: Paquete

 

Figura 5.1: Paquete

 

Nombre de objeto: UMLPackage

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: nombre del nodo

- stereotypes [múltiple]: Estereotipos

Restricciones

No se definen.

Tabla 5.1: Características de Paquete

 

 

5.3.  Objeto: Paquete contenedor

 

Figura 5.2: Paquete contenedor

 

Nombre de objeto: UMLPackageContainer

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: sí

Componentes

- name [simple]: nombre del nodo

Restricciones

No se definen.

Tabla 5.2: Características de Paquete contenedor

 

5.4.  Objeto: Clase

 

Figura 5.3: Clase

 

Nombre de objeto: UMLClass

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: nombre del nodo

- stereotypes [múltiple]: Estereotipos

- attributes [múltiple]: Atributos de la clase

- operations [múltiple]: Operaciones de la clase

Restricciones

No se definen.

Tabla 5.3: Características de Clase

 

5.5.  Objeto: Componente

 

Figura 5.4: Componente

 

Nombre de objeto: UMLComponent

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: nombre del nodo

- stereotypes [múltiple]: Estereotipos

- attributes [múltiple]: Atributos de la clase

- operations [múltiple]: Operaciones de la clase

Restricciones

No se definen.

Tabla 5.4: Características de Componente

 

5.6.  Objeto: Interfaz extendido

 

Figura 5.5: Interfaz extendido

 

Nombre de objeto: UMLInterfaceExtended

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: nombre del nodo

- stereotypes [múltiple]: Estereotipos

- attributes [múltiple]: Atributos de la clase

- operations [múltiple]: Operaciones de la clase

Restricciones

No se definen.

Tabla 5.5: Características de Interfaz extendido

 

 

5.7.  Objeto: Agregación

 

Figura 5.6: Agregación

 

Nombre de objeto: UMLAggregation

Hereda de

Relation

Propiedades

- Nombre:

- Multiplicidad:

- Roles: sí

- Estereotipado: sí

Componentes

 

Restricciones

No se definen.

Tabla 5.6: Características de Agregación

 

 

5.8.  Objeto: Asociación

 

Figura 5.7: Asociación

 

Nombre de objeto: UMLAssociation

Hereda de

Relation

Propiedades

- Nombre:

- Multiplicidad:

- Roles: sí

- Estereotipado: sí

Componentes

 

Restricciones

No se definen.

Tabla 5.7: Características de Asociación

 

 

5.9.  Objeto: Asociación n-aria

 

Figura 5.8: Asociación N-aria

 

Nombre de objeto: UMLNAssociation

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- stereotypes [múltiple]: Estereotipos

- name [simple]: nombre de la relación

Restricciones

No se definen.

Tabla 5.8: Características de Asociación N-aria

 

 

Funciones específicas del objeto:

 

·         addElement( Element ) Añade una relación entre el nodo asociación y el elemento pasado como parámetro.

·         delElement( Element ) Borra la relación existente entre el elemento y el nodo.

·         getMulticiply( Element ) : String Devuelve la multiplicidad del elemento, que debe estar relacionado con el nodo asociación.

·         getRelation( Element ) : Relation Devuelve la relación existente entre el nodo y el elemento pasado como parámetro.

·         getRelations() : Array  Devuelve un array con todas las relaciones en las que participa el nodo.

·         getRole( Element ) : String  Devuelve el rol del elemento en la asociación.

·         setMulticiply( Element, String ) Establece la multiplicidad del elemento, que debe estar relacionado con el nodo asociación.

·         setRole( Element, String ) Establece el rol del elemento, que debe estar relacionado con el nodo asociación.

 

 

 

5.10.              Objeto: Relación de composición

 

Figura 5.9: Composición

 

Nombre de objeto: UMLComposition

Hereda de

Relation

Propiedades

- Nombre:

- Multiplicidad:

- Roles: sí

- Estereotipado: sí

Componentes

 

Restricciones

No se definen.

Tabla 5.9: Características de Relación de composición

 

5.11.              Objeto: Relación de dependencia

 

Figura 5.10: Dependencia

 

Nombre de objeto: UMLDependency

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 5.10: Características de Relación de dependencia

 

5.12.              Objeto: Generalización

 

Figura 5.11: Generalización

 

Nombre de objeto: UMLGeneralization

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 5.11: Características de Generalización

 

 

5.13.              Objeto: Relación de realización

 

Figura 5.12: Realización

 

Nombre de objeto: UMLRealization

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 5.12: Características de Relación de Realización

 

5.14.              Objeto: Relación de uso

 

Figura 5.13: Relación de uso

 

Nombre de objeto: UMLUsage

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 5.13: Características de Relación de uso

 

5.15.              Objeto: Relación de combinación de paquetes

 

Figura 5.14: Combinación de paquetes

 

Nombre de objeto: UMLPackageMerge

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 5.14: Características de Relación de combinación de paquetes

 

5.16.              Objeto: Relación de importación pública de paquetes

 

Figura 5.15: Importación pública de paquetes

 

Nombre de objeto: UMLPackagePublicImport

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 5.15: Características de Importación pública de paquetes

 

5.17.              Objeto: Relación de importación privada de paquetes (acceso)

 

Figura 5.16: Relación de importación privada de paquetes (acceso)

 

 

 

Nombre de objeto: UMLPackagePrivateImport

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 5.16: Características de Relación de importación privada de paquetes (acceso)

 

 


 


 

 

 

 

Capítulo 6


 

6.     DIAGRAMAS DE COMPONENTES

 

En esta sección se van a detallar los distintos objetos disponibles en la librería para
representar diagramas de componentes conforme al estándar de UML 2.

 

6.1.  Diagrama de componentes

 

Nombre del objeto: UMLComponentDiagram

 

6.2.  Objeto: Componente (contenedor)

 

Figura 6.1: Componente (contenedor)

 

Nombre de objeto: UMLComComponent

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: sí

Componentes

- name [simple]: nombre del componente

- stereotypes [múltiple]: Estereotipos

- interfaces [múltiple]: Slot de interfaces del componente

- realizations [múltiple]: Slot de realizaciones del componente

- artifacts [múltiple]: Slot de artefactos del componente

Restricciones

No se definen.

Tabla 6.1: Características de Componente (contenedor)

 

Funciones adicionales:

·         addPort( Port ): Permite añadir un puerto al componente

6.3.  Objeto: Interfaz (lollipop)

 

Figura 6.2: Interfaz (lollipop)

 

Nombre de objeto: UMLInterface

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: sí

Componentes

- name [simple]: nombre del nodo

Restricciones

No se definen.

Tabla 6.2: Características de Interfaz (lollipop)

 

6.4.  Objeto: Puerto

 

Figura 6.3: Puerto

 

Nombre de objeto: UMLPort

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: nombre del nodo

Restricciones

Debe ser añadido a objetos de tipo UMLComComponent mediante la función addPort

Tabla 6.3: Características de Componente (contenedor)

 

 

6.5.  Objeto: Relación de uso de la interfaz (lollipop)

 

Figura 6.4: Relación de uso de la interfaz (lollipop)

 

Nombre de objeto: UMLInterfaceUsage

Hereda de

Relation

Propiedades

- Nombre:

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 6.4: Características de Relación de uso de la interfaz

 

6.6.  Objeto: Relación de realización de la interfaz (lollipop)

 

Figura 6.5: Relación de realización de la interfaz (lollipop)

 

Nombre de objeto: UMLInterfaceRealization

Hereda de

Relation

Propiedades

- Nombre:

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

 

Restricciones

No se definen.

Tabla 6.5: Características de Relación de realización de la interfaz

 

6.7.  Otros objetos

 

Además de los que el desarrollador pudiera incluir, por defecto los siguientes objetos no son definidos dentro del módulo de componentes, pero está permitido incluirlos para su uso.

 

·         UMLRealization

·         UMLGeneralization

·         UMLGeneralizationSet

·         UMLPackage

 

 


 


 

 

 

 

Capítulo 7


 

7.     DIAGRAMAS DE SECUENCIA

 

       En esta sección se va a nombrar y explicar brevemente los distintos objetos disponibles en la librería para representar diagramas de secuencia, conforme al estándar de UML2.

 

7.1.  Objeto: Diagrama de secuencia

 

       Nombre del objeto: UMLSequenceDiagram.          

      

7.2.  Objeto: Línea de vida

 

Figura 7.1: Línea de vida

 

Nombre de objeto: UMLLifeline

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- stereotypes [múltiple]: Estereotipos de la línea de vida.

- name [simple]: Nombre de la línea de vida.

Restricciones

No existen

Tabla 7.1: Características de Línea de vida

 

 

Funciones específicas del objeto:

 

·                     setHeightSmallRectangle( Number ) Establece la altura del rectángulo que se dibuja en la parte superior del nodo.

·                     getLineX( ) : Number Devuelve la coordenada x de la línea de vida en el lienzo.

 

 

7.3.  Objeto: Bucle

 

Figura 7.2: Bucle

 

Nombre de objeto: UMLLoop

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

- name [simple]: Tipo de interacción.

- stereotypes [múltiple]: Estereotipos de la interacción.

- guard [simple]: Descripción de la interacción

Restricciones

No existen

Tabla 7.2: Características de Bucle

 

7.4.  Objeto: Rotura de secuencia

 

Figura 7.3: Rotura de secuencia

 

Nombre de objeto: UMLBreak

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

 

- name [simple]: Tipo de interacción.

- stereotypes [múltiple]: Estereotipos de la interacción. 

Restricciones

No existen

Tabla 7.3: Características de Rotura de secuencia

 

7.5.  Objeto: Opcionalidad simple

 

Figura 7.4: Opcionalidad simple

 

Nombre de objeto: UMLOption

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

- name [simple]: Tipo de interacción.

- stereotypes [múltiple]: Estereotipos de la interacción.

- guard [simple]: Descripción de la interacción

Restricciones

No existen

Tabla 7.4: Características de Opcionalidad simple

 

7.6.  Objeto: Alternativa

 

Figura 7.5: Alternativa

 

 

Nombre de objeto: UMLAlternative

Hereda de

SuperNode

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

Componentes para el supernodo:

- name [simple]: Tipo de interacción.

- stereotypes [múltiple]: Estereotipos de la interacción.

 

Componentes para cada región:

- stereotypes [múltiple]: Estereotipos de la interacción.

- guard [simple]: Descripción de la interacción

Restricciones

No existen

Tabla 7.5: Características de Alternativa

 

7.7.  Objeto: Mensaje de envío

 

Figura 7.6: Mensaje de Envío

 

Nombre de objeto: UMLSendMessage

Hereda de

Relation

Propiedades

- Nombre:

- Estereotipado:

Componentes

- name [simple]: nombre de la relación

- stereotypes [múltiple]: Estereotipos de la relación.

Restricciones

Sólo puede relacionarse entre dos líneas de vida.

Tabla 7.6: Características de mensaje de Envío

 

7.8.  Objeto: Mensaje de llamada

 

Figura 7.7: Mensaje de llamada

 

 

Nombre de objeto: UMLCallMessage

Hereda de

Relation

Propiedades

- Nombre:

- Estereotipado:

Componentes

- name [simple]: Nombre de la relación.

- stereotypes [múltiple]: Estereotipos de la relación.

Restricciones

Sólo puede relacionarse entre dos líneas de vida.

Tabla 7.7: Características de mensaje de llamada

 

7.9.  Objeto: Mensaje de respuesta

 

Figura 7.8: Mensaje de respuesta

 

 

Nombre de objeto: UMLReplyMessage

Hereda de

Relation

Propiedades

- Nombre:

- Estereotipado:

Componentes

- name [simple]: Nombre de la relación.

- stereotypes [múltiple]: Estereotipos de la relación.

Restricciones

Sólo puede relacionarse entre dos líneas de vida.

Tabla 7.8: Características de mensaje de respuesta

 

7.10.              Objeto: Mensaje de borrado

 

Figura 7.9: Mensaje de borrado

 

Nombre de objeto: UMLDeleteMessage

Hereda de

Relation

Propiedades

- Nombre:

- Estereotipado:

Componentes

- name [simple]: Nombre de la relación.

- stereotypes [múltiple]: Estereotipos de la relación.

Restricciones

Sólo puede relacionarse entre dos líneas de vida.

Tabla 7.9: Características de mensaje de borrado

 

7.11.              Objeto: Mensaje de Creación

 

Figura 7.10: Mensaje de creación

 

Nombre de objeto: UMLCreateMessage

Hereda de

Relation

Propiedades

- Nombre: no

- Estereotipado: no

Componentes

No existen.

Restricciones

Sólo puede relacionarse entre dos líneas de vida.

Tabla 7.10: Características de mensaje de creación

 

 

Funciones específicas del objeto:

 

·         descendantCreateMessages( ) : Array  Devuelve un array que contiene todos los mensajes de creación posteriores a del objeto tratado, siempre que sus extremos sean coincidentes con los de éste.

 

7.12.              Objeto: Mensaje de Destrucción

 

Figura 7.11: Mensaje de Destrucción

 

 

Nombre de objeto: UMLDestroyMessage

Hereda de

Relation

Propiedades

- Nombre: no

- Estereotipado: no

Componentes

No existen

Restricciones

Sólo puede relacionarse entre dos líneas de vida.

Tabla 7.11: Características de mensaje de destrucción

 

 


 


 

 

 

 

Capítulo 8


 

8.     DIAGRAMAS DE MÁQUINAS DE ESTADO

 

       En esta sección van a ser detallados los distintos objetos que pueden ser usados en la representación de los diagramas de máquinas de estado, conforme al estándar de UML2.

 

8.1.  Objeto: Diagrama de máquinas de estado

 

       Nombre del objeto: UMLStateMachineDiagram.

 

8.2.  Objeto: Estado inicial

 

Figura 8.1: Estado Inicial

 

Nombre de objeto: UMLInitialPseudostate

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

No existen.

Restricciones

No existen

Tabla 8.1: Características de estado Inicial

 

 

8.3.  Objeto: Estado final

Figura 8.2: Estado final

 

Nombre de objeto: UMLFinalState

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

No existen.

Restricciones

No existen

Tabla 8.2: Características de estado final

 

8.4.  Objeto: Pseudo-estado Terminar

Figura 8.3: Pseudo-estado Terminar

 

Nombre de objeto: UMLTerminate

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del nodo.

- stereotypes [múltiple]: Estereotipos del nodo.

Restricciones

No existen

Tabla 8.3: Características de pseudo-estado Terminar

 

8.5.  Objeto: Punto de entrada

 

Figura 8.4: Punto de entrada

 

Nombre de objeto: UMLEntryPoint

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del punto de entrada.

- stereotypes [múltiple]: Estereotipos del punto de entrada.

Restricciones

No existen

Tabla 8.4: Características de punto de entrada

 

8.6.  Objeto: Punto de salida

 

Figura 8.5: Punto de salida

 

Nombre de objeto: UMLExitPoint

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del punto de salida.

- stereotypes [múltiple]: Estereotipos del punto de salida.

Restricciones

No existen

Tabla 8.5: Características de punto de salida

 

8.7.  Objeto: Pseudo-estado de unión

Figura 8.6: Pseudo-estado de Unión

 

 

Nombre de objeto: UMLJunction

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del pseudostado.

- stereotypes [múltiple]: Estereotipos del pseudo-estado.

Restricciones

No existen

Tabla 8.6: Características de pseudo-estado de unión

 

8.8.  Objeto: Estado simple

Figura 8.7: Estado simple

 

Nombre de objeto: UMLSimpleState

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del estado simple.

- stereotypes [múltiple]: Estereotipos del estado simple.

Restricciones

No existen

Tabla 8.7: Características de estado simple

 

8.9.  Objeto: Estado compuesto

Figura 8.8: Estado compuesto

 

 

 

Nombre de objeto: UMLCompositeState

Hereda de

SuperNode

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

- name [simple]: Nombre del estado compuesto.

- stereotypes [múltiple]: Estereotipos del estado compuesto.

Restricciones

No existen

Tabla 8.8: Características de estado compuesto

 

 

Funciones específicas del objeto:

 

·         setHeightSmallRectangle( Number ) Establece la altura de la pestaña que se dibuja en la parte superior del nodo.

·         setWidthSmallRectangle( Number ) Establece la anchura de la pestaña que se dibuja en la parte superior del nodo.

·         setXmovement( Number ) Indica un desplazamiento en el eje x de la pestaña respecto al nodo.

 

8.10.              Objeto: Región vertical

Figura 8.9: Región vertical

 

Nombre de objeto: UMLVerticalRegion

Hereda de

SuperNode

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

Componentes para el supernodo:

- name [simple]: Nombre del elemento.

- stereotypes [múltiple]: Estereotipos del elemento.

Componentes para cada región del supernodo:

- name [simple]: Nombre de la región.

- stereotypes [múltiple]: Estereotipos de la región.

Restricciones

No existen

Tabla 8.9: Características de región vertical

 

8.11.              Objeto: Región horizontal

 

Figura 8.10: Región horizontal

 

Nombre de objeto: UMLHorizontalRegion

Hereda de

SuperNode

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

Componentes para el supernodo:

- name [simple]: Nombre del elemento.

- stereotypes [múltiple]: Estereotipos del elemento.

Componentes para cada región del supernodo:

- name [simple]: Nombre de la región.

- stereotypes [múltiple]: Estereotipos de la región.

Restricciones

No existen

Tabla 8.10: Características de región horizontal

 

8.12.              Objeto: Transición

 

Figura 8.11: Transición

 

Nombre de objeto: UMLTransition

Hereda de

Relation

Propiedades

- Nombre:

- Estereotipado:

Componentes

- name [simple]: Nombre de la transición.

- stereotypes [múltiple]: Estereotipos de la transición.

Restricciones

No existen

Tabla 8.11: Características de transición


 


 

 

 

 

Capítulo 9


 

9.     DIAGRAMAS DE ACTIVIDAD

 

       En este punto se va a proceder a enumerar los distintos elementos que pueden ser utilizados  dentro de un diagrama de actividad, los cuales cumplen el estándar de UML2.

 

9.1.  Objeto: Diagrama de actividad

 

       Nombre del objeto: UMLActivityDiagram.

 

9.2.  Objeto: Acción de aceptación de un evento

 

Figura 9.1: Acción de aceptación de un evento

 

Nombre de objeto: UMLAcceptEventAction

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre de la acción.

- stereotypes [múltiple]: Estereotipos de la acción.

Restricciones

No existen

Tabla 9.1: Características de acción de aceptación de un evento

 

9.3.  Objeto: Evento de tiempo

 

Figura 9.2: Evento de tiempo

 

Nombre de objeto: UMLTimeEvent

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del evento.

- stereotypes [múltiple]: Estereotipos del evento.

Restricciones

No existen

Tabla 9.2: Características de evento de tiempo

 

9.4.  Objeto: Acción de envío de señal

 

Figura 9.3: Acción de envío de señal

 

Nombre de objeto: UMLSendEvent

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre de la acción.

- stereotypes [múltiple]: Estereotipos de la acción.

Restricciones

No existen

Tabla 9.3: Características de acción de envío  de señal

 

9.5.  Objeto: Acción

 

Figura 9.4: Acción

 

Nombre de objeto: UMLAction

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre de la acción.

- stereotypes [múltiple]: Estereotipos de la acción.

Restricciones

No existen

Tabla 9.4: Características de acción

 

9.6.  Objeto: Nodo objeto

 

Figura 9.5: Nodo objeto

 

Nombre de objeto: UMLObject

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del objeto.

- stereotypes [múltiple]: Estereotipos del objeto.

Restricciones

No existen

Tabla 9.5: Características de objeto

 

 

 

 

 

9.7.  Objeto: Actividad

Figura 9.6: Actividad

 

 

Nombre de objeto: UMLActivity

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

- name [simple]: Nombre de la actividad.

- stereotypes [múltiple]: Estereotipos de la actividad.

Restricciones

No existen

Tabla 9.6: Características de actividad

 

9.8.  Objeto: Almacén de datos

 

Figura 9.7: Almacén de clave

 

Nombre de objeto: UMLDataStore

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del objeto.

- stereotypes [múltiple]: Estereotipos del objeto.

Restricciones

No existen

Tabla 9.7: Características de almacén de clave

 

9.9.  Objeto: Conector

Figura 9.8: Conector

 

Nombre de objeto: UMLConnectorActivity

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del conector.

- stereotypes [múltiple]: Estereotipos del conector.

Restricciones

No existen

Tabla 9.8: Características de conector

 

9.10.              Objeto: Partición horizontal

 

Figura 9.9: Partición horizontal

 

Nombre de objeto: UMLHorizontalSwimlane

Hereda de

SuperNode

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

Componentes para cada región:

- name [simple]: Nombre de la región.

- stereotypes [múltiple]: Estereotipos de la región.

Restricciones

No existen

Tabla 9.9: Características de partición horizontal

 

 

9.11.              Objeto: Partición vertical

 

Figura 9.10: Partición vertical

 

Nombre de objeto: UMLVerticalSwimlane

Hereda de

SuperNode

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

Componentes para cada región:

- name [simple]: Nombre de la región.

- stereotypes [múltiple]: Estereotipos de la región.

Restricciones

No existen

Tabla 9.10: Características de partición vertical

 

9.12.              Objeto: Partición jerárquica horizontal

Figura 9.11: Partición jerárquica horizontal

 

 

Nombre de objeto: UMLHorizontalHierarchicalSwimlane

Hereda de

SuperNode

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

Componentes para el supernodo:

- name [simple]: Nombre de la región.

- stereotypes [múltiple]: Estereotipos de la región.

Componentes para cada región:

- name [simple]: Nombre de la región.

- stereotypes [múltiple]: Estereotipos de la región.

Restricciones

No existen

Tabla 9.11: Características de partición jerárquica horizontal

 

9.13.              Objeto: Partición jerárquica vertical

 

Figura 9.12: Partición jerárquica vertical

 

Nombre de objeto: UMLVerticalHierarchicalSwimlane

Hereda de

SuperNode

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor:

Componentes

Componentes para el supernodo:

- name [simple]: Nombre de la región.

- stereotypes [múltiple]: Estereotipos de la región.

Componentes para cada región:

- name [simple]: Nombre de la región.

- stereotypes [múltiple]: Estereotipos de la región.

Restricciones

No existen

Tabla 9.12: Características de partición jerárquica vertical

 

 

 

9.14.              Objeto: Pin

 

Figura 9.13: Pin

 

Nombre de objeto: UMLPin

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del pin.

- stereotypes [múltiple]: Estereotipos del pin.

Restricciones

Su función depende de ser añadido a un elemento UMLAction.

Tabla 9.13: Características de pin

 

9.15.              Objeto: Nodo de expansión

Figura 9.14: Nodo de expansión

 

Nombre de objeto: UMLExpansionNode

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del nodo.

- stereotypes [múltiple]: Estereotipos del nodo.

Restricciones

Su función depende de ser añadido a un elemento UMLAction.

Tabla 9.14: Características de nodo de expansión

 

9.16.              Objeto: Nodo de parámetro

 

Figura 9.15: Nodo de parámetro

 

Nombre de objeto: UMLParameterNode

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del nodo.

- stereotypes [múltiple]: Estereotipos del nodo.

Restricciones

Su función depende de ser añadido a un elemento UMLActivity.

Tabla 9.15: Características de nodo de parámetro

 

9.17.              Objeto: Flujo de control

 

Figura 9.16: Flujo de control

 

Nombre de objeto: UMLFlow

Hereda de

Relation

Propiedades

- Nombre:

- Estereotipado:

Componentes

- name [simple]: Nombre de la relación.

- stereotypes [múltiple]: Estereotipos de la relación.

Restricciones

No existen

Tabla 9.16: Características de flujo de control

 

9.18.              Objeto: Manejador de excepciones

 

Figura 9.17: Manejador de excepciones

 

Nombre de objeto: UMLExceptionHandler

Hereda de

Node

Propiedades

- Nombre:

- Estereotipado:

Componentes

- name [simple]: Nombre de la relación.

- stereotypes [múltiple]: Estereotipos de la relación.

Restricciones

No existen

Tabla 9.17: Características de manejador de excepciones

 

9.19.              Objeto: Nodo de Decisión y Combinación

 

Figura 9.18: Nodo de Decisión y Combinación

 

Nombre de objeto: UMLDecision_MergeNode

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del nodo.

- stereotypes [múltiple]: Estereotipos del nodo.

Restricciones

No existen

Tabla 9.18: Características de nodo de decisión y combinación

 

9.20.              Objeto: Nodo de Bifurcación y Unión

 

Figura 9.19: Nodo de Bifurcación y Unión

 

Nombre de objeto: UMLFork_JoinNode

Hereda de

Node

Propiedades

- Redimensionable:

- Proporcional: no

- Contenedor: no

Componentes

No existen.

Restricciones

No existen.

Tabla 9.19: Características de bifurcación y unión

 

 

9.21.              Objeto: Nodo inicial

 

Figura 9.20: Nodo inicial

 

Nombre de objeto: UMLInitialNode

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

No existen.

Restricciones

No existen.

Tabla 9.20: Características de nodo inicial

 

9.22.              Objeto: Nodo final de  flujo

Figura 9.21: Nodo final de  flujo

 

Nombre de objeto: UMLFlowFinal

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del nodo.

- stereotypes [múltiple]: Estereotipos del nodo.

Restricciones

No existen

Tabla 9.21: Características de final de flujo

 

9.23.              Objeto: Nodo final de actividad

Figura 9.22: Nodo final de actividad

 

Nombre de objeto: UMLActivityFinal

Hereda de

Node

Propiedades

- Redimensionable: no

- Proporcional: no

- Contenedor: no

Componentes

No existen.

Restricciones

No existen

Tabla 9.22: Características de nodo final de actividad

 


 


 

 

 

 

Capítulo 10


 

10.   PERFILES UML 2

 

       En los siguientes apartados serán detalladas las características de los objetos disponibles para la definición de un perfil UML.

 

10.1.              Objeto: Perfil UML

 

       Nombre del objeto: UMLProfile.

 

10.2.              Objeto: Metaclase

 

Figura 10.1: Metaclase

 

 

Nombre de objeto: UMLMetaclass

Hereda de

Node

Propiedades

- Redimensionable: si

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre de la metaclase.

Restricciones

El nombre de la metaclase está restringido a una lista existente y no modificable por parte del usuario que se encuentra en la librería.

Tabla 10.1: Características de metaclase

 

 

Funciones específicas del objeto:

 

·         setValidMetaclass( Array ) Este método recibe un vector de pares de cadenas, donde el primer valor de cada par indica el nombre que el elemento recibe en la librería (p.ej. UMLClass, UMLMetaclass, etc.) y en el segundo valor se pasa la cadena que se mostrará en la aplicación. Por cada coincidencia existente entre el primer valor del par y las cadenas definidas en _validMetaclassLibrary, se indicará que el elemento coincidente podrá ser estereotipado por la aplicación.     

·         setDiagrams( Array ) Este método recibe un array de objetos de tipo Diagram de los que se guarda una referencia, utilizada para propagar los cambios que se realicen en las metaclases.

 

10.3.              Objeto: Estereotipo

 

Figura 10.2: Estereotipo

 

Nombre de objeto: UMLStereotype

Hereda de

Node

Propiedades

- Redimensionable: si

- Proporcional: no

- Contenedor: no

Componentes

- name [simple]: Nombre del estereotipo.

- tagValues [multiple]: Tag values del estereotipo.

- path [simple]: Ruta absoluta de imagen asociada al estereotipo.

Restricciones

No existen.

Tabla 10.2: Características de estereotipo

 

10.4.              Objeto Extensión

 

Figura 10.3: Extensión

 

Nombre de objeto: UMLExtension

Hereda de

Relation

Propiedades

- Nombre: no

- Estereotipado: no

Componentes

No existen.

Restricciones

No se puede establecer una relación entre dos objetos del mismo tipo, es decir, siempre se debe relacionar un objeto estereotipo (UMLStereotype) con una metaclase (UMLMetaclass).

Tabla 10.3: Características de extensión

 


 


 

 

 

 

Capítulo 11


 

11.   MÓDULO GENÉRICO

 

 

       Existe un módulo para objetos genéricos, es decir, aquellos elementos que pueden ser usados por cualquier diagrama. En este capítulo se detallan los objetos definidos sobre cualquier tipo de diagrama.

 

11.1.              Nota

 

Figura 11.1: Nota

 

Nombre de objeto: UMLNote

Hereda de

Node

Propiedades

- Redimensionable: si

- Proporcional: no

- Contenedor: no

Componentes

- description [simple]: Contenido de la nota.

Restricciones

No existen.

Tabla 11.1: Características de Nota

 

11.2.              Línea simple

 

Figura 11.2: Línea simple

 

Nombre de objeto: UMLLine

Hereda de

Relation

Propiedades

- Nombre: no

- Multiplicidad: no

- Roles: no

- Estereotipado: no

Componentes

No existen.

Restricciones

No se definen

Tabla 11.2: Características de extensión

 

11.3.              Estereotipos

 

       Además de las propiedades comunes a todos los objetos finales, nótese que también se dispone de propiedades de estereotipado mediante el uso de perfiles UML. A continuación se presentan las funciones de interfaz que hacen posible el estereotipado de los distintos objetos finales de la librería, pero antes se debe puntualizar la nomenclatura utilizada en el ámbito de los estereotipos dentro de jsUML2.

 

§  Objeto estereotipo: representa al objeto final de la librería UMLStereotype presente en un perfil UML. Puede ser aplicado sobre un elemento estereotipable mediante las funciones applyStereotype() y notado en forma de imagen icónica mediante showStereotype. Los objetos estereotipo pueden contener propiedades en forma de valores etiquetados (tag values) que serán impuestos sobre aquellos elementos que los apliquen.

§  Etiqueta estereotipo: representa a un componente de tipo StereotypeItem y que puede ser añadido en cualquier objeto final, exista o no perfil UML que lo defina. Este componente es únicamente una etiqueta que contiene un texto nunca representable como imagen, y puede ser creado de varias formas:

 

·         El programador crea manualmente una etiqueta estereotipo mediante la función de interfaz addStereotype (sección 3.2.

·         La etiqueta estereotipo es creada dentro de un elemento final con la aplicación de un estereotipo como parte de la definición del elemento UML2. Dicha etiqueta estereotipo contendrá el nombre del objeto estereotipo como texto. 

 

       Una vez se ha hecho esta distinción, las funciones de interfaz son detalladas para el caso de los objetos estereotipo definidos en un perfil UML existente.

 

§  getStereotypeProperties( Element ) : Array Devuelve la lista de estereotipos que pueden ser aplicados al elemento pasado como parámetro.

§  setStereotypeProperties( Node, array): Establece todas las propiedades de estereotipado para un objeto final de tipo nodo (primer parámetro), así como el conjunto de objetos estereotipo que van a ser aplicados a dicho objeto (segundo parámetro). Cada uno de los objetos estereotipo incluidos en el objeto array es de tipo UMLStereotype (sección 10.3). Así este parámetro permite que el objeto pasado en el primer parámetro haga uso de las funciones de interfaz presentadas a continuación.

§  setStereotypesProfile( array ): Establece los objetos estereotipo que pueden ser aplicados a un objeto final.  El parámetro pasado a la función contiene dichos objetos estereotipo en un array.

§  applyStereotype( Stereotype ): Aplica el objeto estereotipo pasado como parámetro al objeto final, añadiendo tanto los tag values de dicho objeto estereotipo como nombre del estereotipo al objeto final.  

§  isDrawableStereotype(): Indica si el objeto final que ha llamado a esta función es un elemento que puede cambiar su representación gráfica haciendo uso de una imagen asociada a un objeto estereotipo.

§  showStereotype( Stereotype ): Representa gráficamente el objeto final haciendo uso de la imagen asociada al objeto estereotipo pasado como parámetro. Como requisito imprescindible a cumplir, el estereotipo debe haber sido aplicado a dicho objeto final anteriormente.

§  removeStereotype( Stereotype ):  Borra toda la información que contiene un objeto final sobre el objeto estereotipo pasado como parámetro. Entre la información a borrar se encuentran los tag values, la imagen y la etiqueta estereotipo asociados al objeto estereotipo. Para borrar esta información satisfactoriamente se tiene que cumplir que el objeto estereotipo haya sido previamente aplicado al objeto final.

§  showTagValuesDialog(): Muestra un cuadro de diálogo al usuario que contiene los distintos tag values del objeto final. Además, muestra el valor asociado a cada tag value y permite la modificación de dicho valor. Es una función orientada a la interfaz de usuario.

§  showApplyStereotypesDialog(): Muestra un cuadro de diálogo con los distintos objetos estereotipo que pueden ser aplicados a un objeto final y realiza las acciones necesarias para aplicar un objeto estereotipo elegido por el usuario a un objeto final. Es una función orientada a la interfaz de usuario.

§  showStereotypesDialog(): Muestra un cuadro de diálogo con todos los objetos estereotipo que han sido aplicados previamente a un objeto final, y realiza las acciones necesarias para que dicho objeto final sea representado gráficamente con la imagen que contiene un objeto estereotipo elegido por el usuario. Es una función orientada a la interfaz de usuario.

 

 


 


 

 

 

 

Capítulo 12


 

12.   CASO DE ESTUDIO: Editor UML simple

 

 

       En este capítulo se expondrá un ejemplo práctico de la librería, para lo que se hará uso de la aplicación de ejemplo creada en el desarrollo previo de ésta [11] y consistente en un editor ligero básico de UML2. Así, se detallarán las funciones principales que ofrece la librería, tanto si se trata de nuevas funcionalidades como de funcionalidades incorporadas con anterioridad a las que se haya hecho alguna mejora, especificando el código necesario para cada una de ellas. Sin embargo, no se expondrá todo el código de la aplicación, sino que únicamente nos centraremos en el código correspondiente a cada una de las funcionalidades explicadas, para obtener una visión más general y clara. Si en algún momento es necesario mirar la totalidad del código de la aplicación, recuerde que éste se encuentra disponible en el directorio /src/app.

       En este punto, es importante observar el carácter modular que presenta la librería y, por ello, se debe diseñar una aplicación que se comunique con la capa superior de jsUML2, tal y como se muestra en la Figura 12.1. De esta forma, la interacción entre la aplicación y la librería se lleva a cabo a través de la capa UDModules, capa superior de la librería que contiene las clases finales de UML2, pero nunca accediendo directamente al núcleo.

 

Figura 12.1: Esquema general aplicación

      

 

12.1.              Crear la estructura

 

       Esta funcionalidad ha sufrido pequeños cambios o mejoras respecto a las versiones iniciales de la librería, que deben ser comentados para entender el funcionamiento de otras funcionalidades nuevas a las que se ha dado soporte. Actualmente se considera la inclusión opcional de un parámetro para establecer el color con el que serán dibujados los elementos UML. Si en algún caso se prescinde de este parámetro, la librería tiene un color por defecto para el relleno de cada uno de los elementos UML. Como se verá en siguientes secciones, existe la posibilidad de cambiar dicho color posteriormente.

       Nótese que al tratarse de una aplicación que pretende usar varios diagramas simultáneamente, es necesario usar la estructura discutida a continuación. Sin embargo, en el caso de requerir únicamente un diagrama basta con el paso del indicador del elemento div como parámetro en la llamada al constructor de la clase, el cual se encargaría de crear toda la estructura necesaria.

       Situándonos en el caso de la aplicación de ejemplo, lo primero sería crear un elemento que contendrá el diagrama, para lo que se hace uso del elemento div de HTML, que contenga  los lienzos de dibujo. Utilizamos la clase ud_diagram_div que se encuentra definida dentro del fichero de clases de la librería y que nos ayudará a definir los estilos necesarios para su correcto funcionamiento.

 

var width = 800;

var height = 400;

var div = document.getElementById( divId );

div.setAttribute( 'class', 'ud_diagram_div' );

div.style.width = width + 'px';

div.style.height = height + 'px';

 

       A continuación creamos los elementos canvas y los añadimos como hijos del elemento div creado. En esta parte, es imprescindible utilizar la clase ud_diagram_canvas como estilo para los elementos porque dicho estilo incluye características imprescindibles para la correcta captura de los eventos de ratón. Para un mayor detalle se puede consultar el fichero de estilos de la librería.

 

var canvas = document.createElement('canvas');

canvas.setAttribute( 'class', 'ud_diagram_canvas' );

canvas.width = width;

canvas.height = height;

var mainContext = canvas.getContext('2d');

div.appendChild( canvas );

 

canvas = document.createElement('canvas');

canvas.setAttribute( 'class', 'ud_diagram_canvas' );;

canvas.width = this.width;

canvas.height = this.height;

canvas.onmousedown = function () { return false; }

var motionContext = canvas.getContext('2d');

 

       Teniendo toda la estructura creada correctamente procedemos a crear los diagramas que se necesiten y a inicializarlos con los elementos de la aplicación. Aquí es donde se encuentra la pequeña variación del código respecto a la versión inicial de la librería, con la inclusión del color con que serán dibujados los elementos UML de la aplicación.

 

var d1 = new UMLUseCaseDiagram({backgroundNodes: ‘#ff9900’});

d1.initialize( 0, div, mainContext, motionContext, width, height );

 

var d2 = new UMLClassDiagram({backgroundNodes: ‘#ff9900’});

d2.initialize( 1, div, mainContext, motionContext, width, height );

 

12.2.              Modificar el nombre del diagrama

 

       La librería ofrece la posibilidad de crear cajas de texto para la comunicación con el usuario final mediante la invocación a una clase específica para dicho fin, Dialog, cuya definición se puede encontrar en el núcleo principal de la librería.

       Una versión simplificada de su funcionamiento se presenta a continuación, teniendo en cuenta que d hace referencia al diagrama que quiere cambiar su nombre y that es el objeto que contiene la aplicación de ejemplo:

 

//Create a text box

var dialog = new Dialog({text: ‘Diagram name: ’, cancelable: true});

 

//Function that changes the name of the diagram

var fn = function(value){

   if( value == '' )

      value = 'Untitled';

            

      //Set the new name of the diagram

      d.setName( value );

 

      //Changes the name of the tags of the application

      that._changeTabName( index );    

                  d.draw();

};

 

//Show the text box in the web page

dialog.show(fn, d.getName());

 

       La Figura 12.2 nos muestra el comportamiento de la aplicación ante el código anterior, en la cual se puede ver el cuadro de diálogo. Nótese que en este documento se simplifican algunos pasos por legibilidad, por lo que se puede consultar el código de aplicación si fuera necesario.

 

Figura 12.2: Modificar nombre de diagrama

 

 

12.3.              Borrar un elemento de un diagrama

 

       El borrado de elementos previamente creados es una funcionalidad que puede hacer también uso de la clase Dialog. Para ello, consideremos que el código mostrado a continuación supone la previa captura de las coordenadas x e y del elemento a borrar.

 

var elem = diagram.getElementByPoint( x, y );

if(elem && elem instanceof Element){

   var text= 'Do you want to delete the object' + elem.getType() + '?';

 

   //Create the text box

   var dialog = new Dialog({text: text, cancelable: true});

 

   //Function that changes the name of the diagram

   var fn = function(){

      diagram.delElement( elem );

      diagram.draw();

   }

 

   //Show the text box in the web page

   dialog.show( fn );

}

 

       En la Figura 12.3, se presenta la aplicación con un cuadro de diálogo que permite al usuario confirmar la eliminación de un elemento.

 

      

Figura 12.3: Borrar elemento de un diagrama

 

12.4.              Cambiar de diagrama

 

Hay que tener un hecho en mente: los elementos de dibujo están bajo el control de la aplicación, por tanto es su responsabilidad el intercambio entre los diferentes diagramas. Si queremos pasar el control a un diagrama concreto lo haremos del siguiente modo:


d1.interaction(false);

//Se limpian los lienzos de dibujo

mainContext.clearRect( 0, 0, width, height );

motionContext.clearRect( 0, 0, width, height );

d2.draw();
d2.interaction( true );

 

Este código hace que el diagrama d1 quede en espera, se borre el objeto Canvas, el diagrama d2 es dibujado y los eventos de interacción pasan a estar controlado por el segundo diagrama.

 

12.5.              Generar imagen de un diagrama

 

Una vez un diagrama está siendo representado por la aplicación en el lienzo, se puede extraer la imagen representada de forma automática en formato de imagen PNG. Sólo es necesario ejecutar el siguiente código:


d1.stopEvents();
d1.draw();
var url = mainCanvas.toDataURL( 'image/png' );
window.open( url, '_blank' );

La llamada a la función stopEvents es útil para paralizar todas las acciones del usuario y que no se reflejen en la imagen que se está generando. La llamada a window.open simplemente muestra una ventana emergente con el resultado.

 

12.6.              Cambiar el color

 

       Esta funcionalidad permite elegir el color de relleno de todos los elementos UML que se dibujen en el canvas a partir de dicho momento.

Esta funcionalidad contiene una gran cantidad de código en la parte de la aplicación, pero puesto que nuestro objetivo no es otro que mostrar la funcionalidad ofrecida por la librería, y dar una idea generar de cómo añadir esta funcionalidad de una forma fácil y cómoda en nuestra aplicación externa, se ha visto la necesidad de omitir código innecesario. Así, en general, existen dos formas de seleccionar un color para el fondo de los elementos de un diagrama:

 

§  Cambio de color durante la creación de un diagrama:

 

var color = ‘#ff9900’;

var d1 = new UMLActivityDiagram({backgroundNodes: color});

 

§  Cambio de color posterior a la creación de un diagrama: En este caso suponemos que el diagrama se encuentra contenido en d1:

 

var color = ‘#ff9900’;

d1.setBackgroundNodes(color);

 

       También es necesario tener en cuenta que en el caso que nos ocupa, esto es, el de una aplicación con varios diagramas en edición simultánea, es necesario el cambio de color para cada uno de los diagramas de  forma individual. En la Figura 12.4, se presenta la segunda forma de seleccionar un color para los objetos de un diagrama concreto de la aplicación.

 

Figura 12.4: Cambiar color

 

12.7.              Desarrollo de un diagrama de secuencia en código

 

       Supongamos que deseamos crear desde código un diagrama de secuencia como el mostrado en la Figura 12.5. Un código que permite su creación sería el mostrado a continuación. Obsérvese que este código ha sido simplificado por motivos de legibilidad.

 

Figura 12.5: Diagrama de secuencia

 

       El primer paso a seguir es la creación del diagrama de secuencia en sí. Esto se consigue mediante la instanciación de un objeto de tipo UMLSequenceDiagram.

 

var sequenceDiagram = new UMLSequenceDiagram({id: 'sequenceDiagram', width: 1000, height: 580 });

 

       A continuación procedemos a la creación de los distintos elementos del diagrama: las líneas de vida, los bloques Alternative y Loop, y los distintos mensajes.

 

//Create lifelines

var client = new UMLLifeline({ x:100, y:70 });

var server = new UMLLifeline({ x:320, y:70 });

var userList = new UMLLifeline({ x:500, y:70 });

 

//Create the block Alternative

var alternative = new UMLAlternative({ x:40, y:290 });

//Create the block Loop

var loop = new UMLLoop({ x:180, y:120 });

 

//Create messages

var insert = new UMLSendMessage({ a: client, b: server, y: 110 });

var searchUser = new UMLSendMessage({ a: insert.getElementB(), b: userList, y: 150});

var foundUser = new UMLReplyMessage({ a: searchUser.getElementB(), b:insert.getElementB(), y: 180 });

var validatePassword = new UMLSendMessage({ a: insert.getElementB(), b:searchUser.getElementB(), y: 210 });

var replyValidate = new UMLReplyMessage({ a: searchUser.getElementB(), b:insert.getElementB(), y: 240 });

var permittedAccess = new UMLReplyMessage({ a: insert.getElementB(), b: client, y:310 });

var restrictedAccess = new UMLReplyMessage({ a: insert.getElementB(), b: client,y: 380 });

           

       Una vez han sido creados los distintos elementos, se especifican algunas de las propiedades de estos (p.ej., nombre, altura, anchura, etc.). Hay que tener en cuenta que una vez que han sido modificadas las propiedades de un elemento, este elemento debe notificar los cambios para que sus propiedades se hagan visibles de forma correcta en su representación gráfica. Esto se consigue mediante la llamada al método notifyChange().

 

//Properties of lifelines

client.setName(':Client');

client.notifyChange();

 

server.setName(':Server');

server.notifyChange();

 

userList.setName(':userList');

userList.notifyChange();

 

//Properties of the block Alternative

alternative.setWidth(400);

alternative.getNodeChilds()[0].setGuard('Validation\nOK');

alternative.getNodeChilds()[1].setGuard('else');

alternative.notifyChange();

      

//Properties of the block Loop

loop.setWidth(400);

loop.setHeight(150);

loop.setGuard('for-each username');

loop.notifyChange();

 

//Properties of the messages

insert.setName('1: Insert login y password');

insert.notifyChange();

 

searchUser.setName('2: search for user');

searchUser.notifyChange();

 

foundUser.setName('3: user found');

foundUser.notifyChange();

 

validatePassword.setName('4: validate user');

validatePassword.notifyChange();

 

replyValidate.setName('5: validation info');

replyValidate.notifyChange();

 

permittedAccess.setName('6: access granted');

permittedAccess.notifyChange();

 

 

restrictedAccess.setName('6: access restricted');

restrictedAccess.notifyChange();

 

       Cuando ya se han añadido las propiedades de los distintos elementos, se deben incluir dichos elementos en el diagrama previamente creado.

 

//Add nodes to the diagram

sequenceDiagram.addElement(client);

sequenceDiagram.addElement(server);

sequenceDiagram.addElement(userList);

sequenceDiagram.addElement(alternative);

sequenceDiagram.addElement(loop);

 

//Add messages to the diagram

sequenceDiagram.addElement(insert);

sequenceDiagram.addElement(searchUser);

sequenceDiagram.addElement(foundUser);

sequenceDiagram.addElement(validatePassword);

sequenceDiagram.addElement(replyValidate);

sequenceDiagram.addElement(permittedAccess);

sequenceDiagram.addElement(restrictedAccess);

 

       El diagrama dibuja todos los elementos que contiene.

 

sequenceDiagram.draw();

 

       Se permite la interacción con los distintos elementos del diagrama, con lo que se podrán mover estos elementos y modificar sus propiedades por parte del usuario del lienzo.

 

sequenceDiagram.interaction(true);

 

       Se puede activar la actualización de la altura del canvas en el que los elementos del diagrama son representados gráficamente. De esta forma, cuando un elemento sea movido por el canvas y alguna parte del elemento quede fuera de la región del canvas, la altura del canvas es modificada para que el elemento no sobresalga del canvas.

 

 sequenceDiagram.setUpdateHeightCanvas(true);

 

 

12.8.              Desarrollo de un diagrama de actividad mediante código fuente

 

       En este apartado se pretende mostrar los pasos requeridos para crear un diagrama de actividad mediante código fuente. La Figura 12.6 nos muestra el diagrama de actividad creado con la aplicación:

 

Figura 12.6: Diagrama de actividad

 

       Asociado a este diagrama se muestra el código que permite su creación, aunque obsérvese que existen algunas variaciones entre el código aquí mostrado y el utilizado por la aplicación de demostración. El motivo es poder ver distintos modos de acceso a las propiedades.

       Como primer paso se debe crear el diagrama de actividad que va a contener los distintos elementos. Esto se consigue creando una instancia de la clase UMLActivityDiagram.

 

var activityDiagram = new UMLActivityDiagram({id: 'activityDiagram', width: 1000, height: 580 });

 

       A continuación se crean los distintos elementos que va a contener el diagrama.

 

//Create the horizontal swimlane

var unhierarchicalSwimlane = new UMLHorizontalSwimlane({x:30, y:35});

      

// Create the nodes

var initialNode = new UMLInitialNode({ x:174, y:44 });

      

var activityFinal = new UMLActivityFinal({ x:780, y:183 });

      

var fork_joinNode0 = new UMLFork_JoinNode({ x:460, y:185 });

var fork_joinNode1 = new UMLFork_JoinNode({ x:610, y:101 });

      

var decision_mergeNode0 = new UMLDecision_MergeNode({ x:160, y:136 });

var decision_mergeNode1 = new UMLDecision_MergeNode({ x:635, y:115 });

      

var receiveOrder = new UMLAction({ x:125, y:78 });

var fillOrder = new UMLAction({ x:225, y:190 });

var shipOrder = new UMLAction({ x:485, y:103 });

var closeOrder = new UMLAction({ x:740, y:115 });

var sendInvoice = new UMLAction({ x:155, y:349 });

var acceptPayment = new UMLAction({ x:540, y:352 });

var makePayment = new UMLAction({ x:345, y:485 });

            

//Create the relations

var flow0 = new UMLFlow({a:initialNode, b: receiveOrder });

var flow1 = new UMLFlow({a:receiveOrder, b: decision_mergeNode0 });

var flow2 = new UMLFlow({a:decision_mergeNode0, b: fillOrder });

var flow3 = new UMLFlow({a:decision_mergeNode0, b: decision_mergeNode1 });

var flow4 = new UMLFlow({a:fillOrder, b: fork_joinNode0 });

var flow5 = new UMLFlow({a:fork_joinNode0, b: shipOrder });

var flow6 = new UMLFlow({a:fork_joinNode0, b: sendInvoice });

var flow7 = new UMLFlow({a:sendInvoice, b: makePayment });

var flow8 = new UMLFlow({a:makePayment, b: acceptPayment });

var flow9 = new UMLFlow({a:shipOrder, b: fork_joinNode1 });

var flow10 = new UMLFlow({a:acceptPayment, b: fork_joinNode1 });

var flow11 = new UMLFlow({a:fork_joinNode1, b: decision_mergeNode1 });

var flow12 = new UMLFlow({a: decision_mergeNode1, b:closeOrder });

var flow13 = new UMLFlow({a: closeOrder, b:activityFinal });

 

       Ahora, se deben añadir las propiedades de los distintos elementos que han sido previamente creados. De nuevo, se ha de tener en cuenta la llamada al método notifyChange para notificar los cambios.

 

//Properties of the unhierarchical swimlane

//Set the height and name of the first swimlane

unhierarchicalSwimlane.getNodeChilds()[0].setHeight(220);

unhierarchicalSwimlane.getNodeChilds()[0].getComponents()[1].setText('Order Dept.');         

//Set the height and name of the second swimlane

unhierarchicalSwimlane.getNodeChilds()[1].setHeight(216);

unhierarchicalSwimlane.getNodeChilds()[1].setName('Accountability Dept.');

//Create the third swimlane

unhierarchicalSwimlane.addRegion(new Swimlane({parent:unhierarchicalSwimlane}));

unhierarchicalSwimlane.getNodeChilds()[2].setName('Customer');                  

//Set properties of the horizontal swimlane

unhierarchicalSwimlane.setWidth(807);

unhierarchicalSwimlane.setHeight(520);

unhierarchicalSwimlane.notifyChange();

 

//Properties of the rest of elements

fork_joinNode0.setQuadrant(2);

fork_joinNode0.setHeight(61);

 

fork_joinNode1.setQuadrant(2);

fork_joinNode1.setHeight(61);

 

receiveOrder.setHeight(25);

receiveOrder.setName(‘Completar pedido’);

receiveOrder.notifyChange();

 

fillOrder.setHeight(25);

fillOrder.setName(‘Completar pedido’);

fillOrder.notifyChange();

 

shipOrder.setHeight(25);

shipOrder.setName(‘Enviar pedido’);

shipOrder.notifyChange();

 

closeOrder.setHeight(25);

closeOrder.setName(‘Cerrar pedido’);

closeOrder.notifyChange();

 

sendInvoice.setHeight(25);

sendInvoice.setName(‘Enviar factura’);

sendInvoice.notifyChange();

 

acceptPayment.setHeight(25);

acceptPayment.setName(‘Aceptar pago’);

acceptPayment.notifyChange();

 

makePayment.setHeight(25);

makePayment.setName(‘Hacer pago’);

makePayment.notifyChange();

 

       Una vez que han sido creados los distintos elementos y han sido añadidas sus propiedades, todos ellos deben ser añadidos al diagrama.

 

//Add nodes to the diagram

activityDiagram.addElement(unhierarchicalSwimlane);

activityDiagram.addElement(initialNode);

activityDiagram.addElement(activityFinal);

activityDiagram.addElement(fork_joinNode0);

activityDiagram.addElement(fork_joinNode1);

activityDiagram.addElement(decision_mergeNode0);

activityDiagram.addElement(decision_mergeNode1);

activityDiagram.addElement(receiveOrder);

activityDiagram.addElement(fillOrder);

activityDiagram.addElement(shipOrder);

activityDiagram.addElement(closeOrder);

activityDiagram.addElement(sendInvoice);

activityDiagram.addElement(acceptPayment);

activityDiagram.addElement(makePayment);

 

//Add messages to the diagram

activityDiagram.addElement(flow0);

activityDiagram.addElement(flow1);

activityDiagram.addElement(flow2);

activityDiagram.addElement(flow3);

activityDiagram.addElement(flow4);

activityDiagram.addElement(flow5);

activityDiagram.addElement(flow6);

activityDiagram.addElement(flow7);

activityDiagram.addElement(flow8);

activityDiagram.addElement(flow9);

activityDiagram.addElement(flow10);

activityDiagram.addElement(flow11);

activityDiagram.addElement(flow12);

activityDiagram.addElement(flow13);

 

       Se representan gráficamente los elementos en el diagrama.

 

activityDiagram.draw();

 

       Se permite la interacción/edición por parte del usuario con los distintos elementos del diagrama de modo que éstos puedan ser movidos y el valor de sus propiedades pueda ser alterado.

 

activityDiagram.interaction(true);

 

       Como en el apartado anterior, se activa la redimensión del canvas del diagrama para que cuando un elemento sea movido y éste sobresalga del lienzo, la altura del canvas sea redimensionada para que el elemento sea contenido por completo dentro de éste.

 

activityDiagram.setUpdateHeightCanvas(true);

 

12.9.              Desarrollo de un diagrama de máquinas de estado mediante código fuente

 

       En esta sección se desarrolla en código el diagrama de máquinas de estado mostrado en la Figura 12.7.

 

Figura 12.7: Diagrama de máquinas de estado

 

       En primer lugar, se crea una instancia de la clase UMLStateMachineDiagram.

 

var stateMachineDiagram = new UMLStateMachineDiagram({id: stateMachineDiagram', width: 1000, height: 580 });

 

A continuación, creamos los elementos que podemos ver en la Figura 12.7, comenzando por el estado compuesto ‘compositeStateWasher’.

           

//Create the composite state, so such the initial and final state

var compositeStateWasher = new UMLHorizontalRegion({ x:50, y:120 });

var initialPseudostate = new UMLInitialPseudostate({ x:5, y:200 });

var finalState = new UMLFinalState({ x:405, y:280 });

//Create a simple state for the failure of the washing process

var simpleStateFailure = new UMLSimpleState({ x:140, y:330 });           

 

//Create another simple state in case the washing process is complete

var simpleStateFullProcess = new UMLSimpleState({ x:365, y:200 });

 

//Nodes related with the washing phase

var initialPseudostateWashing = new UMLInitialPseudostate({ x:80, y:180 });

var simpleStateWashing = new UMLSimpleState({ x:140, y:170 });

var finalStateWashing = new UMLFinalState({ x:270, y:180 });

 

//Nodes related with the rinsing phase

var initialPseudostateRinsing = new UMLInitialPseudostate({ x:80, y:230 });

var simpleStateRinsing = new UMLSimpleState({ x:140, y:220 });

var finalStateRinsing = new UMLFinalState({ x:270, y:230 });

 

//Nodes related with the spinning phase

var initialPseudostateSpinning = new UMLInitialPseudostate({ x:80, y:270 });

var simpleStateSpinning = new UMLSimpleState({ x:140, y:260 });

var finalStateSpinning = new UMLFinalState({ x:270, y:270 });

            

//Create transitions that relate the nodes

var transition1 = new UMLTransition({ a:initialPseudostateWashing,   b:simpleStateWashing });

var transition2 = new UMLTransition({ a:simpleStateWashing,   b:finalStateWashing });

var transition3 = new UMLTransition({ a:initialPseudostateRinsing,   b:simpleStateRinsing });

var transition4 = new UMLTransition({ a:simpleStateRinsing,   b:finalStateRinsing });

var transition5 = new UMLTransition({ a:initialPseudostateSpinning,   b:simpleStateSpinning });

var transition6 = new UMLTransition({ a:simpleStateSpinning,  b:finalStateSpinning });

var transition7 = new UMLTransition({ a:initialPseudostate,   b:compositeStateWasher });

var transition8 = new UMLTransition({ a:compositeStateWasher,  b: simpleStateFullProcess });

var transition9 = new UMLTransition({ a:simpleStateSpinning,  b:simpleStateFailure });

var transition10 = new UMLTransition({ a: simpleStateFullProcess, b:finalState});

var transition11 = new UMLTransition({ a: simpleStateFailure,  b: finalState});

 

Después de haber creado los elementos se modifican sus propiedades.

 

//Modify the width of the composite state

compositeStateWasher.setWidth(280);

 

//Create a new region

compositeStateWasher.addRegion(new Region({parent:compositeStateWasher}));

compositeStateWasher.notifyChange();

 

//Properties of the rest of elements

simpleStateFailure.setName(‘Proceso de lavado incompleto’);

simpleStateFailure.notifyChange();

 

simpleStateFullProcess.setName(‘Proceso de lavado completado’);

simpleStateFullProcess.notifyChange();

 

simpleStateWashing.setName(‘Lavado’);

simpleStateWashing.notifyChange();

 

simpleStateRinsing.setName( 'Aclarado' );

simpleStateRinsing.notifyChange();

 

simpleStateSpinning.setName( 'Secado' );

simpleStateSpinning.notifyChange();

 

compositeStateWasher.setName( 'Proceso de lavado’);

compositeStateWasher.notifyChange();

 

       Una vez modificadas sus propiedades, los elementos son añadidos al diagrama creado anteriormente.

 

//Add all the elements

stateMachineDiagram.addElement(initialPseudostate);

stateMachineDiagram.addElement(finalState);

stateMachineDiagram.addElement(simpleStateFailure);

stateMachineDiagram.addElement(simpleStateFullProcess);

stateMachineDiagram.addElement(compositeStateWasher);

stateMachineDiagram.addElement(initialPseudostateWashing);

stateMachineDiagram.addElement(finalStateWashing);

stateMachineDiagram.addElement(initialPseudostateRinsing);

stateMachineDiagram.addElement(finalStateRinsing);

stateMachineDiagram.addElement(initialPseudostateSpinning);

stateMachineDiagram.addElement(finalStateSpinning);

stateMachineDiagram.addElement(simpleStateWashing);

stateMachineDiagram.addElement(simpleStateRinsing);

stateMachineDiagram.addElement(simpleStateSpinning);

 

//Adds all the transitions

stateMachineDiagram.addElement(transition1);         

stateMachineDiagram.addElement(transition2);         

stateMachineDiagram.addElement(transition3);         

stateMachineDiagram.addElement(transition4);         

stateMachineDiagram.addElement(transition5);         

stateMachineDiagram.addElement(transition6);                             

stateMachineDiagram.addElement(transition7);         

stateMachineDiagram.addElement(transition8);               

stateMachineDiagram.addElement(transition9);               

stateMachineDiagram.addElement(transition10);              

stateMachineDiagram.addElement(transition11); 

 

       Se dibuja los elementos en el elemento canvas del diagrama.

 

stateMachineDiagram.draw();

 

       Se activa la interacción con el usuario.

 

stateMachineDiagram.interaction(true);

 

      

12.10.         Definición de un perfil UML

 

       En este punto se muestra la posibilidad de definir un perfil UML como el mostrado en la Figura 12.8.

 

Figura 12.8: Perfil UML

 

       Para crear el perfil, se instancia un objeto de la clase UMLProfile.

 

var profile = new UMLProfile({id: 'profile', width: 1000, height: 580 });

 

       Tras haber creado el perfil, se crean los distintos elementos que éste contiene. Para este ejemplo se crea una metaclase, varios objetos estereotipo y las extensiones que asocian los estereotipos con su metaclase específica.

 

//Create the metaclass and all the stereotypes

var metaclassClass = new UMLMetaclass({ x:500, y:250 });

metaclassClass.setBackgroundColor('#ffffbb');

      

var vehicleStereotype = new UMLStereotype({x:350, y: 70});

var landVehicleStereotype = new UMLStereotype({ x:350, y:170 });

var airVehicleStereotype = new UMLStereotype({ x:350, y:270 });

var carStereotype = new UMLStereotype({ x:650, y:70 });

var truckStereotype = new UMLStereotype({ x:650, y:170 });

var planeStereotype = new UMLStereotype({ x:650, y:270 });

var helicopterStereotype = new UMLStereotype({ x:650, y:370 });

      

//Create the extensions

var extension1 = new UMLExtension({ a:vehicleStereotype, b:metaclassClass });

var extension2 = new UMLExtension({ a:landVehicleStereotype, b:metaclassClass });

var extension3 = new UMLExtension({ a:airVehicleStereotype, b:metaclassClass });

var extension4 = new UMLExtension({ a:carStereotype, b:metaclassClass });

var extension5 = new UMLExtension({ a:truckStereotype, b:metaclassClass });

var extension6 = new UMLExtension({ a:planeStereotype, b:metaclassClass });

var extension7 = new UMLExtension({ a:helicopterStereotype, b:metaclassClass });

 

       Una vez se han creado los distintos elementos, estos son añadidos al perfil, de forma que éste almacene la información sobre ellos. Obsérvese que en este ejemplo no se están considerando tag values.

 

//Add elements to the profile

profile.addElement(metaclassClass);

profile.addElement(vehicleStereotype);

profile.addElement(landVehicleStereotype);

profile.addElement(airVehicleStereotype);

profile.addElement(carStereotype);

profile.addElement(truckStereotype);

profile.addElement(planeStereotype);

profile.addElement(helicopterStereotype);

 

//Add extensions

profile.addElement(extension1);        

profile.addElement(extension2);        

profile.addElement(extension3);        

profile.addElement(extension4);        

profile.addElement(extension5);        

profile.addElement(extension6);        

profile.addElement(extension7);        

 

       Las siguientes líneas de código guardan la información sobre los objetos estereotipo que han sido usados en la definición del perfil en un array. Este array de estereotipos será utilizado posteriormente en la creación de cualquier elemento UML de la librería al que se quieran aplicar estos objetos estereotipo. De esta forma, un objeto final de la librería sólo podrá aplicar un objeto estereotipo si es contenido en dicho array. Nótese que, sin embargo, para la aplicación de etiquetas estereotipo sobre objetos no es necesario la creación de ningún perfil, ya que estos elementos actúan meramente como marcas de texto.

 

var stereotypes = [ vehicleStereotype, landVehicleStereotype,

airVehicleStereotype, carStereotype,

             truckStereotype, planeStereotype, helicopterStereotype];

 

       A continuación, se añaden las propiedades a los elementos del perfil.

 

       //Changes the name of the elements and notify change

       metaclassClass.setName('UMLClass');

       metaclassClass.notifyChange();

 

       vehicleStereotype.setName('Vehicle');

       vehicleStereotype.notifyChange();

 

       landVehicleStereotype.setName('Ground vehicle');

       landVehicleStereotype.notifyChange();

 

       airVehicleStereotype.setName('Air vehicle');

       airVehicleStereotype.notifyChange();

 

       carStereotype.setName('Car');

       carStereotype.notifyChange();

 

       truckStereotype.setName('Truck');

       truckStereotype.notifyChange();

 

       planeStereotype.setName('Airplane');

       planeStereotype.notifyChange();

 

       helicopterStereotype.setName('Helicopter');

       helicopterStereotype.notifyChange();

 

       //Draw the diagram and all their elements

       profile.draw();

 

       //Editable by the users

       profile.interaction(false);

 

       De la misma forma que se ha mostrado la imagen y código asociados al perfil UML, a continuación, la Figura 12.9 muestra un diagrama de clases en el que se aplica dicho perfil.

 

Figura 12.9: Aplicación de un perfil UML en un diagrama de clases

 

       En la imagen se puede observar que a la clase con nombre ‘Ferrari’ se le ha aplicado el estereotipo «coche», a la clase con nombre ‘Renault’ se le ha aplicado el estereotipo «camión», a la clase con nombre ‘Airbus’ se le ha aplicado el estereotipo «avión» y a la clase con nombre ‘EC155 B1’ se le ha aplicado el estereotipo «helicóptero». Se ha de tener en cuenta que para la aplicación de este perfil a cada una de las clases que componen el diagrama se habrían tenido que seguir los siguientes pasos si se estuviese haciendo uso de la aplicación editora:

§  Se accede al menú contextual de la clase.

§  Se selecciona la opción Apply Stereotype. Tras haber pulsado esta opción, aparece un cuadro de diálogo que muestra los distintos objetos estereotipo que pueden ser aplicados a la clase.

 

       Una vez que un objeto estereotipo ha sido aplicado a una clase, ésta puede dibujarse gráficamente mediante la representación por defecto asociada a la metaclase, tal y como se muestra en la Figura 12.10, o mostrar la imagen asociada al objeto estereotipo que ha sido aplicado. Para ello, se deben seguir los siguientes pasos:

§  Se accede al menú contextual de la clase.

§  Se selecciona la opción Show Stereotype. Tras haber pulsado esta opción, aparece un cuadro de diálogo que nos muestra los objetos estereotipo que han sido aplicados a dicha clase anteriormente. Al elegir uno de ellos, la clase es representada con la imagen asociada a dicho estereotipo.

 

Figura 12.10: Uso de imágenes de un estereotipo en un diagrama de clases

           

       Una vez ha sido mostrado el diagrama de clases haciendo uso del perfil, se presenta el código asociado a este diagrama. En primer lugar, se crea el diagrama de clases realizando una instancia de la clase UMLClassDiagram.

 

       var classDiagram = new UMLClassDiagram({id: 'classDiagram', width: 1000, height: 580 });

 

       A continuación se crean las clases que van a formar parte del diagrama, así como las generalizaciones que van a relacionar las clases entre sí. En este punto se ha hecho uso del array de estereotipos stereotypes creado en el código del perfil UML. Mediante el paso como parámetro de este array al constructor de la clase UMLClass, el objeto creado con dicho constructor mantiene información sobre los objetos estereotipo definidos en el perfil y, de esta forma, podrá aplicar estos objetos estereotipo en fases posteriores si es necesario.

 

       //Create the classes

       var vehicleClass = new UMLClass({ x:500, y:50, stereotypes: stereotypes });

       var landVehicleClass = new UMLClass({ x:400, y:170, stereotypes: stereotypes });

       var airVehicleClass = new UMLClass({ x:600, y:170, stereotypes: stereotypes });

       var carClass = new UMLClass({ x:350, y:270, stereotypes: stereotypes });

       var truckClass = new UMLClass({ x:450, y:270, stereotypes: stereotypes });

       var planeClass = new UMLClass({ x:550, y:270, stereotypes: stereotypes });

       var helicopterClass = new UMLClass({ x:650, y:270, stereotypes: stereotypes });

            

       //Create the generalizations

       var generalization1 = new UMLGeneralization({ b:vehicleClass, a:landVehicleClass });

       var generalization2 = new UMLGeneralization({ b:vehicleClass, a:airVehicleClass });

       var generalization3 = new UMLGeneralization({ a:carClass, b:landVehicleClass });

       var generalization4 = new UMLGeneralization({ a:truckClass, b:landVehicleClass });

       var generalization5 = new UMLGeneralization({ a:planeClass, b:airVehicleClass });

       var generalization6 = new UMLGeneralization({ a:helicopterClass, b:airVehicleClass });

 

       Se añaden los elementos al diagrama:

 

       //Add the classes

       classDiagram.addElement(vehicleClass);

       classDiagram.addElement(landVehicleClass);

       classDiagram.addElement(airVehicleClass);

       classDiagram.addElement(carClass);

       classDiagram.addElement(truckClass);

       classDiagram.addElement(planeClass);

       classDiagram.addElement(helicopterClass);

 

       //Add the generalizations

       classDiagram.addElement(generalization1);            

       classDiagram.addElement(generalization2);            

       classDiagram.addElement(generalization3);            

       classDiagram.addElement(generalization4);            

       classDiagram.addElement(generalization5);            

       classDiagram.addElement(generalization6);            

 

       Se añade el nombre a cada una de las clases y se notifican los cambios en cada una de ellas.

 

       metaclassClass.setName('UMLClass');

       metaclassClass.notifyChange();

 

       vehicleStereotype.setName('Vehicle');

       vehicleStereotype.notifyChange();

 

       landVehicleStereotype.setName('Ground vehicle');

       landVehicleStereotype.notifyChange();

 

       airVehicleStereotype.setName('Air vehicle');

       airVehicleStereotype.notifyChange();

 

       carStereotype.setName('Car');

       carStereotype.notifyChange();

 

       truckStereotype.setName('Truck');

       truckStereotype.notifyChange();

 

       planeStereotype.setName('Airplane');

       planeStereotype.notifyChange();

 

       helicopterStereotype.setName('Helicopter');

       helicopterStereotype.notifyChange();

 

       Ahora se aplican los estereotipos a las distintas clases (método applyStereotype) y, posteriormente, las figuras asociadas a dichos estereotipos son usadas para la representación gráfica de estas clases (método showStereotype).

 

       getStereotypeProperties(carClass).applyStereotype(carStereotype);

       getStereotypeProperties(carClass).showStereotype(carStereotype);

 

       getStereotypeProperties(truckClass).applyStereotype(truckStereotype);

       getStereotypeProperties(truckClass).showStereotype(truckStereotype);

      

getStereotypeProperties(planeClass).applyStereotype(planeStereotype);

       getStereotypeProperties(planeClass).showStereotype(planeStereotype);

                                                                                               getStereotypeProperties(helicopterClass).applyStereotype(helicopterStereotype); getStereotypeProperties(helicopterClass).showStereotype(helicopterStereotype);

 

       Finalmente se representan gráficamente todos los elementos dentro del diagrama, se permite la interacción del usuario con los distintos elementos del diagrama y se activa la actualización dinámica de la altura del canvas.

 

       classDiagram.draw();

       classDiagram.interaction(true);

 

       //Update dynamically the canvas height

       classDiagram.setUpdateHeightCanvas(true);

 

 

12.11.         Definición de un perfil UML sin representación gráfica

 

       Esta sección muestra cómo definir un perfil UML, pero cargándolo de forma invisible, es decir, su representación gráfica no la muestra explícita al usuario en forma de diagrama. Obsérvese que aunque un perfil no sea representado gráficamente, éste puede ser utilizado por otros diagramas del mismo modo que en la sección anterior. De esta forma, podemos mostrar al usuario del lienzo diagramas particularizados a un dominio concreto de aplicación.

       Para crear el perfil, se instancia un objeto de la clase UMLProfile, la cual está contenida en la librería.

 

       var profile = new UMLProfile({id: 'profile', width: 1000, height: 580 });

 

       En este campo, sin embargo, procedemos a establecer el perfil como invisible haciendo uso de una función específica para dicho propósito.

        

       profile.setVisibility( false );

 

       Tras haber creado el perfil, se crean las metaclases, los estereotipos y las extensiones que los relacionan.

 

       //Create the metaclass and stereotypes

       var metaclassClass = new UMLMetaclass({ x:500, y:250 });

       metaclassClass.setBackgroundColor('#ffffbb');

       var vehicleStereotype = new UMLStereotype({x:350, y: 70});

       var landVehicleStereotype = new UMLStereotype({ x:350, y:170 });

       var airVehicleStereotype = new UMLStereotype({ x:350, y:270 });

       var carStereotype = new UMLStereotype({ x:650, y:70 });

       var truckStereotype = new UMLStereotype({ x:650, y:170 });

       var planeStereotype = new UMLStereotype({ x:650, y:270 });

       var helicopterStereotype = new UMLStereotype({ x:650, y:370 });

           

       //Create the extensions

       var extension1 = new UMLExtension({ a:vehicleStereotype, b:metaclassClass });

       var extension2 = new UMLExtension({ a:landVehicleStereotype, b:metaclassClass });

       var extension3 = new UMLExtension({ a:airVehicleStereotype, b:metaclassClass });

       var extension4 = new UMLExtension({ a:carStereotype, b:metaclassClass });

       var extension5 = new UMLExtension({ a:truckStereotype, b:metaclassClass });

       var extension6 = new UMLExtension({ a:planeStereotype, b:metaclassClass });

       var extension7 = new UMLExtension({ a:helicopterStereotype, b:metaclassClass });

 

       Una vez se han creado los distintos elementos, estos son añadidos al perfil, de forma que éste almacene información sobre ellos.

 

       //Add the elements to the diagram

       profile.addElement(metaclassClass);

       profile.addElement(vehicleStereotype);

       profile.addElement(landVehicleStereotype);

       profile.addElement(airVehicleStereotype);

       profile.addElement(carStereotype);

       profile.addElement(truckStereotype);

       profile.addElement(planeStereotype);

       profile.addElement(helicopterStereotype);

 

       //Add the extensions

       profile.addElement(extension1);        

       profile.addElement(extension2);        

       profile.addElement(extension3);        

       profile.addElement(extension4);        

       profile.addElement(extension5);        

       profile.addElement(extension6);         

       profile.addElement(extension7);        

 

       Como en el caso anterior, se crea el array que se usará posteriormente en la creación de cualquier elemento UML que quiera aplicar algún objeto estereotipo.

 

var stereotypes = [vehicleStereotype, landVehicleStereotype, airVehicleStereotype, carStereotype, truckStereotype, planeStereotype, helicopterStereotype];

 

       A continuación, se añaden las propiedades a los elementos del perfil.

 

       //Change the name of the elements and notify the changes

       metaclassClass.setName(‘UMLClass’);

       metaclassClass.notifyChange();

       vehicleStereotype.setName(‘CVehicle’);

       vehicleStereotype.notifyChange();

 

       landVehicleStereotype.setName(‘CGroundVehicle’);

       landVehicleStereotype.notifyChange();

 

       airVehicleStereotype.setName(‘CAirVehicle’);

       airVehicleStereotype.notifyChange();

 

       carStereotype.setName(‘CCar’);

       carStereotype.notifyChange();

 

       truckStereotype.setName(‘CTruck’);

       truckStereotype.notifyChange();

 

       planeStereotype.setName(‘CAirplane’);

       planeStereotype.notifyChange();

 

       helicopterStereotype.setName(‘CHelicopter’);

       helicopterStereotype.notifyChange();

 

       Ahora, la Figura 12.11 muestra un diagrama de clases en el que se ha aplicado el perfil. Nótese que a diferencia de la Figura 12.10, en la siguiente figura el perfil no está visible en la aplicación de demostración.

 

Figura 12.11: Aplicación de un perfil UML no representado gráficamente en un diagrama de clases

 

 

12.12.          Exportación de un diagrama

 

Si se desea crear un método para exportar varios diagramas a la vez, se creará un nodo
XML donde se irán añadiendo los nodos XML generados por los diferentes diagramas. Esta acción se hace del siguiente modo:


var xml = (new DOMParser()).parseFromString( '<applicationtag/>', 'text/xml');

var app = xml.getElementsByTagName( 'applicationtag' )[0];

app.appendChild( d1.getXML( xml ) );

app.appendChild( d2.getXML( xml ) );

return ( XMLSerializer() ).serializeToString( xml );

 

La última línea del código es la encargada de transformar el objeto XML a una cadena para poder trabajar con ella. No será necesario si internamente se puede manipular ese objeto XML.

 

12.13.          Importación de un diagrama

 

       La importación de un texto en formato XML, suponiendo que xml denota al texto XML previamente exportado, se realizaría con el siguiente código:

 

var xmlnode = (new DOMParser()).parseFromString(xml,’text/xml’);

d1 = eval( 'new ' + xmlnode.nodeName + '()' );

d1.setXML( xmlnode, stereotypes );     

d1.initialize( 0, div, mainContext, motionContext, width, height );

       d1.draw();

 

       La variable xml es la cadena que contiene la información relativa al diagrama en formato XML. A partir de esta variable se debe crear un objeto XML de tipo DOMParser para que JavaScript permita el manejo de la información XML. Es importante tener cuidado con la ejecución de la función eval, puesto que tal y como se usa en el ejemplo puede ser peligroso: su uso debe controlarse como se hace en la implementación de la aplicación (por ejemplo, guardando un vector con los diagramas aceptados por la aplicación). Se aconseja al lector que revise el código de la aplicación para aprender un uso correcto de dicha función.

       A continuación se muestra el código correspondiente a la importación de un perfil UML. Este código presenta muchas semejanzas con el código:

 

       var xmlnode = (new DOMParser()).parseFromString(xml,’text/xml’);

profile = eval( 'new ' + xmlnode.nodeName + '()' );

 

       Al igual que en la importación de un diagrama, la importación de un perfil hace uso del método setXML. Sin embargo, la función recibe en este caso distintos parámetros, en concreto, sus dos últimos. Como segundo parámetro recibe el array donde la aplicación almacena los diagramas que gestiona y, como tercer parámetro, recibe un array bidimensional que relaciona el nombre dado a cada elemento final de la aplicación con el nombre dado a este elemento dentro de la librería. Para mayor comprensión de estos parámetros puede consultar el código integro de la aplicación.

 

       profile.setXML( xmlnode, diagrams, acceptedElementsUML );  

 

       La siguiente línea de código invoca un método del perfil UML previamente creado. Este método devuelve un array bidimensional formado por dos arrays unidimensionales que contienen, respectivamente, las metaclases y los objetos estereotipo del perfil.

 

var elements = profile.getElements();

 

       Una vez que se han obtenido tanto las metaclases como los objetos estereotipo, la aplicación guarda la información de estos para su posterior uso.

 

//The application stores the information about the metaclasses in the profile

for(k=0; k<elements[0].length;k++)

             metaclass.push(elements[0][k]);

 

//Application stores the information about the stereotypes in the profile

for(k=0; k<elements[1].length;k++)

             stereotypes.push(elements[1][k]);

 

//Initialize the profile structure

profile.initialize( 0, div, mainContext, motionContext, width, height );

 

//Draw the diagram and its elements

       profile.draw();

 

12.14.          Añadir un elemento al diagrama

 

La función de incluir elementos dentro del diagrama puede parecer trivial, pero si se desea que el elemento se introduzca mediante el click del usuario, la forma de hacerlo mediante Javascript puede complicarse. Para la aplicación se han diseñado dos funciones que se encargan de esta labor, una para elementos que requieran un único click y otra para los que requieran dos pulsaciones, como las relaciones.


var interaccionUnClick = function( funcion ) {

diagram.interaction( false );
var funcionCaptura = function( event ) {

var mousex = event.pageX - div.offsetLeft;
var mousey = event.pageY - div.offsetTop;
funcion( diagram, mousex, mousey );
div.onclick = false;
diagram.draw();
diagram.interaction( true );

}
div.onclick = funcionCaptura;
}

 

La función está generalizada para un diagrama llamado diagram y los elementos utilizados como div son los definidos en los apartados anteriores. Se ha simplificado, por lo que es importante ver la implementación dentro del código para comprender bien su funcionamiento. Véase el ejemplo acerca de cómo dicha función se asocia a un botón del siguiente modo:


button.onclick = function() {

function f( d, x, y ) {

d.addElement( new UMLActor() );
}

interaccionUnClick( f );

}

 

Existe otra función para crear elementos que requieran dos clicks, como las relaciones. Dicha función se denomina _interactionDoubleClick() y es un método de la clase Application. Puede consultarse en el código para más información.

 


 


 

 

 

 

Capítulo 13


 

13.   MANTENIMIENTO EVOLUTIVO

 

       El mantenimiento evolutivo proporciona al software la posibilidad de ampliar sus funciones ante nuevas necesidades del usuario. De hecho, la extensibilidad de la librería es un criterio de diseño. Este capítulo explica la estructura que debe tener un nuevo módulo, o bien los ya existentes que sean extendidos. Los módulos o diagramas se encuentran en el directorio /src/modules/. Allí se encuentra un directorio con el nombre de cada diagrama y sus correspondientes ficheros. Por ejemplo:

 

 /src/modules/sequence/

·         diagram.js - Contiene información sobre el diagrama de secuencia y los elementos que define.

·         objects.js - Contiene la definición de todos los elementos del diagrama y sus propiedades.

 

       Cada directorio de diagrama debe contener estos dos ficheros y opcionalmente otros, si se necesitan incluir clases que modifiquen o extiendan la funcionalidad de los elementos. Para el caso concreto de la definición de perfiles se ha mantenido la misma estructura.

 

13.1.              Fichero diagram.js

 

       A modo de ejemplo, observe una parte del código correspondiente al módulo del diagrama de secuencia, que se define en la capa de módulos de la librería. El resto son análogos.

 

var UMLSequenceDiagram = function( params )

{

 

       La siguiente línea de código crea un diagrama instanciando la clase base  Diagram, definida en el núcleo de la librería.

 

  var f = new Diagram ( params );

 

       Una vez ha sido creado el diagrama de secuencia a partir de la clase Diagram, se establecen sus propiedades, como su tipo, su nombre o el conjunto de elementos (nodos y relaciones) válidos en el diagrama.

 

  f.setType( 'UMLSequenceDiagram' );

  f.setName( 'Sequence diagram' );

 

  f.setValidElements( [ 'UMLNote', 'UMLLine', 'UMLCreate', 'UMLDestroy',

                       'UMLLifeline', 'UMLCallMessage', 'UMLSendMessage',

                                  'UMLDeleteMessage', 'UMLReplyMessage', 

          'UMLOption', 'UMLAlternative', 'UMLLoop',

          'UMLBreak', 'Region', 'TimeInterval']);

 

       Tras haber caracterizado al diagrama de secuencia, el objeto que contiene al diagrama de secuencia es devuelto para su uso por la aplicación externa.

 

  return f;

}

 

       Una vez que este elemento ha sido creado en el módulo correspondiente de la librería, podrá ser invocado por una aplicación externa desde la capa de aplicación. Para ello, basta con la siguiente línea de código:

 

var sequenceDiagram = new UMLSequenceDiagram ({id: ‘sequenceDiagram’, width: 1000, height: 580 });

 

       En la línea de código anterior, el parámetro id se refiere al identificador de un elemento div de HTML, en el cual se creará toda la estructura necesaria para la representación gráfica del diagrama. Por otro lado, los parámetros width y height hacen alusión a la anchura y altura con la que los elementos canvas serán creados, respectivamente.

 

13.2.              Fichero objects.js

 

      Continuando con el ejemplo anterior, en este apartado se incluye una parte del código correspondiente al diagrama de secuencia. En primer lugar se muestra el código correspondiente a la creación de un elemento que hace uso de la clase Node y, a continuación, se muestra el código de creación de un elemento que hace uso de la clase Relation.

 

       Por ejemplo, se crea una línea de vida en el módulo correspondiente de la librería.

 

var UMLLifeline = function( params ) {

       var params = params || {};

 

       La siguiente línea de código crea el elemento mediante la creación, en este caso, de una instancia de la clase Rectangular del núcleo de la librería, la cual hereda de la clase Node.

 

   var f = new Rectangular( params );

 

       A continuación se establecen todas las características del elemento, referidas al tipo, altura, propiedades de estereotipado, componentes y figuras de éste.

 

  f.setType( 'UMLLifeline' );

   f.setHeight( 250 );

 

  //Add properties of the stereotypes

  setStereotypeProperties(f,params.stereotypes || []);

 

   //Add the components and the figure to the element

  f.addComponent( new StereotypeTagList({ id: 'stereotypes', centered: true }) );

  f.addComponent( new TextBox({ id: 'name', centered: true, margin: 3 }) );

  f.addFigure( new LifelineFigure({ color: '#c6dbdc' }) );

 

       Además de las propiedades anteriores, se añaden las distintas opciones que tendrá el menú contextual del elemento.

 

      //Add items to the menu of the element

  f.setMenu([[function(){

             f.showColorDialog({that: f});

             f.removeContextualMenu();},'Style'],

               [function(){

             f._stereotypeProperties.showTagValuesDialog();

             f.removeContextualMenu();},'Tag value'],

               [function(){

             f._stereotypeProperties.showApplyStereotypesDialog();

             f.removeContextualMenu();},'Apply Stereotype'],

               [function(){

             f._stereotypeProperties.showStereotypesDialog();

             f.removeContextualMenu();},'Show Stereotype']  ]);

 

       Por último, el elemento es devuelto para que pueda ser utilizado por la capa superior:

 

  return f;

}

 

       Una vez que el elemento ha sido creado en la capa UDModules de la librería, éste puede ser utilizado por la capa de aplicación de la siguiente forma:

 

var element = UMLLifeline({ x: x, y: y, stereotypes: stereotypes});

 

       donde los parámetros x e y hacen referencia a las coordenadas x e y en as que se localizará el elemento dentro del diagrama y el parámetro stereotypes se refiere a un array con los objetos estereotipo que pueden ser aplicados al elemento.

      

       Por otra parte, para mostrar la definición de relaciones, las siguientes líneas de código muestran la creación de un mensaje de envío a partir de la clase Relation del núcleo de la librería.

 

     var UMLSendMessage = function( params ) {

 

       En primer lugar, se realiza la instanciación de la clase Relation, lo que crea un objeto de tipo Relation que es guardado en la variable f.

 

  var f = new Relation( params );

 

       Luego se establecen las propiedades particulares del elemento:

 

  f.setType( 'UMLSendMessage' );

 

  //Adds stereotype and name to the element

  f.addComponentStereotype(); 

  f.setComponentName();

 

  if(params.setElementXml){

  } else {

    f.setObjA( new TimeInterval() );

    f.setObjB( new TimeInterval() );

  }

 

       Las siguientes líneas de código establecen tanto el tipo de línea (sólida o discontinua) como la forma del fin de la línea (punta de flecha abierta o cerrada,…) que se va a utilizar en la representación gráfica de la relación.

 

  f.setLine( new SolidLine() );

  f.setEnd( new OpenTip() );

 

       En último lugar, el elemento es devuelto.

 

  return f;

     }

 

       Una vez que el elemento ha sido creado en la capa UDModules de la librería, éste puede ser utilizado por la capa de aplicación de la siguiente forma:

 

var message = UMLSendMessage({ a: elem1, b: elem2, y: y1});

 

       donde el parámetro a hace referencia al elemento A de la relación, b hace referencia al elemento B de la relación y el parámetro y se refiere a la coordenada y donde se sitúa la relación (recordamos que los mensajes sólo se definen en el eje Y).

 


 

Bibliografía

 

 

[1]  jsUML2 library [en línea]. Disponible en: http://code.google.com/p/jsuml2/

 

[2] Página oficial de UML2 [en línea]. Disponible en: http://www.uml.org   [última visita: 31 de Octubre de 2011]

 

[3] Página oficial de OMG [en línea]. Disponible en: http://www.omg.org/ [última visita: 29 de Octubre de 2011]

 

[4] Martín Vega-Leal Ordoñez. Proyecto Fin de Carrera ‘Librería gráfica para diagramado UML online’. Manual de Usuario. Escuela Politécnica Superior, Universidad de Córdoba. Enero de 2011, Córdoba.

 

[5] Página web de la aplicación Sprocketize [en línea]. Disponible en: http://getsprockets.org/ [última visita: 29 de Octubre de 2011]

 

[6] Guía de instalación del lenguaje Ruby [en línea]. Disponible en: http://www.ruby-lang.org/es/downloads [última visita: 29 de Octubre de 2011]

 

[7] Página web de la aplicación YUICompressor  [en línea]. Disponible en: http://developer.yahoo.com/yui/compressor/  [última visita: 29 de Octubre de 2011]

 

[8] Guía de instalación de la máquina virtual de Java [en línea]. Disponible en: http://www.java.com/es/download/ [última visita: 29 de Octubre de 2011]

 

[9] Página Oficial JSON (JavaScript Object Notation) [en línea]. Disponible en: http://www.json.org/  [última visita: 29 de Octubre de 2011]

 

[10] CSS (Cascading Style Sheets) [en línea]. Disponible en: http://www.w3.org/Style/CSS/   [última visita: 29 de Octubre de 2011]

 

[11]  jsUML2 editor  [en línea]. Disponible en: http://www.jrromero.net/tools/jsUML2/editor/index.html   

 

[12] XML (Extensible Markup Language) [en línea]. Disponible en: http://www.w3.org/XML/    [última visita: 29 de Octubre de 2011]