Mapping UML Web Navigation Stereotypes to XML Data Skeletons

Mapping UML Web Navigation Stereotypes to XML Data Skeletons Georg Sonneck, Renate Motschnig, and Thomas Mueck Institute of Computer Science and Business Informatics, University of Vienna, Austria Rathaustr. 19/9 A-1010 Vienna, Austria {sonneck,motschnig,mueck}@ifs.univie.ac.at http://www.ifs.univie.ac.at

Abstract. Everyone who already experienced “getting lost” in a web site will agree that navigation support within such sites is a crucial topic in any but the most trivial web-based system. Modeling navigation links as special associations between classes in the UML let us arrive at the conclusion that class diagrams tend to become overloaded with links such that they are no longer understandable and their function as visual aids gets lost. Aiming for more transparent high level navigation modeling within the UML, this paper investigates, in a first step, well-known web design languages for their approaches to the modeling of navigation. By comparing Araneus, OOHDM, and RMM, in a subsequent step, we derive navigation primitives that we suggest to incorporate into the UML as navigational stereotypes. In a final step for two of these stereotypes we propose a concrete implementation in XML. These XML skeletons encode navigation information in a device-independent manner. Thus, UML static structure diagrams, extended by the navigation stereotypes introduced in this paper, have the potential to serve as a full-fledged notation supporting navigation design in web-based systems.

1

Introduction

A particular strength of web-technology is its potential to complement information presented on one page by complementary information according to the situational information needs of the user or visitor. The basically very supportive features of providing rich options for exploring complementary information, however, tend to be compromised in the case that users loose their way in a jungle of links with little guidance on how to get back to the starting point or to some intermediate state of their search. From conducting web-development projects (for example UniKid [12]) we experienced that, in general, web-modeling using the UML has several benefits. This is primarily due to the fact that one standardized and consistent language can be used for both application- and web-design. Nevertheless, we clearly felt K. Bauknecht, A M. Tjoa, G. Quirchmayr (Eds.): EC-Web 2002, LNCS 2455, pp. 294–303, 2002. c Springer-Verlag Berlin Heidelberg 2002


Mapping UML Web Navigation Stereotypes to XML Data Skeletons

295

that UML, more precisely both pure UML [13] and UML with web-modeling extensions [5], are deficient in providing the proper constructs for navigation modeling and design. This observation caused us to turn to well-known hypertextand web-design languages in order to explore their means to support navigation with the goal of finding solutions that could be adapted for their use within UML. In particular, our course has been to investigate the Araneus project [2], RMM [3], and OOHDM [4] for issues of navigation design. As a result, we found a set of navigational design patterns that are capable of contributing to the solution of our problem in so far, as they provide general, higher level constructs for disciplined linking and corresponding navigation support. Hence, the major contributions of our work are the adaptation of the navigation support primitives, also called navigation patterns, found in the literature for their use with UML and to provide implementation near XML skeletons for these. Our strategy has been to employ UML’s extension mechanism of stereotypes in order to enrich UML with higher-level abstractions for navigation modeling. Additionally, for two navigation patterns a concrete implementation in XML is provided by using the XLink [15] and XSLT [16] recommendations of the W3C. The paper is organized as follows. In the next section we describe the navigation patters we found suitable for their inclusion into the UML and we introduce an example in order to make the subsequent discussion more concrete. Section three then picks index navigation as a representative primitive that is tracked through the various web-design languages we considered in this article. Section four, which is the central one, suggests high-level UML stereotypes to capture the individual navigational patterns and furthermore implements these patterns in XML. Section five discusses the results and points to issues of further research.

2

Survey on Navigation Patterns

In a recent paper by Garzotto et al. [1], several prototypical web navigation patterns are proposed. In the sequel, we give a brief textual overview together with a graphical representation (in Fig. 1) of two of these patterns. Starting with a simple hyperlink as the core building block for semantically advanced navigation patterns, a few common-sense graph structures can be identified in state of the art web presentations. Among these advanced patterns we will elaborate on two representatives, i.e., index navigation and guided tour. 2.1

Index Navigation

