Visualització d'esquemes UML en HTML5

Un gran repte per l'educació i la recerca en Enginyeria de Requisits i Models Conceptuals (ER/MC) és la necessitat per més recerca empírica sobre l'ús pràctic de l'ER/MC, incloent-hi l'impacte pràctic de l'educació en MC.

L'objectiu d'aquest projecte és crear una eina JavaScript que permeti realitzar la visualització d'esquemes UML, utilitzant les noves característiques incloses al llenguatge HTML5. L'usuari pot interactuar dinàmicament amb l'esquema per tal de poder modificar-lo i adaptar-lo. Es permet la generació dels esquemes tan gràficament, afegint els elements des d'una interfície web, com textual mitjançant un llenguatge específic de modelat textual. Per a millorar la visualització s'implementa un algorisme d'auto-layout per al posicionament automàtic dels elements dins l'esquema.

El desenvolupament de qualsevol projecte d'enginyeria, des de la construcció d'un processador de textos a un software de comunicacions per a Internet, requereix tasques de modelat que permetin experimentar i visualitzar el sistema que es vol construir. Donat que aquestes fases són tan importants a l'hora de construir un sistema, una eina que faciliti aquest procés beneficiarà tant al resultat final, com al temps dedicat en la generació del mateix.

Un dels problemes que ens podem trobar durant aquest procés és no disposar d'una eina que s'ajusti a les nostres necessitats, i llavors estar obligats a instal·lar una eina específica que no cobreix tots els nostres requisits. Existeixen moltes eines CASE (Computer-aided software engineering) que proporcionen mètodes per a realitzar el modelat, però comparteixen diversos problemes:

• Tenen una important complexitat en el seu ús, són eines que comprenen més funcionalitats de les que són necessàries normalment, el que complica la seva utilitat.
• La interoperabilitat no està garantida. Això dificulta el traspàs d'informació d'un lloc a un altre, donat que inclús diferents versions d'una mateixa eina poden no ser compatibles.

Donat que la nostra eina està implementada mitjançant HTML5, els usuaris només necessiten un navegador web per a utilitzar-la, sense la necessitat d'instal·lar software addicional.

Característiques

• Interacció amb els elements UML: l'usuari pot interactuar de forma dinàmica amb aquests elements, gestionar el diagrama i navegar per aquest de forma senzilla. Les funcionalitats principals que inclou són:
  • Drag&drop: Per tal de facilitar la creació dels diagrames, l'usuari pot escollir un element i moure'l fins a la posició del diagrama on vulgui.
  • Selecció simple o múltiple: Poder seleccionar un element del diagrama per a poder interactuar amb ell. Per tal d'agilitzar el procés d'interacció amb l'eina és possible seleccionar un conjunt d'elements simultàniament per a poder interactuar amb ells de forma conjunta.
  • Canviar l'estil: Per tal d'obtenir una visualització més agradable, es permet configurar alguns paràmetres dels elements, com el seu color, per tal de poder definir diagrames més personalitzats.
• Algorisme d'auto-layout: s'utilitza un algorisme basat en lleis físiques de càlcul de forces. El diagrama és tractat com un sistema físic, on per cadascun dels elements es calculen les forces de repulsió i atracció per poder veure quant s'ha d'allunyar o apropar els uns dels altres, utilitzant les lleis de Hooke i Coulomb. Aquest procés es repeteix iterativament fins que el sistema arriba a un estat d'equilibri.
• Llenguatge de modelat textual: UML és un llenguatge de modelat gràfic, que permet representar a partir de diagrames els sistemes que es volen construir. Existeixen també els llenguatges de modelat textual. Aquests, com el seu nom indica, permeten definir sistemes de forma textual, amb una gramàtica pròpia estandarditzada. Existeix una relació directa i unívoca entre un sistema representat gràficament mitjançant UML, i un altre representat mitjançant un llenguatge textual. Per tant ambdós són equivalents, però en determinades circumstàncies és més ràpid modelar amb un llenguatge textual.