en fr ger es

Tutorial - Navigation Model (Español)

En un sistema para la web es útil saber como están enlazadas las páginas. Ello significa que necesitamos un diagrama conteniendo nodos (nodes) y enlaces (links).

Pero que es un nodo? Nodos son unidades de navegación y están conectados por medio de enlaces. Nodos pueden ser presentados en diferentes páginas o en una misma página.

UWE provee diferentes estereotipos, los que presentaremos mediante nuestro ejemplo. La forma más simple de obtener un Diagrama de Navegación básico es utilzando la Transformación Content to Navigation. En este caso obtenemos para nuestro ejemplo un diagrama que contiene más nodos de los necesarios. Para los nodos y enlaces son usados los estereotipos «navigationClass» and «navigationLink»:

Diagram after Content to Navigation Transformation

Queremos realmente modelar el enlace desde el contacto a la dirección o el teléfono? - No, porque no son relevantes para la navegación. Pues borremos ambos del árbol de contenido del modelo.

after deletion

AddressBook será nuestra página principal del sitio web. Lo cuál se indica con el tagged value {isHome}.

Es pensable un sitio web para una agenda de direcciones con la información de todos los contactos en la misma página web? - No es eso lo que queremos.

El objetivo es una aplicación en la cuál se puede acceder a las operaciones de nuestro diagrama de casos de uso. Por este motivo necesitamos un sitio que provee conexiones a diferentes nodos:


  1. ContactList - cada contacto debe ser alcanzable usando un enlace desde la página principal del sitio web
  2. (contact)Search - buscar un contacto
  3. ContactCreation - crear un nuevo contacto y visualizarlo

En UWE, puede usarse un «menu», para navegar a diferentes clases. Insertar uno y asignarle el nombre "MainMenu":

Menu inserted

1. Podemos insertar la lista de contactos (ContactList) casi del mismo modo. El estereotipo «index» es usado para listar una cantidad de objetos del mismo tipo.

Agrega las otras dos clases usando el panel de MagicUWE:
2. La clase para la búsqueda debe tener un estereotipo «query». Una búsqueda implica ejecución de código, por ello conectamos esta clase con una asociación «processLink» .

3. ContactCreation es también un proceso, pero no uno predefinido, por ello usamos el estereotipo «processClass» (modelaremos la acción asociada más adelante).

Si un nuevo contacto es creado, es útil visualizarlo luego, y en el caso de una búsqueda, se espera la visualización de un lista (ContactList) con los resultados. Usamos un estereotipo «processLink» para estas asociaciones salientes y dirigidas para prohibir la navegación hacia atrás como en el caso de ContactCreation. Esto evita la creación por error de duplicados.

classes and associations inserted
nombres de estereotipos y sus iconos
navigationClass clase de navegación menu menú
index índice query pregunta
guidedTour visita guiada processClass clase de proceso
externalNode nodo externo

(En este tutorial solamente algunos aspectos de los estereotipos de UWE son presentados. Por favor véase User Guide and Reference para el uso general de todos los estereotipos de UWE)

Para completar nuestro Mdelo de Navegación (Navigation Model), tenemos que agregar la funcionalidad faltante de borrar y actualizar contactos (ContactDeletion y ContactUpdate) (nuevamente véase diagrama de casos de uso). Estas dos clases son ambas accedidas desde el contacto concreto, por ello necesitamos nuevamente un menú ( y lo nombramos ContactMenu indicando que está ubicado en la página de cada contacto):

Navigation Diagram finished

Continuar  page