AJAX is a promising and rapidly evolving approach for building highly interactive web applications. In AJAX, user interface components and the event-based interaction between them form the founding elements, whereas in classic web applications the notions of web pages and hypertext links are central. Therefore modelling AJAX requires a different approach than what the current web modelling tools are providing. In this paper we propose a UML scheme for modelling AJAX user interfaces based on the MDA approach. We adopt ANDROMDA for creating an AJAX cartridge to generate an entire AJAX-based web application with automatic back-end integration. The implementation of this cartridge is a work in progress.
In the years following the arrival of the Internet, new web-based software technologies and platforms have been emerging in an overwhelming pace. Recently, a broad collection of new trends have appeared under the Web 2.0 umbrella, changing the classical web interaction significantly.
A prominent enabling technology in Web 2.0 is AJAX
(Asynchronous JavaScript and XML) [
Maintaining web applications and keeping them up to date with new technologies are often complex and expensive tasks. Furthermore, the integration of different technologies, from front-end to back-end, seems challenging, yet a necessity in building enterprise web applications. When adopting a new and evolving technology such as AJAX, it is very important to be able to cope with changing environments from an architectural point of view. A framework which is fit for the project today could easily be out featured by a new one tomorrow.
One way to tackle these challenges is by abstracting
from the implementations through a Model-Driven
Engineering [
There are different ways of modelling software systems.
The Object Management Group (OMG) has devised a
number of standards for software development under its
ModelDriven Architecture (MDA) approach [
In this paper we explore an MDA approach for AJAX web applications. The first step in an MDA approach to application development is modelling; We therefore look into how an AJAX web application can be modelled, while having the ultimate goal of code generation from the models in mind. We propose a UML scheme for modelling AJAX user interfaces, and report on our intended approach of adopting ANDROMDA for creating an AJAX cartridge to generate the corresponding AJAX application code, in ICEFACES, with back-end integration.
The paper is organized as follows. We start out, in Section 2, by sketching the problem statement. In Section 3, we explore the related work on current model-driven approaches for the web. In Section 4 we discuss ANDROMDA. In Section 5, the proposed AJAX meta-model and the generation process are presented, after which Section 6 discusses the findings and open issues. We conclude the paper with a brief summary of our key contributions and suggestions for future work. 2
AJAX is a technique based on a collection of web technologies which can be used to create highly interactive web applications. The interactivity aspect is manifested by the fact that refreshing the whole page is not needed for each client server interaction. The user interface can consist of a single web page composed of UI components which can be acted upon and updated independently of other components. This technique has made it possible to port similar versions of many desktop applications to the web, examples of which include office tools such as word processors (Google Docs and Spreadsheets1) and e-mail management software (Yahoo! Mail2).
AJAX applications can be seen as a hybrid of desktop
(e.g., Swing) and web applications, inheriting
characteristics from both worlds [
The advantages of MDA [
We are interested in an MDA approach for the main structure of the AJAX application, as well as the possibility of integrating with back-end components such as Spring and Hibernate. It should also be possible to model which events affect which components (listeners). For the sake of simplicity, we propose to leave certain layout information such as the precise position of components and styling, out of the abstract models. 3
There have already been several developments in the area of MDA for the web. In this section we explore some of the most relevant approaches.
The Web Modeling Language (WebML) [
1 http://documents.google.com/ 2 http://mail.yahoo.com
Conallen [
RUX-model [
Another attempt at an MDA approach for RIAs is found
in [
Visser [
openArchitectureWare5 (oAW) is currently one of the leading open-source MDA generator frameworks. It is very extensible and supports model-to-model and model-to-text transformations. However, oAW does not come with complete integrable transformations for different web platforms, nor does it define platform-independent elements which can be used across web applications (and possibly other paradigms). The lack of the aforementioned possibilities are certainly not necessities for a good MDA framework yet we consider them very convenient when working with a set of varying technologies intended for web applications.
One approach which has gained much attention in the web-based MDA community is the A NDROMDA MDA generator6. We have based our approach on ANDROMDA 3 http://www.mozilla.org/projects/xul/ 4 http://www.xaml.net/ 5 http://www.openarchitectureware.org 6 http://www.andromda.org 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 ANDROMDA it is not possible7 to tweak the PSM before transforming to code or other PSMs, this remains attainable with openArchitectureWare.
Aside from RUX, none of the approaches mentioned above explore an MDA approach for AJAX web applications. 4
In Section 5 we will investigate how an MDA tool such as ANDROMDA can be used to model AJAX applications. Before doing that, we first discuss ANDROMDA itself. 4.1
In order to demonstrate the concepts more clearly, we have created an example CRUD application for managing persons. The example has been built using ANDROMDA and uses the JSF, Spring and Hibernate frameworks. The application is called PERSONMANAGER and can be used to create new persons, remove or update existing ones and to display the list of all persons found in the database. 4.2
We have decided to use ANDROMDA to create an MDA AJAX cartridge. The main reason behind this decision is the availability of cartridges for different technologies and platforms, as well as the ease of integration which ANDROMDA provides for these web technologies. In ANDROMDA we can use the same models to generate a web application which uses JSF-Spring-Hibernate as well as one which uses Struts-Hibernate. Furthermore, A NDROMDA already defines PIM meta-elements which should hold for a variety of different platforms. This makes the implementation of an AJAX cartridge easier since we can concentrate on the transformation and the creation of an AJAX-specific meta-model.
While the PSM specifications are contained in the cartridges, ANDROMDA contains a list of platform independent elements which can be used to model the PIMs. These elements should generally be enough to model most cases 7 The latest version of ANDROMDA is 4.0 and our work is based on version 3.3 but it is possible to add new PIM elements such as UML stereotypes and tagged values. The transformation between the PIM, PSM, and code is carried out by what ANDROMDA calls metafacades (metamodel facades). Metafacades are gateways to metamodel elements derived form the models and they provide access to the model from the cartridge templates. The function of metafacades is best described through an example. For instance, in a PIM model, a class exists with a stereotype called TextInput. Let’s say 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 Class class. ANDROMDA allows access to this instance via metafacades, which are classes with methods for accessing various properties of this instance, such as it’s fully qualified name. Such a metafacade could be called TextInputFacade. A cartridge wanting access to the TextInput instance can define its own metafacades, which can access the higher level facades such as TextInputFacade. Thus for our cartridge we can define an HTMLTextInputFacade which can decide whether to interpret a text input as an HTML text area or a text field. This cartridge metafacade can base this decision on the properties of the TextInput instance which it can access through TextInputFacade.
For a typical application which contains a user interface, ANDROMDA uses UML use case diagrams to define the possible scenarios and to split up the application into smaller parts. Figure 1 contains an ANDROMDA use case diagram for our PERSONMANAGER example application. It can be applied to different cartridges which are capable 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 ANDROMDA FrontEndUseCase stereotype is applied to use cases which are used in the front-end of an application. The FrontEndApplication stereotype defines 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.
The inner workings of each use case is subsequently specified using UML Activity Diagrams. Figure 2 shows the activity diagram corresponding with the add person use case of Figure 1. The activities are either server side or client side. The FrontEndView stereotype denotes an activity which is client side, meaning it should be rendered as a user interface. The server side activities can initiate events which initialise form fields or store data retrieved from forms. Outgoing associations from FrontEndView can contain triggers with a list of parameters. These parameters will be transformed to input fields in the form.
The diagrams mentioned above are concerned with the front-end and should be connected to diagrams which are used to model the back-end.
In ANDROMDA, the back-end of the web application is modelled using stereotyped class diagrams, similar to the conceptual models of UWE and WebML. The classes in these diagrams represent controllers and persistence entities of frameworks such as Hibernate and Spring. The methods described in the activities of 2 refer to the methods of the back-end controller classes. 5
In this section we discuss the metamodel we propose for modelling AJAX UIs and the code generation aspects for the AJAX cartridge. Finally, we apply the modelling concepts to the PERSONMANAGER example. 5.1
We have devised an AJAX metamodel to be used in the PSM layer of ANDROMDA. This metamodel should be able to capture the main structure of most AJAX user interfaces.
The semantics of an AJAX user interface closely
resembles that of a native desktop application. In both cases the
user interface consists of a tree of application artifacts such
as windows, labels and buttons. Therefore examining how
the UI of desktop applications is modelled seems to be a
reasonable starting point to creating a modelling scheme for
AJAX. Desktop and AJAX applications generally offer the
following UI components [
Based on the structure of the Swing API, the tree like structure of markup languages (e.g., XUL), and general components of AJAX frameworks (ICEFACES) we have created a modelling scheme for AJAX. Figure 3 shows a simplified version of the AJAX metamodel which can be expanded by adding more UI components. In principle, this metamodel can also be used to model the UI of desktop applications employing event-based libraries such as Swing.
Containers and Navigation. As can be seen in Figure 3,
an instance of AjaxContainer is the owner of one or more
AjaxUseCase objects. It should provide access to the
application use cases by using one of the several navigation
mechanisms available to the object. An AjaxUseCase
instance is the result of the transformation of the PIM
FrontEndUseCase element. In the context of the PSM, a use
case defines a section of an AJAX UI which contains the
elements responsible for performing a use case and should
be navigable using a single-page mechanism. Ideally,
information 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 ANDROMDA we have been working on
and therefore marks should be defined in the PIM to
support 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 [
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 which is presented to the user is contained in instances of AjaxView. Each use case can hold one or more views. Subsequently, each view can contain a number of ordered user interface components. Multiple views are convenient in cases where all the components should be replaced by new components, e.g., a large form spanning several pages.
The views are holders of the categorised UI components mentioned above. While the layout components are reflected in the AjaxContainer stereotype, the core UI components fit into the view and are either components handling input from the user, or displaying information (output) on the browser.
Events and Listeners. The way events are initiated and handled is one of the fundamental differences between AJAX and classical web applications. With AJAX a whole refresh of the page is not required as a consequence of an event. Just as in desktop applications, components which are interested in an event can be registered as listeners and be notified when the event has occurred. The AjaxEvent stereotype is designed to capture this information for components contained in a view. Each view contains zero or more events. For each event it should be specified which 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.2
Code generation for the metamodel described above is carried out in the same manner as in the other cartridges of ANDROMDA. Apache Velocity8 template files gain access to model elements through metafacades. They can subsequently iterate through the model abstract syntax tree and 8 http://velocity.apache.org/ write web application files. These files will be based on the ICEFACES AJAX framework, which is itself based on the JSF framework. The completeness9 of ICEFACES in terms of the AJAX components it offers persuaded us to make this choice. Furthermore, we have chosen to implement a facelets10 version of ICEFACES, which constitutes that the implemented files concerned with the view are actually very similar to a component-tree, so the model has a somewhat intuitive mapping with the generated code. Facelets uses file inclusions to form a tree of .xhtml files which represent the UI of the web application. This is very similar to XMLbased UI descriptors such as XUL and can be created by the templates while iterating through the model elements. The files generated by ANDROMDA form the structure of the web application and are already integrated with the other employed frameworks through the back-end classes. The core business logic which typically resides in the controller part of the web application should be coded manually by the developer.
We apply the above concepts for modelling AJAX UIs to the PERSONMANAGER example mentioned earlier. PERSONMANAGER has already been built using the ANDROMDA JSF cartridge, which uses a legacy UI. A shift to AJAX would mean each of the use cases should be accessed through a single-page mechanism. An example 9 http://component-showcase.icefaces.org/ 10 Facelets is a view technology for JSF, and a powerful templating system based on XML-style templates, https://facelets.dev.java.net model for PERSONMANAGER based on the AJAX metamodel is shown in Figure 4. In this model, the navigation to the use cases is managed through a tab bar and the only event described for the remove person use case is captured using the AjaxEvent stereotype. This event only causes the view to be changed but it could also have a list of listeners (other components) be updated.
The development of the AJAX cartridge for ANDROMDA is a work in progress and a working cartridge will be available for download as soon as enough code can be generated for a simple AJAX application. 6
Issues regarding which data resides on the server or the client are currently not captured by our model, since we believe these are framework-specific (for example GWT and Echo2 designs differ in this issue). The choice of AJAX framework may somewhat affect the AJAX metamodel proposed in this paper. This will be mainly in the area of the offered components and not the main structure of the web application.
Many web applications seen today are a blend of AJAX and classical multi-page applications where small components in the page use AJAX to avoid refreshing the whole page. Our aim has been to devise a metamodel for singlepage user interfaces and the aforementioned applications do not fit in this category. Nevertheless we believe that with minor adjustments to the metamodel these hybrid applications can also be modelled, e.g., events which cause a redirect to a new instance of AjaxContainer. 7
The main contributions of this paper can be summarised as follows: an overview of the current model-driven web approaches; a meta-model for modelling A JAX user interfaces in UML and the proposed approach for creating an AJAXbased ANDROMDA cartridge with ability to integrate with back-end components such as Spring and Hibernate.
Future work consists of completing and testing the implementation of the AJAX cartridge and conducting case studies to evaluate our proposed meta-model and the overall MDA approach for modelling and generating AJAX web applications. The cartridge will be made available for download soon.