Really Testing the View (Web Mode)

Although what we did in the last post was useful to see/test the view, we were not actually running through the real/production JavaScript. We were just running in “development” (a.k.a. Hosted) mode. In order to test the view through using real/production JavaScript, we need to go through a compile step, deploy that to a web server, and run the app. from there. This is called running in ‘Web Mode’. For the gory differences between Hosted and Web Mode, see this link: http://vinaytechs.blogspot.com/2009/09/google-web-toolkit-hosted-vs-web-mode.html .

To manually compile a project in Eclipse, select the ‘GWT Compile Project’ from the toolbar:

And we’ll get a dialog where we can usually accept the defaults:

After clicking ‘Compile’, GWT will do a lot of work and the Console will display details of that work. For example:

Compiling module com.gwtdesign.mvp.contactlist.ContactListTest
   Compiling 6 permutations
      Compiling permutation 0...
      Compiling permutation 1...
      Compiling permutation 2...
      Compiling permutation 3...
      Compiling permutation 4...
      Compiling permutation 5...
   Compile of permutations succeeded
Linking into C:\workspace\DesignStandards\war\com.gwtdesign.mvp.contactlist.ContactListTest.
   Link succeeded
   Compilation succeeded -- 27.812s

Now we can take the directory and move it in to any web server. In this screenshot, I show it moved in to an apache/tomcat web server:

And can hit the Tomcat-appropriate URL to see the page running the real/production Java code: http://localhost:8080/com.gwtdesign.mvp.contactlist.ContactListTest/ContactListTest.html

We have now run the app. in web mode and this is using the exact same code that we would deploy to a production server. Because our test relied on no server-side code, it was rather trivial to just move the HTML host page and compiled JavaScript in to any random web server that can serve up static resources. If the view has a reliance on server-side functionality, then a simple web server is not sufficient for the test and an app server will also need to be appropriately configured so the server-side of the application is available.

Debugging in Production Mode

A very cool feature of GWT is that, even in production mode, it maintains the ability to debug the JavaScript as Java. To do this, you start up the GWT app in Eclipse using ‘Debug As.. Web Application’:

Now, we can append the ‘gwt.codesvr’ parameter to the production URL (e.g. gwt.codesvr=127.0.0.1:9997) and that will now redirect the JavaScript execution to our Eclipse Java environment!!!

Here’s the full URL for this test (note that localhost:8080 is the Apache Tomcat server as opposed to the localhost:8888 we were previously using to run in Development mode): http://localhost:8080/com.gwtdesign.mvp.contactlist.ContactListTest/ContactListTest.html?gwt.codesvr=127.0.0.1:9997

With this capability, it really opens up our options. It essentially enables us to hook a Java-based debugger in to any user’s browser. Once the gwt.codesvr parameter is added to the URL, all the JavaScript is now run through our Eclipse environment. This, not only gives us the ability to troubleshoot an issue, but also the ability to test fixes since we can be code changes and they’ll be reflected on the browser in real-time. To illustrate, I’ve changed my Eclipse code to put ‘Sam’ in the list and have deployed NOTHING to my Apache Tomcat server. When I click refresh on my browser, I now see ‘Sam’ in the list: