ICWE 2008 Workshops, 7th Int.

Workshop on Web-Oriented Software Technologies – IWWOST 2008

Modelling and Generating A JAX Applications:

A Model-Driven Approach

Vahid Gharavi, Ali Mesbah, Arie van Deursen

Delft University of Technology
The Netherlands
{S.V.VahidGharavi, A.Mesbah, Arie.vanDeursen}@ewi.tudelft.nl

Abstract environments from an architectural point of view. A frame-

work which is fit for the project today could easily be out
A JAX is a promising and rapidly evolving approach for featured by a new one tomorrow.
building highly interactive web applications. In A JAX, user One way to tackle these challenges is by abstracting
interface components and the event-based interaction be- from the implementations through a Model-Driven Engi-
tween them form the founding elements, whereas in classic neering [13] approach, in which the A JAX application is
web applications the notions of web pages and hypertext defined in a modelling language and the corresponding web
links are central. Therefore modelling A JAX requires a dif- code is automatically generated. This approach enables us
ferent approach than what the current web modelling tools to define the application once and generate the same appli-
are providing. In this paper we propose a UML scheme cation to different frameworks.
for modelling A JAX user interfaces based on the MDA ap-
There are different ways of modelling software systems.
proach. We adopt A NDRO MDA for creating an A JAX car-
The Object Management Group (OMG) has devised a num-
tridge to generate an entire A JAX-based web application
ber of standards for software development under its Model-
with automatic back-end integration. The implementation
Driven Architecture (MDA) approach [12].
of this cartridge is a work in progress.
In this paper we explore an MDA approach for A JAX
web applications. The first step in an MDA approach to ap-
plication development is modelling; We therefore look into
1 Introduction how an A JAX web application can be modelled, while hav-
ing the ultimate goal of code generation from the models in
In the years following the arrival of the Internet, new mind. We propose a UML scheme for modelling A JAX user
web-based software technologies and platforms have been interfaces, and report on our intended approach of adopting
emerging in an overwhelming pace. Recently, a broad col- A NDRO MDA for creating an A JAX cartridge to generate
lection of new trends have appeared under the Web 2.0 um- the corresponding A JAX application code, in ICE FACES,
brella, changing the classical web interaction significantly. with back-end integration.
A prominent enabling technology in Web 2.0 is A JAX The paper is organized as follows. We start out, in Sec-
(Asynchronous JavaScript and XML) [5, 10], in which tion 2, by sketching the problem statement. In Section 3,
a clever combination of JavaScript and Document Ob- we explore the related work on current model-driven ap-
ject Model (DOM) manipulation, along with asynchronous proaches for the web. In Section 4 we discuss A N -
delta-communication is used to achieve a high level of user DRO MDA. In Section 5, the proposed A JAX meta-model
interactivity on the Web [8]. After its inception in 2005, nu- and the generation process are presented, after which Sec-
merous A JAX frameworks and libraries have appeared and tion 6 discusses the findings and open issues. We conclude
the technology has been evolving fast. the paper with a brief summary of our key contributions and
Maintaining web applications and keeping them up to suggestions for future work.
date with new technologies are often complex and expen-
sive tasks. Furthermore, the integration of different tech-
nologies, from front-end to back-end, seems challenging, 2 Problem Statement
yet a necessity in building enterprise web applications.
When adopting a new and evolving technology such as A JAX is a technique based on a collection of web tech-
A JAX, it is very important to be able to cope with changing nologies which can be used to create highly interactive web

32
 ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008

