Examples - Linkbook (Philoponella)

The following more complex example shows an adaptive rich internet application (RIA) of a social network, which allows users to manage interesting web addresses and related information, to find new interesting websites and chat with other users. The RIA observes the user behaviour and uses this information to adapt navigation and presentation aspects of the web application dynamically to the user's profile. RIA features like live validation, drag&drop and auto suggestions increases the usability of the application.

This example is divided in three parts:

  Description Models Application

 

Description

This web application can be characterized in three ways: The functionality Linkbook (Philoponella) offers to the users, the RIA features used in its presentation and the ways Philoponella adapts to the user.

Functionality

• Linkbook distinguishes two types of users: the anonymous visitors of the application and the registered user. Both user types have the ability to view all the information in the system except the private user data. Registered users have also the option to extend the database of the application with different, later described methods.
• Entries about Websites consist of a name, the address, the websites category, some descriptions in different languages, some preview images and a list of user comments.
• Categories can be nested within other categories.
• Registered users can manage interesting websites in their own list of favorites and other users in a list of friends.
• Entries can be searched by users of this application by selecting a category of websites or stating one or more keywords. Registered users can also limit the search results regarding theirs friendslist.
• Users can view the public part of other user's favorites and friends.
• Registered users can send other registered user's messages.

RIA Features

• Validation of inputs such as user names, email addresses or addresses of web pages
• The information list details can be switched off and perform an animated collapse
• The entries of the lists can be sorted into categories by using drag
• Preview images can be browsed in a separate window in their full size
• The user is presented a short list of  keywords matching the content of the search field

Adaptivity

• Sorting of different lists, like the search list or the list of matching keywords
• Highlighting individual list items to show their changes or activity
• Removing text passages that were written in a language the user isn't able to understand
• Adjusting the settings of the user interface to previous activities of the user

 

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.

Requirements Analysis

This Part of the example uses modelling elements that aren't yet included in the actual version of the UWE profile and will become part of it in the next version.

Web applications in UWE are modelled using the principle of separation of concerns, i.e. modelling content, navigation structure and presentation separately. But the more complex web applications should start with a requirements analysis.

Here all necessary operations are recorded in a use case diagram. This use cases can be distinguished into different types by specifying a stereotype, like use cases leading to a change in the database or others only presenting data to the user.

On the system side the adaptivity processes of a web application can be characterized.

If you need to have more details about a use case, there is the additional possibility to specify it by an activity diagram. As an example the activity of a use case is shown here. The other use cases are refined in the above available model.

Actions are used to represent the user's input, system functions and output presented to the user. In the last case the details of the presentation can be modelled in detail using stereotyped pins. They also allow to specify some RIA features during the requirement analysis.

Content and User Model

Based on this information the content model of this example is shown here, which in UWE is modelled with plain UML.

For a better overview the model of this example is divided into two packages. The first package named ContentModel contains classes used primarily for the database of the application, while the classes stored in the package UserModel are mainly used for the creation of a user model.

Navigation

The navigation in UWE is modelled by a set of classes connected by relationships and describes the hypertext structure of a web application.

The navigation in this example is divided into packages. The centre of each one is composed by a navigation class. Additionally each package contains the process classes accessible from this view. They model the various registration processes, the addition of new data and the management of the favorites, friends and news list.

Processes

The process structure is divided into three packages. The process classes here are the same as those already shown in the navigation diagram. Their associations however represent their relationships.

Processes used only as a part of another are associated with them using a composition. Also the generalization of processes can be expressed here.

Processes can be described in detail by activity diagrams, which are then referred to as process flow diagrams.

All process classes occurring in Philoponella are modelled in this way, but only one of them is listed as an example below. The other process flow diagrams can be viewed in the above accessible model.

Presentation

In UWE the presentation is modelled with specific stereotyped classes, while their compositions are shown by a nested representation of them.

Because the presentation model of Philoponella is fairly complex only one part of it is shown here. The classes representing the detail views of link information and users are left out.

 

The Application

Here you can download the actual version of the Linkbook: Philoponella v1.0