Simulation Modelling Practice and Theory 31 (2013) 63–76

Contents lists available at SciVerse ScienceDirect

Simulation Modelling Practice and Theory

journal homepage: www.elsevier .com/ locate/s impat

Visual modeling for Web 2.0 applications using model drivenarchitecture approach

I-Ching Hsu ⇑Department of Computer Science and Information Engineering, National Formosa University, 64, Wenhua Rd., Huwei Township, Yunlin County 632, Taiwan

a r t i c l e i n f o

Article history:Received 4 January 2012Received in revised form 23 October 2012Accepted 16 November 2012Available online 20 December 2012

Keywords:UML profileWeb 2.0MashupsMDAXMLSoftware engineering

1569-190X/$ - see front matter � 2012 Elsevier B.Vhttp://dx.doi.org/10.1016/j.simpat.2012.11.004

⇑ Tel.: +886 5 6315580.E-mail address: hsuic@nfu.edu.tw

a b s t r a c t

Mashup is now a major Web 2.0 technology because, rather than simply aggregating Webcontent, it combines various Web resources from other websites. Considering Web 2.0mashups from a software engineering perspective, a visual modeling approach is crucial.Current Web 2.0 developments, however, do not support a conceptual modelling forWeb 2.0 applications. This leads to inefficient development processes and a low potentialfor reuse. The Unified Modeling Language (UML) is a general-purpose modeling languagethat may be used in widely varying application domains. However, UML often lacks ele-ments for modeling and representing concrete concepts of specific domains such as Web2.0 mashup modeling. To address these shortcomings, this study proposes Web2.0MUML,a Model Driven Architecture (MDA) approach and UML profile for modeling Web 2.0 mash-ups. The Web2.0MUML profile extends UML by using a profile mechanism for Web 2.0mashup modeling that presents the relevant structural properties of Web 2.0 at theconceptual level.

� 2012 Elsevier B.V. All rights reserved.

1. Introduction

Within the last 2–3 years, the Internet has greatly changed our way of sharing resources and information. As well known,Web 2.0 is recognized as the next generation of web applications proposed by O’Reilly [1]. The main feature of Web 2.0 appli-cations is that they provide a medium for the sharing and exchange of resources [2–4]. These resources, such as Web feedand Web API, allow web developers to take advantage of these resources to enrich their own applications or produce newintegrated solutions by integrating resources, which they could not have provided on their own. Many Internet companieshave enabled easy access to the web resources that they provide. Anyone can create a new integrated application with theseresources. This new way of building applications has also created a new method of thinking of the Internet as a resource.When an application combines resources from different websites to produce a new web application it is called a Web 2.0mashup [3] .

Considering Web 2.0 mashups from a software engineering point of view, a visualized approach for Web 2.0 mashupmodeling is crucial. Current Web 2.0 development tools do not provide conceptual modelling for Web 2.0 mashups. Thisshortcoming leads to inefficient development processes and a low potential for reuse. This work proposes the usage of soft-ware engineering techniques, particularly the Unified Modeling Language (UML) [5], which is the most accepted softwareengineering standard to model Web 2.0 mashup. However, UML has few elements for modeling and representing concreteconcepts of specifics domains, such as Web 2.0 mashup modeling.

. All rights reserved.

64 I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76

The Object Management Group (OMG) [6], which is the leading organization for object-oriented programming, definedthe UML as a standard graphical language for expressing system development models. Additionally, the OMG has proposeda Model Driven Architecture (MDA) [7,8] for analysis, design and implementation of software systems. The MDA specifiesthree viewpoints on a software system, namely a Computation Independent Model (CIM), a Platform Independent Model(PIM) and a Platform Specific Model (PSM). The CIM focuses on the environment and the requirements of the system; butis not concerned about any structural or processing details of the system. A PIM is a model with no information specificto the platform or the technology that is adopted to realize it. A PSM combines the specifications in the PIM with the detailsto realize it on a specific platform.

This work adopts an MDA-based approach to implement Web 2.0 mashup modeling. Firstly, Web 2.0 mashup frameworkis formally defined as a CIM to capture the concepts and properties of Web 2.0 applications. The formal definitions of Web 2.0mashup framework is denoted by Web2.0-CIM. A UML profile that is a PIM based on Web2.0-CIM is then designed to enablevisual modelling for Web 2.0 applications. Additionally, an XSLT-based style sheet is implemented to transform PIM modelsprepared within the defined UML profile into a PSM. Finally, different markup-based documents are automatically created inXML format for various Web 2.0 application domains.

The OMG defines two mechanisms for extending UML: UML profile [9] and metamodel extension [10]. The UML profileapproach contains a pre-defined set of stereotypes, tagged values, constraints, and notation icons that collectively specializeand tailor the existing UML. The main construct in the profile is the stereotype that is purely an extension mechanism. Themetamodel extension approach is defined through the Meta-Object Facility (MOF) [11] specification which involves the pro-cess of defining a new metamodel. This study presents a UML profile, called Web2.0MUML profile, for modeling Web 2.0mashups to cope with the above issues. This implies at least two requirements for developing a Web2.0MUML profile.The first is heterogeneity: it must present a metamodel to integrate Web 2.0 technologies into Web 2.0-based applicationsindependently from the markup language, program language, platform and hardware. The second is performance: it mustprovide sufficient UML components to promote adequate program transcoding.

