GWT: Bounded TextField in GXT

This article provides a solution for creating a TextField with bounded user input in Sencha GXT (aka Ext GWT), for use in GWT applications.

The Problem

Recently, I was looking for a way to limit the amount of text a user could enter on an HTML form within a GXT application – for example, limiting a zip code input field to five characters. I wanted something that functions identically to the maxlength attribute found in HTML <input type=”text”> fields. While GXT does offer a maxlength attribute within a TextField object, it does not function as one might expect. Instead of limiting the number of characters the user could enter, it interacts with the validation process and displays a validation error (such as highlighting the TextField in red) after the fact if a user entered too many characters.

The Solution

I discovered a post on the Sencha support forum that shows how to create a subclass of TextField with the expected functionality, ie, to limit the number of characters the user can type to be the maxlength attribute. Since I believe such a class is desirable throughout my application, I generalized the original anonymous inner class solution to be a regular Java class.

Simply add the following class to your application and replace all your instances of TextField with BoundedTextField and the maxlength attribute will function as a text limiter. I hope Sencha will eventually include support for this form of maxlength functionality within the API. Thanks to Sven at Sencha for providing the original solution.

package net.selikoff.gxt.ui.widget;

import com.extjs.gxt.ui.client.widget.form.TextField;
import com.google.gwt.user.client.Element;

/**
 * Class works like TextField class but Max Length specifies the maximum
 * amount user can type, instead of being used as limit for validation.
 * 
 * @author Scott Selikoff
 */
public class BoundedTextField<D> extends TextField<D> {
	@Override
	public void setMaxLength(int m) {
		super.setMaxLength(m);
		if (rendered) {
			getInputEl().setElementAttribute("maxLength", m);
		}
	}

	@Override
	protected void onRender(Element target, int index) {
		super.onRender(target, index);
		getInputEl().setElementAttribute("maxLength", getMaxLength());
	}
}

Google Releases GWT Designer

Last week, Google released the GWT 2.2 update. While this was a relatively minor update, at least compared to previous version updates, there was one new feature mentioned in the release notes that was much needed: GWT Designer.

UiBinder’s Missing Cousin

The GWT 2.0 version saw the release of the UiBinder framework, a technique for creating GWT components in HTML, analogous to building applications in MXML over ActionScript in Flash/Flex. For example, the following UiBinder snippet creates a GWT panel and list box in an HTML-based template:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
       <g:HTMLPanel>
              Hello, <g:ListBox ui:field='listBox' visibleItemCount='1'/>.
       </g:HTMLPanel>
</ui:UiBinder>

What was severely lacking in the GWT 2.0, though, was the ability to edit this layout using a visual tool. There was really no compelling reason to switch to UiBinder, since it required learning a new syntax with limited benefits over writing it directly in Java.

Enter GWT Designer, now included in the Eclipse GWT 2.2 plugin, which allows you to create UiBinder components directly using a visual editor! Below is a sample screen-shot from a UiBinder class created in GWT Designer:

GWT Designer

But wait, there’s more!

GWT Designer is actually part of the WindowBuilder Pro family of graphical editors that includes SWT Designer and Swing Designer. Google offers the option of downloading the full stand-alone application, which includes support for 3rd party GWT add-ons such as GWT-Ext, GXT and SmartGWT.

With the GWT 2.2 release, Google also added support for HTML5, although it is marked as experimental/beta for the time being. To some surprise, they also deprecated support for Java 1.5 so if you have not upgraded to Java 1.6 yet, you will now get warnings in your application. Overall, the GWT 2.2 release helps to round out the GWT feature set leading to more powerful and easier to use tools.

I'm Speaking at TheServerSide Java Symposium Reminder: Jeanne and I are both presenting at TheServerSide Java Symposium next month. My lecture is entitled “GWT Roundup: An Overview of Google’s Web Toolkit and Hybrid Integration” and Jeanne’s presentation is called “Throw Away All The Rules. Now What Process Do You Follow?“. The conference is being held in Las Vegas and it’s not too late to register to attend!