“example goes here”

Posted on by
2

A light post for a Friday:
Now that the FIRST robotics season is over, I think back to some documentation that says “example goes here.” Or our personal favorite to laugh at: a very serious description that says to carefully follow all the settings in the picture. Immediately followed by “picture goes here”.

I thought of this because I came across something in the PMD plugin:

 
      <documentation>
         [Enter extension point usage example here.]
      </documentation>
... 
    <documentation>
         [Enter API information here.]
      </documentation>

I think this meant by the Eclipse developers to show what a plugin looks like. To me, it’s a nice reminder to proofread what you develop.

GWT: Bounded TextField in GXT

Posted on by
Reply
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

Posted on by
Reply

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.