The above objectives are achieved in four steps. (1) The formal definitions of Web 2.0 application framework, includingWeb resources, application server, Web presentation, and Web 2.0 mashups, are presented as a CIM. (2) The proposedWeb2.0MUML profile, which serves as a PIM and is based on the CIM, extends the UML for Web 2.0 applications. (3) Byadopting a Web2.0MUML profile, a practical Web 2.0 application, Map-based Highway Traffic Query (MHTQ) system, is mod-eled to create a PSM. (4) The markup-based for the MHTQ system is then generated automatically from the PSM by XSLTstyle sheet.

This paper is organized as follows. The next section briefly reviews some existing UML extension by the UML profileapproach. Section 3 describes an MDA-based approach for Web 2.0 applications modeling. Section 4 presents the Web 2.0applications framework. Section 5 describes the proposed Web2.0MUML profile. In Section 6, a concrete example to illustratehow Web2.0MUML profile can be used to extend UML for Web 2.0 mashups modeling. Section 7 presents experimental re-sults. Finally, summary and concluding remarks are included.

2. Related work

A Web 2.0 mashup [3] is a web application combining web resources from more than one source into an integrated expe-rience. Some recent studies [12,13] have focused on using the Web 2.0 technologies to develop new IT applications. Theytypically characterize Web 2.0 mashups as below:

� It provides lightweight integration of Web 2.0 applications to facilitate rapid development.� It employs web technologies such as eXtensible Markup Language (XML), Web feed, Simple Object Access Protocol (SOAP)

[14], Representational State Transfer (REST) [15], Asynchronous JavaScript and XML (AJAX) [16].� It incorporates one or more public Web API to facilitate data exchange between applications.

This study shows how a UML profile can be built for Web 2.0 Mashups. A UML profile customizes UML for a specific do-main or purpose by using extension mechanisms such as stereotypes, tagged values and constraints. Several UML profileshave been developed by OMG, such as UML profile for CORBA [17], UML profile for Enterprise Distributed Object Computing[18] and UML Test Profile [19]. Their function is to provide the critical links that bridge the UML community to the developercommunity, the middleware community, etc.

In recent years, several research studies [20–25] have developed UML profiles to enable the use of UML in different appli-cation domains. In [21], a Model Driven Development (MDD) approach was presented for developing access control policiesfor distributed systems. Because the models are expressed as MOF models enriched by UML profiles, users can define accesscontrol models in UML notation and can specify constraints in Object Constraint Language (OCL) [26]. Unified modeling lan-guage-based Web engineering (UWE) is a software engineering approach for the Web applications [24]. Whereas [25] devel-oped a web service profile based on UML to support efficient definition of Web service models, this work presents a MDAapproach and develops a Web2.0MUML profile for modeling Web 2.0 applications.

In [27], web-based application frameworks were documented with UML profiles as a standard means of semantic expres-sion. UML profiles enable a shared graphical notation system and vocabulary among all system stakeholders, and they

I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76 65

improve the precision of specifications as well as instructions for using and customizing applications. A UML profile for mod-eling knowledge-based system in the context of a Model Driven Architecture (MDA) framework was proposed in [20]. It pre-sented an extension to UML using the profile mechanism for knowledge modeling. Most MDA studies have focused ontransformations among the lower levels. In [28], the authors proposed a CIM modeling solution and an analytic methodof transformation to PIM.

3. The MDA-based approach for Web 2.0 applications modeling

This section gives an overview of the proposed MDA-based approach for developing a Web 2.0 application model. TheMDA is based on the four-layer metamodeling architecture and several complementary OMG standards, as displayed inFig. 1. These standards are the MOF, UML and UML profile. The layers are the meta–metamodel layer (M3), the metamodellayer (M2), the model layer (M1) and the real objects layer (M0).

The M3 layer corresponds to CIM. The OMG has developed the Meta-Object Facility (MOF) to define modeling languagessuch as UML or CWM (Common Warehouse Metamodel) [29]. The M2 layer, including UML and UML profile, models themodeling languages used to build M1 layer models. The M2 layer also corresponds with the PIM, which defines the syntaxand semantics of the modeling languages. The UML profiles support mechanisms that enable extension and adaptation ofmetaclasses from existing UML metamodels for use in other applications. For example, they can tailor the UML metamodelfor different domains. The M1 layer corresponds to PSM models of specific applications represented in a special-domainmodeling system. The M1 level elements are the custom UML models. The M0 layer model is the population of a specificapplication, which includes instances of M1 layer model elements.

The CIM provides a conceptual model of a system from a computation-independent perspective. Such a concept model isindependent of how the system is implemented and is a useful source of shared vocabulary in a meta–metamodel. In thisstudy, a shared vocabulary is formally defined for use in a meta–metamodel of Web 2.0 applications. The transformationfrom CIM to PIM defines a mapping from a meta–metamodel of the requirements phase to a metamodel of the analysisphase. The PIM provides a metamodel that is independent of the specific platform and that is suitable for many heteroge-neous platforms in a similar model. For a specific platform, an MDA approach provides specifications for transforming aPIM into a PSM. Mappings between PIM and PSM can be performed by model transformation. Finally, code is automaticallygenerated by the PSM (see Fig. 1).

