[jboss-user] [JBoss Tools] - Use JBoss Tools with Google GWT Plugin

Thu Jul 15 08:33:22 EDT 2010

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

"Use JBoss Tools with Google GWT Plugin"

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

--------------------------------------------------------------
h1. A few simple steps
If you develop web applications with GWT you most likely end up using Eclipse and the Google Plugins for Eclipse. These Plugins offer to run your application on a jetty instance. If you want to use JBoss instead, JBoss Tools allows you to define a war project archive and make sure it gets published to the JBoss instance of your choice. This allows you to use Google GWT plugins proprietary project layout and Eclipse integration together with JBoss servers.

Note: We are working on getting Google GWT Plugin to be a better Eclipse citizen, but for now this will have to do  ;) 

h2. *Premise*
The google web toolkit, GWT is a nice framework to develop web applications. Google even delivers a plugin for Eclipse so that 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 use standard Eclipse project structure for web projects. So if you want to use JBoss instead of jetty, the approach to take is not as intuitive as it could be. This article shows you what steps to take so that you can develop your GWT application seamlessly with JBoss Tools while running on JBoss.

h1. Solution
This How-To shows all the steps to install the plugins and how to configure it with Project Archives.
h2. Install Google Plugin for Eclipse
Install the Google plugin for Eclipse in your Eclipse or JBoss Developer Studio (3.x) by adding the following update site:

>  http://dl.google.com/eclipse/plugin/3.5 http://dl.google.com/eclipse/plugin/3.5

You can use the Google GWT plugin i http://code.google.com/eclipse/docs/getting_started.html#installing nstallation guide to see the exact instructions.
h2. Create a Web Application Project
In order to get the support you need for GWT projects, you'll need to create a new *Web Application Project*. You may do so with the toolbar or with entries in the file menu.

 http://community.jboss.org/servlet/JiveServlet/showImage/4286/create-web-app-project.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4286/create-web-app-project.png 

 http://community.jboss.org/servlet/JiveServlet/showImage/102-15593-2-4320/new-wizard-gwt.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15593-2-4320/450-492/new-wizard-gwt.png 
Notice that here we deselect "Use Google App Engine" since that is not needed for this example.
h2. Create a new WAR with Project Archives
We'll work with a JBoss application server instead of the embedded jetty that's provided with the Google plugins. We therefore need to provide JBoss with a *War Archive* that bundles your project resources. The *Project archives* view allows you to do so. Select your GWT project and go to the *Project archives* view. You can now define a new war archive by right clicking on the project name.

 http://community.jboss.org/servlet/JiveServlet/showImage/4289/create-new-project-war.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4289/create-new-project-war.png 

The wizard that pops up allows you pick an archive name, the path at which it'll be created and the type (packed or unpacked). Choose the settings that fit your needs.

 http://community.jboss.org/servlet/JiveServlet/showImage/4290/create-new-project-war-2.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4290/create-new-project-war-2.png 

The wizard created a default fileset, that determines what project files shall be included in the war. We'll replace it by a fileset that includes all files within the *war* directory. This is the location the google plugins compile and package the code to.

 http://community.jboss.org/servlet/JiveServlet/showImage/4291/create-new-fileset.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4291/create-new-fileset.png 

Your war archive shows up in the *Project archives* as soon you hit *finish*.

 http://community.jboss.org/servlet/JiveServlet/showImage/4292/create-new-fileset-2.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4292/create-new-fileset-2.png 

h1. Build and publish your war
We now need to publish the War to the JBoss instance. Choose the appropriate entry in the context-menu of your war-archive and hit *Edit publish settings*.

 http://community.jboss.org/servlet/JiveServlet/showImage/4293/adjust-war-publishing-settings-1.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4293/adjust-war-publishing-settings-1.png 

JBoss Developer Studio comes with a preconfigured server named jboss-eap. You therefore already get that server in the list of the available servers.
If you use plain JBoss Tools you would need to setup the server manually.

Select the server and choose to publish to it in the way that fits your needs:

 http://community.jboss.org/servlet/JiveServlet/showImage/4294/adjust-war-publishing-settings-2.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4294/adjust-war-publishing-settings-2.png 

Your war now's assiociated to your server and will be published to it if your GWT project's been built. The *Servers* view show you the state of the publishing:

 http://community.jboss.org/servlet/JiveServlet/showImage/4295/war-on-server.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4295/war-on-server.png 

h2. Cross compile
GWT allows you to write your client code in (almost) plain java instead of funky javascript. GWT ships a cross compiler that generates javascript out of your java classes. You need to start that cross compiler so that the client codes gets into your war. (We show later how you can use the hosted mode too with JBoss)

 http://community.jboss.org/servlet/JiveServlet/showImage/4319/cross-compile.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4319/cross-compile.png 

The Google cross compiler will inform you in the console view whether's he succeeded in his job. Check the output and wait until it terminated its compilation task.

h2. *Launch your Browser*
The project archive we created was deployed to the base url *gwt-jboss*. The jBoss server that's included in the JBoss developer studio is configured (by default) to run on port *8080*. Your application's therefore accessible at the url:

** 
>  http://127.0.0.1:8080/gwt-jboss/Gwt_jboss.html http://127.0.0.1:8080/gwt-jboss/Gwt_jboss.html

 *http://community.jboss.org/servlet/JiveServlet/showImage/4317/browser.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4317/browser.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 mode. Its major benefit is that your java classes dont get cross-compiled but interpreted to javascript at runtime. Changing, testing, changing, testing etc. gets much faster and pleasant, the cross-compilation step's not needed any more. You need a browser plugin, a slightly different url for your application and a google runtime to achieve that.
h2. 
h2. Launch Google
If you start this launch configuration you wont have to cross compile your java client classes to javascript. It will get interpreted by the google browser plugin. On the other hand the browser plugin needs access to your java classes. The google runtime you just launched allows it to get your java code. The url parameter you add when you access your application tells the plugin at what host and port the hosted mode runs.
Create a *Web Application* launch configuration for that matter.

 http://community.jboss.org/servlet/JiveServlet/showImage/4296/new-run-configuration-1.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4296/new-run-configuration-1.png 

We want to use our JBoss instance, we therefore disable the embedded jetty that's provided by the GWT plugins.

 http://community.jboss.org/servlet/JiveServlet/showImage/4297/new-run-configuration-2.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4297/new-run-configuration-2.png 

Now that we want not to cross-compile on each change, we'll need to tell the google browser-plugin where to fetch the code from. We do that by adding an url parameter:

** 
>  http://127.0.0.1:8080/gwt-jboss/Gwt_jboss.html http://127.0.0.1:8080/gwt-jboss/Gwt_jboss.html*?gwt.codesvr=127.0.0.1:9997*

To convince yourself that there's no cross compilation needed any more, go to the client-package and change any java class that's in there. You may for instance change the label of a button and reload your browser (without launching the google cross-compiler).

 http://community.jboss.org/servlet/JiveServlet/showImage/4311/button-label-changed-code.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4311/button-label-changed-code.png 

 http://community.jboss.org/servlet/JiveServlet/showImage/4312/button-label-changed-ui.png  http://community.jboss.org/servlet/JiveServlet/downloadImage/4312/button-label-changed-ui.png 
h1. Conclusion
There you go, now you can use JBoss Tools and JBoss Developer Studio together with Google GWT plugin to do full deployment (with Cross Compile) or development mode via the hosted mode option.

All enabled by utilizing the Project Archives view.

--------------------------------------------------------------

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

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/20100715/ba493e01/attachment-0001.html 