Virtual Worlds on Demand?

Model-Driven Development of JavaScript-based Virtual World UI

Components for Mobile Apps

Matthias Stürner and Philipp Brune

Department of Information Management, University of Applied Sciences Neu-Ulm, D-89231 Neu-Ulm, Germany

Keywords:

Model-Driven Software Development, Mobile UI, JavaScript, UML Modeling, Virtual Worlds, Computer

Games.

Abstract:

Virtual worlds and avatar-based interactive computer games are a hype among consumers and researchers for

many years now. In recent years, such games on mobile devices also became increasingly important. However,

most virtual worlds require the use of proprietary clients and authoring environments and lack portability,

which limits their usefulness for targeting wider audiences like e.g. in consumer marketing or sales. Using

mobile devices and client-side web technologies like i.e. JavaScript in combination with a more automatic

generation of customer-speciﬁc virtual worlds could help to overcome these limitations. Here, model-driven

software development (MDD) provides a promising approach for automating the creation of user interface

(UI) components for games on mobile devices. Therefore, in this paper an approach is proposed for the

model-driven generation of UI components for virtual worlds using JavaScript and the upcoming Famo.us

framework. The feasibilty of the approach is evaluated by implementing a proof-of-concept scenario.

1 INTRODUCTION

Social virtual worlds and computer games in which

the player has to move an avatar character through a

3D oder semi-3D scenery form an important part of

the computer games domain and provide also an in-

teresting concept, i.e. for online markerting, sales or

product presentation applications. However, existing

social virtual worlds and game environments mostly

require proprietary client software and lack general

acceptance outside their respective user communities,

which limits the possibilities for commercial applica-

tions (Stangl et al., 2012). Using purpose-speciﬁc vir-

tual worlds based on open client technologies embed-

ded into company web sites or mobile apps publicly

available would be an alternative.

In recent years, web technologies like JavaScript

(JS), HTML5 and CSS3 turned web browsers into

universal runtime environments for creating portable

user interfaces (UI) of so-called Rich Internet Ap-

plications (RIA) or hybrid mobile or desktop apps.

These applications offer complex functionality, high

interactivity and appealing visual design. Thus, they

also form a promising basis for implementing the

described purpose-speciﬁc virtual worlds. However,

to be feasible in practice this would require an efﬁ-

cient and highly automatic implementation of the vir-

tual world software components. Using model-driven

software development (MDD) to generate the neces-

sary interactive JavaScript UI components from Uni-

ﬁed Modeling Language (UML) models describing

the corresponding game scenario on a logical level

is one possibility to address this challenge (Huber

and Brune, 2012). Therefore, in the present paper

an approach is presented for generating UI compo-

nents from a UML model representing a scenario in

which the user navigates a character through a vir-

tual setting. The model is created within the Eclipse

IDE using the Ecore framework. From this model

a code generator creates the JavaScript code of the

UI components using the upcoming Famo.us frame-

work

. The feasibility of the approach is evaluated by

implementing a proof-of-concept scenario.

The rest of this paper is organized as follows: In

section 2 the related work is analyzed in detail. Sec-

tion 3 describes the design of the proposed UML

model and section 4 the implementation of the code

generator and its JavaScript library. The proof-of-

concept implementation and the evalutaion results are

presented in section 5. We conclude with a summary

of our ﬁndings.

http://famous.org

648

Stürner, M. and Brune, P.

Virtual Worlds on Demand? Model-Driven Development of JavaScript-based Virtual World UI Components for Mobile Apps.

DOI: 10.5220/0005726906480655

In Proceedings of the 4th International Conference on Model-Driven Engineering and Software Development (MODELSWARD 2016), pages 648-655

ISBN: 978-989-758-168-7

2 RELATED WORK

When it comes to MDD of web applications and espe-

cially RIA, several approaches have been proposed in

recent years that try to bring the paradigm of MDD

into the world of web engineering and highly in-

tearctive user interfaces (Pleuss et al., 2011; Sauer,

2011). One is UWE (UML-based Web Engineer-

ing) (Kraus et al., 2007; Kraus, 2007). For gener-

ating the UI, UWE contains a presentation model in

which the basic layout and functional structure of the

UI can be modeled using abstract elements, for ex-

ample buttons or text input ﬁelds. These elements

must then be mapped to concrete UI components

of the target platform. Also its application to spe-

ciﬁc web development platforms like UWE4JSF us-

ing Java ServerFaces (JSF) (Kroiss et al., 2009; Kroiß,

2008) or ASP.NET (Barabás and Kakucs, 2014) has

been demonstrated. (Koch et al., 2009) uses UML

state machines in order to describe patterns for the in-

teraction of UI components triggered by user or sys-

tem events, like e.g. onfocus or mouseover. These

patterns can be integrated into models of all UML-

based web methodologies. As a proof-of concept,

they choosed UWE and extended the presentation

layer meta-model to add the patterns to UI compo-

nents using meta-attributes. However, these patterns

only cover the interaction with the UI and not the

components themselves. Moreover, the RIA patterns

are not generated automatically but have to be trans-

lated into code manually.

A different approach extends the WebML stan-

dard

for modeling RIA (Bozzon et al., 2006a; Boz-

zon et al., 2006b). It focuses in particular on the dis-

tribution of functionality and data between the server

and the client as well as on the data model and busi-

ness logic. Regarding the UI, only the structure of the

page can be modeled, but not single UI components.

With WebRatio a WebML based tool exists

(Brambilla and Fraternali, 2014), which is also avail-

able as a commercial product. It was ﬁrst introduced

in 2001. Since then the tool, as well as the underlying

modeling language, have been under further develop-

ment. Nonetheless, WebRatio also focuses on data

models and business logic and lacks capabilities of

modeling UI components.

(Brambilla et al., 2014) describes an extension to

the Interaction Flow Modeling Language

(IFML) for

MDD of mobile applications based on HTML5, CSS

and JS, optimized for the Apache Cordova Frame-

work. IFML was developed by WebRatio and is in-

spired by their experience of WebML and the WebRa-

www.webml.org

www.ifml.org

tio tool. It has been adopted as a standard by the OMG

and can be used to model the structure and content of

web pages, as well as the users interaction for navi-

gating from one page to another. However, as stated

on the web site, “IFML does not cover the model-

ing of the presentation issues (e.g. layout, style and

look&feel) of an application front-end and does not

cater for the speciﬁcation of bi-dimensional and tri-

dimensional computer based graphics, video games,

and other highly interactive applications.”

. (Linaje

et al., 2009) combines WebRatio for data models and

business logic with the RUX-Method (Linaje et al.,

2007b) for the presentation layer, which focuses more

on the graphical UI than WebML. (Linaje et al.,

2010) also uses this combination and additionally in-

tegrates context-awareness into both methods (e.g.

time-aware presentation, location-aware services). As

described in (Linaje et al., 2008), the RUX-Method

breaks down the UI into three interface levels: Ab-

stract, Concrete and Final Interfaces. Each level is

build using components speciﬁed in a components li-

brary. But also RUX is lacking the capability of mod-

eling the components themselves. It has also been

combined with UWE for data and business logic (Pre-

ciado et al., 2008). Other approaches focus on mi-

grating legacy web applications to RIA using WebML

(Rodriguez-Echeverra et al., 2010) and RUX (Linaje

et al., 2007a).

Many of the above approaches use templates or li-

braries in terms of UI generation and none of them

cover the model-driven development of the UI com-

ponents themselves. In contrast, (Huber and Brune,

2012) focuses on the MDD of interactive UI com-

ponents using the canvas element of the recently an-

nounced HTML5 standard. However, the used meta-

model is rather simplistic and uses relatively primitive

graphical elements. For developing more complex ap-

plications using MDD, a higher level abstractions is

required.

Since JS has taken such an important role in

web engineering, many frameworks and libraries have

been developed to simplify and speed up the develop-

ment of websites with JS. Most noteworthy jQuery

which offers a wide variety of features like DOM ma-

nipulation, event handling, animation, and in particu-

lar a very fast and easy way to embed AJAX (Asyn-

chronous JavaScript and XML) functionality. In ad-

dition to the standard jQuery library there exist jQery

UI and jQuery Mobile. While many jQuery widgets

are developed by third party users and therefore not

guaranteed to be maintained and developed any fur-

www.ifml.org

http://www.jquery.com/

Virtual Worlds on Demand? Model-Driven Development of JavaScript-based Virtual World UI Components for Mobile Apps

649

ther, the Dojo Toolkit

offers similar functionality and