The proposed MDA-based approach models Web 2.0 applications for specific platforms, such as an XML-based platform.Section 4 formally defines the Web 2.0 applications according to the Web 2.0 framework. These formal definitions, which aredenoted Web 2.0-CIM, are used to develop the Web2.0UML profile. As indicated in the M1 layer in Fig. 1, the software devel-oper designs the platform-independent models for specifying Web 2.0 applications based on the Web2.0UML profile for theWeb 2.0 mashup application. The Web 2.0 application implemented in this study is a Map-based Highway Traffic Query(MHTQ) system that uses Web 2.0 mashup technologies, including Google Map API, XML-based traffic Web feed, AJAX, HTMLand JSP. The ‘‘MHTQ UML file’’ is a platform-specific model (PSM) used by the programmer to generate the MHTQ systemcode.

The following sections discuss in detail the Web 2.0 application framework CIM, Web2.0UML profile PIM, custom UMLmodel and PSM transformation.

Fig. 1. The four-layer Model Driven Architecture.

66 I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76

4. Web 2.0 application framework

The section presents the formal definitions of Web 2.0 application framework, denoted by Web2.0-CIM, including Webpresentation, Application server, Web resource, and Web 2.0 mashups, for general Web 2.0 application framework, andFig. 2 displays the Web2.0-CIM, which represents the Web 2.0 application framework at the higher level of abstraction. Thatis, the Web 2.0-CIM is developed by formal definitions as a CIM-level modeling.

Definition 1 (Web 2.0 Application Framework). This Web 2.0 application framework consists of a tuple WebAF=hWR, AS, WP,Mi where

� WR denotes a collection of Web resources. (refer to Definition 2 for WR).� AS denotes a collection of application servers (refer to Definition 3 AS).� WP denotes the Web presentation (refer to Definition 4 for WP).� M denotes the Web 2.0 mashup scheme (refer to Definition 5 for M).

Definition 2 (Web Resource). A Web resource is a tuple WR = hRid, Uid, AWR, Tpi, where:

� Rid denotes a unique Web resource identifier, such as URI.� Uid denotes a unique identifier of the Web resource owner.� AWR denotes a list of Web resource attributes.� Tp denotes a type of Web resource.

In this paper, Web 2.0 resources were divided into three categories, including, Web feed, Web API, and general resources.They are distributed in the Internet and are identified by URI.

Definition 3 (Application Server). An application server is a tuple AS = hWS, SPi, where:

� WS denotes a set of Web servers, such as Tomcat server, IIS server, Sun Java System Application Server, etc.� SP denotes a set of program languages using in the server side, such as JSP, PHP, Java, ASP, etc.

Definition 4 (Web Presentation). A Web presentation is a tuple WP=hML, CP, CDi.

� ML denotes a set of Markup Languages.� CP denotes a set of program languages using in the client side, such as Javascript, VBscript, AJAX, etc.� CD denotes a set of client platforms, such as IE browser, RSS reader, Google Map, Wiki, etc.

Fig. 2. Computation Independent Model (CIM) of Web 2.0 applications.

I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76 67

Web presentation technologies are mainly to provide a valid markup language for a specific client device. There are somemarkup languages, such as HTML, XHTML, XForm, KML, WML, and VoiceXML, used by various client devices. These markuplanguages are all based on XML standard to facilitate visualized presentation in Web 2.0 Mashups except for HTML.

Definition 5 (Web 2.0 Mashup). A Web 2.0 mashup is a tuple M=hMs, Mpi, where

� Ms denotes a set of Web 2.0 resources.� Mp denotes a type of Web 2.0 mashup.

In this paper, Web 2.0 mashups were divided into two categories, including, client-side mashups and server-sidemashups.

5. A UML profile for Web 2.0 applications

This study adopts the profiles mechanism to define a Web2.0MUML profile for Web 2.0 mashup applications. The profileprovides a standard means for expressing the semantics of Web 2.0 mashup framework using stereotypes, and thus to sup-port expressing these semantics with UML tools. In general, a UML profile extends the core UML language by defining extramodeling mechanisms of the following types:

1. Stereotypes: A stereotype defines how an existing metaclass may be extended, and allows the application of platform ordomain specific terminology or notation in place of, or in addition to, those adopted for the extended metaclass.

2. Constraints: A constraint is directly attached to a UML element, and describes semantic restrictions that must be obeyedby a UML element. It can be expressed in any language, irrespective of whether it is machine-readable or not.

3. Tagged Value: A tagged value further describes a stereotyped-element. Every tagged value has a name and a type, and isassociated with a particular stereotype.

As indicated in Fig. 3, the Web2.0MUML profile is represented by a package and can be imported into current Web Engi-neering, such as UML-based Web Engineering (UWE) [30], Topic Maps [31], GUI Layout modeling [32], WebML [33], etc.

5.1. Web 2.0 application architecture with UML

The Web2.0-CIM components (Fig. 2) can be mapped to the UML diagrams, which are called the Web2.0MUML profile(Fig. 4). The Web2.0MUML profile serves as a platform-independent model for PIM-level modeling. A Web2.0 applicationis represented by the hhWeb2.0Applicationii stereotype which extends the Package metaclass of the UML metamodel.hhClientii, hhServerii, hhWebResourceii, and hhApplicationServerii stereotypes are extended from the Class metaclass.hhRequestii, hhResponseii, hhClientSideMashupii and hhServerSideMashupii stereotypes are extended from the Associationmetaclass. The Web2.0MUML profile is defined for the Web 2.0 application framework and is presented in Table 1. In theUML metamodel, the Package metaclass contains elementary concepts such as Class, Association, Artifact, etc. The Associa-tion metacalss is an association relationship between two other classes. The Class metaclass is used for CIM classes. TheArtifact metaclass is a classifier that represents some physical entity.

