<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body link="#355491" alink="#4262a1" vlink="#355491" style="background: #e2e2e2; margin: 0; padding: 20px;">
<div>
<table cellpadding="0" bgcolor="#FFFFFF" border="0" cellspacing="0" style="border: 1px solid #dadada; margin-bottom: 30px; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border: solid 2px #ccc; background: #dadada; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td bgcolor="#000000" valign="middle" height="58px" style="border-bottom: 1px solid #ccc; padding: 20px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;">
<h1 style="color: #333333; font: bold 22px Arial, Helvetica, sans-serif; margin: 0; display: block !important;">
<!-- To have a header image/logo replace the name below with your img tag -->
<!-- Email clients will render the images when the message is read so any image -->
<!-- must be made available on a public server, so that all recipients can load the image. -->
<a href="http://community.jboss.org/index.jspa" style="text-decoration: none; color: #E1E1E1">JBoss Community</a></h1>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="font: normal 12px Arial, Helvetica, sans-serif; color:#333333; padding: 20px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;"><h3 style="margin: 10px 0 5px; font-size: 17px; font-weight: normal;">
Use JBoss Tools with Google GWT Plugin
</h3>
<span style="margin-bottom: 10px;">
modified by <a href="http://community.jboss.org/people/adietish">Andre Dietishei</a> in <i>JBoss Tools</i> - <a href="http://community.jboss.org/docs/DOC-15593">View the full document</a>
</span>
<hr style="margin: 20px 0; border: none; background-color: #dadada; height: 1px;">
<div class="jive-rendered-content"><h1>A few simple steps to have GWT running on JBoss</h1><p>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, you'll have to define a war project archive and make sure it gets published to the JBoss instance of your choice. This article shows you the simple steps you'll have to take to achieve this.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><div> </div><h1>Premise</h1><p>The google web toolkit, GWT is a pretty 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. The authors unfortunately did not use standard connectors. So if you want to use Jboss instead of jetty the approach to take is not as intuitive as it could be. This article shall show you how what steps to take so that you can run develop your GWT application while running on JBoss.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h1>Solution</h1><p>Either you already have a project or you want to start from scratch. So that the howto here's complete, we'll show you the step to create a new GWT project, too.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Install Google Plugin for Eclipse</h2><p>Install the Google plugin for Eclipse in your JBDS by adding the following update site:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><code></code></p><p><code></code></p><p><code></code></p><p><code></code></p><p><code></code></p><p><code></code></p><p><code></code></p><p><code></code></p><p><code></code></p><p><code></code></p><p><code></code></p><p><code><blockquote class="jive-quote"><a class="jive-link-external-small" href="http://dl.google.com/eclipse/plugin/3.5" target="_blank">http://dl.google.com/eclipse/plugin/3.5</a></blockquote></code></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Choose and install the Google Plugin for Eclilpse among the availble ones.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4313/install-gwt-plugin.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4313/install-gwt-plugin.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Create a Web Application Project</h2><p>In order to get the support you need for GWT projects, you'll need to create a new <strong style="font-weight: bold;">Web Application Project</strong>. You may do so with the toolbar or with entries in the file menu.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4286/create-web-app-project.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4286/create-web-app-project.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>We will call it</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><blockquote class="jive-quote"><strong style="font-weight: bold;">gwt-jboss</strong>.</blockquote><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4318/new-wizard-gwt.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4318/new-wizard-gwt.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Create a new Project WAR</h2><p>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 <strong style="font-weight: bold;">War Archive</strong> that bundles your project resources. The JBDS <strong style="font-weight: bold;">Project archives</strong> view allows you to do so. Select your GWT project and go to the <strong style="font-weight: bold;">Project archives</strong> view. You can now define a new war archive.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4289/create-new-project-war.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4289/create-new-project-war.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>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.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4290/create-new-project-war-2.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4290/create-new-project-war-2.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>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 <strong style="font-weight: bold;">war directory</strong>. This is the location the google plugins compile and package the code to.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4291/create-new-fileset.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4291/create-new-fileset.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Your war archive shows up in the <strong style="font-weight: bold;">Project archives</strong> soon as you hit <strong style="font-weight: bold;">finish</strong>.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4292/create-new-fileset-2.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4292/create-new-fileset-2.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h1>Build and publish your war</h1><p>We now have to make sure the war gets published to our JBoss instance. Choose the appropriate entry in the context-menu of your war-archive and hit <strong style="font-weight: bold;">Edit publish settings</strong>.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4293/adjust-war-publishing-settings-1.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4293/adjust-war-publishing-settings-1.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>The developer studio comes with a preconfigured jboss-eap. You therefore already get that server in the list of the available servers. Select it and choose to publish to it in the way that fits your needs:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4294/adjust-war-publishing-settings-2.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4294/adjust-war-publishing-settings-2.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Your war now's assiociated to your server and will be published to it if your GWT project's been built. The <strong style="font-weight: bold;">Servers </strong>view show you that:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4295/war-on-server.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4295/war-on-server.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Cross compile</h2><p>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.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4319/cross-compile.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4319/cross-compile.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>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.</p><p>Now you're almost done, the archive has all it needs. <strong style="font-weight: bold;">B</strong><strong style="font-weight: bold;">uild</strong> and <strong style="font-weight: bold;">publish</strong> your war.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4298/build-archive.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4298/build-archive.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4299/publish-archive.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4299/publish-archive.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2><strong style="font-weight: bold;">Launch your Browser</strong></h2><p>The project archive we created was deployed to the base url <strong style="font-weight: bold;">gwt-jboss</strong>. The jBoss server that's included in the JBoss developer studio is configured (by default) to run on port <strong style="font-weight: bold;">8080</strong>. Your application's therefore accessible at the url:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"><strong style="font-weight: bold;"> </strong> </p><blockquote class="jive-quote"><a class="jive-link-external-small" href="http://127.0.0.1:8080/gwt-jboss/Gwt_jboss.html" target="_blank">http://127.0.0.1:8080/gwt-jboss/Gwt_jboss.html</a></blockquote><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><strong style="font-weight: bold;"><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4317/browser.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4317/browser.png </span></a></strong></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Speed up my development cycle!</h2><p>The approach we've choosen so far uses an extra step to deploy the application after each change. That's very reliable but it get 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.</p><h2></h2><h2>Launch Google</h2><p>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 ip and port he may get served.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Create a <strong style="font-weight: bold;">Web Application </strong>launch configuration for that matter.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4296/new-run-configuration-1.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4296/new-run-configuration-1.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>We want to use our JBoss instance, we therefore disable the embedded jetty that's provided by the GWT plugins.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4297/new-run-configuration-2.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4297/new-run-configuration-2.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>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:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"><strong style="font-weight: bold;"> </strong> </p><blockquote class="jive-quote"><a class="jive-link-external-small" href="http://127.0.0.1:8080/gwt-jboss/Gwt_jboss.html" target="_blank">http://127.0.0.1:8080/gwt-jboss/Gwt_jboss.html</a><strong>?gwt.codesvr=127.0.0.1:9997</strong></blockquote><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Convince yourself that there's no cross compilation needed any more. Go to the client-package and chage any java directive that's in there. You may for instance change the label of a button and reload your browser (without launching the google cross-compiler).</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4311/button-label-changed-code.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4311/button-label-changed-code.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/4312/button-label-changed-ui.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/4312/button-label-changed-ui.png </span></a></p></div>
<div style="background-color: #f4f4f4; padding: 10px; margin-top: 20px;">
<p style="margin: 0;">Comment by <a href="http://community.jboss.org/docs/DOC-15593">going to Community</a></p>
<p style="margin: 0;">Create a new document in JBoss Tools at <a href="http://community.jboss.org/choose-container!input.jspa?contentType=102&containerType=14&container=2128">Community</a></p>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>