More on GWT Web Mode files

Before reading this article please have a look Google Web ToolKit - Hosted Mode Vs. Web Mode

Create a SampleGWT application and run in web mode, we need to do the following:

• Compile the SampleGWT application first, by running the SampleGWT-compile script.
  SampleGWT-compile.cmd
• The above step will create a www folder in the SampleGWTdirectory. Navigate to the www/com.sample.gwtworks.SampleGWT.SampleGWT directory.
• Open the SampleGWT.html file in your web browser.

Everything needed to run the SampleGWT client application is contained in the www folder. You can deploy the contents of the folder to any servlet container and serve up the SampleGWT application. Here are the contents of the folder after completing the above steps:

SampleGWT.html: The host page that functions as the main HTML page for the SampleGWT application.

gwt.js: A generated JavaScript file that contains bootstrap code for loading and initializing the GWT framework.

History.html: An HTML file that provides history management support.

xxx-cache.html and xxx-cache.xml: One HTML and XML file per supported browser are generated. These contain the JavaScript code generated by the compilation of the source Java files in the com.sample.gwtworks.SampleGWT.client and com.sample.gwtworks.SampleGWT.server packages. For instance, in this case, on Windows, the compilation produced these files shown in below image . Each set of HTML and XML files represents one supported browser:



The file names are created by generating Globally Unique Identifiers (GUIDs) and using the GUID as part of the name. These file names will be different on different computers, and will also be different every time you do a clean recompile of the application on your computer. There is also a master HTML file generated (com.sample.gwtworks.SampleGWT.SampleGWT.nocache.html) that selects the right HTML file from the above files and loads it, depending on the browser that is running the application.

The www folder does not contain the code from the com.sample.gwtworks.SampleGWT.server package. This server code needs to be compiled and deployed in a servlet container so that the client application can communicate with the random quote service. In normal development mode, we will use the hosted mode for testing, which runs the server code inside the embedded Tomcat servlet container in the GWT development shell. This makes it very easy to run and debug the server code from inside the same Eclipse environment as the client application code. This is another feature of GWT, which makes it an extremely productive environment for developing AJAX applications.

In the web mode, our client Java code has been compiled into JavaScript unlike in the hosted mode. Also, you will notice that the SampleGWT.gwt.xml is not in this directory. The configuration details from this module are included in the generated HTML and XML files above.

Thankfully, all this work is automatically done for us by the GWT framework when we run the SampleGWT-compile script. We can focus on the functionality provided by our AJAX applications and leave the browser-independent code generation and lower level XmlHttpRequest API to GWT.

More in Hosted Mode

You can also compile the SampleGWT application from the GWT development shell in hosted mode. Run the SampleGWT-shell command script to run the application in hosted mode. Click on the Compile/Browse button in the GWT development shell window. This will compile the application and launch the application in a separate web-browser window.

All this dynamic JavaScript magic means that when you try to view the source for the application from the web browser, you will always see the HTML from the host page. This can be disconcerting when you are trying to debug problems. But the fantastic Eclipse support in GWT means that you can debug issues from the comfort of a graphical debugger by setting breakpoints and stepping through the entire application one line at a time.