<!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;">
Create GWT Projects with JBoss Tools and Eclipse WTP
</h3>
<span style="margin-bottom: 10px;">
modified by <a href="http://community.jboss.org/people/adietish">Andre Dietisheim</a> in <i>JBoss Tools</i> - <a href="http://community.jboss.org/docs/DOC-15794">View the full document</a>
</span>
<hr style="margin: 20px 0; border: none; background-color: #dadada; height: 1px;">
<div class="jive-rendered-content"><h1>Use Eclipse WTP, get there with the standard</h1><p>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.</p><p>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.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h1>Preface</h1><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="padding: 0pt; margin: 0pt;">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.</p><p>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.</p><p>We therefore developed a set of (experimental) plugins that extend Eclipse WTP and allow you to create GWT projects by using Eclipse WTP standard tools. 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.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h1>Solution</h1><p>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.</p><p>This How-To shows you all the steps to install the plugins and how to create a dynamic web project that's GWT enabled.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Install JBoss GWT Integration</h2><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Add the Google Eclipse Plugins update site:</p><blockquote class="jive-quote"><p><a class="jive-link-external-small" href="http://dl.google.com/eclipse/plugin/3.6/" target="_blank">http://dl.google.com/eclipse/plugin/3.6/</a></p></blockquote><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Add the JBoss Tools update site:</p><blockquote class="jive-quote"><a class="jive-link-external-small" href="http://download.jboss.org/jbosstools/updates/nightly/jbosstools-3.2.0.M2/">http://download.jboss.org/jbosstools/updates/nightly/jbosstools-3.2.0.M2/</a></blockquote><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>And Install the JBoss GWT Integration</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/6254/Picture+4.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/6254/Picture+4.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Create a Dynamic Web Application Project</h2><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>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:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/6260/Picture+12.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/6260/Picture+12.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/6259/Picture+11.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/6259/Picture+11.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>You're now ready to create a <strong>Dynamic Web Project</strong>.</p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/6256/Picture+5.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/6256/Picture+5.png </span></a></p><p>The wizard picks your server (runtime) and allows you to configure the various characteristic of your web project.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="padding: 0pt; margin: 0pt;">The <strong>configuration</strong> group allows you to pick the different facets of your project. We provide a <strong>Google Web Toolkit</strong> facet that will configure the GWT related characteristics.</p><p style="padding: 0pt; margin: 0pt;">Hit <strong>Modify...</strong></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-12-6263/Picture+13.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-12-6263/436-600/Picture+13.png </span></a></p><p>and select the <strong>Google Web Toolkit</strong> facet.</p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/6262/Picture+14.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/6262/Picture+14.png </span></a></p><p>A few wizard steps further, you may choose to get some GWT <strong>sample code</strong>.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/6411/generate-sample.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/6411/generate-sample.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>You get the Hello World sample that you get when you use the Google Wizard. We just put it to the <strong>WebContent</strong> 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.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h1>Cross compile to Javascript</h1><p>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.</p><p>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 <strong>GWT nature</strong> and therefore offers the Google compiler in the context menu.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-12-6270/Picture+1.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-12-6270/450-408/Picture+1.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h1>Deploy to JBoss</h1><p>We are now ready to deploy our application. We strictly use the standard Eclipse <strong>WTP</strong> 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 <strong>servers view</strong>. We deploy our application to our JBoss application server by selecting it in the and choosing <strong>Add and Remove...</strong></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-12-6265/Picture+17.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-12-6265/400-251/Picture+17.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>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.)</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-12-6266/Picture+18.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-12-6266/450-463/Picture+18.png </span></a></p><h1>Run your application and launch your browser</h1><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>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 <strong>Servers view</strong> and <strong>start</strong> it.</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/102-15794-12-6269/Picture+19.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-12-6269/400-151/Picture+19.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>You can now point your browser to the address and port that your JBoss server's bound to.</p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/6271/Picture+2.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/6271/Picture+2.png </span></a></p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 21px; list-style-type: none; list-style-position: initial; list-style-image: initial; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; outline-width: 0px; outline-style: initial; outline-color: initial; padding-top: 10px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-weight: normal; letter-spacing: -0.04em; font-family: 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; display: block; color: #4a5d75; background-position: initial initial; background-repeat: initial initial; border: 0px initial initial;">Speed up my development cycle!</h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 1em; list-style-type: none; list-style-position: initial; list-style-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-position: initial initial; background-repeat: initial initial; padding: 0px; margin: 0px; border: 0px initial initial;">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.</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 21px; list-style-type: none; list-style-position: initial; list-style-image: initial; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; outline-width: 0px; outline-style: initial; outline-color: initial; padding-top: 10px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-weight: normal; letter-spacing: -0.04em; font-family: 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; display: block; color: #4a5d75; background-position: initial initial; background-repeat: initial initial; border: 0px initial initial;">Launch GWT Codeserver</h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 1em; list-style-type: none; list-style-position: initial; list-style-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-position: initial initial; background-repeat: initial initial; padding: 0px; margin: 0px; border: 0px initial initial;">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. You need to declare though, where your code server's may be reached. You do that by using an <strong>additional url parameter</strong>. Your URL now reads as follows:</p><blockquote class="jive-quote"><p><a class="jive-link-external-small" href="http://localhost:8080/gwt-test/?gwt.codesvr=127.0.0.1:9997" target="_blank">http://localhost:8080/gwt-test/?gwt.codesvr=127.0.0.1:9997</a></p></blockquote><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 1em; list-style-type: none; list-style-position: initial; list-style-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-position: initial initial; background-repeat: initial initial; padding: 0px; margin: 0px; border: 0px initial initial;">Change the button in your GWT java client code, to see if changes are picked on the fly now.</p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-12-6405/change-code.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-12-6405/450-324/change-code.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 1em; list-style-type: none; list-style-position: initial; list-style-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-position: initial initial; background-repeat: initial initial; padding: 0px; margin: 0px; border: 0px initial initial;">Do not cross-compile, get back to your browser and reload (without cross-compiling again). What you see reflects the changes in the code.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 1em; list-style-type: none; list-style-position: initial; list-style-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-position: initial initial; background-repeat: initial initial; padding: 0px; margin: 0px; border: 0px initial initial;"><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-15794-12-6406/web-app-changed.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-15794-12-6406/450-381/web-app-changed.png </span></a></p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 1em; list-style-type: none; list-style-position: initial; list-style-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-position: initial initial; background-repeat: initial initial; padding: 0px; margin: 0px; border: 0px initial initial;">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:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: 1em; list-style-type: none; list-style-position: initial; list-style-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-position: initial initial; background-repeat: initial initial; padding: 0px; margin: 0px; border: 0px initial initial;"><a href="http://community.jboss.org/servlet/JiveServlet/showImage/6413/disable-builtin-server.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/6413/disable-builtin-server.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-15794">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>