A Tool for Model-Driven Design of Rich Internet Applications Based on AJAX

A Tool for Model-Driven Design of Rich Internet Applications Based on AJAX

Marco Brambilla (Politecnico di Milano, Italy), Piero Fraternali (Politecnico di Milano, Italy) and Emanuele Molteni (Web Models S.r.l., Italy)
DOI: 10.4018/978-1-60566-384-5.ch006
OnDemand PDF Download:
List Price: $37.50


This chapter describes how the design tool WebRatio (and its companion conceptual model WebML) have been extended to support the new requirements imposed by rich Internet applications (RIAs), that are recognized to be one of the main innovations that lead to the Web 2.0 revolution. Complex interactions such as drag and drop, dynamic resizing of visual components, graphical editing of objects, and partial page refresh are addressed by the RIA extensions of WebRatio. The chapter discusses what kinds of modelling primitives are required for specifying such patterns and how these primitives can be integrated in a CASE tool. Finally, a real industrial case is presented in which the novel RIA features are successfully applied.
Chapter Preview


The advent of Rich Internet Applications (RIA, for short) has allowed a much broader set of user interaction possibilities within Web applications. Complex interactions such as drag and drop, dynamic resizing of visual components and graphical editing of objects were once a prerogative of desktop applications, while now are available as standard patterns in many Web applications too. These patterns enable more flexible and usable interfaces, but at the same time require a more complicate application logics, both at client side and server side. Correspondingly, if model-driven design is adopted, new primitives and design patterns must be devised.

This chapter aims at discussing what kinds of modelling primitives are required for specifying Rich Internet Applications and discusses how these primitives can be integrated in a CASE tool. In addition, a real industrial case is presented in which the novel RIA features are successfully applied.

The viewpoint presented here is somehow opposite to the typical academic research paper, where an abstract solution to the investigated problem is first designed and verified formally, and then applied top-down to a prototype implementation. In this chapter we report on a bottom-up approach, which has extended a real world modelling notation and tool progressively, following the penetration of RIA features in the market and the raise of interest in the customers.

The chapter deals with four main aspects related to the coverage of RIA requirements in Web application design:

  • extensions to the conceptual model;

  • extensions to the CASE tool elements and properties;

  • architectural issues and code generation aspects;

  • implementation examples in real industrial scenarios.

The conceptual modeling primitives cover the following aspects of RIAs: management of new hypertextual link behaviour, including partial page refresh, in-page popup windows, splash screens, dynamic tooltips, and animations; interaction among page objects through drag and drop and dynamic dependencies; and advanced form specifications, including text autocompletion, on-event actions, and field dependencies.

Besides the modeling aspects, the chapter will describe how they are implemented within the WebRatio tool and how they are exploited through automatic code generation. The architectural description of the adopted design framework is provided, together with the analysis of the best mix of technologies that can be leveraged for implementing this kind of features. The designed architectural framework extensively exploits the XMLhttpRequest method and consists of implementing each conceptual hypertext page with two dynamic pages that interact for providing the rich interface features: the first is a back-end dynamic XML page that stores the data of interest for a specific navigation context; the second is the front-end JSP page (including the required JavaScript needed for event management) that is shown to the user. The latter invokes extraction of data fragments from the back-end XML page according to the user behaviour.

The original contribution of the chapter stands in the mix of conceptual aspects and industrial-based solutions that lead to a comprehensive conceptual view of the development of RIAs. To our knowledge, this is the first attempt to bring together academic research and industrial implementation in conceptual modeling of RIAs.

To validate the approach, we exemplify the usage of the devised components in a real business scenario in which WebRatio has been adopted for designing and implementing RIA applications.

The chapter is organized as follows: we start describing the role of RIAs in the context of Web 2.0; then we summarize some background information about RIAs and about WebML. Subsequently, we move to the core part of the chapter, describing the new conceptual modelling primitives for supporting RIAs; hence we describe the WebRatio architecture and the extensions needed for RIAs, and an industrial case study where the approach has been applied; finally, we draw some conclusions on the work.

Key Terms in this Chapter

Model Driven Development: Software development approach based on the systematic use of models and their transformations throughout the engineering lifecycle of a software system.

Asynchronous JavaScript and XML (AJAX): Set of Web technologies and development techniques used for developing RIAs. Asynchronous client-server interactions are achieved thanks to the XMLHttpRequest object.

Automatic Code Generation: Software engineering technique that allows to automatically generate application code starting from (platform independent) conceptual models.

Web Engineering: Scientific discipline studying models, methodologies, tools, techniques, and guidelines for the design, development, evolution, and evaluation of Web applications

Partial Page Refresh: Possibility of refreshing single pieces of a Web page upon the occurrence of an event.

Web Modeling Language (WebML): Conceptual model and methodology for the visual design of data-intensive, process-intensive, and service-intensive Web applications

WebRatio: CASE (Computer Aided Software Engineering) tool for the specification of Web applications according to the WebML modeling language and for the automatic code generation.

Rich Internet Application (RIA): Web application that implement sophisticated user interfaces, and advanced user interaction patterns with respect to traditional Web applications, including partial page refresh, client-side calculation and data storage, drag&drop, and other features

Complete Chapter List

Search this Book: