04 November 2010

GWT StockWatcher and MyEclipse

I did the Google Web Toolkit tutorial creating the StockWatcher application. I don't know if there are more tutorials that build on this but the one at THIS PLACE creates an application in Eclipse and shows you how to compile it to a bunch of html, css, js and such files. The logic in this example all ends up in the javascript that is generated from the java the tutorial helps you create (or lets you copy and paste). [Note that you can do the tutorial without Eclipse but this article has "MyEclipse" in the title.]

I used MyEclipse version 8.6. I downloaded their Pulse tool sometime back and used it to build myself a new profile that included MyEclipse 8.6 (based on Eclipse 3.5 - Helios). Subclipse, Checkstyle and the Google Plugin for Eclipse. If you already have one of the 8.x series MyEclipses installed, you can probably use the included Pulse-like facility to create the new "profile". (For those unfamiliar with MyEclipse, a "profile" in Pulse is a collection including one version of Eclipse or MyEclipse and zero or more plugins. When you get it loaded on your computer, its simple another instance of Eclipse that can be run alongside any other Eclipse versions you have on your machine.) Also, you don't need Subclipse or Checkstyle installed to do the tutorial or what I describe below. I just always include them in my profiles.

You could probably do all this with a pure Eclipse version with the Google Plugin for Eclipse installed. But you would have to run Tomcat separately and build and deploy the war as described below. The feature of running Tomcat inside Eclipse and doing easy deployments is a MyEclipse feature. (But there may be other plugins that can do this independently but similarly.)

Sidebar: Note that to add the Google plugin to my Pulse profile, I could not simply select the Google plugin like I did with all the other plugins. I found a note on the web somewhere that explained how to do it. Find the information on the plugin by Googling for GWT. This will tell you the Eclipse update location that matches the version of Eclipse you are using. I found it at http://code.google.com/eclipse/docs/getting_started.html where it shows that the update location for Galileo is http://dl.google.com/eclipse/plugin/3.5 and chose, within Pulse, to "add an update site" which is a tiny link just to the right of a title near the top of the page. Enter the update location and save. A new entry appears allowing you to select the "Google Plugin for Eclipse" under that new entry. And there you go.

So, using my brand new MyEclipse 8.6 installation, I proceeded to open it up and select a location for the workspace.

Next I went through the whole tutorial to create the StockWatcher "application" and compile it.

When it compiles, it goes into a folder off the root of your Eclipse project that is named "war." That folder gets filled with all the results of the compilation and can be run, if you have deployed it in development mode you can run the compiled version by removing the query part of the URL used to access the app for debugging and development. In my case that URL was http://127.0.0.1:8888/Stockwatcher.html?gwt.codesvr=127.0.0.1:9997 and, removing the query part is http://127.0.0.1:8888/Stockwatcher.html.

But I wanted to run it in the Tomcat that is supplied with MyEclipse. Here's how to do that:

1) Since I had a whole new MyEclipse installation, I had to configure the Tomcat. You do this by going to the MyEclipse property page at Window > Preferences > MyEclipse > Servers > Integrated Sandbox > Tomcat. I only changed the port it runs on to 8090 so it wouldn't interfere with Google's development "server" (really an instance of Jetty included somewhere). Save all that.

2) Configure the project to deploy correctly. First, right click on the project itself and choose MyEclipse > Add Web Project Capabilities. Set the web root to the "war" folder that holds all the compiled artifacts for StockWatcher. Save this setting. When you do, it will complain about the folder to which Eclipse is set to store the compiled java class files. Click "Yes" you would like to change that folder to be inside the "war" folder you just selected.

3) You need to change the "deployment" options for the web application. So, reopen a similar dialog box to the one in step 2 above, by going to the project properties for your project and opening the web entry under MyEclipse. (Select the project. From the menu bar do Project > Properties > MyEclipse > Web)

4) Open the "deployment" tab (the rightmost one) and DON'T use the default settings for Web Project Deployment Policies. Instead, click the "ignore" option to "do it yourself", which means you will do nothing. Also, DON'T use the Library Deployment Policies default setting. Instead, unclick everything there. (Note that you may need to select some of those options judiciously if you are deploying a different web app that uses back-end, server based code requiring some 3rd party jars. Remember that StockWatcher, at this point, only has JavaScript and no back-end code at all.) Save all that.

5) There are two ways to add a deployment for Tomcat and your StockWatcher project. You can approach it from either the project deployments direction or the Tomcat deployments direction. I like the latter. So click the tiny arrow beside the icon for "run/start/remove MyEclipse deployments" that looks like a little desktop/tower computer box. (Funny how people have taken to calling those the "hard disk.") The options drop down and you click "Manage Deployments". When the box opens, select "Tomcat" in the top drop-down box labeled "Server" and then click the "add" button at the right. Select your project from the drop down list. You may want to choose exploded war or not. Then save it. (The other way starts by right-clicking on the server itself in the "Server" view ...)

6) You might see some lines from the Tomcat console display.

7) Go to your browser and open up "http://localhost:8090/stockwatcher/StockWatcher.html" or similar URL depending on what, exactly, you named things. If you don't know what to use for the html file name, look in the "war" folder in your project. It will be there. If you don't know the application context (which is the 1st part of the url after the port number), you approved it and maybe entered it on the project properties myeclipse web page on the left tab where it says "context root."

There you go. Now you have the StockWatcher application running on the Tomcat inside MyEclipse.

If you want to create a .war file that can be deployed on an independent Tomcat (or other JEE server) you can right click on the project name, select Export, choose the project again, browse to a folder and supply a .war file name and, finally, click "Finish". The .war file will get put where you choose and can be deployed however your server deploys apps. (For Tomcat, drop the war file into the "webapps" folder and that usually does it.)

Addendum: I followed through with the additional tutorial at http://code.google.com/webtoolkit/doc/latest/tutorial/RPC.html and found that these same steps work to deploy the StockWatch example with RPC back-end code included.