Examples - Address Book With Content Updates

The purpose of this system is to express the creation, extraction, deletion and modification 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.

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), an e-mail address and a picture. 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 the 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 displayed, together with two navigation mechanisms attached to the object (buttons, anchors). The user shall be able to use the navigation mechanisms attached to a specific object to invoke the update or delete operation on the object.

• If case of invoking the delete operation, and after its successful completion, the same page shall be accessed, which shall publish the list of objects, where the deleted object no longer appears. Upon operation failure, the application shall display a different page.
• In case of invoking the update operation, a new page will be displayed that contains an input form that shows the current attribute values of the selected object, and allows their modification. The activated operation modifies the existing object, based on the input values. After the successful execution, the modified object is displayed.

To create new contacts, the initial home page will also contain a button to create a new object, that will display a page with an input form to provide the values of the attributes of the object to be created.

• After successful execution, the newly created object is displayed.
• If the name of the contact already exists, or any other failure situation happens, the application will display a different page.

Creation and update operations can be cancelled while providing the input values of the object attributes, using the appropriate "cancel" button that will be available in the input form page.

Aspects of a RIA (Rich Internet Application):

• Address fields provide an auto completion function to provide possible completions e.g. for the city.
• The format of the E-Mail address will be checked.
• The search results and the functionality to create and update a contact are displayed on the lower part of the main page. (Error)messages overlay this area.

UWE models

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

UWE specifies Web applications following the separation of concerns, i.e. modelling content, navigation structure and presentation separately. Increasing functionality of the web application suggests to make a detailed elicitation of requirements.

Figure 1 shows the content model of the address book

Figure 2 shows the content model of the 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 2. 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. Navigation class AddressBook is identified as entry point of the Web application with the tagged value {isHome}. The content update, i.e. modification of contact data, deleting a contact or adding a new contact, is modelled with additional nodes in the navigation model - so-called process nodes, and integrated in the navigation flow by process links.

Figure 3. UWE navigation structure of a Address Book including content updates

The process model contains the set of worksflows describing the corresponding processes. A UML activity diagram is used to represent a process. A «user action» stereotype is used to indicate user interactions initiating a process or responding to explicit requirement of information.

Figure 4. UWE process structure model

Figure 5. UWE process model for deleting a contact in the Address Book

Figure 6. UWE process model for adding a contact in the Address Book

Figure 7. UWE process model for modifying a contact in the Address Book

Figure 8 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 8. UWE presentation model of a Address Book including search of contacts