Chapter 6. Tabbed Panes
In this chapter:
- Dynamically changeable tabbed pane
- Customized JTabbedPane and TabbedPaneUI delegate
JTabbedPane is simply a stack of components in selectable layers. Each layer can contain one component which is normally a container. Tab extensions are used to move a given layer to the front of the tabbed pane veiw. These tab extensions are similar to labels in that they can have assigned text, an icon (as well as a disabled icon), background and foreground colors, and a tooltip.
To add a component to a tabbed pane we use one of its overloaded add() methods. This creates a new selectable tab and reorganizes the other tab extensions so the new one will fit (if necessary). We can also use the addTab() and insertTab() methods to do create new selectable layers. The remove() method takes a component as a parameter and removes the tab associated with that component, if any.
Tab extensions can reside to the north, south, east, or west of the tabbed pane's content. This can be specified using its setTabPlacement() method and passing one of the corresponding SwingConstants fields as parameter.
UI Guideline : Vertical or Horizontal Tabs?
When is it best to choose between vertical or horizontal tabs?
There are three possible rules of thumb to help make the decision whether to place tabs horizontally or vertically. Firstly, consider the nature of the data to be displayed, is vertical or horizontal space at a premium within the available display space? If for example you have a list with a single column but 200 entries then clearly vertical space is at a premium. If you have a table with only 10 entries but 15 columns then horizontal space is at a premium. Simply place the tabs where space is cheaper to obtain. In the first example with the long list, place the tabs vertically. When you place the tabs vertically, they use horizontal space which is available. In the second exmaple, place the tabs horizontally. When you place the tabs horizontally, you use vertical space which is available while horizontal space is fully taken by the table columns.
Another possibility is the number and size of the tabs. If you need to display perhaps 12 tabs, each with a long label, then it is unlikely that these will fit across the screen horizontally. In this case you are more likely to fit them by placing them vertically. Using space in these ways when introducing a tabbed pane, should minimise the introduction of scroll panes and maximise ease of use. Finally, consider the layout and mouse movements required for operating the software. If for example, your application uses a toolbar, then it may make sense to align the tabs close to the toolbar, thus minimising mouse movements between the toolbar buttons and the tabs. If you have a horizontal toolbar across the top of the screen, then choose a horizontal set of tabs across the top (North).
We can get/set the selected tab index at any given time using its getSelectedIndex() and setSelectedIndex() methods respecitively. We can get/set the component associated with the selected tab similarly using the getSelectedComponent() and setSelectedComponent() methods.
One or more ChangeListeners can be added to a JTabbedPane, which get registered with its model (an instance of DefaultSingleSelectionModel by default -- see chapter 12 for more about SingleSelectionModel and DefaultSingleSelectionModel). Whenever a new tab is selected the model will send out ChangeEvents to all registered ChangeListeners. The stateChanged() method of each listener is invoked, and in this way we can capture and perform any desired actions when the user selects any tab. JTabbedPane also fires PropertyChangeEvents whenever its model or tab placement properties change state.
UI Guideline : Transaction Boundaries and Tabbed Panes
If your using a tabbed pane within a dialog then the transaction boundary is normally clear. It will be an OK or Cancel Button on the dialog. In this case it is obvious that the OK and Cancel buttons would lie outside the tabbed pane and in the dialog itself. This is an important point. Place action buttons which terminate a transaction outside the tabbed panes. If for example you had a tabbed pane which contained a Save and Cancel button within the first tab, is it clear that the Save and Cancel work across all tabs or only on the first. Actually, its ambiguous! To clearly define the transaction, define the buttons outside the tabbed pane then it should be clear to the User that any changes made to any tab will either be accepted/saved when OK/Save is pressed or discarded when Cancel is pressed. The action buttons apply across the complete set of tabs.