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

Introduction

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.