comes with a built-in subproject for UI widgets.

jQuery and Dojo have been evaluated along with

other JS frameworks regarding their quality of code

(complexity and maintainability), vulnerability, and

performance (Gizas et al., 2012) as well as with re-

spect to multimedia support (Rosales-Morales et al.,

2011).

Another framework offering great responsiveness

and therefore qualifying for the development of mo-

bile applications, is the Bootstrap

framework. It was

developed by Twitter and is currently the most popu-

lar project on GitHub

. It’s built-in layout functional-

ity uses a twelve column grid, that adapts to the users

viewport. If the screen is too narrow, the columns be-

come ﬂuid and are stacked vertically, in order to avoid

horizontal scrolling even on small screens.

Still in an early stage of development is the

Famo.us framework (Famo.us, 2014) with the distinc-

tive feature of a built in 3D layout engine and physics

animation engine, capable of rendering to DOM, Can-

vas, or WebGL. It can also be used for rendering in

applications, developed with the AngularJS

frame-

work and will be integrated into the next generation

of jQuery widgets (Borins, 2015). Despite its superior

3D graphics capabilities, it has not been evaluated so

far with respect to its usage for developing interactive

graphical UI components.

As one can see, many approaches exist in the

scientiﬁc literature as well as in practice for MDD

of client-server web applications or for simplifying

JavaScript development by using frameworks. How-

ever, few results have been proposed for MDD of

JavaScript UI components using these frameworks. In

particular, MDD of highly interactive JavaScript com-

ponents for implementing virtual world scenarios has

not been studied so far. Therefore, in the following the

question is addressed how JavaScript UI components

representing virtual world scenarios could be realized

using MDD and the Famo.us framework.

3 DESIGN OF THE UML MODEL

The proposed UML class model describes a UI com-

ponent representing a semi-3D scenery consisting of

a boardgame-like “stage” (2D grid), which represents

the virtual world and on which objects are either ﬁxed

to a position or could move across the ﬁelds. For

higher interaction, actions can be added to the objects

http://dojotoolkit.org

http://www.getbootstrap.com

https://github.com/

https://angularjs.org/

user for changing the object’s properties, e.g. anima-

tion speed, size, or opacity. Speciﬁc ﬁelds can also be

marked as an exit for redirecting the user to another

setting (i.e. a new scenery or game level).

Ecore serves as the modeling language. It is used

to deﬁne a model for the target domain, which is de-

signed using the Ecore Diagram Editor. The instance

models for the code generation are then created with

the EMF integrated editor. This editor offers a tree

based structure for modeling and automatically gen-

erates an XMI ﬁle representing the modeled instance.

Ecore was chosen as modeling language since it is

free, open-source, and can be used with the popular

Eclipse IDE. It also offers all the needed modeling

elements like classes, attributes, references and inher-

itance.

The proposed UML class model is shown in ﬁg-

ure 1. Its structure is guided by the idea of repre-

senting a speciﬁc scenery (representing i.e. a room or

level of a virtual world) in a stage-like fashion by a

rectangular ﬁeld made up of quadratic cells (like e.g.

on a chess board), each adressable by position (x,y)-

coordinates. The ﬁeld represents the ‘’ﬂoor” of the

scenery. On this ﬁeld, objects (representing charac-

ters, scenery items ec.) could be placed and moved

around.

The root element of the metamodel is the Appli-

cation class in the top left. An Application instance

represents a set of Field objects (representing levels

or sceneries). It does not have any attributes and only

serves as a container for the other elements. With-

out the Application class a new model instance would

have to be created for each ﬁeld and the generator

would have to be executed for each resulting model

ﬁle. Therefore the Application class makes the de-

velopment process more efﬁcient when creating more

than one ﬁeld at once. An Application consists of one

or more ﬁelds.

The Field class is the main class of the model

and represents the ‘’ﬂoor” of the scenery, i.e. the

light blue, two-dimensional plain in ﬁgure 2. It has

a name attribute, which will later be the name of the

folder in which the generator puts the source code for

the ﬁeld. The surfaceSize speciﬁes the size of each

square on the ﬁeld. The color attribute deﬁnes the

color and can be in hexadecimal (e.g. #AA00FF) or

rgb (e.g. rgb(176,0,255)) format. The next three at-

tributes, borderWidth, borderStyle, and borderColor,

determine the border of each square and have to be

formatted like CSS border values. tiltX, tiltY, and tiltZ

are used for tilting the ﬁeld, to give it a three dimen-

sional effect. The last attribute of the ﬁeld class is

called content and indicates the image that should be

used as a background for each square.

MODELSWARD 2016 - 4th International Conference on Model-Driven Engineering and Software Development

650

Figure 1: Proposed UML class model describing the UI component for a virtual world scenario.

Each ﬁeld uses a Map instance, which speciﬁes

the size and shape of the ﬁeld. The upper left corner

is position [0,0], from there on x increments to the

right and y downwards. The format of the attribute

positions has to be a string of 1s and 0s, separated by

commas. A 1 indicates that this position is part of the

ﬁeld and a square will be drawn at this position. A 0,

on the other hand, indicates that this position should

be left out. The String will later be transformed to an

array. A ﬁeld is always quadratic and its size is deter-

mined by taking the square root of that array. For ex-

ample the string "1,1,1, 1,0,1, 1,1,1" results in a 3× 3

ﬁeld with an empty space in the middle. If the num-

ber of provided positions is not quadratic, a smaller

quadratic ﬁeld is created and the additional positions

are ignored. For example if the positions string con-

tains 17 values, a 4 × 4 ﬁeld is created and the last

positions is ignored.

With the Music class, a background music can be

added to a ﬁeld. The attribute track represents the

name of the sound ﬁle and the boolean value playOn-

Start indicates if the music should play right away

upon display of the ﬁeld. The ﬁle can be of any format

supported by the HTML5 <audio> element.

The Exit class is used to redirect the user to an-

other ﬁeld, when he or she moves an object to the

position of the exit. PosX and posY specify the posi-

tion of the exit on the ﬁeld. The string target deﬁnes

the name of the ﬁeld to which the user should be redi-

rected.

The Object class represents objects on the ﬁeld

(characters and other items). A ﬁeld contains at least

one object and a maximum of one object per avail-

able position. Object is an abstract class and serves

as a parent for MovableObject and UnmovableOb-

ject, containing all their common attributes. posX and

posY indicate the initial position of the object on the

ﬁeld. If the position doesn’t exist, or is already occu-

pied by another object, the object is ignored. The size

attribute determines its size and content the image that

serves as a visual representation on the ﬁeld. rotateZ

and rotateY are used to rotate the object. These val-

ues are in radians, so the input of π for example, will

result in a rotation of 180 degrees. An object can also

be animated by specifying a rotationSpeed other than

0. This will result in an object continuously spinning

around its y-axis. A higher value results in a faster

animation.

The class UnmovableObject doesn’t require any

additional attributes. MovableObject on the other

hand contains a boolean value called hasDirection to

deﬁne whether the content of its image is looking in a

certain direction. If this is set to true, the image will

be turned around in the direction the object is moving.

A MovableObject is animated by a Transition.

The duration attribute determines the duration of the

animation and the curve attribute indicates a curve

from the Famo.us Easing class.

A listener pattern is used to implement the reac-

tions to the events triggered by movin onto certain

ﬁelds or interacting with other objects. The EventLis-

tener class was designed for adding reactions to cer-

tain events. Therefore, a reaction has to be imple-

mented in the function attribute and a trigger has to

specify when this function should be executed.

The Action class offers ways the user can inter-

act with the objects, besides moving them across the

ﬁeld. It is an abstract class and has two relations. The

ﬁrst relation implies that an action is performed by an

object. The second relates an action to a ﬁeld. This

Virtual Worlds on Demand? Model-Driven Development of JavaScript-based Virtual World UI Components for Mobile Apps

651

second relation enables an action to be performed by

multiple objects. As a consequence, e.g. if three ob-

jects perform the same action, it only has to be mod-

eled once.

There are several predeﬁned actions. SlowDown

increases the duration of an object’s transition and

therefore slowing down its movement. delta deﬁnes

the amount by which the duration is increased and

max speciﬁes the maximum for the duration value.

Hurry implements the opposite effect. Other sim-

ilar actions are the Grow and Shrink actions, but in-

stead of altering the object’s movement they increase

or decrease its size.

The Talk action is used for taking a text input from

the user and displaying it in a rectangle next to the ob-

ject for as many milliseconds as supplied in the dura-

tion attribute.

For audiovisual interaction the PlaySound action

can be added to an object. When executed the ﬁle

deﬁned in the ﬁle attribute will be played. Moreover,

the volume can be set to a value between 0 and 1.

Finally, the CustomAction class allows the devel-

oper to add manually written functions. Besides the

function itself, a name and a title for the action have

to be deﬁned. The name attribute uniquely identiﬁes

the action and the title speciﬁes the action’s title. An

action can be combined with the EventListener to en-

able objects to interact among themselves.

4 MODEL TRANSFORMATION

AND CODE GENERATION

The generator, which transfers these models to exe-

cutable code, is implemented in Java, which was cho-

sen since the generator should be easily integratable

in the Eclipse IDE framework (written also in Java)

and the Java ecosystem provides well established li-

braries to support the necessary processing steps.

The generator makes use of the DocumentBuilder

class from the package javax.xml.parsers to create a

DOM object from the XMI ﬁle. The DOM object is

then parsed using the NodeList and Element classes

from the org.w3c.dom package. The result of the gen-

eration process is a JavaScript application which can

be viewed in a browser by opening a generated in-

dex.html ﬁle.

Sound ﬁles and images used by the modeled ap-

plication have to be copied either into the sounds re-

spectively graphics folder within the source folder in

advance or in respective folders of the target directory

after the generator has been executed.

The generated JavaScript code uses a cus-

tom JavaScript class library which encapsulates the

Famo.us functionality and provides classes corre-

sponding to the classes deﬁned in the UML model as

far as necessary.

5 PROOF-OF-CONCEPT

IMPLEMENTATION

To demonstrate the feasibility of the proposed ap-

proach, a prototype virtual world scenario was mod-

eled and generated. The resulting JavaScript applica-

tion generated by the code generator is shown in the

screenshot in ﬁgure 2. To generate this scenario, ﬁrst

an instance of the UML model of ﬁgure 1 was created

using the built-in Eclipse EMF editor. This editor au-

tomatically creates a XMI ﬁle and visualizes the con-

tent in a tree-like structure. Values for the attributes

of the currently selected element are entered using the

properties view in Eclipse. Additionally, the editor of-

fers live validation of the models and indicates miss-

ing attributes or elements immediately.

Figure 3 shows a screenshot of the tree-like

structure of the prototype instance model within the

Eclipse EMF editor. The ﬁrst element to be added

for each application is a ﬁeld, representing the scene.

For each ﬁeld, a map is added to deﬁne the shape and

size of the ﬁeld. For the prototype, the result will be

a ﬁeld with 6 × 6 positions, but only the three inner

positions of each row will be accessible. An exit to

another ﬁeld is added at position [3,3]. Moreover, a

background music will start playing once the browser

has loaded the page containing the ﬁeld.

The protoype ﬁeld contains four objects. One

unmovable and three movable objects. The last ob-

ject also includes an event listener which is executed

whenever the user uses the talk function of another

object with the input "Hello Partner!". When mod-

eling event listeners, their parent object can be refer-

enced by the keyword thisObject. The generator will

automatically replace the keyword with a reference to

the parent object. If elements of a subclass are added,

the type is added as an attribute to distinguish between

the different subclasses. The actions of the element

are speciﬁed by two indexes. The ﬁrst one indicates

in which ﬁeld node of the application the action was

deﬁned and the second one is the index of the action

itself inside of that ﬁeld node. This means that it is

possible to use an action deﬁned in one ﬁeld for ob-

jects throughout the whole application.

The last step is to add the actions. For demon-

stration purposes a minimalistic custom action is also

part of the prototype model. Since the relationship be-

tween action and object is bi-directional in the model,

actions also have an attribute containing the objects

MODELSWARD 2016 - 4th International Conference on Model-Driven Engineering and Software Development

652

Figure 2: Screenshot of the prototype virtual world scenery generated from the modeled instance.

Figure 3: Tree-like representation of the model instance in the Eclipse EMF editor.

Virtual Worlds on Demand? Model-Driven Development of JavaScript-based Virtual World UI Components for Mobile Apps

653

that perform them.

To further evaluate the approach, the prototype

model was extended by a second ﬁeld. To demon-

strate the interaction with the user, several movable

objects were added to the ﬁeld. Moreover multiple ac-

tions are performed by the individual objects, letting

the user modify their appearance. For objects con-

taining the talk action, the user can enter text into the

input ﬁeld in the top left, which is then displayed in

a dialogue box next to the selected object. An event

listener has been added to one of the objects, reply-

ing automatically if the user enters a certain text. The

ﬁeld also includes a background music, which can be

played by clicking on the speaker icon in the top right

corner. Sound can also be played by objects, when

selecting the Play Sound entry in their action view.

The time needed for creating this ﬁeld was sig-

niﬁcantly lower compared to a manual implementa-

tion. It was also faster than copying the code of one

ﬁeld and then altering it to design a new one. The

main reason for the reduced time effort is the much

higher abstractions that are used for development.

Additionally, the use of the tree-based Eclipse edi-

tor also increases the development speed, especially

when reusing actions for several objects. The live

model validation offers early error detection, so no

time is wasted with failed generator runs. However,

there are also some drawbacks in the development

process. The properties view of Eclipse, which is used

to enter the values for the attributes is not suited for

comprehensive inputs like i.e. long arrays or func-

tions. Moreover, the Ecore feature of automatically

setting default values and leaving out attributes in the

XMI ﬁle made the implementation of the generator

more challenging.

6 CONCLUSIONS

In conclusion, in this paper an approach for imple-

menting JavaScript UI components representing vir-

tual world scenarios using MDD was proposed. Using

the Ecore modeling language, a metamodel contain-

ing classes for modeling a semi-3D game-like envi-

ronment and the corresponding code generator were

developed. While using high abstractions for the

modeled classes, the EventListener and CustomAc-

tion classes also allow the developer to manually add

functionality.

The code generator was implemented in Java

for transforming model instances into executable JS

code. The underlying JS codebase was developed

with the upcoming Famo.us framework, offering so-

phisticated animations for the UI components.

The approach was evaluated by a proof-of-concept

implementation demonstrating its general feasibility,

revealing the advantages and disadvantages of the

Eclipse-based model editor. However, further re-

search is needed to evalaute the approach in more

complex scenarios and also in real-world case studies

and to analyze its integration with the business logic

tier and back-end systems.

REFERENCES

Barabás, L. and Kakucs, B. (2014). Model-driven devel-

opment of web applications. International Journal on

Recent Trends in Engineering & Technology, 10(1).

Borins, M. (2015). Famo.us partners with the jquery foun-

dation.

Bozzon, A., Comai, S., Fraternali, P., and Carughi, G. T.

(2006a). Capturing ria concepts in a web modeling

language. In Proceedings of the 15th International

Conference on World Wide Web, WWW ’06, pages

907–908, New York, NY, USA. ACM.

Bozzon, A., Comai, S., Fraternali, P., and Carughi, G. T.

(2006b). Conceptual modeling and code generation

for rich internet applications. In Proceedings of the 6th

International Conference on Web Engineering, ICWE

’06, pages 353–360, New York, NY, USA. ACM.

Brambilla, M. and Fraternali, P. (2014). Large-scale model-

driven engineering of web user interaction: The

webml and webratio experience. Science of Computer

Programming, 89:71–87.

Brambilla, M., Mauri, A., and Umuhoza, E. (2014). Ex-

tending the interaction ﬂow modeling language (ifml)

for model driven development of mobile applications

front end. In Mobile Web Information Systems.

Famo.us (2014). Famo.us layout.

Gizas, A., Christodoulou, S., and Papatheodorou, T. (2012).

Comparative evaluation of javascript frameworks. In

Proceedings of the 21st International Conference

Companion on World Wide Web, WWW ’12 Compan-

ion, pages 513–514, New York, NY, USA. ACM.

Huber, M. and Brune, P. (2012). Model-driven development

of interactive web user interfaces with html5. Univer-

sity of Applied Sciences Neu-Ulm.

Koch, N., Pigerl, M., Zhang, G., and Morozova, T. (2009).

Patterns for the model-based development of rias. In

Gaedke, M., Grossniklaus, M., and Díaz, O., editors,

Web Engineering, volume 5648 of Lecture Notes in

Computer Science, pages 283–291. Springer Berlin

Heidelberg.

Kraus, A. (2007). Model driven software engineering for

web applications. PhD thesis, Ludwig-Maximilians-

Universität München.

Kraus, A., Knapp, A., and Koch, N. (2007). Model-driven

generation of web applications in uwe. MDWE, 261.

Kroiß, C. (2008). Modellbasierte generierung von

web-anwendungen mit uwe. Ludwig-Maximilians-

Universität München.

MODELSWARD 2016 - 4th International Conference on Model-Driven Engineering and Software Development

654

Kroiss, C., Koch, N., and Knapp, A. (2009). Uwe4jsf:

A model-driven generation approach for web appli-

cations. In Gaedke, M., Grossniklaus, M., and Diaz,

O., editors, Web Engineering, volume 5648 of Lecture

Notes in Computer Science, pages 493–496. Springer

Berlin Heidelberg.

Linaje, M., Preciado, J., Morales-Chaparro, R., Rodriguez-

Echeverra, R., and Sánchez-Figueroa, F. (2009). Au-

tomatic generation of rias using rux-tool and webratio.

In Gaedke, M., Grossniklaus, M., and Díaz, O., edi-

tors, Web Engineering, volume 5648 of Lecture Notes

in Computer Science, pages 501–504. Springer Berlin

Heidelberg.

Linaje, M., Preciado, J., and Sanchez-Figueroa, F. (2007a).

Engineering rich internet application user interfaces

over legacy web models. Internet Computing, IEEE,

11(6):53–59.

Linaje, M., Preciado, J., and Sánchez-Figueroa, F. (2007b).

A method for model based design of rich internet ap-

plication interactive user interfaces. In Baresi, L., Fra-

ternali, P., and Houben, G.-J., editors, Web Engineer-

ing, volume 4607 of Lecture Notes in Computer Sci-

ence, pages 226–241. Springer Berlin Heidelberg.

Linaje, M., Preciado, J. C., Morales-Chaparro, R., and

Sanchez-Figueroa, F. (2008). On the implementation

of multiplatform ria user interface components. In

7Th International Workshop On Web-Oriented Soft-

ware Technologies–IWWOST, volume 8, pages 50–55.

Linaje, M., Preciado, J. C., and Sánchez-Figueroa, F.

(2010). Multi-device context-aware rias using a

model-driven approach. Journal of Universal Com-

puter Science, 16(15):2038–2059.

Pleuss, A., Gra

canin, D., and Zhang, X. (2011). Model-

driven development of interactive and integrated 2d

and 3d user interfaces using mml. In Proceedings of

the 16th International Conference on 3D Web Tech-

nology, Web3D ’11, pages 89–92, New York, NY,

USA. ACM.

Preciado, J., Linaje, M., Morales-Chaparro, R., Sanchez-

Figueroa, F., Zhang, G., Kroiss, C., and Koch, N.

(2008). Designing rich internet applications combin-

ing uwe and rux-method. In Web Engineering, 2008.

ICWE ’08. Eighth International Conference on, pages

148–154.

Rodriguez-Echeverra, R., Conejero, J., Linaje, M., Pre-

ciado, J., and Sanchez-Figueroa, F. (2010). Re-

engineering legacy web applications into rich internet

applications. In Benatallah, B., Casati, F., Kappel, G.,

and Rossi, G., editors, Web Engineering, volume 6189

of Lecture Notes in Computer Science, pages 189–

203. Springer Berlin Heidelberg.

Rosales-Morales, V., Alor-Hernandez, G., and Juarez-

Martinez, U. (2011). An overview of multimedia sup-

port into javascript-based frameworks for developing

rias. In Electrical Communications and Computers

(CONIELECOMP), 2011 21st International Confer-

ence on, pages 66–70.

Sauer, S. (2011). Applying meta-modeling for the deﬁ-

nition of model-driven development methods of ad-

vanced user interfaces. In Hussmann, H., Meixner, G.,

and Zuehlke, D., editors, Model-Driven Development

of Advanced User Interfaces, volume 340 of Studies

in Computational Intelligence, pages 67–86. Springer

Berlin Heidelberg.

Stangl, B., Kastner, M., and Polsterer, F. (2012). Social vir-

tual worlds’ success factors: Four studies’ insights for

the tourism supply and demand side. In System Sci-

ence (HICSS), 2012 45th Hawaii International Con-

ference on, pages 993–1002.

Virtual Worlds on Demand? Model-Driven Development of JavaScript-based Virtual World UI Components for Mobile Apps

655