Creating a composite control using GWT 2.0

When you start using GWT on a regular basis you begin to feel the itch to write your own controls. The easiest way to start down that road is by extending the Composite Class. Its very easy to do and practically limitless with possibilities of what you can create. Today I’ll go over the steps to create a composite control and use it in a project.

I used Eclipse 3.6 (Helios) along with the Plug-in for Eclipse using the GWT SDK (2.0.4).

Create a new GWT 2.0 Project:

Clean out the project of the boilerplate code/files and just leave the GWTCompositeExample.java file in place. So basically remove the servlets info from the web.xml file (located in the war/web-inf folder) so it looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

  <!-- Servlets -->

  <!-- Default page to serve -->
  <welcome-file-list>
    <welcome-file>GWTCompositeExample.html</welcome-file>
  </welcome-file-list>

</web-app>

Modify the GWTCompositeExample.html (located in the web-inf folder) file so the only thing between the body tags is this:

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
  <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
    Your web browser must have JavaScript enabled
    in order for this application to display correctly.
  </div>
</noscript>

<div id="mainDiv"></div>

Modify the GWTCompositeExample.css file (located in the web-inf folder) to look like this:

/** Add css rules here for your application. */

.mainLabel {
	background-color: #eee;
}

Remove the files in the com.giantflyingsaucer.server and com.giantflyingsaucer.shared packages as we won’t need those.

Right-click on the src folder and add a new class just like pictured below:

Right-click on the src folder and add a new package called “images”. Make sure to copy some sort of image into that folder as well and add it to the project. Now right-click on the com.giantflyingsaucer.client package and add a new ClientBundle just like pictured below:

Your project structure should look like this:

Time to add code to the MyCompositeControl.java file:

package com.giantflyingsaucer.client;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Image;

public class MyCompositeControl extends Composite implements ClickHandler
{
	private Label label = null;

	public MyCompositeControl()
	{
		VerticalPanel verticalPanel = new VerticalPanel();
		initWidget(verticalPanel);

		final Image img = new Image(Resources.INSTANCE.gwtLogo());
		img.addClickHandler(this);
		this.label = new Label(" Click me or the image ");
		label.addClickHandler(this);

		verticalPanel.add(this.label);
		verticalPanel.add(img);
	}

	@Override
	public void onClick(ClickEvent event)
	{
		if(event.getSource() == label)
			this.label.setText("You clicked the label");
		else
			this.label.setText("You clicked the image");
	}
}

Very simply I created a composite control that holds a VerticalPanel which in turn holds a label and an image. Clicking on either the image or label gives you a different result.

A call is made to initWidget which is required for composite controls.

Go into the GWTCompositeExample.java file and set the code as follows:

package com.giantflyingsaucer.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class GWTCompositeExample implements EntryPoint
{
	public void onModuleLoad()
	{
		HorizontalPanel horizontalPanel = new HorizontalPanel();
		horizontalPanel.setSpacing(5);

		Label label = new Label("I'm not a compposite control but there is one next to me -> ");
		label.addStyleName("mainLabel");

		horizontalPanel.add(label);
		horizontalPanel.add(new MyCompositeControl());
		RootPanel.get("mainDiv").add(horizontalPanel);
	}
}

I add two widgets to the HorizontalPanel: a label and the actual composite control we just built.

Running the project should result in this:

You can grab all the source code here.

Good luck with your GWT projects.