Command Bars for Menus and Icons

I began work on Decaf more or less in the middle. It wasn't long before I realized that I'd need a capable programmer's editor as the fundamental part of the IDE. Having written one, I then realized that I'd need an even more basic application framework to host the editor and the other IDE components. That started me on the CommandBar class.

One thing I was sure I wanted were icons on the main menu bar. This departs from tradition, but it lets the expert user switch off the menu bar in favor of a more compact set of icons. In the first graphic, you see the same set of menu choices, first as a menu and next as an icon bar.

My goal in having the icon version is to provide an expert bar for experienced users. That might look like this.

Horizontal expert bar: all main menu choices are reduced to icons

The expert version still has the full main menu. As the graphic shows, the choices are flat until the mouse pointer is above them.

Most commercial icon collections have a tiny 16 by 16 pixel version and a more readable 24 by 24 version. The tiny ones are used in dropdown menus. (Next to the word "Print" the printer icon doesn't need to be very clear.) My icons are 20 by 20 — a size that combines with text and still lets the icons be clear.

(Aside - I'm happy with most of the icons I painted, but I'm not so sure about Edit and I'm definitely searching for a better Insert. I won't be offended if someone suggests hiring a genuine artist.)

As you see in the graphic on the left, the same menu and icon bar can be vertical. Not shown here, if there is no icon, the command bar will use the name instead. If the name is used, it is turned ninety degrees for the vertical bar, so that bar doesn't get unnecessarily wide. You'll see an example in the application framework sample.

The applet here lets you launch your own command bars and watch them in action. (The commands don't do anything in these samples.)

I tossed in the vertical button as a quick suggestion of what you would be getting, and a reminder that Graphics2D can do things like rotating text.

If you fiddle with the command bars you may notice two bugs. First, the content area doesn't correctly repaint — but that's just because there is no content. Second, the tooltips aren't always right. Looks like we're going to have to replace Sun's tooltips with some of our own.

The LaunchCommandBars applet is in the applets package. The CommandBar and supporting classes AppFrame, Command and Commands are in the appFramework package.

The following table shows the icons I've created so far. Many will be familiar — deliberately so. The "docks" series will be new, but see if it doesn't become second nature after you use the application framework for a minute or so.

file.gif	edit.gif	find.gif	insert.gif	macro.gif	view.gif	window.gif	help.gif
	edit-dis.gif	find-dis.gif
new.gif	open.gif	save.gif	saveAs.gif	print.gif
new-dis.gif	open-dis.gif	save-dis.gif	saveAs-dis.gif	print-dis.gif
cut.gif	copy.gif	paste.gif	delete.gif	redo.gif	undo.gif
cut-dis.gif	copy-dis.gif	paste-dis.gif	delete-dis.gif	redo-dis.gif	undo-dis.gif
up.gif	down.gif	left.gif	right.gif	top.gif	bottom.gif	home.gif	end.gif
up-dis.gif	down-dis.gif	left-dis.gif	right-dis.gif	top-dis.gif	bottom-dis.gif	home-dis.gif	end-dis.gif
docks.gif	dock-top.gif	dock-bottom.gif	dock-left.gif	dock-right.gif	docks-h.gif	docks-v.gif
fly-horizontal.gif	fly-vertical.gif	docks-h2v.gif	docks-v2h.gif