Create GWT Projects with JBoss Tools and Eclipse WTP

Use Eclipse WTP, get there with the standard

If you want to create GWT applications you unfortunately cannot do it the WTP way and create a so called dynamic web project. The Google plugins implement their own set of views, wizards, launchers and mostly duplicate what's already present and defacto standard in WTP. The consequence is that you'd have to deal with workarounds if you want to get functionalities (run/deploy on JBoss etc.) Google does not offer.

We therefore developed an experimental integration plugin for GWT that allows you to create GWT projects in the way most Eclipse users are used to: by creating Dynamic Web Projects.


Preface

 

Eclipse offers nice tools to create web applications. The base framework's what we call the Eclipse Web Tools Platform (WTP). Eclipse WTP delivers a standard for most aspects involved when you create web applications.

The google web toolkit, GWT, is a nice framework to develop web applications. Google delivers a plugin for Eclipse and developing with GWT is a very pleasant experience. The GWT plugin uses an embedded jetty to run the application that you develop. Google unfortunately did not base its work on Eclipse WTP and does not comply to the Eclipse project structure for web application. So if you want to use JBoss instead of jetty, the approach to take is not as handy and intuitive as it could be.  Furthermore there's no way to use and integrate into plugins that other solution providers offer. You mostly have to proceed by workarounds to get what Google does not offer.

We developed a set of (experimental) plugins that create GWT projects by extending Eclipse WTP. Our plugins implement well known usage patterns and integrate well with all Eclipse components that use the common standard for web projects. The most obvious benefit is that deploying to JEE application servers (and JBoss partcullarly) is as easy as it is with any other web project.

 

Solution

Install and use the JBoss GWT Integration. You'll then be able to create GWT projects the WTP way and fully enjoy it's full-blow features and standardized usage patterns.

This How-To shows you all the steps to install the plugins and how to create a dynamic web project that's GWT enabled.

 

Install Google Plugin for Eclipse

 

Add the Google update site

 

 

 

And Install the Google Plugin for Eclipse 3.6 and the GWT SDK.

 

install-gwt-plugins.png

 

Install JBoss GWT Integration

 

Add the JBoss Tools update site:

 

 

 

 

And Install the JBoss GWT Integration

 

Picture 4.png

 

Create a Dynamic Web Application Project

 

Make sure you have a JEE server (JBoss application server for instance) in your Eclipse environment. If not, download and declare it to your Eclipse IDE:

 

 

Picture 12.png

 

Picture 11.png

 

 

You're now ready to create a Dynamic Web Project.

Picture 5.png

The wizard picks your server (runtime) and allows you to configure the various characteristic of your web project.

 

The configuration group allows you to pick the different facets of your project. We provide a Google Web Toolkit facet that will configure the GWT related characteristics.

Hit Modify...

 

Picture 13.png

and select the Google Web Toolkit facet.

 

Picture 14.png

A few wizard steps further, you may choose to get some GWT sample code.

 

generate-sample.png

 

You get the Hello World sample that you get when you use the Google Wizard. We just put it to the WebContent folder you configured in your Dynamic Web Project wizard (WTP default opposed to what Google does in their plugin). The sample's a fully working GWT application that allows you to get a first impression of what developing with GWT looks like.

 

Cross compile to Javascript

GWT is about programming in Java and getting javascript for the browser. GWT achieves this with a cross-compiler that creates the javascript for you.

In order to get the project up and running you now need to cross compile the sample's client java code to javascript. Our project has the GWT nature and therefore offers the Google compiler in the context menu.

 

 

Picture 1.png

 

Deploy to JBoss

We are now ready to deploy our application. We strictly use the standard Eclipse WTP infrastructure in our setup, So you may deploy your GWT application in the same manner you usually deploy and run classic web applications with Eclipse WTP. You have to add the application to a server that's registered in the WTP servers view. We deploy our application to our JBoss application server by selecting it in the and choosing Add and Remove...

 

 

Picture 17.png

 

 

You can now add the GWT application to your server. WTP will make sure that it gets deployed and the deployed artifacts are in sync with your workspace (even when you change code, resources, configurations, etc.)

 

Picture 18.png

Run your application and launch your browser

 

You may now run your application. We completely comply to the views and steps Eclipse WTP offers to web developers. So there's no custom way to start a server in our setup. We select our JBoss instance in the Servers view and start it.

 

 

Picture 19.png

 

 

You can now point your browser to the address and port that your JBoss server's bound to.

 

Picture 2.png

Speed up my development cycle!

The approach we've choosen so far uses an extra cross compile step to deploy the application after each change. That's very reliable but it gets tedious at development time. Google delivers a so called hosted/development mode. Its major benefit is that you dont need to cross compile on each change but you can change and test on the fly. This magic is achieved with a browser plugin and a google runtime that interprets your java code at runtime. Changing, testing, changing, testing etc. gets much faster and pleasant, the cross-compilation step's not needed any more.

Launch GWT Codeserver

If you launch your application as Google Web Application, you'll be able to code and test on the fly. The GWT browser plugin will communicate with the GWT code server and execute your changes on the fly.

 

 

run-webapp.png

 

 

You need to tell the browser plugin where your code server may be reached. You do that by using an additional url parameter. Your browser URL now reads as follows:

 

 

http://localhost:8080/gwt-test/?gwt.codesvr=127.0.0.1:9997

 

 

Point your browser to this URL and you'll get the same page as before, nothing spectacular so far.

Now get back to your client code and change the button label, to see if changes are picked on the fly now.

 

 

change-code.png

 

 

Do not cross-compile, get back to your browser and reload. What you see reflects the changes in your code. You don't need to cross compile to develop your app!

 

web-app-changed.png

 

To be picky on the issue you could now go to the launch configuration and disable the jetty google usually uses to serve your GWT application:

 

 

disable-builtin-server.png