Tutorial - Navigation Model

For a system of web-pages it would be nice to know how they are linked together. That means we need a diagram containing nodes and links.

But what is a node? Nodes are navigation units conected by links. Nodes can be shown on different pages or on the same page.

UWE gives them different stereotypes, but let's develop it using our example. The easiest way to get a Navigation Diagram is to do a Content to Navigation - Transformation. In this case we get a diagram that contains more nodes than needed. For nodes and links the stereotypes «navigationClass» and «navigationLink» are used:

Do we really want to model the navigation from the Contact to Address, Picture or Phone? - No, because this is not relevant for the navigation. Delete them in the containment tree.

AddressBook should be our homepage. That indicates the tagged value {isHome}.

Can you imagine an AddressBook website with all contact information on the same web page? - That is not what we want.

What we want is an application where you can access the operations from our Use Case Diagram. For this reason we need a homepage with connections to many different nodes:

1. ContactList - we want to reach each contact using a link from the homepage
2. (Contact)Search - search for a contact
3. ContactCreation - create a new contact and display it afterwards

In UWE, you can use a «menu», if you want to navigate to different classes. Insert one and name it "MainMenu":

1. We can insert the ContactList in almost the same manner. The stereotype «index» is used to list a number of objects of the same type.

Add the other two classes using the MagicUWE toolbar:
2. The class for the search should have a «query» stereotype. A search means to execute code, so we connect it with a «processLink» association.

3. ContactCreation is also a process, but no predefined one, therefore we use the «processClass» stereotype (and we will model the associated action later, too).

If a new contact was created, it seems to be useful to display it afterwards, and in case of searching for something, a ContactList with the results is expected to be shown. We also use a «processLink» stereotype for these leaving associations, but directed ones (to prohibit navigation back to e.g. the ContactCreation. This avoids that duplicates are accidentally created.)

stereotype-names and their icons
navigationClass	menu
index	query
guidedTour	processClass
externalNode

(In this tutorial only some aspects of the stereotypes are needed. Please have a look into the User Guide and Reference for the general usage of all UWE-stereotypes)

To complete our Navigation Model, we have to add the missing ContactDeletion and ContactUpdate functionality (again look at the Use Case Diagram). These two classes are both accessible from a concrete Contact, so we need a menu here, again (and we call it ContactMenu denoting that it is located on the webpage of each contact):

Next