applications. The interactivity aspect is manifested by the Conallen [4] proposes a UML profile for modelling web
fact that refreshing the whole page is not needed for each applications. This approach is widely referenced as a web
client server interaction. The user interface can consist of modelling scheme. Koch and Kraus [6] propose UWE,
a single web page composed of UI components which can a UML profile and notations for modelling the navigation
be acted upon and updated independently of other compo- and conceptual aspects of a web application. Both ap-
nents. This technique has made it possible to port similar proaches are aimed at classic multi-page web applications.
versions of many desktop applications to the web, exam- RUX-model [2, 14] is an MDA approach towards Rich
ples of which include office tools such as word processors Internet Applications (RIA) based on WebML. In this ap-
(Google Docs and Spreadsheets1 ) and e-mail management proach WebML is extended with notations which indicate
software (Yahoo! Mail2 ). whether certain data is stored or presented on the client or
A JAX applications can be seen as a hybrid of desktop the server. In the latter stages, the RIA is modelled using the
(e.g., Swing) and web applications, inheriting characteris- RUX-model notation (not UML) and subsequently Flash-
tics from both worlds [10]. Therefore modelling A JAX re- based RIA instances (e.g., OpenLaszlo) are generated. Ac-
quires a different approach than what the current web mod- cording to the authors, also the same models can be used to
elling tools are providing. Whereas in classic web appli- generate A JAX applications. It appears that only the user in-
cations the notion of web pages and links between them terface part is generated by RUX-model since issues such as
is central, in A JAX, user interface components and the the back-end or the toolkits employed in the generation of
event-based interaction between them form the founding el- the whole web application are not mentioned. RUX-model
ements. is currently unavailable for experimenting.
The advantages of MDA [11] encouraged us to explore Another attempt at an MDA approach for RIAs is found
the possibilities of creating a tool which can transform in [7]. The approach is based on XML User Interface de-
a platform independent model (PIM) to a platform specific scription languages and XSLT is used as the transformation
model (PSM) and subsequently to a single-page A JAX web language between the different levels of abstraction. Again,
application. While tools exist for the generation of applica- this approach is oriented towards the User Interface and
tions for specific platforms such as J2EE and .NET, we have lacks flexibility in an MDA approach for the whole web
not encountered any such tool for A JAX. With such a trans- application. It also lacks a visual notation and cannot be
formation, models used to generate legacy web applications modelled using existing CASE-tools. This is also true in
can be used to generate single-page web applications and the case of other XML-based UI languages such as XUL3 ,
vice versa. Also the same models can be used to generate XAML4 and UIML [1] which do not offer the simplicity of
code for different A JAX frameworks. a visual model.
We are interested in an MDA approach for the main Visser [15] proposes a domain-specific language called
structure of the A JAX application, as well as the possibil- WebDSL for developing dynamic web applications with
ity of integrating with back-end components such as Spring a rich data model. WebDSL applications are translated to
and Hibernate. It should also be possible to model which classical Java web applications, building on the JSF, Hiber-
events affect which components (listeners). For the sake of nate, and Seam frameworks.
simplicity, we propose to leave certain layout information openArchitectureWare5 (oAW) is currently one of the
such as the precise position of components and styling, out leading open-source MDA generator frameworks. It is very
of the abstract models. extensible and supports model-to-model and model-to-text
transformations. However, oAW does not come with com-
3 Related Work plete integrable transformations for different web platforms,
nor does it define platform-independent elements which
There have already been several developments in the area can be used across web applications (and possibly other
of MDA for the web. In this section we explore some of the paradigms). The lack of the aforementioned possibilities
most relevant approaches. are certainly not necessities for a good MDA framework yet
The Web Modeling Language (WebML) [3] is a vi- we consider them very convenient when working with a set
sual notation for specifying the structure and navigation of varying technologies intended for web applications.
of legacy web applications. The notation greatly resem- One approach which has gained much attention in the
bles UML class and Entity-Relation diagrams. Presentation web-based MDA community is the A NDRO MDA MDA
in WebML is mainly focused on look and feel and lacks generator6 . We have based our approach on A NDRO MDA
the degree of notation needed for A JAX web user inter-
3 http://www.mozilla.org/projects/xul/
faces [2, 14]. 4 http://www.xaml.net/
1 http://documents.google.com/ 5 http://www.openarchitectureware.org
2 http://mail.yahoo.com 6 http://www.andromda.org

33
 ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008

which is an open-source extensible MDA framework.

This framework provides platform-independent modelling
schemes to model and integrate a wide variety of scenarios
and comes with a set of plugins, called cartridges, which
manage transformations to several different web settings
that use a combination of frameworks such as JSF, Struts,
JSR/EJB, Spring, and Hibernate.
One point in favour of openArchitectureWare is the clean
separation between the different models. Where in A N -
DRO MDA it is not possible7 to tweak the PSM before trans-
forming to code or other PSMs, this remains attainable with
openArchitectureWare.
Aside from RUX, none of the approaches mentioned
above explore an MDA approach for A JAX web applica-
tions.

4 MDA using AndroMDA

In Section 5 we will investigate how an MDA tool such

Figure 1. P ERSON M ANAGER Use Cases used
as A NDRO MDA can be used to model A JAX applications.
by A NDRO MDA.
Before doing that, we first discuss A NDRO MDA itself.

4.1 Example Application

