Reusable GWT components in java library packages

Using the Google Web Toolkit technology we have a set of widgets for enhance our web client interface. You can find the list of these java ui components with a short description on Gwt’s website: GWT widgets

In this blog I would like to present an easy way of developing new reusable widgets to our gwt web application. The new gwt widget can be packed into a java library package, in this way making it reusable for other web projects too. During my work, I use the Netbeans IDE but you are free to follow the steps in your favorite java editor.

I advice to plan always your web application with a multi-tier architecture, having separate modules for servers and client side programming.

In first step I will show you, how to create GWT widget library and then how to use it in a test web project.

1. Creating a reusable gwt widget library
   In Netbeans Ide just choose File-New Project and Java-Java Class Library. Name your project for example: GwtComponents
   In project properties we must add the google web toolkit sdk library GWT2.5.0, which should contain at least the gwt-user.jar file
   Structure your library project to have 3 folders:

• a directory for the gwt.xml file: gwtcomponents
• a directory for java files, where we place the new gwt component: gwtcomponents.client
• a directory for resource files, like css, image files: gwtcomponents.public

So, we almost are ready, but let's see how to create a new component. First we need an xml file, because this package, will be a gwt reusable library package. Create an xml file and name it, Main.gwt.xml and put it, into your main directory, gwtcomponents. Your xml file should contain the following lines:

<?xml version="1.0" encoding="UTF-8"?>

<module>

<!-- including the gwt module into the library -->

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

<!-- declaring css file for styling our widget components -->

<stylesheet src="mystyle.css"/>

<!-- folder which contains the widget component -->

<source path="client"/>

</module>

To create a gwt widget, just create a java file that extends a gwt existing component. In my example I extend my java file with a HorizontalPanel, and I put on it a gwt label and an edit component. In this way, I will call my new gwt widget, LabeledEdit. Let's see how does it look:

package gwtcomponents.client;

/**

*

* GWT component: LabeledEdit - in constructor gets the argument for the text of the label

*

*/

import com.google.gwt.user.client.ui.HasHorizontalAlignment;

import com.google.gwt.user.client.ui.HasVerticalAlignment;

import com.google.gwt.user.client.ui.HorizontalPanel;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.TextBox;

public class LabeledEdit extends HorizontalPanel {

public TextBox txtField;

public Label lblField;

public LabeledEdit(String label) {

//base horizontal panel settings:

setStyleName("comp1-hpanel");

//the label

lblField = new Label(label);

lblField.setStyleName("comp1-label");

add(lblField);

//the field

txtField = new TextBox();

add(txtField);

}

}

My stylesheet file under the public directory, is the follwing:

/*

LabeledEdit

*/

.comp1-hpanel {

background-color: #C3D9FF;

border: 1px solid blue;

}

.comp1-label {

border: 1px solid black;

background-color: orange;

font-weight: bold;

text-align: center;

}

So, that's it, in the next step, after building and creating the jar file from this project, I will test it in a gwt web project:

2. Using the newly created gwt library
   In my gwt web project I just added the jar file – GwtComponents.jar - created above to my gwt web application. The main gwt.xml file of the web project must contain the following line to use the library in the test project:
   <inherits name="gwtcomponents.Main"/>
        And your main module:

LabeledEdit labelwithedit;

public void onModuleLoad() {

  labelwithedit = new LabeledEdit("Reuseable GWT library: ");

  //you can also redesign your gwt component here, if you want

  //labelwithedit.setStyleName("newstyle_in_this_project");

  RootPanel.get().add(labelwithedit);

}

These are all the necessary steps to do, for creating your own gwt reusable package. You can download my gwt library for free, it is written under Netbeans.

Examples

And also you will find a link there, to test a running web project which use this library.