Using Actions Charts for Reactive Web Application Modelling Nina Geiger, Tobias George, Marcel Hahn, Ruben Jubeh, Albert Z¨ undorf University of Kassel, Software Engineering , Department of Computer Science and Electrical Engineering, Wilhelmsh¨ oher Allee 73, 34121 Kassel, Germany [nina | tge | hahn | ruben | zuendorf]@cs.uni-kassel.de http://seblog.cs.uni-kassel.de/ Abstract. Building a rich internet application (RIA) requires the pro- gramming of various callbacks and listeners. AJAX like server requests require callback handler objects that react to the asynchronous server response. Active GUI elements like buttons or menu entries require ac- tion handlers. Using a timer queue requires appropriate event handlers, too. Programming all these handlers is tedious and error prone. Subse- quent steps of e.g. initialization or of a protocol of server requests are scattered over multiple separated blocks of code. The control flow be- tween these blocks is hard to retrieve. Some common variables have to be introduced in order to pass the application state between the dif- ferent handler blocks. To overcome these problems, we propose to use an extension of UML statecharts, called action charts, dedicated to the modeling of callbacks and listeners. All kinds of handlers are modeled in a common uniform statechart notation. States become actions or han- dlers. Transitions represent the flow of execution. Variables are shared between actions providing a simple mechanism for passing the applica- tion state from one handler to the next. From such action charts we gen- erate sourcecode that is compliant with the Google Web Toolkit (GWT). The generated code is pure Java code that facilitates validation and de- bugging of the modeled behavior. It can be translated to JavaScript and run inside the web browser using the GWT crosscomplier. The action charts and code generation are implemented as part of the open source CASE tool Fujaba. 1 Introduction Modern web applications shift more and more application logic and even the data model to the client. This allows more interactive web applications (follow- ing the AJAX pattern). Furthermore, the traditional page-by-page application flow dissolves and is replaced by fully interactive widget based user interfaces with windows, buttons, lists, trees etc. This shift is possible due to several rea- sons: the runtime environment, the browser, has a powerful, fully programmable