5.2. Web resource architecture with UML

The Web resource architecture supports modelling of Web feed and Web API, as shown in Fig. 5. A Web resource is rep-resented by the hhWebResourceii stereotype which extends the Class metaclass of the UML metamodel. hhWebFeedii and

Fig. 3. Web2.0MUML profile is a UML package.

Fig. 4. Web 2.0 applications architecture with UML.

Table 1Extension of the UML with stereotypes for Web 2.0 applications.

UML Construct(stereotype)

UML Type Web 2.0 Construct

<<ApplicationServer>> Class An application server is developed to provide the business logic for Web 2.0 applications.<<Client>> Class It is a software that requests services from servers.<<ClientSideMashup>> Association A client-side mashup integrates Web feed and Web API at the client-side.<<Request>> Association It indicates a message that is sent from client to server.<<Response>> Association It indicates a message that is sent from server to client.<<Server>> Class It is a website that provides services for clients.<<ServerSideMashup>> Association A server-side mashup integrates Web feed and Web API at the server-side.<<Web2.0Application>> Package A Web 2.0 application is composed of servers and clients. It combines Web resources from different websites

to produce a new web application.<<WebResource>> Artifact Web Resources are distributed in the Internet and are identified by URI.

68 I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76

hhWebAPIii are subclasses of hhWebResourceii. The former corresponds to the XML-based data resources, while the lattercorresponds to the Web service resources. The extension of the UML contains stereotypes for Web resource, which are sum-marized in Table 2 for clear exposition.

A Web feed contains a structured information source which is written in XML to facilitate the interoperability of Web 2.0information. This means that Web feeds can be used to automatically transfer information from one website to another,without any human intervention. One major feature of Web 2.0 is to adopt Web feeds to build a more maintainable andcooperative Web. Web feeds allow websites to publish frequently updated content such as Weblog, news headlines, realtime information or podcasts. RSS and Atom are currently the two main formats of Web feed.

Web 2.0 Mashups use Web API technologies to facilitate data exchange between applications and allow the creation ofnew applications. Most of Web APIs are constructed based on the Web Services architecture. They hide the detailed WebServices protocols from the developers and make it easier for the developers to use.

5.3. Client architecture with UML

The client architecture is used to describe the front-end client-side of Web 2.0 applications, as shown in Fig. 6. A client isrepresented by the hhClientii stereotype which extends the Class metaclass of the UML metamodel. hhClientii is composed ofhhClientPlatformii, hhMarkupLanguageii, and hhScriptLanguageii. The extension of the UML contains stereotypes for clientarchitecture, which are summarized in Table 3 for clear exposition.

Fig. 5. Web Resource architecture with UML.

Table 2Extension of the UML with stereotypes for Web Resource.

UML Construct (Stereotype) UML Type Web 2.0 Construct

<<Atom>> Artifact The Atom format is developed with XML-based standard used for Web feeds and as an alternative toRSS.

<<JSON>> Artifact A JSON-based format is a lightweight standard for data interchange.<<limit>> Association The limit stereotype is a kind of relationship that is used to restrict the Web feed documents in XML

format.<<RDFSiteSummary>> Artifact RDF Site Summary is a version of RSS. It is developed with RDF standard for Web feeds.<<ReallySimpleSyndication>> Artifact Really Simple Syndication is the most widely used version of RSS.<<RichSiteSummary>> Artifact Rich Site Summary is a version of RSS. It is a lightweight metadata description and syndication format.<<RSS>> Artifact RSS is a family of Web feed formats used to describe full or summarized text, plus metadata such as

publishing dates, category, copyright and authors.<<SOAP>> Artifact SOAP is developed to address some of the limitations of XML-RPC. A SOAP binding describes how an

underlying protocol is used to transport SOAP messages. Most of current Web Services adopt SOAP overHTTP.

<<XMLDocument>> Artifact An XML-based document.<<XMLHttpRequest >> Artifact XMLHttpRequest provides scripting languages to transfer XML or other text data between a client and a

server. For example, Google Map API uses Javascript XMLHttpRequest objects to sent HTTP requestsand receive responses from server.

<<XML-RPC>> Artifact XML-RPC is a protocol for exchanging XML-based messages in a distributed environment. It provides astandard for heterogeneous programs to communicate with each other regardless of theirimplementation language and system platform.

<<WebFeed>> Artifact A Web feed contains a structured information source that is written in XML to facilitate data exchange.<<WebAPI>> Artifact Web 2.0 Mashups use Web API technologies to integrate third-party Web services to allow the creation

of new applications.

I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76 69

5.4. Relationship architecture with UML

The relationship architecture supports modelling of the associated relations between different classes of Web 2.0 appli-cations, as shown in Fig. 7. hhWeb2.0Mashupii, hhClientSideMashupii, hhServerSideMashupii, hhlimitii, hhembedii and hhpre-

Fig. 6. Client architecture with UML.

