Depth-First: Tag swing

Because Mistakes Happen: Giving ChemPhoto Some Poka-yoke

Rich Apodaca — Wed, 17 Sep 2008 16:00:00 +0000

One of the difficulties in creating applications that can write to a user's filesystem is dealing with the real possibility that a simple, honest, garden-variety mistake can result in consequences ranging from the mildly frustrating to the disastrous.

As a specific example, consider Omar, who has just created 15,000 SVG images from an SD file with ChemPhoto (the first chemical structure imaging application). Continuing on, he opens a second SD file to create images from it. Forgetting to change the output directory for his images, Omar presses the "Create" button, only to find that the new images are overwriting the old images. By the time he presses "Cancel", the damage has been done. Omar has to go back to the first SD file and create all 15,000 SVG images again.

In his book Designing the Obvious, Robert Hoekman, Jr. describes user interface elements designed to prevent the user from making mistakes. He calls them Poka-yoke devices (POH-kay YOH-kay, from the Japanese for "mistake-proofing").

It's possible to spare Omar from his self-inflicted inconvenience (or a far more serious kind of mistake) by building some Poka-yoke devices into ChemPhoto.

A single dialog box controls the generation of images in ChemPhoto. The image below shows that it requires a name for the collection. Notice that without this, the name field is highlighted, a message appears at the bottom, and the "Create" button is deactivated.

If Omar chooses a non-existing output directory, he'll similarly get a warning and be prevented from continuing:

If Omar chooses a directory and collection name combination that will result in a directory (or archive file) being overwritten, he gets a warning and is blocked from going forward:

When Omar has provided all of the necessary information and there's no chance he can overwrite any of his existing files, ChemPhoto clears the error messages, removes the error highlighting, and activates the "Create" button (he's also told exactly what ChemPhoto will be writing to his hard drive):

This functionality could have been implemented by letting Omar fill in all the fields, with error or not. If some conflict (such a directory overwrite) were detected, Omar could get a warning dialog, and be told to go back to the form to fix it. But why put him to all that trouble when designing the right interface from the start can prevent it?

Catching errors as they occur and providing feedback in real-time gives the best of both worlds in a form that can be filled out quickly and safely.

ChemPhoto is approaching its first alpha release. If you're interested in trying it, please drop me a line.

Imaging Chemical Structures with ChemPhoto: WYSIWYG Drawing Settings

Rich Apodaca — Thu, 11 Sep 2008 15:44:00 +0000

Depending on the audience and medium, chemical structures can be presented in a variety of styles. Chemical structure imaging applications should make it easy to visually and/or numerically arrive at the best appearance. ChemPhoto makes it easy to get exactly the right look for your structures through what-you-see-is-what-you-get (WYSIWYG) drawing settings.

The screenshots below illustrate the three main categories of drawing settings in ChemPhoto: Atoms; Bonds; and Images. As each setting is manipulated, the entire view is updated in real-time to reflect the changes. A set of changes can be rolled back by pressing the "Cancel" button, making it easy to undo unwanted modifications.

Turquoise Theme with Atoms Tab

Console Theme with Bonds Tab

Blueprint Theme with Images Tab

To try an alpha version of ChemPhoto for yourself, drop me a line.

ChemPhoto Screenshots: Appearance of Structures and Browsing Large Collections

Rich Apodaca — Wed, 10 Sep 2008 14:55:00 +0000

Chemical structure imaging software solves the problem of how to easily create large numbers of readable chemical structures in a variety of formats automatically. ChemPhoto was recently introduced as what appears to be the first chemical structure imaging application. With development of the ChemPhoto user interface now in full-swing, it's possible to show some screenshots.

Below are two screenshots in which around 25,000 structures from PubChem have been loaded.

If you're interested in trying an alpha version ChemPhoto, feel free to drop me a line.

Filthy Rich Clients

Rich Apodaca — Tue, 29 Jan 2008 13:52:00 +0000

If you wind the clock back enough years, the world of graphical user interfaces was ruled by standardized look-and-feel specifications. This approach was taken in an effort to centralize all of the GUI coding in applications, make it easy to document the application (everyone knows what a slider does, therefore it doesn't need to be described), and work around the relatively poor graphics performance of desktop computers.

But the last decade's collision between the computer industry and the consumer has led to a huge increase in the emphasis on aesthetics in user interfaces: for everything from brand awareness to increasing the comprehensibility of sophisticated systems, to eye-catching coolness to draw the customer in, to just plain "Wow!" ... Aesthetics are in.

-James Gosling, Forward to Filthy Rich Clients

The "destandardization" of the GUI has been underway for several years. From Web applications like Picnik to Flash video players to Apple's iTunes application, users are getting increasingly used to the idea that not every program needs to look like Microsoft Office, and that some of them never should have in the first place.

Now, it's possible to infuse Java Swing applications with the look and feel of this new breed of GUI. The new book Filthy Rich Clients shows how. Covering topics ranging from threading to animation to compositing, this well-written book is a goldmine for anyone wanting to break out of a GUI rut.

The use of reflections, animation, fading and the like in serious applications may seem frivolous. But used in the proper context, these effects can add a great deal to usability and appeal.

Today's frivolous use of memory and CPU cycles has a strange way of becoming next year's must-have feature.

Swing Sightings: LigandScout

Rich Apodaca — Thu, 24 Jan 2008 08:23:00 +0000

Source: LigandScout

Swing Sightings: Chenomx NMR Suite

Rich Apodaca — Wed, 16 Jan 2008 09:43:00 +0000

From: Chenomx NMR Suite

Building a Molecule Preview with Firefly: The Joy of Swing

Rich Apodaca — Wed, 18 Jul 2007 06:52:00 +0000

Previous articles have discussed Firefly, the codename for a new 2D structure editor for the Web. Although it can be deployed as a self-contained applet on Web pages, Firefly is composed of modules that are readily re-used. By taking advantage of this design and Java's native UI toolkit Swing, new UI elements can be built with relatively little effort. This article outlines one such use - the creation of a file dialog that contains a molecule preview.

Many image processing applications such as Photoshop or GIMP provide an image preview that appears in file browser dialogs. Wouldn't it be nice if applications that process molecular structure files came with a similar feature? The screenshot below shows a file chooser with an embedded molecule preview based of Firefly's Painter component:

When a new molfile is highlighted, a new preview is automatically generated:

The molecule preview is capable of all of the customizations available in Firefly including background, bond, and atom colors, borders, and atom label fonts. No matter how large or small the molecule, and regardless of its starting coordinates, it will always be exactly scaled to fit the available space and precisely centered.

This dialog was rapidly implemented using the accessory capability provided by Swing's JFileChooser:

JFileChooser chooser = new JFileChooser();
PreviewAccessory accessory = new PreviewAccessory(chooser);

accessory.setPreferredSize(new Dimension(150, 150));

chooser.setAccessory(accessory);
chooser.addPropertyChangeListener(accessory);

// ...

Defining a JComponent implmenting the PropertyChangeListener interface is all that's needed to get a working molecule preview:

class PreviewAccessory extends DefaultPainter implements PropertyChangeListener
{
  // implementation
}

Swing has come a long way since the dark days of JDK 1.2. What started out as the dog-slow ugly duckling of user interface toolkits has developed into one of the best platforms for building desktop applications out there. Advanced tools such as the WYSIWYG interface builder Matisse and the polished components offered by JIDE make Swing an even more attractive option. The example described here is just one instance of how Swing's well-conceived design simplifies the job of building rich user interfaces.