See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/229038541

New UML 2.0 based models to design WAP applications

Article

CITATIONS READS

0 377

3 authors, including:

Ricardo Soto Nibaldo Rodriguez

Pontificia Universidad Católica de Valparaíso Pontificia Universidad Católica de Valparaíso
281 PUBLICATIONS   1,941 CITATIONS    86 PUBLICATIONS   526 CITATIONS   

SEE PROFILE SEE PROFILE

Some of the authors of this publication are also working on these related projects:

A novel Multilevel-SVD method to improve multi-step ahead forecasting in traffic accidents domain View project

Software Intelligent Systems for Solving Practical Problems of Society View project

All content following this page was uploaded by Nibaldo Rodriguez on 05 June 2014.

The user has requested enhancement of the downloaded file.

 New UML 2.0 based models to design WAP applications
Ricardo Soto De Giorgis Nibaldo Rodríguez Agurto
School of Informatic Engineering, Pontifical Catholic School of Informatic Engineering, Pontifical Catholic
University of Valparaíso, Chile University of Valparaíso, Chile
56 32 273762 56 32 274095
[email protected] [email protected]

ABSTRACT
Wireless mobile applications are becoming more and more As consequence, the maintenance stage continues being a
popular, mobile Internet technologies, such as WAP (Wireless problem. Not to have the suitable documentation of the
Application Protocol), are important for anytime, anywhere application means to transform this process into an exhausting
computing. Although much progress has been made in terms of task.
technological innovation, the modeling activities of WAP
The solution of these problems starts with the creation of a
applications are still underdeveloped, today practically do not
suitable task planning before the application construction. To get
exist models specifically designed for the WAP applications
this, we need define development methodologies that use models
development process.
and formal design structures, specially oriented to WAP software.
In this paper we present two new UML 2.0 [1] based models
At the present time WAP system are built using tools that support
called Decks Navigational Model and Cards Navigational Model,
only the implementation stage, ignoring the important previous
both for the design steps of the application, which we can use to
process of analysis and design of the structural navigation and
design WAP systems improving the WAP applications
interface aspects. Some others approaches have proposed the use
development process.
of web methodologies, like UWE (UML-based Web Engineering)
[2,3,4], OOHDM (Object Oriented Hypermedia Design Method)
Categories and Subject Descriptors [5], Conallen [6] or WSDM (Web Site Design Method) [7] to
D.3.3 [Software Engineering]: Design Tools and Techniques – built WAP applications. But there exist outstanding differences
Flow charts, Object-oriented design methods. between web and WAP systems that carry us to propose models
specifically made to design WAP applications.
General Terms In this paper we focus in the issues involved in developing
Design. appropriated models to design WAP applications. We use the new
features provided by UML 2.0 to propose two new UML 2.0
Keywords based models called Decks Navigational Model and Cards
Software Engineering, Hypermedia, UML, Mobile Internet, Navigational Model, which we will use in the design steps of the
WAP. WAP development process.
This paper is structured as follows: First, Section 2 presents an
overview of UML 2.0. Section 3 presents our two new UML 2.0
1. INTRODUCTION based models for WAP applications, using a study case. Section 4
The emergence of mobile Internet technologies and the evolution
a sketch of the study case implementation, and finally presents
of wireless devices, that provides huge benefits like anytime and
some concluding remarks and an overview of future work.
anywhere computing; have increased the development of WAP
applications. Though, the WAP applications development process
is extremely complex. likewise it exist few models appropriately 2. UML 2.0 METHODOLOGY OVERVIEW
to this kind of software, driving to the developers to the omission UML is a general purpose notational language for specifying and
of the structural design of the application. This big difficulty visualizing complex software, especially large object-oriented
generally gives a low quality application and makes it susceptible projects. UML has emerged as the software language for analysts,
of later corrections. designers, and programmers alike, because gives everyone from
business analyst to designer to programmer a common vocabulary
Permission to make digital or hard copies of all or part of this work for
to talk about software design.
personal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that This common vocabulary is provided by means thirteen types of
copies bear this notice and the full citation on the first page. To copy diagrams, divided into two major categories: Structure diagrams
otherwise, or republish, to post on servers or to redistribute to lists, and Behavior Diagrams [12].
requires prior specific permission and/or a fee.
The 5th Aspect-Oriented Modeling Workshop’04, October 11–15, 2004,
Lisboa, Portugal. Copyright 2004 ACM 1-58113-000-0/00/0004.
2.1 Structure diagrams 2.3 Why UML 2.0?
Class Diagram: a diagram that shows a collection of declarative Now due to UML 1.x was essentially designed for analysis and
(static) model elements, such as classes, types, and their contents modeling of small-scale software, in June 2003 OMG
and relationships. standardizes the UML 2.0, completing the definition of this major
Component Diagram: a diagram that shows the organizations upgrade of the industry standard modeling notation. UML 2.0 has
and dependencies among components. been revised to better meet the real challenges of systems
engineers and software developers by providing better scalability
Object Diagram: a diagram that encompasses objects and their and enhanced support component based development, architecture
relationships at a point in time. An object diagram may be modeling, and dynamic behavior descriptions.
considered a special case of a class diagram or a communication
diagram.
3. STUDY CASE
Deployment Diagram: a diagram that depicts the execution In order to explain the use of our proposed models, a generic M-
architecture of systems. It represents system artifacts as nodes, Commerce application will be used. This application will be
which are connected through communication paths to create designed using the standard UML 2.0 extension mechanisms and
network systems of arbitrary complexity. Nodes are typically it will be constructed for mobile systems using WML and PHP.
defined in a nested manner, and represent either hardware devices
In this study case we will focus in the design steps of the
or software execution environments.
application. To develop a correctly design we will decompose this
Package Diagram: a diagram that depicts how model elements stage in three steps:
are organized into packages and the dependencies among them,
• Conceptual design
including package imports and package extensions.
• Navigational design
Composite Structure Diagram: a diagram that depicts the
internal structure of a classifier, including the interaction points of • Presentational design
the classifier to other parts of the system. It shows the Each one has as result a model. Conceptual design produces a
configuration of parts that jointly perform the behavior of the class diagram; navigational and presentational design produce our
containing classifier. The architecture diagram specifies a set of proposed models, the Decks Navigational Model and the Cards
instances playing parts (roles), as well as their required Navigational Model, respectively. Figure 1 shows the steps
relationships given in a particular context. involved and the diagrams/models used in the design stage of the
2.2 Behaviors diagrams application.
Activity Diagram: a diagram that depicts behavior using a Design Stage
control and data-flow model.
Use Case Diagram: a diagram that shows the relationships Conceptual Navigational Presentational
among actors and the subject (system), and use cases. Design Design Design
State Machine Diagram: a diagram that depicts discrete behavior
modeled through finite state-transition systems. In particular, it
specifies the sequences of states that an object or an interaction
goes through during its life in response to events, together with its Class Decks Cards
responses and actions. Diagram Navigational Navigational
Model Model
Sequence Diagram: a diagram that depicts an interaction by
focusing on the sequence of messages that are exchanged, along Figure 1. Steps involved and the diagrams/models used in the
with their corresponding event occurrences on the lifelines. design stage of the application.
Interaction Overview Diagram: a diagram that depicts 3.1 Conceptual Design
interactions through a variant of activity diagrams in a way that The aim of the conceptual design is to capture the domain
promotes overview of the control flow. It focuses on the overview semantics, including all the concepts that are relevant for the
of the flow of control where each node can be an interaction application and for the different users that have been identified.
diagram. To achieve this purpose we need to construct a class diagram,
Collaboration Diagram: a diagram that gives a specification of which will be the result of the conceptual design step.
how an operation or classifier, such as a use case, is realized by a
set of classifiers and associations playing specific roles used in a 3.1.1 Class Diagram
specific way.
The class diagram gives an overview of a problem domain. To
Timing Diagram: An interaction diagram that shows the change obtain this model, it will be necessary to identify classes,
in state or condition of a lifeline (representing a Classifier attributes, methods and relations. Therefore, by means of well-
Instance or Classifier Role) over linear time. The most common known object oriented techniques such associations,
usage is to show the change in state of an object over time in compositions, aggregations and generalization a logical structure
response to accepted events or stimuli. able to represent in correct way the problem domain it will be
defined.
It is important to consider as an essential pre-condition to get an The principal class is the Order, associated with it is the Customer
appropriate class diagram, a careful analysis, ideally done using making the Payment. A Payment is one of three kinds: Cash,
use cases and scenarios [11]. Check, or Credit. The Order contains OrderDetails, each with its
associated Item.
The class diagram shown in the figure 2, models a customer order
from a retail catalogue.

Figure 2. Class diagram of the study case.

3.2 Navigational Design A set of cards compose a deck. The deck is the minimum
Navigational design is a critical step in the design of hypermedia transmission unit between the server and the mobile system.
applications. One of the main difficulties is to establish a When the mobile system receives the deck, it will display the first
navigational structure that allows the user to navigate in an card of the deck. So, the navigation is done always among the
intuitive way and to avoid him losing the orientation. In order to different cards of the deck until a new deck is loaded.
obtain this, we need design a hierarchical navigation structure,
being careful with the nodes and navigation among them. 3.2.2 Decks Navigational Model
Moreover, we must remember that the navigation model is a The Decks Navigational Model is an organized representation of
valuable document of the maintenance step. the set of decks of the application. The aim of this model is to
In this step we will propose the use of our new models: The achieve an intuitive and hierarchical navigational structure of all
Decks Navigational Model and the Cards Navigational Model. decks involved in the application.
Both models are built with UML 2.0 standard model elements Figure 3 shows The Decks Navigational Model of our study case.
defined according to the standard UML 2.0 extension mechanisms From this model we can easily understand the navigation between
[12]. decks.

3.2.1 Cards, Decks and WML. The starting point of the navigation is the MainMenu Deck,
The markup language used for WAP is WML. WML uses tags located there the user can selected the item to buy, log-in or
and the syntax is stricter and conforms to the XML 1.0 standard register. When the customer has selected the item, he can see its
[13]. WML pages are called decks. They are constructed as a set details navigating to ItemDetail. Once the customer has chosen
of cards, related to each other with links. the item he adds it to the ShoppingCart and then he can pay for it
navigating to the Payment Deck.
The minimum development unit designing WML pages is the Each node contains the stereotype “<<deck>>” to explicit the
card. One deck may contain a lot of cards. Though, in the WAP- kind of the node in the model. Each reference contains the
browser always it will be displayed only one card. The user can stereotype “<<opens>>”, to explicit that the first deck of the
navigate from one card to each other, to visualize card contents. relation calls the target deck allowing the navigation.
 Figure 3. The Decks Navigational Model of the study case.