An index list included into an entry page is used to navigate to particular item pages in a once at a time style. Reverse links enable the web user to return to the entry page after viewing an item page thus providing for a random access pattern via the index list. The underlying link structure is shown in Fig. 1a.

296

2.2

G. Sonneck, R. Motschnig, and T. Mueck

Guided Tour

Again, starting at an entry page the user is provided with a predefined sequence of pages ending up at the entry page (“round trip”). The structure is shown in Fig. 1b. up entry page

• • •

link list

•

item page 1 • • •

•

item page n up

(a) Index navigation up entry page guided tour •

next

up item page 1 • •

next

up • item page 2 • •

•••

previous

• item page n •

previous

(b) Guided tour

Fig. 1. Navigation Patterns

2.3

Conceptual Model of the Example

Fig. 2 shows the UML static structure diagram, often referred to as class diagram, of our running example that we will use throughout to make the discussion more concrete. The example is a fragment of a model of a university institute consisting of 20 departments as captured in the inception phase of the Unified Process [14].

Department Institute name

1

name phone 20 location

Employee

1

name e-mail 1..n phone

Publication

1..n

title y ear 0..n k eywords

Fig. 2. System architecture

3

Comparison of Web Design Languages

This section aims to compare different approaches to navigation design, namely Araneus [2], RMM [3], OOHDM [4] and UML [17]. While Araneus views web application in tight connection with relational database design, RMM (Relationship Management Method) puts emphasis on separating three design issues, namely content, structure, and the user interface.

Mapping UML Web Navigation Stereotypes to XML Data Skeletons

297

OOHDM (Object-Oriented-Hypermedia-Design-Model), being a method for the development of complex hypermedia applications, focuses on individual developmental phases that are arranged to be followed incrementally and iteratively. In OOHDM, conceptual design precedes a separate phase referred to as navigational design whose notation is investigated in our context. For UML a navigation space model and a navigational structure model are proposed in [17], where new constructs representing navigational elements (e.g. a guided tour or an index navigation) are presented. A more complete comparison can be found in [11]. ARANEUS

Page of Employee

Page of Department

name

name

e-mail

phone

phone

location List of Employees

department navDep

name navEmployee

Fig. 3. Index Navigation in ARANEUS

Fig. 3 implements a link from Employee page to Department page and an index navigation from Department page to Employee page. The index navigation is represented by a list of names from employees on the Department page. The names of employees are used as anchors. A navigation to the specified employee is accomplished by clicking on this anchor. OOHDM

Department name: string phone: integer location: string navEmployee: anchor( index (Employee) ) Employee name: string e-mail: string phone: integer navDep: anchor( Employee )

Department

Employee

Fig. 4. Index navigation in OOHDM

In OOHDM the diagram of an index navigation is much simpler but it is consequently not so detailed as shown on the right side of Fig. 4. For example the structure of the anchor that will be placed on the Department page is not

298

G. Sonneck, R. Motschnig, and T. Mueck

specified. On the left side of Fig. 4 a corresponding textual description of the objects is presented that is once again more detailed. RMM

Department

Employee

Fig. 5. Index navigation in RMM

The notation used in RMM is particularly simple, as it is shown in Fig. 5. RMM implements an index navigation directly with a new graphical primitive. A specification of the anchor is possible by using M-slices (see [11] for an in depth description).

4

Mapping UML Navigation Specification to XML

In the introduction we have argued that modeling every navigational link between client pages as an association between the classes representing the respective pages leads to class diagrams that are crowded with associations and, in general, are no longer transparent. Therefore higher-level abstractions being capable of hiding some of the links are useful. As will be illustrated below, UML’s extension mechanism of stereotypes lends itself very well for introducing higher-level constructs for navigation specification. In this Section we propose to extend UML by stereotypes that model the navigational patterns reviewed in Section 2. For each pattern, one higher-level relationship stereotype will be introduced and subsequently transformed into XML skeletons. These skeletons use XLink and XSLT to utilize the standardized linking functionality. We present the stereotypes in the context of modeling the university department example introduced in Section 2.3. 4.1

Index Navigation

