Cool sunglasses.

I ran across a Nimbus Look and Feel bug that affects the GUIs I work on. This is a known issue: see Bug ID 6723524 on the Bug Parade. It is marked Low priority, so I hope it is fixed before the Java 6u10 release. (unlike Bug 4795987, for example, which has been open since 2002 and is also affecting my GUIs).

Here is a standard JTable with Boolean values in the third column. Notice how the standard checkbox renderer fails to properly paint alternate row colors: (this is very subtle on some displays)

In this next picture, I clicked on “Jones” to demonstrate the standard Nimbus focus border:

In this next picture, I clicked on the checkbox. Notice how the border is not painted on the checkbox renderer:

Sample Code

Here is the demonstration program, it requires JDK 1.6u10 to run.

import javax.swing.*;
import static javax.swing.UIManager.*;
import javax.swing.table.DefaultTableModel;
import javax.swing.table.TableModel;
import java.awt.*;

/**
 * Demonstrates bug 6723524, checkboxes do not render properly in JTable.
 *
 * @author Eric M. Burke
 */
public class NimbusDemo extends JFrame {
    public static void main(String... args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                setNimbusLaf();
                new NimbusDemo().setVisible(true);
            }
        });
    }

    private static void setNimbusLaf() {
        try {
            for (LookAndFeelInfo lafInfo : getInstalledLookAndFeels()) {
                if ("Nimbus".equals(lafInfo.getName())) {
                    setLookAndFeel(lafInfo.getClassName());
                    return;
                }
            }
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
        throw new RuntimeException("Unable to find Nimbus LAF.");
    }

    public NimbusDemo() {
        super("Bug 6723524");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        Object[] columnNames = {
                "First Name", "Last Name", "Married"
        };
        Object[][] data = {
                {"Harry", "Smith", true},
                {"Sally", "Jones", false},
                {"Bob", "Clark", true},
                {"Eric", "Burke", true}
        };

        TableModel tm = new DefaultTableModel(data, columnNames) {
            public Class getColumnClass(int columnIndex) {
                return (columnIndex == 2) ? Boolean.class : String.class;
            }

            public boolean isCellEditable(int row, int column) {
                return false;
            }
        };
        add(new JScrollPane(new JTable(tm)), BorderLayout.CENTER);
        pack();
    }
}

Peldi had some questions from my earlier post, so I figured I’d answer them here.

Arbitrary Lines

Mockups supports a Vertical Rule and a Horizontal Rule. These are two separate “line” components, each is locked to its axis. I was thinking it might be simpler to have just one line component, and let the user drag, drop, and resize the line to any position, length, or angle. This would make it more like a line from a 2D drawing tool, like this:

Shapes

Mockups has a rectangle shape, and you can resize and move it. I would suggest adding a few more drawing-tool-like features:

• In addition to resizing the rectangle, let us rotate it to any angle.
• As you mention, add an ellipse tool. Like the rectangle, let us drag and drop, resize, and rotate.

Honestly, if we had lines, rectangles, and ellipsis, each with resize and rotate capability, we could draw just about anything we wanted to. Hell, I could use Balsamiq Mockups to create my comics.

Arrows

Peldi mentioned an arrow feature in the works. One kind of arrow might look something like this:

I suppose this kind of arrow would just be a predefined polygon that I could move, resize, and rotate. If implemented properly, Mockups could include an entire palette of polygons, each would resize and rotate the same way. In theory you could even define your own custom polygons, given the ability to draw arbitrary lines and group things together.

The second kind of arrow would be much simpler: just let us specify the shape of the start and/or endpoint of any line.

Storyboarding

I agree, make this a standalone tool.

One More Idea

Take a look at the source code for the Napkin Look and Feel. This has a neat package called sketchers that draws “jittery” lines and makes polygons look like they are hand-drawn with some randomness. You might get some good ideas from that work.

It’s all about design.

I just voted for Bug 4648386: “Simplify deployment and versioning by embedding JAR files within each other”. This bug has been open since 2002 and has 145 votes.

One workaround is to unzip all of your JARs and then re-bundle into a single JAR. While this is easy enough, I would recommend using Jar Jar Links whenever you re-package classes into custom JARs.

A few years back, we had a case where a 3rd party library had embedded JDOM beta 8 into their JAR, but they did not change the package names. When we tried updating our applications to JDOM 1.0, we ran into conflicts because the old JDOM was embedded into one of the JAR files we needed. This is exactly the kind of problem that Jar Jar Links can eliminate.

A few days ago, I drafted a blog entry where I imagined a GUI sketching and mockup tool. I was not aware of any such tool, so I came up with a handful of requirements:

• Be incredibly easy to use
• Allow rapid 2D GUI sketching
• Support “storyboarding” to show transitions and behavior as you move from screen-to-screen

Realism Sucks

