The UiaML sitemap view

Done with the preliminary phase, we can continue by modeling the UiaML sitemap view (SMV). This phase requires the following steps:

• Draw a sitemap (representation of a single application window) and name it

• Define the contentarea's that will cover you goals as specified on the semantic level

• Define the containers (pages) that will hold the contentarea's

• Define flow between your pages and additional contentarea's in as required to support you goals.

We'll exercise those steps by continuing our Drop Shop example.

We start by drawing a sitemap symbol , that represents the application window that holds our order site and will name it: “De Drop Shop”.

Next we determine the contentareas that will hold the information we want to provide. In our example case we will need at least contentareas for:

• the location and opening hours of the shop

• liquorice background information

• and a menu that will enable us to navigate the site.

We further add the required documentation belonging to the image above.

Next we will place the contentarea's into pages . Since the menu contentarea is required by each page, we duplicate it. For each page we need to define whether it is a homepage (there can only be one, indicated by a thick frame) and/or a landing page.

You might have noticed the menu consistently drawn on the left side. This is no problem, because the UiaML core is about the semantic design. The UiaML graphical design plugin will solve this issue.

Next we add the navigational links to the model. Each link starts within a contentarea and point toward a page. Of each different contentarea there is exactly one contentarea the defines the links. That contentarea has its contentarea identifier underlined. As you can see from the image below; the liquorice information contentarea has no links and the defining contentarea of the menu contentarea is the one within the homepage. The menu contentarea of the information page inherits the links from the menu contentarea of the homepage.

By inheriting the links the menu from the information page inherits a link from the menu contentarea toward the homepage. So instead of drawing the defining contentarea of menu within the homepage (see image above) we could have also chosen to draw it within the information page (see image below).

Adding the use cases

As you might have noticed: we skipped the contentareas / pages that will show the assortment and handle the order respectively the ones that express the “Order licquorice” use case.

For documentation purposes we want to model those contentareas / pages separately in order get the focus right and to avoid a crowded sitemap that might hold several use cases.

We start with an empty sitemap that has the same identifier than the sitemap we used above.

Next we add a contentarea that will show the licorice assortment and will allow us to order them by entering a quantity per product and providing the delivery address, email-address and comment field as stated in step 2 of the main scenario of the use case.

We further a contentarea that will give us an overview of the order (see step 4.2 of the use case). And finally one contentarea that will hold our e-mail message (see step 6 of the use case).

In order to support the alternative scenario of step 3 and 5 we'll add the menu contentarea to our model. And place the contentareas within page containers .

The last step to finish our sitemap is adding the links. First we will add a link from the assortment toward the OrderPage. But as step 4.1 of the use case states, the system will have to check whether the provided information is valid and in case it's not will navigate back toward the Productpage (see alternative scenario at 4.1 of the use case). To express this within the UiaML sitemap view we use the Choice element .

We will use the same trick to express a link from the order contentarea toward the Homepage.

We also adapt the SMV that shows the Homepage to get a consistent navigation model.

The last thing we'll need to take care of is to express that our email get send as soon as the link from the order contentarea toward the Homepage is fired.

We'll do this by using an associative link from the submit link toward the OrderMail page.

UiaML currently can not express that our OrderMail page is actually an e-mail. It might also be a file that will be written to our harddrive or a page that will be printed. That it will be an e-mail has to be expressed within your documentation.