Creating GWT Project in Eclipse

Getting Ready:

Before following this quick tutorial ensure that you have done the followings:

1.       Install the JDK. You can download it from http://www.oracle.com/technetwork/java/javase/downloads/index.html
2.       Install the Eclipse IDE. It can be downloaded from http://www.eclipse.org/downloads/
3.       Install the GWT SDK which is available for download at http://code.google.com/webtoolkit/download.html
4.       Install the Google Plugin for Eclipse as instructed at http://code.google.com/eclipse/docs/download.html

How to do it:

Now follow the steps below to create the GWT Project

1.       Start Eclipse IDE
2.       Go to File | New | Other…
3.       Select Web Application Project under Google


4.       Press Next
5.       Give Project Name HelloGWT; give a Package Name (in this example it is com.blogspot.gwtguide.eclipse.hello); select Use Google Web Toolkit



6.       If the GWT SDK is not configured, click on Configure SDKs… ; add the web toolkit and press OK to close the dialog


7.       Press Finish and the project is created.




Run the project and see output

Read More

Setting up Ext GWT in NetBeans GWT Project

Introduction: Ext GWT is a Java UI component library for building rich Internet applications with Google Web Toolkit.

Features of Ext GWT include:

• High performance, customizable UI widgets

• Full theming support with standard CSS

• Well designed, consistent and fully documented source code

• Native GWT solution with no external JavaScript or 3rd party libraries

• Full remote procedure support using GWT RPC, JSON, and XML

• Support for Java 1.5 features, including generics, enums, and varargs

• Commercial and Open Source licenses available

Download: Ext GWT SDK is available to download at http://www.extjs.com/products/gwt/download.php

In this article we will learn how to setup the Ext GWT in NetBeans GWT project. If you have not created the GWT project in NetBeans yet, follow the post Creating GWT Project in NetBeans.

Follow the steps below:

1. Extract the downloaded EXT GWT SDK, for example gxt-2.1.1-gwt2.zip
2. Open the GWT-Guide project in NetBeans.
3. Create a folder named lib in the GWT-Guide project. To do this, go to File | New File... | Other in Categories | Folder in File Types; press Next; give a name lib and press Finish.

4. Copy the gxt.jar file from gxt-2.1.1 folder and paste it in the lib folder created in the previous step. To do so go to Files tab | select the lib folder | right click on it | Paste.

5. Add the gxt.jar file in the project library. To do so go to Projects tab | select Libraries | right click on it | Add Jar/Folder... | select the gxt.jar file in the lib folder and Open.

6. In the same way copy the resources folder from gxt-2.1.1 folder and paste it in web folder in the project.

Now the project directory structure is as below:

7. Modify the GWT module. Include the text <inherits name="com.extjs.gxt.ui.GXT"/> under the <module/> in Main.gwt.xml file.

Complete code for the GWT module is as below:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-  web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">

<module>
      <inherits name="com.google.gwt.user.User"/>

      <inherits name="com.extjs.gxt.ui.GXT"/>
      <entry-point class="com.blogspot.gwtguide.client.MainEntryPoint"/>
      <!-- modify the entry point class package and name according to your entry point class -->

</module>

8. Modify the welcomeGWT.html file. Add <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" /> under the <head> section.

The complete HTML code is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta name='gwt:module' content='com.packtpub.gwt=com.packtpub.gwt'>
        <title>gwt
        <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />
    </head>
    <body>
        <script type="text/javascript"  src="com.packtpub.gwt/com.packtpub.gwt.nocache.js">
    </body>
</html>

Read More

Creating GWT Project in NetBeans

If the GWT4NB plugin is already installed just directly follow the steps below, otherwise read GWT4NB : Plugin for Creating GWT Applications in NetBeans first.

1. Go to File | New Project...
2. Select Java Web from Categories and Web Application from Projects; press Next.

3.Give a Project Name, Browse the Project Location; press Next.

4. Select the Server, Java EE Version and write the Context Path; press Next.

5. Select Google Web Toolkit from Frameworks, Browse GWT Installation Folder, write name for GWT Module; press Finish.

GWT Project is now created.

Read More