Fig. 6 shows a new notation for the index navigation pattern in UML. It is modeled as a stereotype called on an association relationship between the source - and the target client page. This unidirectional association represents the relationship between one instance of class Department to 1 to n associated instances of class Employee. The unidirectional association from Employee to Department which has the stereotype means that an instance of class Employee can navigate to its associated instance of class Department. The information presented on the client pages is specified as attributes of these pages. The attributes file name and tag name are class scope attributes because their value must be the same for all instances of the class. They are necessary to generate the XML-skeleton for this pattern.

Mapping UML Web Navigation Stereotypes to XML Data Skeletons

299

>

Employee id name e-mail file_name +1..n tag_name

Department id name phone file_name tag_name

Fig. 6. Index Navigation in UML new notation

Fig. 7. Request of a resource in Index Navigation

XML Skeleton for Index Navigation A static XML skeleton can be generated, that corresponds to the index navigation in Fig. 6. The links between resources are modelled using XLink [15]. Fig. 7 demonstrates how a user may request resources belonging to the index navigation of our example. For simplicity the DTDs of Department.xml and Employee.xml are omitted. A user requests the first department as shown in Fig. 7, step 1. Before transporting the request the linkbase engine works through linkbase.xml and subsequently returns the first department (step 2) with an embedded link list to all associated employees. Using this link list, a navigation to the employee identified by id=2 is possible (step 3 and 4). Fig. 8 shows the content of Department.xml. Some of the necessary link attributes are specified in the corresponding DTD. Several my app:department and my app:ItempageLink elements are nested in the my app:Departments element. The my app:Departments element itself represents an extended link, which means, that the xlink:type attribute of this element has the value ’extended’. Each my app:Department element has the attributes shown in Fig. 6 and additional linking information. The xlink:label attribute defines an anchor from which an arc starts. The xlink:label of this element is constructed using the

300

G. Sonneck, R. Motschnig, and T. Mueck

extended link

Resources

Locators Arc-Information: outbound links

Fig. 8. Content of Department.xml involved in index navigation

keyword entrypage plus the id of the corresponding department. The xlink:title attribute has the same value as the name element of the department. Each my app:ItempageLink is a locator corresponding to a remote resource (the employee), which the attribute xlink:href identifies. To construct this identifier the file name and the tag name of the employees is used. The xlink:title attribute has the same value as the name element of the corresponding employee. The xlink:label attribute is constructed of the corresponding department label plus the keyword item1. Each my app:ItempageLink element of a given department has the same xlink:label. If there existed a second index navigation starting from department the xlink:label of the corresponding my app:ItempageLink elements would end with item2. The xlink:label attribute functions as anchor to which arcs can refer to. The my app:go elements specify the arcs between available resources and locators. For each department element a my app:go element exists, that links the department to all assigned employees. In extended versions the attributes xlink:actuate and xlink:show will not be fixed to specific values. Fig. 9 shows the content of Employee.xml. The my app:EntrypageLink allows a navigation from Employee to the corresponding department. This element is a simple link. The attribute xlink:href is an anchor which identifies the remote resource and it is constructed using the file name and tag name of the departments plus the specific department id. The xlink:title has the same value as the name element of the department. Other presentation information is declared in the DTD. 4.2

Guided Tour

Fig. 10 shows the guided tour pattern modeled as a new UML constraint. In this example, the Institute functions as the collection center from where a consecutive

Mapping UML Web Navigation Stereotypes to XML Data Skeletons

301

simple link

Fig. 9. Content of Employee.xml involved in index navigation

navigation to the Department pages is possible. A unidirectional association with the additional stereotype is used to model this navigation pattern. One instance of class Institute is associated to 20 instances of class Department. >

Institute id name file_name tag_name

Department id name phone +20 file_name tag_name

Fig. 10. Guided Tour in UML new notation

As Fig. 11 shows Institute.xml and Department.xml only represent the data of the institute and the departments (as specified in Fig. 10). The following illustrates the steps that occur when a user requests a department in the middle of the guided tour. – A Client requests the second department by calling: Department.xml#xpointer(//*[local-name()=’Department’ and @id=’2’]) – The system checks in linkbase.xml for assigned external linkbases and finds the linkbase Guided tour.xml for Department.xml (see Fig. 11). – Guided tour.xml is the linkbase for Institute.xml and Department.xml. This is done because the linking information has to be modified for each request, which is done by transform linkbase.xsl, that completes the linking skeleton Guided tour.xml (see Fig. 12). The ExtLink element is an extended link.

