Nov 11 2009

Create a GWT Application from Scratch

Published by at 10:14 PM under Google Web Toolkit,NetBeans




Many people are asking (especially in the GWT Group) how to create a GWT Application for their favourite IDE. In this blog i will show you how to do this for Eclipse, NetBeans and IntelliJ IDEA.


Table of contents



Create the Project-files

During my growing experience with GWT i learned that it is better to create the project from scratch and import it into the IDE rather then using a IDE-wizard which often creates not all files you need. So let’s start bei downloading the Google Web Toolkit Archive and extract it. Open a shell (Windows-User run “cmd“) and navigate to the directory where you have extracted the GWT-archive. Run the following commands:

  • webAppCreator.cmd -out MyProjectDirectory eu.jdevelop.gwt.MyApp
  • i18nCreator.cmd -eclipse MyGwtProject -createMessages -out MyProjectDirectory eu.jdevelop.gwt.client.constants.i18n.MyLanguageConstants

So what have you done? You have created a GWT-Project and added support for Eclipse and internationalization (i18n).

Create the Project

Create the Project



Change into the created directory MyProjectDirectory and run the following commands to see that all is working:

  • ant build
  • ant hosted

Running Ant targets

Running Ant targets



Hosted Mode

Hosted Mode



Well done, now it is time to import this project into your favourite IDE.


Using Eclipse

Open Eclipse (i am using version 3.5) and point it to an empty directory for your Workspace. In the menu open “Help“->”Install New Software” and install the plugin for your Eclipse version. Restart Eclipse after Installation.

Eclipse Plugin

Eclipse Plugin



Now import the previously created project. Click on “File“->”Import“:

Import GWT Project

Import GWT Project



..and select “General“->”Existing Projects into Workspace“.

Import project

Import project



Choose the directory where your project is located. After importing, you should see something like this:

Eclipse with GWT-Project

Eclipse with GWT-Project



At last you have to activate the GWT-Plugin. Open the project properties and navigate to “Google“->”Web Toolkit“. Activate the plugin. That’s it!

Project properties

Project properties



You can use Ant targets or the Eclipse commands to run the application.

Launch the application

Launch the application




Using NetBeans

Using NetBeans and GWT is not very difficult. Here i am using NetBeans v6.7.1 . First open in the menu “Tools“->”Plugins” and install the GWT4NB-Plugin.

Install the NetBeans Plugin

Install the NetBeans Plugin



Create a new “Web Application“-Project:

Web Application

Web Application



Choose a directory for it:

Directory

Directory



Select a Server:

Server

Server



Select the “Google Web Toolkit“-Framework in the next page and insert in the “GWT Module“-Textfield this: “eu.jdevelop.gwt.MyApp“. Notice the missing “client“-subpackage? It will be automatically created by the GWT4NB-Plugin.

GWT Framework

GWT Framework



After that you will see the created project from the GWT4NB-Plugin:

GWT4NB Project

GWT4NB Project



When you launch the application you can see that it is deployed into your previously selected Server:

Running in Tomcat

Running in Tomcat



App in Chrome

App in Chrome



Where is now the “hosted mode” ? To use it, only click on the Debug-Button in the menu. To use Ant-Targets you have to make some changes. First open the “project properties” and change the “web page folder” from “web” to “war“:

Change the directory

Change the directory



Open the file “build.xml“, located inside your GWT-Project (created in Create the Project-files):

Original build.xml

Original build.xml



Copy the content inside the “<project></project>“-tags and insert it into the “build.xml“-file, located in your NetBeans-Project directory:

Changed build.xml

Changed build.xml



Replace all appearances of “src” with “src/java“, because source files are located in a different directory.

Search and replace

Search and replace



You are now able to run the new ant targets “gwtc” and “hosted“:

new ant targets

new ant targets



The last step is the integration of i18n. Copy the whole “…gwt-windows-1.7.1MyProjectDirectorysrceujdevelopgwtclientconstants“-directory into the corresponding directory of your NetBeans-project.

