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());
	}
}

usability grades: checking the flight status on an airline

I’ve tried checking the flight status from a mobile device for a number of different airlines this year.  Both flights I was taking to check they are leaving on time and for flights arriving with friends/family.  I then tried a few others for the purposes of this blog entry.  Care to guess which of these airlines inspired the blog entry?

Remember the goal is simple:
Check when a flight is departing or arriving given two airport codes for the current date.

Alaska Airlines – alaskaair.com
Steps:

  1. Click flight status
  2. Defaults to today, but the only option is flight number.  Click “lookup” to get the flight number
  3. Enter the two city codes.  One of mine was SAN (San Diego).
  4. Alaska comes back with a list of cities beginning with “san”.  The first is San Antonio. Um no. I meant San Diego which has the airport code I typed in.
  5. Then I have to pick month/day/year from drop downs. No shortcut for today?  No inference of the year?
  6. After all that work, Alaska shows Shows me the scheduled times of the flight.  I now have to remember the number and retype it on the flight status page

Grade: C.  This was a tremendous amount of work to get the answer. They did have a mobile view and each page loaded fast though some were 24KB – quite large for a mobile view.

American Airlines – aa.com
Steps:

  1. Wow there’s a lot of choices here.  I think the one I need is “Gates and times/wifi”.
  2. Enter codes with option to look them up.  Assumes we are talking about today.
  3. Lists departure and arrival times

Grade: B.  The double take at all the options wasn’t obvious, but possible to figure out.  Everyone else calls it “flight status” American.  Why can’t you?

Continental – continental.com
Steps:

  1. Click flight status
  2. Click “don’t know flight number”
  3. Enter two cities, assumes today
  4. Shows list of all scheduled flights.
  5. Click the one you want and shows departure arrival times.

Grade: A. Lots of options and easy to use

Delta – delta.com
Steps:

  1. Click flight status and updates which is conveniently the first option
  2. Enter codes with option to look them up and select the radio button for cities instead of flight number.   Assumes we are talking about today.
  3. Lists departure and arrival times

Grade: A-.  I shouldn’t have to select the radio button.  Once I type in an airport code, it’s apparent that is the option I want.  Presenting me with the screen with an error that I didn’t enter a flight number is less friendly than it could be.

JetBlue – jetblue.com
Steps:

  1. Click Flight Status
  2. Select departure and arrival cities from a drop down menu.  I suppose this is easier than expecting people to know/lookup the code, but it took me a couple tries to select the correct entry from the drop down.  Defaults to today.
  3. Lists departure and arrival times

Grade: B+. I have to subtract for the drop down.  It assumes extra and unnecessary dexterity.

Southwest – southwest.com
Steps:

  1. Click flight status
  2. Choose cities from the same style pulldowns I didn’t like on JetBlue
  3. Lists departure and arrival times

Grade: B+. Same reason as JetBlue.

United – united.com
Steps:

  1. Click flight status
  2. Assumes talking about today.  Enter codes with option to look them up.
  3. Lists departure and arrival times

Grade: A. No unnecessary obstacles.

    Conclusion
    Quite the range in usability here.  I was happy to see that Alaska was by far the worst.  They prompted this blog post after all.

    how toastmasters helped me present

    If you’ve been reading this blog, you know that Scott and I both gave a presentation at the Server Side Java Symposium.  (see summaries).  What you may not know is that I am a member of Toastmasters and it helped me present.  Here’s how.

    Writing the presentation

    My presentation was low on words.  Not as low as I would have liked, but I was comfortable with it. (I haven’t gotten my speaker feedback yet; will be interesting to see if it says to use more words.)  I was able to present without notes, use humor and tell a story.

    Toastmasters also let me practice my costume to make sure I was comfortable with the antlers.

    Preparation at TSSJS

    A mentor from Toastmasters reminded me to look for a few things in advance of my presentation.  One advantage to being the very last talk is that it gives you plenty of time to scope things out.  Things to check for included:

    • the size of the room (about 150 seats)
    • how to advance slides(keyboard)
    • how big is the stage (not very and having a giant banana talking up part of it doesn’t help)
    • are questions at the end or throughout (mixture)

    While speaking

    I expected that I would be able to make good eye contact, use my hands and use the space from practicing with Toastmasters.  Well, two out of three isn’t bad.  I didn’t have much space to move without being hidden by the podium/banana on one side and falling off the stage on the other.

    Back at Toastmasters, I had given a speech called “The Case of the Distracted Audience” where I assigned people annoying things to do so I could practice how I would react.  I’m glad I did because Mark Spritzler raised his hand during my presentation and asked a question that was basically a private joke.  His point was that I should relax.  If I hadn’t practiced distractions, that would have thrown me.

    Finally, I got to take advantage of another opportunity from being last.  One of the keynote speakers commented that there are only two IDEs, Eclipse and IntelliJ IDEA.  Awkward given the NetBeans proponents who also spoke.  I happened to have a slide that shows Eclipse and IDEA as the IDEs used by CodeRanch.  This was a great opportunity to break the tension and make a joke by referencing what happened earlier.  Shared conference culture.