but it is possible to add new PIM elements such as UML
In order to demonstrate the concepts more clearly, we stereotypes and tagged values. The transformation be-
have created an example CRUD application for managing tween the PIM, PSM, and code is carried out by what A N -
persons. The example has been built using A NDRO MDA DRO MDA calls metafacades (metamodel facades). Metafa-
and uses the JSF, Spring and Hibernate frameworks. The cades are gateways to metamodel elements derived form the
application is called P ERSON M ANAGER and can be used to models and they provide access to the model from the car-
create new persons, remove or update existing ones and to tridge templates. The function of metafacades is best de-
display the list of all persons found in the database. scribed through an example. For instance, in a PIM model,
a class exists with a stereotype called TextInput. Let’s say
4.2 AndroMDA in our cartridge, we want to transform such a stereotyped
class to either a text field or a text area in an HTML page.
In the UML metamodel, TextInput is an instance of the
We have decided to use A NDRO MDA to create an MDA
Class class. A NDRO MDA allows access to this instance via
A JAX cartridge. The main reason behind this decision is
metafacades, which are classes with methods for accessing
the availability of cartridges for different technologies and
various properties of this instance, such as it’s fully quali-
platforms, as well as the ease of integration which A N -
fied name. Such a metafacade could be called TextInputFa-
DRO MDA provides for these web technologies. In A N -
cade. A cartridge wanting access to the TextInput instance
DRO MDA we can use the same models to generate a web
can define its own metafacades, which can access the higher
application which uses JSF-Spring-Hibernate as well as one
level facades such as TextInputFacade. Thus for our car-
which uses Struts-Hibernate. Furthermore, A NDRO MDA
tridge we can define an HTMLTextInputFacade which can
already defines PIM meta-elements which should hold for
decide whether to interpret a text input as an HTML text
a variety of different platforms. This makes the implemen-
area or a text field. This cartridge metafacade can base this
tation of an A JAX cartridge easier since we can concentrate
decision on the properties of the TextInput instance which it
on the transformation and the creation of an A JAX-specific
can access through TextInputFacade.
meta-model.
For a typical application which contains a user inter-
While the PSM specifications are contained in the car-
face, A NDRO MDA uses UML use case diagrams to define
tridges, A NDRO MDA contains a list of platform indepen-
the possible scenarios and to split up the application into
dent elements which can be used to model the PIMs. These
smaller parts. Figure 1 contains an A NDRO MDA use case
elements should generally be enough to model most cases
diagram for our P ERSON M ANAGER example application.
7 The latest version of A NDRO MDA is 4.0 and our work is based on version 3.3 It can be applied to different cartridges which are capable

34
 ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008

Figure 2. Add Person Activity Diagram.

of generating a UI. In the context of a web application these

four use cases should be presentable to a user through the
browser. The A NDRO MDA FrontEndUseCase stereotype
is applied to use cases which are used in the front-end of
an application. The FrontEndApplication stereotype defines Figure 3. The proposed A JAX metamodel.
which use case is the application’s entry-point. Evidently
there can be only one use-case which can be an instance of
this stereotype. 5.1 A Metamodel for A JAX
The inner workings of each use case is subsequently
specified using UML Activity Diagrams. Figure 2 shows We have devised an A JAX metamodel to be used in the
the activity diagram corresponding with the add person use PSM layer of A NDRO MDA. This metamodel should be
case of Figure 1. The activities are either server side or able to capture the main structure of most A JAX user in-
client side. The FrontEndView stereotype denotes an ac- terfaces.
tivity which is client side, meaning it should be rendered The semantics of an A JAX user interface closely resem-
as a user interface. The server side activities can initiate bles that of a native desktop application. In both cases the
events which initialise form fields or store data retrieved user interface consists of a tree of application artifacts such
from forms. Outgoing associations from FrontEndView can as windows, labels and buttons. Therefore examining how
contain triggers with a list of parameters. These parameters the UI of desktop applications is modelled seems to be a rea-
will be transformed to input fields in the form. sonable starting point to creating a modelling scheme for
The diagrams mentioned above are concerned with the A JAX. Desktop and A JAX applications generally offer the
front-end and should be connected to diagrams which are following UI components [9]: Input components (e.g., text
used to model the back-end. field with auto-completion feature, text area, button, file, an-
In A NDRO MDA, the back-end of the web application is chor, radio button and checkbox); Output components (e.g.,
modelled using stereotyped class diagrams, similar to the label and media); Layout components (e.g., panel layout,
conceptual models of UWE and WebML. The classes in tab bar and menu bar).
these diagrams represent controllers and persistence entities Based on the structure of the Swing API, the tree like
of frameworks such as Hibernate and Spring. The methods structure of markup languages (e.g., XUL), and general
described in the activities of 2 refer to the methods of the components of A JAX frameworks (ICE FACES) we have
back-end controller classes. created a modelling scheme for A JAX. Figure 3 shows
a simplified version of the A JAX metamodel which can be
expanded by adding more UI components. In principle, this
5 Modelling Ajax User Interfaces metamodel can also be used to model the UI of desktop ap-
plications employing event-based libraries such as Swing.
In this section we discuss the metamodel we propose for Containers and Navigation. As can be seen in Figure 3,
modelling A JAX UIs and the code generation aspects for the an instance of AjaxContainer is the owner of one or more
A JAX cartridge. Finally, we apply the modelling concepts AjaxUseCase objects. It should provide access to the ap-
to the P ERSON M ANAGER example. plication use cases by using one of the several navigation

