ProGUM-Web: Tool Support for Model-Based Development of Web Applications Marc Lohmann 1, Stefan Sauer 1, and Tim Schattkowsky 2 1 University of Paderborn, Computer Science, D 33095 Paderborn, Germany {mlohmann,sauer}@upb.de 2 University of Paderborn, C-LAB, D 33102 Paderborn, Germany tim@c-lab.de Abstract. ProGUM-Web is a tool that supports model-based development of Web applications using an extension of UML. It accounts for the characteristics of Web applications and their specific development. Code templates are generated from the model for both graphic designers and software developers. These code templates can iteratively and independently be advanced and are reintegrated within ProGUM-Web. Prototypes of Web applications can automatically be generated throughout the development. 1 Introduction Web applications consist of dynamic Web pages that are generated from scripts. They are typically developed by heterogeneous development teams comprising chiefly graphic designers and software developers. Graphic designers develop the graphic and interaction design of the user interface. They typically edit the layout of a Web page with graphical HTML editors. Software developers commonly use scripting languages like PHP, Active Server Pages (ASP) or Java Server Pages (JSP) for implementing the business logic of the Web application. The scripts produce HTML code when executed on a Web server. They must be embedded in the HTML code produced by the HTML editors. Scripting usually leads to a mixture of business logic and design elements in the code. Yet, separation could facilitate maintainability and reuse of both business logic and design. It also enables the team members to work concurrently on different aspects of a Web page and to consistently integrate their results. Model-based development of Web applications can help structuring the development. A common model can serve for factoring out the different aspects and manifest the interface between role-specific views. Furthermore, visual modeling is a promising means of communicating ideas between the different developer roles and establishing a common understanding of requirements and system conceptualization. Yet the models need to be adapted for the different responsibilities of the developer roles, and their assumed backgrounds. The Unified Modeling Language (UML) can serve as a P. Stevens et al. (Eds.): UML 2003, LNCS 2863, pp. 101 105, 2003. Springer-Verlag Berlin Heidelberg 2003
102 M. Lohmann, S. Sauer, and T. Schattkowsky basis for the modeling approach. The model-based methodology should also support generation of code and executable prototypes. 2 Methodology Underlying ProGUM-Web Our development approach for Web applications supports model-based, incremental and iterative development. It applies prototyping for continuous involvement of the customer in the development process. The development process consists of three essential workflows, as depicted in Fig. 1. The development of a Web application starts with the modeling workflow. An extension of the UML is used that accounts for both Web application characteristics and the distinct views of the developer roles. In the coding workflow, code templates for the software developer and the graphic designer are generated from the model. The templates can be edited, and the resulting code fragments are re-integrated. In the prototyping workflow, an executable prototype is generated. Our model-based development approach allows us to clearly separate design and business elements in the code of a Web application. Thus it supports reusability of both kinds of elements and facilitates maintainability. For a detailed description of our development approach and a discussion of related work see [2]. The process is incremental. New functionalities can be added to the Web application by adding them to the UML model. The process is iterative. The code fragments produced from the generated templates by the graphic designer and the software developer can be advanced stepwise. In the following, the three workflows are detailed. UML use case diagrams, activity diagrams, and class diagrams are employed in the modeling workflow. They capture the fundamental behavioral and structural aspects of a Web application. The model provides different views on these aspects according to the needs of the different team members. Use case diagrams are used to capture the fundamental functional requirements of a Web application from the perspective of different users. Use cases can be refined by further use case diagrams. Eventually, all use cases are directly or indirectly detailed by activity diagrams. Activity diagrams in our methodology describe the interaction between client and server, possible user interaction on the client side, and business logic on the server side. Object flows between action states describe the exchanged information. To facilitate automatic code generation, exchanged objects are detailed by data structure class diagrams. At last, a site structure class diagram describes the composition of a Web page from the logic specified by the use cases and detailed in the activity diagrams, and additional design elements. Hyperlinks between different server pages are described in the site structure class diagram as well. A meta-model for this modeling approach can be found in [2]. In the coding workflow, the graphic designer and the software developer can independently modify templates that are generated from the model. HTML templates can be edited by the graphic designer to design the layout of a Web page. Script templates are generated for the software developer. They are used to implement the business logic. HTML and script fragments can be integrated according to the UML model. In the prototyping workflow, executable prototypes of the Web application are generated based on the UML model. HTML and script fragments are integrated in the
ProGUM-Web: Tool Support for Model-Based Development 103 prototype. The scripts can be edited further by the software developer. The reintegration in the Web application is possible as long as the automatically generated template structure is retained. If the prototype is executed, the graphic designer can use the Web pages generated by the Web server to re-arrange the layout of a Web page. The edited Web page can then be re-integrated in the Web application. 3 ProGUM-Web ProGUM-Web (Prototype Generation from UML Models for Web applications) [1] is a proof-of-concept tool that supports the described modeling methodology. ProGUM- Web is mainly a repository manager with additional features: it supports automatic code generation from the models and ensures consistency between the different parts in the repository. Developers can use established UML CASE and editor tools complementing ProGUM-Web. Modeling Workflow Sparx Systems Enterprise Architect Coding Workflow Microsoft Notepad Edited Code Module (PHP) UML Modeling Tool UML Application Model (XMI) Edited Client Page (HTML) Microsoft Frontpage Script Editor ProGUM-Web HTML Editor Generated Code Module (PHP) Prototype Generation Client Page (HTML) Netscape Navigator Prototyping Workflow Web Server Web Client Fig. 1. Web Application Development using ProGUM-Web We decided on using existing UML CASE tools to support the modeling workflow. XML Metadata Interchange (XMI) files are used as input for ProGUM- Web. When checking-in an XMI file, ProGUM-Web checks whether the model is an instance of the given meta-model. Additionally, if a modified XMI file of a Web application model is checked in, model elements of the new model are compared with those of the old one. New model elements are accepted. If deletions or modifications
104 M. Lohmann, S. Sauer, and T. Schattkowsky are detected, ProGUM-Web indicates the consistency problems that have to be manually resolved e.g. by replacing older work or by renaming. The coding workflow is supported by ProGUM-Web in two distinct ways, reflecting the roles in the development team. On the one hand, ProGUM-Web generates script files from activity diagrams. Two kinds of script files have to be distinguished. A script files of the first kind implements the control flow of an activity diagram and invokes script files of the same (in case an activity is detailed by another activity diagram) or the second kind. A script file of the second kind contains method headers for activities that are parameterized according to the object flows. The software developer can check out scripts of the second kind and add or subsequently change the body of the methods to implement the business logic using a standard text editor. Currently, ProGUM-Web supports PHP4 as its target scripting language. When checking-in a method, the method headers are checked against the model, since they are only allowed to be changed in the model. On the other hand, ProGUM-Web allows the graphic designer to check out complete client-side HTML pages that contain modules for client-side logic and design elements. HTML comments are used to mark the different modules. The graphic designer can use a standard HTML editor to modify the design. It must only be ensured that the comments are still assigned to the correct module. The graphic designer is not allowed to change link targets and names of form elements to prevent her from altering client-side logic. During check-in, ProGUM-Web decomposes the page and identifies all modules within the HTML page, thus supporting re-use of the identified fragments on several Web pages. The prototyping workflow is supported by integrating the code fragments produced by the graphic designer and the software developer according to the UML model. If modules have not yet been implemented by the developers, ProGUM-Web generates the corresponding templates to completely create server-side Web pages. This procedure allows a developer to continuously generate evolutionary and executable prototypes throughout the development lifecycle. ProGUM-Web has been implemented using the JAVA 2 platform. It has been evaluated using Sparx Systems Enterprise Architect, version 3.10 as a modeling tool for the Web application. Enterprise Architect has been selected because of its support for both the model elements needed in our approach and the appropriate XMI export. 4 Conclusion ProGUM-Web supports the generation of prototypes of a Web application and the independent development of dynamic Web sites by graphic designers and software developers. This functionality is based on the generation of role-specific code from UML-based models. Developers can check-in the respective code modules they worked on, and changes to a prototype can be fed back into the repository.
ProGUM-Web: Tool Support for Model-Based Development 105 References 1. Diederich, P.: Generierung von Prototypen dynamischer Websites aus UML-Modellen. Diploma Thesis, University of Paderborn, January 2003. In German 2. Schattkowsky, T., Lohmann, M.: Rapid Development of Modular Dynamic Web Sites Using UML. In: Proc. of UML 2002. LNCS, Vol. 2460. Springer-Verlag, Berlin (2002) 336 350