Table 3Extension of the UML with stereotypes for Web Presentation.

UML Construct(Stereotype)

UML Type Web 2.0 Construct

<<Blog>> Class A blog is a Web-based platform that provides commentary or news on a particular subject. Additionally, blog isused for personal online diaries. There are some famous blog platforms, such as WordPress, LifeType, andBlogger.

<<Browser>> Class A browser enables a user to display and interact with text, image, hyperlink and other information typicallylocated on a Web page. There are some Web browsers available, such as Internet Explorer and Mozilla Firefox.

<<BlogPage>> Artifact An RSS/Atom document display in Blog platform.<<ClientPlatform>> Class A client platform is a client-side software in Web 2.0 applications which focuses on conveying input and

output between the user and the remote server. There are some famous client platforms, including Webbrowser, Wiki platform, Blog, and virtual earth.

<<Earth>> Class An earth provides geographic visualizations, which is a markup-based platform, such as Google earth,Microsoft virtual earth, and Yahoo earth.

<<embed>> Association The embed stereotype is a kind of relationship that declares a script language can be embedded into a markup-based document.

<<GeoPage>> Artifact A map page can display geographic information on a map, such as Google Map, Google Earth, and Yahoo Map.<<MarkupLanguage>> Class A markup language is a set of tags for annotating the content of a document and how it is to be displayed in

client platform. There are many markup languages for Web 2.0 applications, including HTML, XHTML, XML,RSS, KML, and WML.

<<presentation>> Association The presentation stereotype is a kind of relationship that declares markup-based documents can be renderedby a specific client platform.

<<ScriptLanguage>> Class A script language can be embedded in a markup-based document to enhance user interface and interaction.There are some script languages for client-side, including AJAX, JavaScript, and VBScript.

<<WebPage>> Artifact An HTML/XHTML page display in browser.<<Wiki>> Class A wiki is a Web-based platform used to create collaborative websites. There is a wide range of wiki platforms

available, such as MediaWiki, MoinMoin, XWiki, and TWiki.<<WikiPage>> Artifact A Wiki page is displayed in Wiki platform.

70 I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76

sentationii stereotypes are extended from the Class metaclass of the UML metamodel. hhClientSideMashupii and hhServerSi-deMashupii are subclass of hhWeb2.0Mashupii. These stereotypes are introduced in the previous sections.

The Web 2.0 mashup is an emerging Web development paradigm that combines Web services from different websitesand enables the loose coupling of heterogeneous Web resources. There are two primary mashup strategies, namely ser-

Fig. 7. Web 2.0 Mashups architecture with UML.

I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76 71

ver-side mashups [34] and client-side mashups [35]. The server-side mashups adopt a service broker strategy to integrateservices and content on the server. In this approach, a request from the client pass to the server, which act as a proxy to com-bine resources from different websites. The main limitation of server-side mashups is that the proxy server can be a bottle-neck to cause overloading. In contrast, the client-side mashups integrate services and content on the client. AJAX is widelyused in client-side mashups as a single Web page in which content is changed at runtime according to user interactions [36].AJAX makes client-side mashups popular since client-side mashups reduce latency and bandwidth as compared to the ser-ver-side mashups.

6. Prototype system

6.1. Using the Web2.0MUML profile

In Section 5 of this work, Web2.0MUML profile is developed for the PIM-level modeling. The Web 2.0 mashup applicationused to demonstrate the feasibility of the proposed Web2.0MUML profile is a Map-based Highway Traffic Query (MHTQ) sys-tem that provides continuous and location-based traffic monitoring for Taiwan highways. The MHTQ system is stereotyped

Fig. 8. The modeling of MHTQ system according to the Web2.0MUML profile.

72 I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76

with hhWeb2.0Applicationii package (see Fig. 8), which can be considered a PSM representing a specific Web 2.0 application.The MHTQ system offers a Web-based interface that enables users to query a database to obtain traffic accident information.The accident locations are also shown on Google Maps or on Google Earth. For this scenario, raw data are automatically con-verted to KML documents for Google Earth and into RSS documents for Google RSS Reader. The example shows that the codeis automatically generated from the PSM by using XSLT transformation.

The MHTQ is a Web 2.0 application based on Web 2.0 mashup technologies, including Google Map API, XML-based trafficWeb feed, AJAX, HTML and JSP. This application is mainly composed of clients (including Browser, Blog, and Google Earth)and servers (including Tomcat web server, MySQL database server, Google Map server). The server end is a multi-tier archi-tecture that uses a server-side mashups approach. The Tomcat Web server adopts JSP to provide an interaction interface forthe client, to access traffic data feeds from MySQL, and to call Google Map API. At the client end, the various markup-baseddocuments, including HTML, RSS, and KML, can be displayed in Microsoft IE browser, Google RSS reader, and Google Earth,respectively. The class diagrams of Web 2.0 application architecture can only provide static structure of the MHTQ system,which is less meaningful in dynamic mashup approaches. Fig. 9 shows a sequence diagram of how this limitation is over-come by the dynamic workflow of messages in the MHTQ system.

6.2. From the Web2.0MUML profile to the MHTQ system