35
 ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008

mechanisms available to the object. An AjaxUseCase in-

stance is the result of the transformation of the PIM Fron-
tEndUseCase element. In the context of the PSM, a use
case defines a section of an A JAX UI which contains the
elements responsible for performing a use case and should
be navigable using a single-page mechanism. Ideally, infor-
mation such as which navigation mechanism is to be used
should be specified in the PSM, once it has been generated
from the PIM. As we mentioned earlier, this is not possible
in the version of A NDRO MDA we have been working on
and therefore marks should be defined in the PIM to sup-
port a correct and complete generation of a PSM. Marks are
pointers in the PIM which give hints as to how certain PIM
elements should be transformed to PSM elements [11].
Nested containers are possible by allowing an instance
of AjaxUseCase to own a container which in turn consists
of one or more use cases. Examples of this behaviour can
be seen in nested menus or navigation trees.
Views and Components. The core of the user interface Figure 4. An instance of the A JAX metamodel
which is presented to the user is contained in instances of for P ERSON M ANAGER.
AjaxView. Each use case can hold one or more views. Sub-
sequently, each view can contain a number of ordered user
interface components. Multiple views are convenient in
write web application files. These files will be based on the
cases where all the components should be replaced by new
ICE FACES A JAX framework, which is itself based on the
components, e.g., a large form spanning several pages.
JSF framework. The completeness9 of ICE FACES in terms
The views are holders of the categorised UI components
of the A JAX components it offers persuaded us to make
mentioned above. While the layout components are re-
this choice. Furthermore, we have chosen to implement
flected in the AjaxContainer stereotype, the core UI compo-
a facelets10 version of ICE FACES, which constitutes that the
nents fit into the view and are either components handling
implemented files concerned with the view are actually very
input from the user, or displaying information (output) on
similar to a component-tree, so the model has a somewhat
the browser.
intuitive mapping with the generated code. Facelets uses
Events and Listeners. The way events are initiated
file inclusions to form a tree of .xhtml files which represent
and handled is one of the fundamental differences between
the UI of the web application. This is very similar to XML-
A JAX and classical web applications. With A JAX a whole
based UI descriptors such as XUL and can be created by the
refresh of the page is not required as a consequence of an
templates while iterating through the model elements. The
event. Just as in desktop applications, components which
files generated by A NDRO MDA form the structure of the
are interested in an event can be registered as listeners and
web application and are already integrated with the other
be notified when the event has occurred. The AjaxEvent
employed frameworks through the back-end classes. The
stereotype is designed to capture this information for com-
core business logic which typically resides in the controller
ponents contained in a view. Each view contains zero or
part of the web application should be coded manually by the
more events. For each event it should be specified which
developer.
element has initiated it (srcId), which element should be
displayed as a result, and a list of elements which have been
registered as listeners of this event. 5.3 Case Study Using the A JAX Cartridge

5.2 Code Generation We apply the above concepts for modelling A JAX UIs to
the P ERSON M ANAGER example mentioned earlier. P ER -
SON M ANAGER has already been built using the A N -
Code generation for the metamodel described above is
DRO MDA JSF cartridge, which uses a legacy UI. A shift
carried out in the same manner as in the other cartridges of
to A JAX would mean each of the use cases should be ac-
A NDRO MDA. Apache Velocity8 template files gain access
cessed through a single-page mechanism. An example
to model elements through metafacades. They can subse-
quently iterate through the model abstract syntax tree and 9 http://component-showcase.icefaces.org/
10 Facelets is a view technology for JSF, and a powerful templating system based
8 http://velocity.apache.org/ on XML-style templates, https://facelets.dev.java.net

36
 ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008

