Web applications using the Google Web Toolkit

This diploma thesis describes how to create or convert traditional Java programs to desktop-like rich internet applications with the Google Web Toolkit. The Google Web Toolkit is an open source development environment, which translates Java code to browser and device independent HTML and JavaScript. Most of the GWT framework parts, including the Java to JavaScript compiler as well as important security issues of websites will be introduced. The famous Agricola board game will be implemented in the Model-View-Presenter pattern to show that complex user interfaces can be created with the Google Web Toolkit. The Google Web Toolkit framework will be compared with the JavaServer Faces one to find out which toolkit is the right one for the next web project.:I Abstract II Contents III Acronyms and Glossary III.I Acronyms III.II Glossary IV Credits 1 Introduction 2 Basics 2.1 Development of the World Wide Web 2.2 Hypertext Markup Language 2.3 Cascading Style Sheets 2.4 JavaScript 2.5 Hypertext Markup Language Document Object Model 2.6 Asynchronous JavaScript and XML 3 GWT toolbox and compiler 3.1 GWT in action 3.2 A short overview of the toolkit 3.3 GWT compiler and JSNI 3.3.1 Overview of GWT compiler and JSNI 3.3.2 Deferred binding and bootstrapping process 3.3.3 GWT compiler steps and optimizations 3.4 Java Runtime Environment Emulation 3.5 Widgets and Panels 3.5.1 Overview of GWT Widgets 3.5.2 Event handlers in GWT Widgets 3.5.3 Manipulating browser’s DOM with GWT DOM class 3.5.4 GWT Designer and view optimization using UiBinder 3.6 Remote Procedure Calls 3.6.1 Comparison of Remote Procedure Calls with Remote Method Invocations 3.6.2 GWT’s RPC service and serializable whitelist 3.7 History Management 3.8 Client Bundle 3.8.1 Using ImageResources in the ClientBundle interface 3.8.2 Using CssResources in the ClientBundle interface 4 Model-View-Presenter Architecture 4.1 Comparison of MVP and MVC 4.2 GWT Model-View-Presenter pattern example: Agricola board game 4.3 Extending the Agricola web application with mobile views 4.4 Introducing activities in the Agricola Model-View-Presenter pattern enabling browser history 5 Comparison of the two web frameworks: GWT and JSF 5.1 Definitions of comparison fields 5.2 Comparison in category 1: Nearly completely static sites with a little bit of dynamic content, e.g. news update 5.3 Comparison in category 2: Doing a survey in both technologies 5.4 Comparison in category 3: Creating a forum to show data 5.5 Comparison in category 4: Writing a chat application 5.6 Comparison in category 5: Writing the speed game Snake 5.7 Summary 6 Security 6.1 Download Tomcat 6.2 Dynamic Web Application Project with GWT and Tomcat 6.3 Establish HTTPS connections in Tomcat 6.3.1 Create a pem certificate 6.3.2 Convert pem certificate into a key store object 6.3.3 Configure Tomcat’s XML files to enable HTPPS 6.4 Establish a database connection in Tomcat 6.4.1 Create TomcatGWT user and schema, and add the table countries 6.4.2 Configure Tomcat’s XML files to get access to the database connection 6.4.3 PreparedStatements avoid MySQL injections 6.5 Login mechanism in Tomcat 6.6 SafeHtml 7 Presenting a complex software application written in GWT 8 Conclusions 8.1 Summary 8.2 Future work A Appendix A 1 Configure the Google Web Toolkit framework in Eclipse A 1.1 Install the Java Developer Kit A 1.2 Download Eclipse A 1.3 Install the GWT plugin in Eclipse A 1.4 Create first GWT Java Project A 2 Figures A 3 Listings A 3.1 Source code of the Agricola board game A 3.2 Source code of GWT and JSF comparison A 4 Tables R Lists and References R 1 Lists R 1.1 List of Tables R 1.2 List of Figures R 1.3 List of Listings R 2 References R 2.1 Books R 2.2 Online resourcesDiese Diplomarbeit beschreibt die Erzeugung desktopähnlicher Anwendungen mit dem Google Web Toolkit und die Umwandlung klassischer Java-Programme in diese. Das Google Web Toolkit ist eine Open-Source-Entwicklungsumgebung, die Java-Code in browserunabhängiges als auch in geräteübergreifendes HTML und JavaScript übersetzt. Vorgestellt wird der Großteil des GWT Frameworks inklusive des Java zu JavaScript-Compilers sowie wichtige Sicherheitsaspekte von Internetseiten. Um zu zeigen, dass auch komplizierte graphische Oberflächen mit dem Google Web Toolkit erzeugt werden können, wird das bekannte Brettspiel Agricola mittels Model-View-Presenter Designmuster implementiert. Zur Ermittlung der richtigen Technologie für das nächste Webprojekt findet ein Vergleich zwischen dem Google Web Toolkit und JavaServer Faces statt.:I Abstract II Contents III Acronyms and Glossary III.I Acronyms III.II Glossary IV Credits 1 Introduction 2 Basics 2.1 Development of the World Wide Web 2.2 Hypertext Markup Language 2.3 Cascading Style Sheets 2.4 JavaScript 2.5 Hypertext Markup Language Document Object Model 2.6 Asynchronous JavaScript and XML 3 GWT toolbox and compiler 3.1 GWT in action 3.2 A short overview of the toolkit 3.3 GWT compiler and JSNI 3.3.1 Overview of GWT compiler and JSNI 3.3.2 Deferred binding and bootstrapping process 3.3.3 GWT compiler steps and optimizations 3.4 Java Runtime Environment Emulation 3.5 Widgets and Panels 3.5.1 Overview of GWT Widgets 3.5.2 Event handlers in GWT Widgets 3.5.3 Manipulating browser’s DOM with GWT DOM class 3.5.4 GWT Designer and view optimization using UiBinder 3.6 Remote Procedure Calls 3.6.1 Comparison of Remote Procedure Calls with Remote Method Invocations 3.6.2 GWT’s RPC service and serializable whitelist 3.7 History Management 3.8 Client Bundle 3.8.1 Using ImageResources in the ClientBundle interface 3.8.2 Using CssResources in the ClientBundle interface 4 Model-View-Presenter Architecture 4.1 Comparison of MVP and MVC 4.2 GWT Model-View-Presenter pattern example: Agricola board game 4.3 Extending the Agricola web application with mobile views 4.4 Introducing activities in the Agricola Model-View-Presenter pattern enabling browser history 5 Comparison of the two web frameworks: GWT and JSF 5.1 Definitions of comparison fields 5.2 Comparison in category 1: Nearly completely static sites with a little bit of dynamic content, e.g. news update 5.3 Comparison in category 2: Doing a survey in both technologies 5.4 Comparison in category 3: Creating a forum to show data 5.5 Comparison in category 4: Writing a chat application 5.6 Comparison in category 5: Writing the speed game Snake 5.7 Summary 6 Security 6.1 Download Tomcat 6.2 Dynamic Web Application Project with GWT and Tomcat 6.3 Establish HTTPS connections in Tomcat 6.3.1 Create a pem certificate 6.3.2 Convert pem certificate into a key store object 6.3.3 Configure Tomcat’s XML files to enable HTPPS 6.4 Establish a database connection in Tomcat 6.4.1 Create TomcatGWT user and schema, and add the table countries 6.4.2 Configure Tomcat’s XML files to get access to the database connection 6.4.3 PreparedStatements avoid MySQL injections 6.5 Login mechanism in Tomcat 6.6 SafeHtml 7 Presenting a complex software application written in GWT 8 Conclusions 8.1 Summary 8.2 Future work A Appendix A 1 Configure the Google Web Toolkit framework in Eclipse A 1.1 Install the Java Developer Kit A 1.2 Download Eclipse A 1.3 Install the GWT plugin in Eclipse A 1.4 Create first GWT Java Project A 2 Figures A 3 Listings A 3.1 Source code of the Agricola board game A 3.2 Source code of GWT and JSF comparison A 4 Tables R Lists and References R 1 Lists R 1.1 List of Tables R 1.2 List of Figures R 1.3 List of Listings R 2 References R 2.1 Books R 2.2 Online resource