3.3 Presentational Design 3.3.2 Stereotyped Objects

Presentational design gives an abstract representation of the final
Cards contain a lot of elements, each element performs different
interface and defines the interaction between the user and
actions over the system, and all these must be correctly
navigational nodes. In order to obtain this, we propose the use of
represented in the presentational design. The Cards Navigational
The Cards Navigational Model.
Model uses a set of stereotyped interface object to represent
clearly all the elements of the final interface of the decks; these
3.3.1 Cards Navigational Model stereotypes have been defined according to the standard UML 2.0
The Cards Navigational Model is an abstract representation of the extension mechanisms. Table 1 explains the stereotypes for
set of cards of the application. The aim of this model is to achieve interface objects used in the model.
a clearly representation of each card to simplify the
implementation of the application. This model not consider
decisions about details like sizes, colors, fonts or other specific
objects of interface, because they belong to the implementation
stage.
Table 1. Stereotypes for interface objects
Stereotype Name Representation
<<txt>> text Represents a sequence of characters with formatting information
<<im>> image Represents an image, generally in wbmp format
<<anc. txt>> anchored text Represents an text object with a hyperlink
<<anc. im>> anchored image Represents an image object with a hyperlink
<<col. txt>> text collection Represents a set of text objects, as a result of a query executed.
<<col. anc txt. >> anchored text collection Represents a set of anchored text objects, as a result of a query executed.
<<button>> button Represents a clickeable area, which has an action associated.
<<txt. box>> text box Represents an input field where the user can introduce information.
<<chk box>> check box Represents an input field where the user can check an option
<<col. txt. box>> text box collection Represents a set of text box objects
<<col. chk box>> check box collection Represents a set of check box objects

Figure 4 shows The Cards Navigational Model of our study case. identified with 2, which indicates that object interface carry us to
From this model we can easily understand the objects layout on the card with identifier 2 (SelectItem). Therefore the complete
the deck and the whole navigational structure. information of all the system navigation is contained in the model.
In this model each card and each interface object has an identifier Furthermore, using the stereotypes, the presentational design of
between “{}” characters. Using this identifier it is possible to the interfaces also is included in the model.
recognize the target card when starting navigation, for example, in Presentational design is done by means interface objects, for
the card MainMenu the interface object ”<<anc .txt>>{2} ” is example, MainMenu card has one interface object text and three
interface objects anchored text. The interface object text All cards contains the stereotype “<<card>>” to explicit the kind
corresponds to the title of the card, which may be “Retail of the node in the model. Each reference contains the stereotype
Catalog”. The first anchored text is a hyperlink to the card called “<<navigate>>”, to explicit that contains a hyperlink to navigate
SelectedItem, the second anchored text is a hyperlink to the card from each card to each other through the reference.
called LogIn and the last one is a hyperlink to the card called
Register.

Figure 4. The Cards Navigational Model of the study case.

4. IMPLEMENTATION
In this section a sketch of the implementation of our study case • The modeling techniques and notation used in the models
will be given, mainly to understand some advantages that our presented in the previous section are entirely based on the
models provides at the implementing time of the application: UML 2.0, a well-known standard and supported by many
case tools.
• The clarity of the navigation model allows us to easily
• The previous aspects help us to reduce resources needed and
understand the system navigation and therefore a fast
time used in the application development.
construction of the links between cards.
• The similarity between the abstract interfaces depicted in
Figure 5 shows the similarity between abstract interfaces of the
the card navigational model and the final interfaces allows
cards navigational model and final interfaces. In addition we can
us to easily understand the interface objects layout inside
easily compare and understand the navigation depicted by the
the screen
proposed navigational models
• The simplicity of the model and the abstract interfaces
reduces the learning period in being able to use the
methodology
 Figure 4. The Cards Navigational Model of the study case.

5. CONCLUSIONS AND FUTURE WORK 6. REFERENCES

WAP applications are inherently complex and require [1] The Object Management Group (OMG). “Unified
thoughtful design and planning. However hypermedia Modeling Language”.http://ww.uml.org, last updated
applications that are systematically designed, using ad-hoc March 2004.
models, require less cycles of improvement and give better [2] Rolf Hennicke, Nora Koch. “A UML-based Methodology
results. for Hypermedia Design”, Proceedings of the Unified
In this paper we presented two new UML 2.0 based model Modeling Language Conference, UML ‘2000 Evans A.
called Decks Navigational Model and Cards Navigational And Kent S. (Eds.). LNCS 1939, Springer Verlag, 410-424.
Model for the design stage of the WAP applications, which [3] Nora Koch. “Software Engineering for Adaptive
supports navigational and presentational design steps, Hypermedia Applications”, 2001, PhD. Thesis, Reihe
respectively. The use of these models provides benefits such as Softwaretechnik 12, Uni-Druck Publishing Company,
clarity, simplicity to understand the system domain reducing Munich.
resources needed and time used in the application development.
[4] Nora Koch, A. Kraus and R Hennicker. “The Authoring
Our future work will be centered on refining the models here Process of the UML-based Web Engineering Approach”, In
presented and working in the other phases of the WAP First International Workshop on Web-Oriented Software
applications development process: requirements gathering, Technology IWWOST'2001, 2001, Valencia.
analysis, implementation, maintenance and quality control.
Mainly to obtain experience to develop patterns and a tool [5] Schwabe D., and Rossi G. “An object-oriented approach to
CASE that allows us to simplify still more, the whole life cycle Web-based application design. Theory and Practice of
of WAP systems. Object Systems (TAPOS)”, (October 1998), 207-225.
[6] J. Conallen. “Building Web Applications with UML”,
Addison Wesley, 1999
 [7] O. De Troyer and C. Leune. WSDM . “a User-Centered [11] D.Leffingwell & D.Widring, “Managing Software
Design Method for Web Sites”, Proceedings of the 7th Requirement. A Use Case Approach”, Pearson Education,
International World Wide Web Conference, 1997. Boston, 2003.
[8] The Object Management Group (OMG). “Model Driven [12] The Object Management Group (OMG). “UML 2.0
Architecture”. http://www.omg.org/mda/, last updated Superstructure Final Adopted specification”.
March 2002. http://www.uml.org.
[9] The Object Management Group (OMG). “UML 2.0 [13] WAP Forum DTDs
Infrastructure Specification”. http://www.uml.org, last http://www.openmobilealliance.org/tech/DTD/index.htm
updated March 2004.
[10] The Object Management Group (OMG). “MDA Guide
1.0.1 2003”. http://www.uml.org/mda/.

View publication stats