MetaPage

A Data Intensive MockupDD for Agile Web Engineering

Michele Angelaccio

Dept. of Management Engineering, University of Rome Tor Vergata, via del Politecnico 1, Rome, Italy

Keywords:

Agile Development, Web Engineering.

Abstract:

The dramatic growth of the Web and the richness of dynamic user interfaces have forced to adopt model

driven paradigm in web application design process. However the need to better synchronize with customers

has lead to consider new web application development through the use of frameworks such as mobile ﬁrst app

development platforms in which the development process is carried out following agile paradigm. For example

in ORION or XDK mobile web frameworks the mobile ﬁrst approach forces developer to adopt skeleton or

templates in the design process. As consequence could be of interest to explore how mockups could be inserted

at conceptual level in the design process. In a ﬁrst work towards this direction ( ((McDonald and Welland,

2003)), it has been discussed how agile techniques and in particular mockup driven methodologies, could be

introduced to reﬁne user interface models and to generate in a semi-automatic way UML models. In this work

we propose an agile approach to MDWE methodologies (called Data Intensive Mockup-Driven Development,

or DI-MockupDD) by introducing a mockup based dynamic data binding mechanism. As a result, we get an

example of agile an prototype-based iterative process which is data intensive.

1 INTRODUCTION

The dramatic growth of the Web and the richness

of dynamic user interfaces have forced to adopt

model driven paradigm in web application design

process. Starting from the Conallen Web Applica-

tion Model((Conallen, 1999)), many important model

driven frameworks have been studied and intensively

applied to web-based information management sys-

tems. However the need to better synchronize with

customers has lead to consider agile techniques and in

particular mockup driven methodologies which have

been introduced to reﬁne user interface models and

generate in a semi-automatic way UML models.

In particular, the need to have a Short-

development life-cycle time also for web design

is forcing many teams to develop javascript pages

with rich interfaces and without referring to exter-

nal reloading information coming from server or other

programming technologies. Many pure javascript Li-

braries are available for fast web development process

strictly based on javascript frameworks. Designers

are attracted by fast development cycle provided by

javascript frameworks (espresso and meteor) even if

available examples are quite easy (TO DO, blog, mini

portal etc.).

Agile Web Engineering (AWE) Process has been

introduced in (McDonald and Welland, 2003) and one

of the last proposed MD Web development platform

that has some agile issues has been described in (Cic-

chetti et al., 2009).

In this scenario, one of the ﬁrst attempt is de-

scribed in (Rivero et al., 2011) in which mockup mod-

els have been manually enriched by following a tag-

ging procedure. This solution then could be used to

generate abstract UML models. However this process

requires heuristics to complete the UML model deﬁ-

nition because it relies only on presentation model de-

rived from UI mockup without content deﬁnition. As

consequence, MockupDD-WE with tagging exten-

sions must be considered a partial MockupDD since

the user is forced to associate content information by

tagging user interface components. In this work we

propose, instead, a data intensive MockupDD based

on the extended model generation obtained by intro-

ducing a mockup based dynamic data binding mech-

anism. The idea is to make use of mockup proto-

types not only for presentation deﬁnition but also to

automatically complete UML data content deﬁnition

in a dynamic way by performing a data binding over

the prototype. This is obtained by means of a set of

Mockup canvas HTML5 data touch operations which

can be applied to the GUI prototype.

Angelaccio, M.

MetaPage - A Data Intensive MockupDD for Agile Web Engineering.

In Proceedings of the 12th International Conference on Web Information Systems and Technologies (WEBIST 2016) - Volume 1, pages 315-317

ISBN: 978-989-758-186-1

315

2 THE MOCKUP DRIVEN

METHODOLOGY

We aim to introduce a mockup-driven platform based

on ﬂexibility of HTML5 concepts such as canvas pro-

grammed as general IDE for target application in

which many of Model Driven Web engineering con-

cepts are embedded (content, navigations and user

interface tags). The motivating reason is to have a

new type of web frameworks which share the ad-

vantages of mockup driven engineering methodol-

ogy with the ones of model driven engineering ap-

proach without forcing user to work on different tools.

The Figure 1shows the overall organization that com-

bines a mockup wireframe editor with corresponding

HTML5-Javascript library used both for GUI editing

and for prototype execution.

MetaPage Mock Up Model

WebApp Catalogue

Data Model

Data Resource Binding

data

conﬁguration

Catalogue Header

Catalogue Area

List Collection

WebApp Catalogue Demo

Deploy

widget

Catalogue Header

Model

(SUI)

GUI

Tagging

Model

Transformation

UML

Model

(UWE)

Data

Tagging

Javascript Framework

DataStore

Model

Web Framework

Data

engineering

Mockup visual editor

Figure 1: The MetaPage Mockup-driven Agile Web Engi-

neering Organization.

This organization will be used in the context of

web engineering development process that combines

the mockup driven phase with modeling phase and

hence could improve the usage of web engineering

from agile teams. Figure 2 shows the iteration pro-

cess running an example of agile web engineering de-

velopment in which Mockup driven phases and Mod-

eling phases are used to generate intermediate models

and prototypes by following an agile iterative process.

Figure 2: The Agile Meta Page MDD Process.

Note that to obtain output results from each mod-

eling phase it has been used a speciﬁc GUI activity

node in which the user makes use of suitable inter-

ative operations carried out on the Mockup interface

by combining cursor and windowing operations with

embedded tagging system. This fact leads to con-

sider a new set of Mockup GUI operations called data

touch operations in which the user is able to perform a

model deﬁnition by clicking and selecting GUI com-

ponents with cursor and windowing redeﬁned in ac-

cord to MetaPage model. The next two ﬁgures out-

line a brief description of such data touch framework

by evidencing the relationship between Mockup deﬁ-

nition and corresponding UML derivation in the con-

text of UWE modeling language.

3 DATA TOUCH MODELING

OPERATIONS

In Figure 3 we have described two example of data

touch tag naming used to associate name values to

GUI elements denoting instances of corresponding

presentation class. The idea is to deﬁne as data touch

cursor a new type of extended cursor called MetaPage

data touch cursor which is obtained by including in

the corresponding mouse icon the given class name

label.

Class Name

Class name

..............

attr-name 2

..............

attr-name 1

Image GUI-label

UML Presentation Class

<<image>>

: Name1

Link Item

Class Name

Class name

Link Item

..............

attr-name 2

..............

attr-name 1

UML Presentation Class

<<anchor>>

: Name1

UWE-PresentationMockup

Figure 3: Data Touch Presentation Naming: MetaPage Cur-

sor operations.

Instead, in the case of navigation naming labels,

Figure 4 shows how the corresponding Class naviga-

tion diagram is generated by considering Mockup op-

erations according to an extended windowing system

called colour-based MetaPage data touch windowing

system.

APMDWE 2016 - International Workshop on Avanced practices in Model-Driven Web Engineering

316

UWE-Navigation

Mockup

UML Navigation Class

<<navigation>>

: Home

MetaPage Mock Up Model

WebApp Header

WebApp Area

List Collection

Class Menu Name

window resizing

Class Search-Index Name

window resizing

Class Home Node

window resizing

UML Navigation Class

<<menu>>

: CatalogueMenu

UML Navigation Class

<<query>>

: CatalogueSearch

UML Navigation Class

<<index>>

: CatalogueList

Figure 4: Data Touch Navigation Naming: MetaPage

Colour-based Navigation System.

4 CONCLUSIONS

In this paper we have introduced an agile web engi-

neering methodology that extends the MockupDD for

UML Web Engineering, by considering a Data inten-

sive Mockup DD Process aimed to design data inten-

sive Rich-Internet Applications by combining Agile

Development with classical Model Driven Web De-

velopment process in a unique visual framework. Our

approach starts by the requirement analysis obtained

through mockup deﬁnition with data models applied

to a generic Web catalogue example. Then we con-

sider the data binding mechanism in detail and show

how it can be used to generate in automatic way an ex-

ample of model transformation which generates in an

automatic way, a complete UML model for a differ-

ent example of catalogue (BookStore) starting from

Music Catalogue UML Model.

REFERENCES

Cicchetti, A., Di Ruscio, D., Eramo, R., Maccarrone, F., and

Pierantonio, A. (2009). becontent: A model-driven

platform for designing and maintaining web applica-

tions. In 9th International Conference on Web Engi-

neering (ICWE 2009), volume 5648 of LNCS, pages

518–522. Springer Berlin / Heidelberg.

Conallen, J. (1999). Modeling web application architec-

tures with uml. Commun. ACM, 42(10):63–70.

McDonald, A. and Welland, R. (2003). Agile web engi-

neering (awe) process: multidisciplinary stakehold-

ers and team communication. In Proceedings of

the 2003 international conference on Web engineer-

ing, ICWE’03, pages 515–518, Berlin, Heidelberg.

Springer-Verlag.

Rivero, J. M., Grigera, J., Rossi, G., Luna, E. R., and Koch,

N. (2011). Improving agility in model-driven web en-

gineering. In CAiSE Forum, pages 163–170.

MetaPage - A Data Intensive MockupDD for Agile Web Engineering

317