[jboss-user] [JBoss Tools] - Create GWT Projects with JBoss Tools and Eclipse WTP

Tue Feb 22 09:23:30 EST 2011

Andre Dietisheim [http://community.jboss.org/people/adietish] modified the document:

"Create GWT Projects with JBoss Tools and Eclipse WTP"

To view the document, visit: http://community.jboss.org/docs/DOC-15794

--------------------------------------------------------------
h1. 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.

h1. 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.

h1. 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.

h2. Install JBoss GWT Integration

Add the Google Eclipse Plugins update site:
>  http://dl.google.com/eclipse/plugin/3.6/ http://dl.google.com/eclipse/plugin/3.6/

Add the JBoss Tools update site:

>  http://download.jboss.org/jbosstools/updates/nightly/trunk/ http://download.jboss.org/jbosstools/updates/nightly/trunk/

And Install the JBoss GWT Integration

 http://community.jboss.org/servlet/JiveServlet/showImage/6254/Picture+4.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/6254/Picture+4.png 

h2. 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:

 http://community.jboss.org/servlet/JiveServlet/showImage/6260/Picture+12.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/6260/Picture+12.png 

 http://community.jboss.org/servlet/JiveServlet/showImage/6259/Picture+11.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/6259/Picture+11.png 

You're now ready to create a *Dynamic Web Project*.
 http://community.jboss.org/servlet/JiveServlet/showImage/6256/Picture+5.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/6256/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...*

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-18-6263/Picture+13.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-18-6263/436-600/Picture+13.png 
and select the *Google Web Toolkit* facet.

 http://community.jboss.org/servlet/JiveServlet/showImage/6262/Picture+14.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/6262/Picture+14.png 
A few wizard steps further, you may choose to get some GWT *sample code*.

 http://community.jboss.org/servlet/JiveServlet/showImage/6411/generate-sample.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/6411/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.

h1. 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.

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-18-6270/Picture+1.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-18-6270/450-408/Picture+1.png 

h1. 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...*

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-18-6265/Picture+17.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-18-6265/400-251/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.)

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-18-6266/Picture+18.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-18-6266/450-463/Picture+18.png 
h1. 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.

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-18-6269/Picture+19.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-18-6269/400-151/Picture+19.png 

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

 http://community.jboss.org/servlet/JiveServlet/showImage/6271/Picture+2.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/6271/Picture+2.png 
h2. 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.
h2. 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.

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-18-6464/run-webapp.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-18-6464/450-213/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 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.

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-18-6405/change-code.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-18-6405/450-324/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!

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-18-6406/web-app-changed.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-18-6406/450-381/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:

 http://community.jboss.org/servlet/JiveServlet/showImage/6413/disable-builtin-server.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/6413/disable-builtin-server.png
--------------------------------------------------------------

Comment by going to Community
[http://community.jboss.org/docs/DOC-15794]

Create a new document in JBoss Tools at Community
[http://community.jboss.org/choose-container!input.jspa?contentType=102&containerType=14&container=2128]
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.jboss.org/pipermail/jboss-user/attachments/20110222/160a1c69/attachment-0001.html 