Please note: This article was previously posted on my weblog Tommis Swing Musings. I started that blog with high hopes, but due to a lack of time I decided to cancel Tommis Swing Musings. I have deleted that blog.
It has been common practice to implement multi-page views using tabs, as shown in the screenshot on the left hand side.
While the tab methaphor works well for few panels, it may be difficult to find the right one, if there are so many of them that the tabs have to be arranged in more than one row. For this reason the Windows User Experience Interaction Guidelines suggest to layout the tabs vertically if there are more than seven tabs. Here are some implementations of the “vertical tabs” metaphor:
So far we have seen multi-page views in modal dialog boxes. Did you notice that at least two implementations (Visual C++ and Microsoft Security Essentials) seem to resemble a list rather than vertical tabs?
Now let us take a look at non-modal multi-page views.
The control panel in Windows Vista and Windows 7 consists of hierarchically organized pages. As you can see in the screenshot above, a navigation panel on the left hand side of the window displays sub-pages, just like clicking on the name of a tab.
the current page is highlighted by printing its name in bold letters and showing a small bullet in front of it. The following screenshot shows how the names of pages not currently on display look like:
While the page layout hardly resembles the tab metaphor, the underlying concepts are similar. The main area of the view is reserved for the content. A list of links or button-like controls switches between subpages, which are displayed in the main area.
How could multi-page views be implemented in Swing?
I am going to answer that question in a few seconds. But first, please take a look at, well, yet another screenshot:
TKWeek is an application I have written for the Android Platform. It is a small date and calendar tool you can use to compute the number of days between dates or the week number of some date. A few days ago I thought it might be fun porting it to Swing. Android UIs are based upon the concept of so-called Activities, which represent “screens”. Programs usually consist of several Activities. For example, TKWeek has a screen where the users decides what to do. Subsequent Activities perform the requested computation. When the user has finished using an Activity he/she returns the the main menu.
On the desktop, there is no need to hide the menu. It is always visible, which allows the user to quickly jump to different functions or modules. The left-hand side of the above screenshot shows what I call a command menu. Each of its elements represents a page which is displayed when the corresponding menu item is clicked. The command menu resembles non-modal multi-page views in Windows:
The active page is highlighted by printing its name in bold letters and showing a small bullet in front of it. Pages not on display are written in plain letters. A subtle rollover effect shows the menu item under the mouse pointer.
CommandMenu is part of TKSwingComponents, a small component library which I have released under the terms of the GNU Lesser General Public Licence. It is just a
JList wrapped inside a
JScrollPane and a small
ListCellRenderer implementation. As you can see here, the source file consists of only 254 lines of code including comments.
In the next weblog entry, I will show you how to use this component. If you have questions or comments, please leave a comment.