A flow-oriented aspect to describe the prototype architecture is depicted in Fig. 10. The U2W (UMI to Web) Transcodercomprises the Transcoding Engine and Style Sheet Repository. At present, Style Sheet Repository supports three differentXSLT style sheets: XMI2HTML, XMI2KML, and XMI2RSS style sheets. An XSLT style sheet is also a XML document that spec-ifies the rules and templates to transform one markup-based document into another. The Transcoding Engine is an XSLT pro-cessor based on Xalan [37]. The Transcoding Engine mainly applies the XMI2HTML, XML2KML, and XMI2RSS style sheet to anXMI document to generate a specific HTML document, KML document, and RSS document, respectively. The main benefits ofXSLT style sheet are reusability and extensibility. In this study, each XSLT style sheet represents a domain-specific applica-tion of Web 2.0. It is reusable for generating the desired markup-based document for a particular outline and context. Interms of extensibility, as a new display format of Web 2.0 application is developed, our system only needs to add a XSLTstyle sheet in the Style Sheet Repository.

The information flow of the prototype system is as follows.

1. A UML designer adopts the Web2.0MUML profile for modeling Web 2.0 resources in the UML tools. These UML modelingtools provide a visual editor to allow a designer to view and edit Web 2.0 resource models graphically.

2. The XMI document is exported from the UML Modeling Tool, then imported into the Transcoding Engine.3. An XSLT programmer edits the XSLT style sheets, such as XMI2HTML, XMI2KML, and XMI2RSS style sheets.4. The Transcoding Engine manipulates the XMI document by the different XSLT style sheets to derive various markup-

based documents.a. It manipulates the XMI document by the XMI2HTML to create the HTML document, then displayed in the Microsoft

IE browser.b. It manipulates the XMI document by the XMI2KML to create the KML document, then displayed in the Google

Earth.

Fig. 9. A sequence diagram of the MHTQ system.

Fig. 10. Overview of the prototype system.

I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76 73

c. It manipulates the XMI document by the XMI2RSS to create the RSS document, then displayed in the Google RSSreader.

This work develops the MHTQ system based on the above modeling with the Web2.0MUML profile. The MHTQ systemprovides visually geographic information, as shown in Fig. 11. Additionally, the query results can automatically convert tovarious markup-based documents, such as HTML, RSS, and KML, to display in web browser (A), Google RSS reader (B),and Google Earth (C), respectively.

Fig. 11. Map-based Highway Traffic Query (MHTQ) system.

74 I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76

7. Experimental results

This section evaluates the Web2.0MUML profile for Web 2.0-based applications against our requirements. The require-ments include heterogeneity and performance, which have been mentioned in Section 1.

7.1. Heterogeneous evaluation

The heterogeneous evaluation includes Web information independence, Web presentation independence, and Web 2.0client independence. This study adopts Web2.0MUML profile as a metamodel for modeling Web 2.0 mashups. Table 4 showssignificant comparisons between the Web 2.0 technologies and Web2.0MUML profile based on the heterogeneity. The inde-pendence of the platform and the hardware allows for a lightweight and simplified evolution of more complex Web 2.0-based applications. Furthermore, the constructs in the proposed MDA approach and Web2.0MUML profile are not specificallydesigned to match one particular Web 2.0-based application. Therefore, they can support the heterogeneity to develop var-ious Web 2.0-based applications.

7.2. Performance evaluation

As more and more Web 2.0 applications are becoming available on the Internet, the same Web content needs to be con-verted to display in different Web 2.0 clients. A much more flexible approach is to employ XSLT style sheets. With an XSLTstyle sheet, processor can extract and display Web content in a myriad of ways for different purposes. Various Web 2.0 cli-ents, such as Web browser, Blog reader, and Google Earth may be targeted. This study develops three XSLT style sheets,XMI2HTML, XMI2RSS, and XMI2KML, to convert XMI-based information to HTML, RSS, and KML, respectively. Therefore,the preliminary experiment of our prototype system focuses on evaluating the performance of the markup-based documenttranscoding for Web presentation.

The UML diagrams, which consist of lines, rectangles, polygons, ellipses and text labels, cannot be used to evaluate theperformance of the Web2.0MUML profile. The XML Metadata Interchange (XMI) [38] is an XML-based language that includesa full XML representation for UML diagrams. Existing UML modeling tools can export UML models in the XMI format, whichcreates an XML-based XMI file containing all the model data. Since XMI is a standard format, it can be imported by any othertool, thus establishing a common format across different tools. The proposed Web2.0MUML profile was used in the StarUMLmodeling tool [39] to generate an XMI file. An XMI file containing the XML-based module can be easily parsed and retrievedonce it becomes available. The XMI file is then automatically transformed into a markup-based document by using XSLT.

The test scenario contains three Web presentations, namely HTML, RSS, and KML, displayed in Fig. 11. The conditions ofexperience are described as follows:

1. Experiments were performed on a 3.4 GHz Intel Core i7 2600 PC with 8G of RAM running Windows 2008.2. Web information is encoded in XMI.3. The test dataset contains 1100 XMI-based Web information documents.

Table 4Related Web 2.0 technologies adopted to address the heterogeneous issues.

Web 2.0Mashups

Service Type Web2.0MUML profile ClientPlatform

Description

AJAX Webinteraction

<<ScriptLanguage>> Browser A simple client was built using Java Server Page (JSP) and AJAX to query MySQL,and display the traffic data.

GoogleMap Web Map <<XMLHttpRequest>> Browser Google Map API uses Javascript XMLHttpRequest objects to sent HTTP requestsand receive responses from Google Map server.