Copied content

Copied content



Don’t forget to copy the file “MyLanguageConstants-i18n.cmd“, you need it to create the i18n-java-file! You have to open it in NetBeans and update the source-directory (there are two!) to “src/java“:

Edit the i18n-file

Edit the i18n-file



Hosted mode in NetBeans

Hosted mode in NetBeans




Using IntelliJ IDEA

First create an empty directory (i am using “C:TempIdeaGWT” in this example) and copy the contents from the created GWT-Project (“…gwt-windows-1.7.1MyProjectDirectory” into it.

IDEA Project

IDEA Project



Open IDEA (i am using version 8.1.3) and click on “Create New Project“. Select “Import project from external model“:

Import project

Import project



Follow now the next pictures and select the same options:

Select Eclipse

Select Eclipse



Eclipse directory

Eclipse directory



Choose project

Choose project



Use the same directory

Use the same directory



Created IDEA project

Created IDEA project



Open the “Edit configurations“-screen and create a new “Tomcat Server“-configuration:

Tomcat Server

Tomcat Server



Click on the “FIX“-Button and choose your deployment source:

Fix the problem

Fix the problem



You can now launch the Tomcat Server and see your Application working.

Launched Tomcat

Launched Tomcat



Tomcat and Chrome 4

Tomcat and Chrome 4



Where is now the hosted mode? This famous question can be answered! Open on the right side of IDEA the “Ant Build“-Panel and add the “build.xml” -file. You will see all Ant targets and there you can launch “hosted“.

hosted mode target

hosted mode target



That’s it. If you have any improvements, drop a line below.

Technorati Tags: , , , , , , ,

15 responses so far

15 Responses to “Create a GWT Application from Scratch”

  1. salk sagt:

    to run a GWT app in NetBeans in hosted/development mode just hit “Debug” ;-)

  2. salk sagt:

    I am not quite sure why you need to change the build.xml. NetBeans build system is already Ant-based. There are special Ant targets for GWT in nbproject/build-gwt.xml.

    The equivalent target for your “gwtc” is “build” and for “hosted” it is “debug”.

  3. David MARTIN sagt:

    Yes, but many enterprise grade projects use Maven. How do you handle this easily in Eclipse ?

    That’s the **hard** part of the job : using eclipse (with WTP) + m2eclipse + GWT together.

    Solve this easily and a huge amount of GWT addicts will thank you !

  4. sheff sagt:

    Hi.
    Very useful post. Thanks a lot.

  5. Rick Wagner sagt:

    Thanks a lot! I’ve been meaning to have a look at GWT, this is a great sheet to start with.

    Best Regards,

    Rick

  6. [...] Creating a GWT application anywhere December 17th, 2009 // In this post anywhere means on any IDE or without any IDE. Working on your first GWT application may stuck up at start up. Top IDE s on the market already there to help you out. Eclipse, Netbeans and IDEA. I found this nice post on setting up a GWT project on each of those IDEs. You can check  this out. [...]

  7. [...] Creating a GWT application anywhere December 17th, 2009 // In this post anywhere means on any IDE or without any IDE. Working on your first GWT application may stuck up at start up. Top IDE s on the market already there to help you out. Eclipse, Netbeans and IDEA. I found this nice post on setting up a GWT project on each of those IDEs. You can check  this out. [...]

  8. Gift Sam sagt:

    Thanks for your great article!!

  9. wong sagt:

    hi,
    why i do not have my project in NetBeans-Project directory?
    i only got it in the gwt-2.0.4 folder where all my created projects are located.
    And if i am using Maven, is that ok?
    Thanks for your time!

    Regads,
    wong

  10. [...] September 15, 2010 Posted by prasada in java, programming. trackback Follow the post: Create a GWT Application from Scratch to get started with GWT on [...]

  11. Very useful details.

    Thanks a lot!

  12. Doug sagt:

    Great job! Thanks for taking the time to write this up…