Examples - Address Book With Searches

The purpose of this system is to express the extraction of object content from the domain objects and the selection of the attributes to publish, based on a parameter generated by the user’s interaction. This example expresses an elementary form of user’s interaction: the selection of one item from a set.

In this case the example is an address book of contacts. Each contact will contain a name, two phone numbers (main and alternative), two postal addresses (main and alternative), and one e-mail address. The page will publish the details of the contact(s) matching a filtering condition.

Design considerations and requirements

The system will offer an initial (home) page with an introductory text, and a filtering condition over the values of the possible attributes of the objects. The user shall provide input to a field and submit such input by using a navigation mechanism (submit button). The objects matching the condition will be published. For each object the set of its non-empty attributes values will be displayed.

Variant

As a variant to this example, the filtering condition contains an input form with two fields. The user shall provide input to the fields and submit such input by using a navigation mechanism (submit button). The application shall present a page with a list of objects so that the attributes of the objects satisfy some parametric logical condition including as terms the input parameters provided by the users (e.g., the condition may be: (attribute 1 = parameter1) OR (attribute2= parameter2)). The purpose of this second system is to express the explicit, non inferable, mapping between the user’s provided values and the parameters needed for extracting the domain objects.

UWE models

This example was modelled with UWE Profile - v1.9 defined in the Magic Draw 16.8 CASE tool and is available as mdzip and emf.

UWE specifies Web applications following the separation of concerns, i.e. modelling content, navigation structure and presentation separately.

Figure 1 shows the content model of the simple address book example, with the classes defined for AddressBook, Contact, Address and Phone. The content model is represented as a plain UML class diagram.

Figure 1. UWE content model of the running example

The hypertext structure is described using a navigation diagram, which consists of a set of nodes and links. UWE distinguishes among different types of nodes, such as navigation class, menu, index and query. Figure 2 shows the navigation model of the running example. It includes two navigation classes AddressBook and Contact. Address and Phone are not included as they are not relevant for the navigation. The user can select the contacts using a search based on an input field. The result of the search is either a list of contacts matching the query or a message indicating no results. (You can create a query to a "NoResults"-Page, but that's not necessary, because we only look at the important possibilities of navigation) Navigation class AddressBook is identified as entry point of the Web application with the tagged value {isHome}.

Figure 2. UWE navigation structure of a Address Book including search of contacts

Figure 3 shows the presentation model of the running example. UWE uses a class diagram for the representation of presentation models. The container form is selected in order to provide a more intuitive representation of pages. The address book page contains an Introduction, a search field. a button and a list of Contacts. For each contact the corresponding email, phones and addresses fields are displayed.

Figure 3. UWE presentation model of a Address Book including search of contacts