Lab 1: GWT introduction

This lab will introduce you to the Google Web Toolkit (GWT), which is used to create rich internet applications. We will go through the requirements for working with GWT at IDA and how GWT programming works in general. For this lab, you will use the online resources available at Google.

Getting started

Before doing anything, you will need to load the eclipse IDE by using the module command (in a terminal):

module initadd prog/eclipse
module add     prog/eclipse

Having this done once, you only have to write

eclipse &
firefox &

to launch the Eclipse development environment and the Firefox web browser in subsequent sessions. Note that the most recent version of Firefox installed at IDA is incompatible with the GWT development plugin. This technically means you will not be able to run your applications in debug mode. to work around this problem you can do one of the followings :

   1. Run your applications in hosted mode.
   2. Bring your own laptop to the lab sessions.

To run your application in hosted mode you only need to remove the callback parameter named "gwt.codesvr" from the query string of your application . By doing that the browser will execute the Javascript code equivalent to your GWT Java code at client side each time you run your application. This means, you need to GWT compile your application after any modification made to your client side code to see the changes afterwards. Please be aware that you still need to compile your application by Java compiler after any modification made to the server side code to see the changes in the next execution.

"gwt.codesvr" parameter needs to be removed in order to switch back to the hosted mode.

If you are a Windows user and are willing to do the labs at your home PC or notebook, Here you can find the installation instructions for the Windows Operating System.

Introduction

The GWT is a toolkit for creating web applications using a single language: Java. Java code written using GWT is compiled to both front-end XHTML+CSS+Javascript as well as back-end server side components like servlets.

While developing web applications using GWT, we use a development environment based on the Eclipse IDE along with a plugin for GWT development in Eclipse. To start using the latest Eclipse with the plugin for GWT development at IDA, please use the commands above to include the Eclipse module for TDDD24. This module will add the path to our course-local version of Eclipse with GWT support for the rest of the course.

Eclipse is an integrated development environment (IDE) that lets you program, compile, debug and deploy your web application all from within the same environment. There is an online documentation for Eclipse as well as the built-in documentation (try the Help menu) which is very helpful while development.

Once you have got acquainted with Eclipse, proceed with the overview description of how to develop web applications using GWT on the GWT official website. When you feel that you want to try your own web project, start reading at the headline Create a Web Application on the Set up Eclipse page of the GWT introduction.

The introduction guides you through how to create a Hello World application in GWT. Later in the introduction, when you have launched your web application, you are supposed to use your main browser (Firefox if you are working in the SU lab rooms) to access your application.

Dynamic ports in Eclipse

Since you will use a shared server when you work in our lab rooms, you may need to specify that ther ports used by GWT should be dynamically assigned.

If GWT complains about ports being in use (or return port -1), you may have to add the program argument "-codeServerPort auto -port auto" in the Eclipse run menu (for debugging), and set Eclipse to dynamically select a port for the builtin web server.


Screenshot of the "Run configuration", where you should add "-codeServerPort auto -port auto".

The first time you direct your browser to a GWT application, you will receive information that you need a browser plugin for development (more specifically, for communicating with the GWT debugger). Unfortunately, you cannot install the plugin On SPARC based Sun OS(as in IDA workstations) due to incompatibility issues (please refer to the "Getting Started" section).
If you are using any system other than IDA Sun workstations, please install the GWT plugin on your browser before going any further. you can use the standard browser plugins for Linux/Mac/Windows systems supplied by Google paired with required instructions on the GWT official website. After installation, you will need to restart your browser.

Assignment

In this lab you are required to complete the StockWatcher tutorial from the GWT tutorial, the first 8 steps, but please apply the following modification:

In Step 5 of the tutorial, under the heading Generate the stock data, make sure to generate random data in the same format as your own data.

Additional resources

• Please try the Population Information Console as a sample application. This application shows how your apps need to look like in the end.
• Watch a screen cast on the Population Information Console application.
Note: In this sample application, the table is filled using a local data set stored inside of some data structure along with randomization. this approach is the best case scenario and is optional. You can only use randomization to generate some data propertie(s) and fill some of data column(s) and leave the rest of columns empty. please notice that you still need to have one column for each data attribute. Please notice, data validation (when adding new data items to the table) is done differently in each of the scenarios. If your application is reading information from a dataset (along with randomization for one or couple of data properties), the data is valid if and only if it exists in the dataset. If there is no dataset involved, the entered data property(a unique property by which a data item is identified like a city name) could be validated via a desired measurement just as done in the Google StockWatcher tutorial.

See the course examination page for instructions about examination of this lab.