302

G. Sonneck, R. Motschnig, and T. Mueck

Fig. 11. Guided Tour in XML

This time only locator elements are modelled that are connected by 4 arc elements. The identifiers for the locators institute and first department are known. The reference to the active, next and previous department has to be filled in for each request, because each time a different department could be requested. The modification is indicated by the black rectangle in Fig. 12. – The final Guided tour.xml represents the skeleton plus inserted links. – Department 2 is completed by the link information and is returned.

Transform_ linkbase.xml

Fig. 12. Content of Guided tour.xml

Mapping UML Web Navigation Stereotypes to XML Data Skeletons

5

303

Conclusions and Further Work

The first part of this paper has been devoted to a comparison of languages for web development with respect to their means to model navigation, where we have observed a tendency towards introducing higher-level constructs in the form of navigational patterns. In this paper we apply the strategy described above to UML by using stereotypes to integrate navigation patterns. Furthermore we show that the information in UML is sufficient to make a transformation to XML skeletons representing the same navigation patterns. Further research will deal with the semi-automated generation of web-pages and hence address the transformation between XML and other representation formats. We are also in the process of providing XML skeletons for other navigation patterns (e.g. filtered indexed navigation and indexed guided tour).

References 1. Garzotto, F., Baolini, P., Bolchini, D., Valenti, S.: Modeling by patterns of Web applications, Lecture Notes in Computer Science, Vol. 1727, Springer Verlag, Berlin Heidelberg New York (1999) 203–230 2. Atzeni, P., Mecca, G., Merialdo, P.: Design and Maintenance of Data-Intensive Web Sites, RT-DIA-25-1997 3. Isakowitz, T., Stohr, E. A., Balasubramanian, P.: RMM: A Methodology for structured Hypermedia Design, CACM 38(8), Aug, 1995, 34–44 4. Schwabe, D., Rossi, G.: An Object Oriented Approach to Web-Based Applications Design. TAPOS 4(4): 207–225 (1998) 5. Conallen, J.: Building Web Applications with UML. Addison Wesley Longman, Massachusetts (2000) 6. Schwabe, D., Rossi, G., Barbosa, S.D.J.: Systematic Hypermedia Application Design with OOHDM. In Proc. Hypertex 96, 116–128 7. Atzeni, P., Mecca, G., Merialdo, P.: To Weave the Web. In International Conf. on Very Large Data Bases (VLDB’97), Athens, Greece, August 26–29, 1997, 206–215 8. Baresi, L., Garzotta, F., Paolini, P.: Extending UML for Modeling Web Applications. HICSS 2001 9. Schwabe, D., Simone, D., Barbosa, J.: Navigation Modeling in Hypermedia Applications. IWHD 1995: 34–35 10. Gueell, N., Schwabe, D., Vilain, P.: Modeling Interactions and Navigation in Web Applications. ER Workshops 2000: 115–127 11. Malus, C., Sonneck, G.: Entwurfsmuster und Modellierung von Navigation im WebDesign. Internal Report of the Institute, University of Vienna, 2001 12. Motschnig, R.: Applying the Unified Process for Developing a Medium-Sized WebBased Application, submitted in 2002 13. Rumbaugh, J., Jacobson, I., Booch, G.: The Unified Modeling Language Reference Manual. Addison Wesley Longman, Massachusetts (1999) 14. Jacobson, I., Booch, G., Rumbaugh, J.: The Unified Software Development Process. Addison Wesley Longman, Massachusetts (1999) 15. W3C: XLink, http://www.w3.org/TR/xlink/, January 2002 16. W3C: XSLT, http://www.w3.org/TR/xslt, January 2002 17. Hennicker, R., Koch, N.: A UML-based Methodology for Hypermedia Design. UML’2000 – The Unified Modeling Language, Springer, October 2000.