GWT About the Tutorial Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords and Orkut. GWT is an open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0. This tutorial will give you a great understanding of GWT concepts needed to get a web application up and running. Audience This tutorial is designed for software professionals who are willing to learn GWT programming in simple and easy steps. This will also give you great understanding on GWT Programming concepts. After completing this tutorial, you will be at intermediate level of expertise from where you can take yourself at higher level of expertise. Prerequisites Before proceeding with this tutorial, you should have a basic understanding of Java programming language, text editor, and execution of programs, etc. Because we are going to develop web-based applications using GWT, it will be good if you have an understanding of other web technologies such as HTML, CSS, and AJAX. Copyright and Disclaimer © Copyright 2015 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected] i GWT Table of Contents About the Tutorial ................................................................................................................................. i Audience ............................................................................................................................................... i Prerequisites ......................................................................................................................................... i Copyright and Disclaimer ...................................................................................................................... i Table of Contents ................................................................................................................................. ii 1. GWT – OVERVIEW ............................................................................................................. 1 What is GWT? ...................................................................................................................................... 1 Why to Use GWT? ................................................................................................................................ 1 Disadvantages of GWT ......................................................................................................................... 2 The GWT Components ......................................................................................................................... 2 2. GWT ENVIRONMENT ......................................................................................................... 3 System Requirement ............................................................................................................................ 3 Step 1 – Verify Java Installation on Your Machine ................................................................................ 3 Step 2 – Setup Java Development Kit (JDK) .......................................................................................... 4 Step 3 – Setup Eclipse IDE..................................................................................................................... 5 Step 4 – Install GWT SDK & Plugin for Eclipse ....................................................................................... 6 Step 5: Setup Apache Tomcat ............................................................................................................... 7 3. GWT APPLICATIONS .......................................................................................................... 9 Module Descriptors .............................................................................................................................. 9 Public Resources .................................................................................................................................11 Client-side Code ..................................................................................................................................12 Server-side Code .................................................................................................................................12 4. GWT – CREATE APPLICATION .......................................................................................... 14 Step 1 – Create Project ........................................................................................................................14 Step 2 - Modify Module Descriptor: HelloWorld.gwt.xml ....................................................................16 ii GWT Step 3 - Modify Style Sheet: HelloWorld.css ........................................................................................17 Step 4 - Modify Host File: HelloWorld.html .........................................................................................17 Step 5 - Modify Entry Point: HelloWorld.java ......................................................................................18 Step 6 - Compile Application ...............................................................................................................18 Step 7 - Run Application ......................................................................................................................19 5. GWT - DEPLOY APPLICATION ........................................................................................... 22 Create WAR File ..................................................................................................................................25 Deploy WAR file ..................................................................................................................................25 Run the Application .............................................................................................................................25 6. GWT - STYLE WITH CSS .................................................................................................... 27 Primary & Secondary Styles ................................................................................................................29 Associating CSS Files ............................................................................................................................30 7. GWT - BASIC WIDGETS .................................................................................................... 35 GWT UI Elements ................................................................................................................................35 GWT – UIObject Class ..........................................................................................................................36 GWT – Widget Class ............................................................................................................................40 Basic Widgets ......................................................................................................................................43 GWT – Label Widget ............................................................................................................................43 GWT - HTML Widget ............................................................................................................................50 GWT – Image Widget ..........................................................................................................................55 GWT - Anchor Widget..........................................................................................................................62 8. GWT FORM WIDGETS ...................................................................................................... 69 GWT - UIObject Class ...........................................................................................................................69 GWT - Widget Class .............................................................................................................................74 Form Widgets ......................................................................................................................................76 GWT - Button Widget ..........................................................................................................................77 iii GWT Button Widget Example ......................................................................................................................79 GWT - PushButton Widget ..................................................................................................................83 GWT - ToggleButton Widget ................................................................................................................90