model for P ERSON M ANAGER based on the A JAX meta- 8th International Conference on World Wide Web, pages
model is shown in Figure 4. In this model, the navigation 1695–1708, 1999.
to the use cases is managed through a tab bar and the only [2] J. Carlos Preciado, M. Linaje, S. Comai, and F. Sanchez-
event described for the remove person use case is captured Figueroa. Designing Rich Internet Applications with Web
using the AjaxEvent stereotype. This event only causes the engineering methodologies. In Proceedings of the 9th IEEE
International Symposium on Web Site Evolution (WSE’07),
view to be changed but it could also have a list of listeners
pages 23–30. IEEE Computer Society, 2007.
(other components) be updated. [3] S. Ceri, P. Fraternali, and A. Bongio. Web modeling lan-
The development of the A JAX cartridge for A N - guage (WebML): a modeling language for designing web
DRO MDA is a work in progress and a working cartridge sites. Computer Networks, 33(1-6):137–157, 2000.
will be available for download as soon as enough code can [4] J. Conallen. Building Web Applications with UML (2nd Edi-
be generated for a simple A JAX application. tion). Addison-Wesley, 2003.
[5] J. Garrett. Ajax: A new approach to web applications.
Adaptive path, 2005. http://www.adaptivepath.com/
6 Discussion publications/essays/archives/000385.php.
[6] N. Koch and A. Kraus. The expressive power of UML-based
Issues regarding which data resides on the server or the web engineering. In IWWOST ’02: 2nd International Work-
client are currently not captured by our model, since we be- shop on Web-oriented Software Technology, pages 105–119.
lieve these are framework-specific (for example GWT and CYTED, 2002.
[7] F. J. Martı̀nez-Ruiz, J. Munoz Arteaga, J. Vanderdonckt, and
Echo2 designs differ in this issue). The choice of A JAX
J. M. Gonzàlez-Calleros. A first draft of a model-driven
framework may somewhat affect the A JAX metamodel pro- method for designing graphical user interfaces of Rich In-
posed in this paper. This will be mainly in the area of the ternet Applications. In LA-Web ’06: Proceedings of the 4th
offered components and not the main structure of the web Latin American Web Congress, pages 32–38. IEEE Com-
application. puter Society, 2006.
Many web applications seen today are a blend of A JAX [8] A. Mesbah, E. Bozdag, and A. van Deursen. Crawling Ajax
and classical multi-page applications where small compo- by inferring user interface state changes. In Proceedings
nents in the page use A JAX to avoid refreshing the whole of the 8th International Conference on Web Engineering
page. Our aim has been to devise a metamodel for single- (ICWE’08). IEEE Computer Society, 2008.
[9] A. Mesbah and A. van Deursen. Migrating multi-page web
page user interfaces and the aforementioned applications do
applications to single-page Ajax interfaces. In Proceedings
not fit in this category. Nevertheless we believe that with
of the 11th European Conference on Software Maintenance
minor adjustments to the metamodel these hybrid applica- and Reengineering (CSMR’07), pages 181–190. IEEE Com-
tions can also be modelled, e.g., events which cause a redi- puter Society, 2007.
rect to a new instance of AjaxContainer. [10] A. Mesbah and A. van Deursen. A component- and push-
based architectural style for Ajax applications. Journal of
Systems and Software (JSS), 2008. To appear.
7 Concluding Remarks [11] J. Miller, J. Mukerji, et al. MDA Guide Version 1.0.1, 2003.
http://www.omg.org/docs/omg/03-06-01.pdf.
The main contributions of this paper can be summarised [12] OMG. MDA, 2008. http://www.omg.org/mda.
as follows: an overview of the current model-driven web ap- [13] D. C. Schmidt. Model-driven engineering. Computer,
proaches; a meta-model for modelling A JAX user interfaces 39(2):25–31, 2006.
in UML and the proposed approach for creating an A JAX- [14] M. L. Trigueros, J. C. Preciado, and F. Sánchez-Figueroa. A
based A NDRO MDA cartridge with ability to integrate with method for model based design of Rich Internet Application
interactive user interfaces. In ICWE ’07: Proceedings of the
back-end components such as Spring and Hibernate.
7th International Conference Web Engineering, pages 226–
Future work consists of completing and testing the im- 241. Springer, 2007.
plementation of the A JAX cartridge and conducting case [15] E. Visser. WebDSL: A case study in domain-specific lan-
studies to evaluate our proposed meta-model and the overall guage engineering. In Generative and Transformational
MDA approach for modelling and generating A JAX web ap- Techniques in Software Engineering (GTTSE 2007), Lecture
plications. The cartridge will be made available for down- Notes in Computer Science. Springer, 2008.
load soon.

References

[1] M. Abrams, C. Phanouriou, A. L. Batongbacal, S. M.

Williams, and J. E. Shuster. UIML: An appliance-
independent XML user interface language. In WWW ’99:

37