HTML Webpresentation

<<WebPage>> Browser The traffic data is rendered in HTML for browser.

KML Webpresentation

<<GeoPage>> GoogleEarth

The traffic data is coded to a KML document for Google earth.

RSS Web feed <<BlogPage>> Google RSSReader

The traffic data is described in RSS format for RSS reader.

Table 5Results of the transcoding experiments.

Web 2.0 Mashups XSLT Style Sheet Template Modules in the XSLT Style Sheet Average Transcoding Time

HTML XMI2XHTML 23 17.8 ms/per documentKML XMI2KML 21 17.1 ms/per documentRSS (Really Simple Syndication) XMI2RSS 15 14.3 ms/per document

I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76 75

Table 5 shows the execution times of different XML-based markup language transcodings. The 1100 XMI-based docu-ments undertaken transcoding tests by XMI2HTML, XMI2KML and XMI2RSS, for which the average transformation timeswere 17.8, 17.1 and 14.3 ms, respectively. The experimental results indicated that the XMIRSS had the slowest transforma-tion time for each XMI-based document followed by XMI2KML, and XMI2HTML. These experimental results indicate that themajor factor in transformation time is the number of template modules in an XSLT style sheet.

8. Summary and future work

Web 2.0 mashup is widely adopted in Web-based application systems to combine the various Web resources from otherwebsites. A systematic development methodology for Web 2.0 mashup modeling is essential when adopting Web 2.0 tech-nologies in software engineering. However, current Web 2.0 tools, do not provide conceptual or visual modelling for Web 2.0mashup applications. This study proposes an MDA-based approach to facilitate the use of software engineering techniques tomodel Web 2.0 applications.

The Semantic Web is an extension of the current web in which information is given well-defined meaning, better enablingcomputers and people to work in cooperation [40]. The main limitation of Web 2.0 applications is that it lacks the computer-interpretability to support knowledge representation for Web 2.0 mashup applications. One future work is to investigatehow to integrate Semantic Web technologies [41–43] into Web 2.0 mashups to facilitate the implementation of intelligentWeb 2.0-based applications. In recent years, cloud computing [44,45] is an emerging computing paradigm to facilitate therapid building new generation of information systems via the Internet. It provides the advantages of low cost, high perfor-mance, and scalability. Another topic for future work would be to extend Web2.0MUML profile to support the Web 2.0-basedapplications for cloud computing environment.

References

[1] O’Reilly, T. What is Web 2.0. 2005. Retrieved: 22 Oct. 2012. <http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html>.[2] I.V. Yakovlev, Web 2.0: is it evolutionary or revolutionary?, IEEE IT Professional 9 (6) (2007) 43–45[3] S. Murugesan, Understanding Web 2.0, IEEE IT Professional 9 (4) (2007) 34–41.[4] J. Byrne, C. Heavey, P.J. Byrne, A review of Web-based simulation and supporting tools, Simulation Modelling Practice and Theory 18 (3) (2010) 253–

276.[5] OMG. UML� Resource Page, 2010 (retrieved on 22.10.12). <http://www.uml.org/>.[6] OMG. Object Management Group, 2010. (retrieved on 22.10.12) <http://www.omg.org/>.[7] OMG. MDA� Specifications. 2010. Retrieved: 22 Oct. 2012, Available from: http://www.omg.org/mda/specs.htm.[8] L. Yonglin, W. Weiping, Z.Y. Li Qun, A transformation model from DEVS to SMP2 based on MDA, Simulation Modelling Practice and Theory 17 (10)

(2009) 1690–1709.[9] OMG. Unified Modeling Language (UML), version 2.2. 2010 (retrieved on 16.07.10). <http://www.omg.org/technology/documents/formal/uml.htm>.

[10] C. Schroth, T. Janner, Web 2.0 and SOA: converging concepts enabling the internet of services, IEEE IT Professional 9 (3) (2007) 36–41.[11] M. Almaoui, A. Kushki, K.N. Plataniotis, Metadata-driven multimedia transcoding for distance learning, Multimedia Systems 12 (6) (2007) 505–520.[12] J. Allen, Knowledge-sharing successes in web 2.0 communities, IEEE Technology and Society Magazine 29 (1) (2010) 58–64.[13] M. Wang, Integrating organizational, social, and individual perspectives in Web 2.0-based workplace e-learning, Information Systems Frontiers 13 (2)

(2011) 191–205.[14] Mitra, N., Lafon, Y. SOAP Version 1.2 Part 0: Primer (Second Edition), 2007 (retrieved on 22.10.12). <http://www.w3.org/TR/2007/REC-soap12-part0-

20070427/>.[15] R.T. Fielding, Architectural styles and the design of network-based software architectures, 2002 (retrieved 22.10.12). <http://www.ics.uci.edu/

~fielding/pubs/dissertation/top.htm>.[16] S.G. Eick et al., GeoBoost: An AJAX Web 2.0 Collaborative Geospatial Visualization Framework, in: Aerospace Conference, 2007, IEEE2007, IEEE, pp. 1–

10.[17] OMG. UML Profile for CORBA, v 1.0. 2010 (retrieved on 22.10.12). <http://www.omg.org/technology/documents/formal/profile_corba.htm>.[18] OMG, UML Profile for enterprise distributed Object Computing (EDOC), 2004 (retrieved 22.10.12). <http://www.omg.org/technology/documents/

