Creating cool user interfaces in Chisimba using GWT, EXTJS and Netbeans-Part 1.

Tweet

1249 days ago

Requirements:

1. JDK 1.6 or later
    
2. Netbeans 6.8 or later
   
3. GWT SDK 2.0 or later
   
4. Ext GWT 2.1 or later
   
5. Ant 1.7 or later is also necessary to run command line arguments.

Getting started

1. Download and unzip the Google Web Toolkit SDK. This contains the core libraries, compiler, and development server that you need to write web applications. On Windows, extract the files from the compressed folder gwt-2.0.0.zip. On Mac or Linux, you can unpack the package with a command like
   
   unzip gwt-2.0.0.zip
    
2. Download the latest Ext GWT release here. Unzip the distro anywhere on your file system, you will need to point to it later in the setup.
3. Download and install Netbeans IDE

Create GWT-EXT Library for Netbeans

1. Run your Netbeans IDE. Go to Tools → Libraries.
   
   

2. Click on New Library button on bottom left of the dialog to create a new library.
   
   

3. In the Library Name field , type Ext-GWT. Leave the Library Type to default. Click OK
   
   

4. The new library will be listed in the library list.
    

5. The new library is still selected, click Add JAR/Folder button on the right hand side of the screen. This should bring the filebroswer. Navigate to the directory you extracted gwt-2.0.0 select and add the following jars:
   
   gwt-api-checker.jar gwt-dev.jar gwt-servlet.jar gwt-soyc-vis.jar gwt-user.jar
   
   

6. Click on the Add JAR/Folder button again, but this time navigate to the folder you extracted gxt-2.1, and select and add gxt.jar file. The Ext-GWT library should now have the required jar files listed.

Creating your project

In order to use the GWT engine, we will first a create a project using the command line tools that are shipped with GWT. GWT ships with a command line utility called webAppCreator that automatically generates all the files you'll need in order to start a GWT project. We will use these files to create a Netbeans project.

Generate GWT project using command line tools

Using your command line terminal, change directories to the root of gwt-2.0.0 folder. Create a new application called MyWebApp with the command:

If you are using a Mac, you may need to make the script executable. In that case, use the following commands:

chmod u+x webAppCreator

./webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

The webAppCreator script will generate a number of files in MyWebApp/, including some basic "Hello, world" functionality in the class MyWebApp/src/com/mycompany/mywebapp/client/MyWebApp.java. The script also generates an Ant build script MyWebApp/build.xml.

Create Netbeans project

1. In Netbeans IDE, go to File → New Project
2. In Categories, select Java, in Projects, select Java Project with Existing Sources. Click Next.
3. In Project Name, type MyWebApp, and select the project folder of your choice. Click Next.
   
4. Here you add sources to the project. Click Add Folder button, and navigate to the MyWebApp folder you created in earlier section, and select the src folder. Click OK. The sources should be added now. The click Finish to create the project. The project will have errors. Now its time to add the library we created in earlier section.
5. Right click on your MyWebApp project, choose Properties. In the properties window, in Categories, select Libraries. Then on right hand of the window, click on Add Library. Look for Ext-GWT, and add it using Add Library button. Click OK. The errors in your project should disappear now

Running your application

In order to run the project, you need to set the Main class.

1. Right click on you MyWebApp project, select Properties. In the properties window, select Run. Add the following line to the Main Class field

   com.google.gwt.dev.DevMode

2. In the Arguments field, add the following

   -startupUrl MyWebApp.html com.mycompany.mywebapp.MyWebApp

3. In VM options field, add -Xmx256M

4. Your project is ready now. Click Run
   

    

5. Click on Launch Default Brower button to see your skeleton project. Note, since this might be your first time hitting the development mode server, it will prompt you to install the Google Web Toolkit Developer Plugin. Follow the instructions in the browser to install the plugin. Once the Google Web Toolkit Developer Plugin is installed in your browser, navigate to the URL again and the starter application will load in development mode.

    

In the next article, we will expand on our application to use Ext GWT components and see how you can integrate this into Chisimba.

Tags for this post
chisimba gwt ext gwt netabeans

Trackback URL  View trackbacks

Comments 7