Most tools I’ve seen are not geared towards “sketching”. Instead, they let you layout GUI components that look like real GUI components. For example, check out the Pencil screen shots. Other than showing nonsense text, these layouts look too much like real GUI layouts. This is troublesome because extremely realistic mockups don’t leave enough “holes” for the imagination to fill in. (see my mention of Bill Buxton’s podcast near the end of this article)

By showing people something that looks finished, you are not inviting feedback and creative suggestions. Instead you send the message that you’ve already worked out the details and this is what you plan to deliver.

Napkin LAF

The Napkin Look and Feel is a Java Look and Feel that makes your GUIs look like hand-drawn sketches:

While Napkin gives you the right look, it is not a sketching tool. While you certainly can use something like NetBeans to create GUI mockups, I feel that is too technical and limiting for many people, particularly in very early stages of design. IDE GUI builders are designed for programmers to create GUIs, not for super fast brainstorming.

Enter Balsamiq Mockups

Before I posted my blog entry, I wrote some thoughts on Twitter, and quickly received this intriguing response:

@burke_eric Hey maybe you’d be interested in my little lo-fi wireframing app? http://www.balsamiq.com/products/mockups

I checked it out, and Balsamiq Mockups is almost exactly like the tool I had imagined. Here is one of their sample mockups:

First Impressions

I tried out Balsamiq Mockups and found that it is indeed very easy to use. I created this mockup in a few minutes:

Everything works via drag-and-drop, and you can easily resize and edit components in place. Mockups saves its data in a simple XML format, making it easy to share drawings with other programmers. You can also export to PNG as shown above, and it is easy to copy/paste from one drawing to another.

I could rattle off the features, but you’d be better off just checking out the feature tour on their site. This is a very straightforward tool that works exactly as advertised.

• A single user license is $79
• Written in Flash, so is portable to a variety of platforms
• Available as a desktop version (Adobe Air), or as a plugin for Confluence, Twiki, JIRA

My Suggestions

The main thing I did not see was the ability to draw simple lines and arbitrary shapes. Balsamiq gives you an extensive palette of standard GUI components, but I found myself wanting to add arbitrary lines, rectangles, and other simple shapes to my mockups. Mockups does give you horizontal and vertical lines; it is too bad they don’t offer an arbitrary line that I can drag around to any angle and location.

The other feature I found lacking was a storyboarding feature. This was one of the things I originally imagined before I knew about Balsamiq Mockups, and I only have a vague idea of what it would look like. I got the idea after listening to a podcast by Bill Buxton called “Sketching and Experience Design“, on iTunes University. That podcast was also where I learned about using sketches to leave “holes” for the imagination to fill in, as I mentioned earlier.

I’m not exactly sure how this would look and feel, but I do have this general feeling that discrete, static screen mockups are not enough to convey information. I think it is important to capture and show behavior in addition to the static screen layouts.

The story board has to be drop dead simple, allowing artists the ability to drag and drop, annotate with arrows lines and callouts, and rearrange at will.

Paper Prototyping

In many respects, pencil and paper (or a whiteboard) are superior to Balsamiq Mockups. See the Wikipedia Paper Prototyping article for some ideas. In particular, during the very early brainstorming phase, paper and pencil are probably the fastest way to crank out new ideas.

Continuing the Design Process

I think Balsamiq Mockups fits in nicely as “step 2″ in the design process. The screens created in Balsamiq Mockups are easy to share with remote team members, but are not so realistic that they stifle the imagination.

After going through a series of mockups, then perhaps you can move on to more detailed prototypes using a GUI builder like NetBeans along with the Napkin Look and Feel. Again, refer to the Buxton podcast to see how design evolves from sketches to increasingly detailed drawings.

Closing Thoughts

Balsamiq Mockups is a great tool, allowing you to rapidly create GUI mockups that do not look overly realistic. It is basically a domain-specific drawing tool, and it does the job very well. Balsamiq Mockups makes it very easy to collaborate with other developers by utilizing a simple XML file format.

Although I proposed a few ideas (simple lines and polygons, plus storyboarding), tools like Balsamiq Mockups are powerful because they are so simple. I am not actually convinced that adding full storyboarding is necessary; perhaps this is best left to another similarly simple tool.

At first I thought it was just my iPod Touch with the new firmware. Then I heard about the iPhone 3G having similar problems.

This morning I was prompted to update Java 6 to the latest version. I said yes, and was eventually greeted with this:

• I guess we now call it “the Java” (I suspect this is a bug and the text is truncated)
• The Yahoo! Toolbar is selected by default.

I find it insulting when applications bundle unrelated crapware like browser toolbars, particularly when the installation selects the extra junk by default. It is far too easy to quickly hit “Next”, overlooking the toolbar selection.

Furthermore, this nonsense adds unwanted clutter to the GUI. Client Java needs all the help it can get, in particular software upgrades need to be elegant and streamlined. Bundling in a browser toolbar cheapens the whole experience because it starts looking just like so many other crapware applications that plague the PC industry.

Bags and bags of change, apparently.

Here’s my contribution to Cedric’s coding challenge.