formal/edoc.htm>.[19] OMG, UML Testing Profile, v 1.0., 2007 (retrieved on 22.10.2012). <http://www.omg.org/technology/documents/formal/test_profile.htm>.[20] I.B. Mohd Syazwan Abdullah, Richard F. Paige, Chris Kimble, A UML profile for knowledge-based systems modelling, in: K.-D.S. Christine Parent, Veda

C. Storey, Bernhard Thalheim (Eds.), International Conference on Conceptual Modeling, Springer, Auckland, New Zealand, 2007, pp. 438–453.[21] M.K. Torsten Fink, Karl Pauls, An MDA approach to access control specifications using MOF and UML profiles, Electronic Notes in Theoretical Computer

Science 142 (2006) 161–179.[22] I.-C. Hsu, Extending UML to model Web 2.0-based context-aware applications, Software: Practice and Experience 42 (10) (2012) 1211–1227.[23] D.G. Rosado et al, Developing a secure mobile grid system through a UML extension, Journal of Universal Computer Science 16 (17) (2010) 2333–2352.[24] H.K. Elminir, M.A. Elsoud, A.M.E. Halawany, UML-based web engineering framework for modeling web application, Journal of Software Engineering 5

(2) (2011) 49–63.[25] W. Dahman, J. Grabowski, UML-based specification and generation of executable Web services, Lecture Notes in Computer Science 6598 (2011) 91–

107.[26] OMG. Object Constraint Language Specification (version 2.0), 2010 (retrieved 22.10.2012). <http://www.omg.org/technology/documents/formal/

ocl.htm>.[27] J.M.T. Lidia Fuentes, Antonio Vallecillo, Using UML profiles for documenting Web-based application frameworks, Annals of Software Engineering 13

(2002) 249–264.[28] M. Kardoš, M. Drozdová, Analytical method of CIM to PIM transformation in model driven architecture, Journal of Information and Organizational

Sciences 34 (1) (2010) 89–99.[29] OMG. Documents associated with Common Warehouse Metamodel, v1.1, 2003. (retrieved 22.10.12). <http://www.omg.org/spec/CWM/1.1/>.[30] N. Koch, Transformations techniques in the model-driven development process of UWE, in: Model-Driven Web Engineering, 2006, Palo Alto.[31] S. Pepper, G. Moore, XML Topic Maps (XTM) 1.0 (retrieved 22.10.12). <http://topicmaps.org/xtm/>.[32] J.M. Blankenhorn Kai, A UML Profile for GUI Layout. NODe 2004, LNCS 3263, Springer-Verlag, Berlin, Heidelberg, 2004, pp. 110–121.[33] N. Moreno, P.F., A. Vallecillo, WebML Modelling in UML, IET Software 1 (3) (2007) 67–80.

76 I-Ching Hsu / Simulation Modelling Practice and Theory 31 (2013) 63–76

[34] E. Ort, S. Brydon, M. Basler, Mashup Styles, Part 1: Server-Side Mashups, 2007 (retrieved 22.10.12). <http://java.sun.com/developer/technicalArticles/J2EE/mashup_1/>.

[35] E. Ort, S. Brydon, M. Basler, Mashup Styles, Part 2: Client-Side Mashups, 2007 (retrieved on 22.10.12). <http://java.sun.com/developer/technicalArticles/J2EE/mashup_2/>.

[36] A. Marchetto, P. Tonella, F. Ricca, ReAjax: a reverse engineering tool for Ajax Web applications, IET Software 6 (1) (2012) 33–49.[37] ⁄⁄Xalan-Java. Xalan-Java. 2007. Retrieved: 22 Oct. 2012, Available from: http://xml.apache.org/xalan-j/.[38] OMG. MOF 2.0/XMI Mapping, v2.1.1. 2007. Retrieved: 22 Oct. 2012, Available from: http://www.omg.org/spec/XMI/2.1.1/.[39] StarUML. The Open Source for UML/MDA Platform. Retrieved: 22 Oct. 2012, Available from: http://staruml.sourceforge.net/en/.[40] T. Berners-Lee, J. Hendler, O. Lassila, The Semantic Web - A new form of Web content that is meaningful to computers will unleash a revolution of new

possibilities, Scientific American 284 (5) (2001) 34–43.[41] I.-C. Hsu, Intelligent Discovery for Learning Objects Using Semantic Web Technologies, Educational Technology & Society 15 (1) (2012) 298–312.[42] I.-C. Hsu, Personalized Web Feeds based on Ontology Technologies, Information Systems Frontiers (2012), http://dx.doi.org/10.1007/s10796-011-

9337-6.[43] I.-C. Hsu, Semantic Tag-based Profile Framework for Social Tagging Systems, The Computer Journal 55 (9) (2012) 1118–1129.[44] I.-C. Hsu, Y.K. Tzeng, D.-C. Huang, An Intelligent Military Scenario Development Platform based on Cloud Computing, Journal of Internet Technology 12

(6) (2011) 875–886.[45] I.-C. Hsu, Multi-layer Context Cloud Framework for Mobile Web 2.0: A Proposed Infrastructure, International Journal of Communication Systems

(2011), http://dx.doi.org/10.1002/dac.1365.