User Interface Specification: Scrollable Tabs in Window System
Author: Jan Rojcek
$Revision: 1.1 $
Document History: available in
CVS
Abstract: The new window system of NetBeans uses scrollable tabs for
managing open documents. A behavior of scrollable tabs is specified in this
document.
- Table of Contents:
- 1 Introduction
- 2 References
- 3 Use Cases
- 3 Detailed Spec
- 4.1 Basic Characteristics
- 4.2 Layout States
- 4.3 Behavior
1 Introduction
A scrollable tabbed pane (scrollable tabs) is a component used for displaying
document windows within NetBeans windowing system. Appearance and behavior of
document windows' tabs is important part of user experience when working with
NetBeans windowing system.
2 References
Two documents should be read prior to this document:
3 Use Cases
3.1 Activating Tab
When user activates a tab, it gets keyboard focus. The user expects to see the
activated tab, even if it is currently scrolled completely or partially out of
visible tabbed pane part. So, the scrollable tabbed pane should assure that a
tab is made visible if it is being activated.
3.2 Adding Tab
A newly added tab to scrollable tabbed pane is placed at the last position in
the tab row. Usually, the newly added tab is also activated. In such case, the
tabbed pane should make the tab visible.
3.3 Removing Tab
A user can remove a tab from tabbed pane. The srollable tab row should
accommodate that. The tab can be active when removed, but it can also be
non-active.
3.4 Resizing Tabbed Pane
The scrollable tabbed pane can be resized by resizing the main window or by
dragging by vertical splits bounding the document area which contains the
scrollable tabbed pane. The active or selected tab should be kept in visible
area of the tabbed pane when the tabbed pane is resized.
3.5 Scrolling Tabs
The tabs can be scrolled manually by user. This way the user can navigate to
non-visible tabs, and the user can also make selected and/or activated tab
invisible (which is a side effect of making other tabs visible).
4 Detailed Spec
4.1 Basic Characteristics
4.1.1 Row of Tabs
The scrollable tabbed pane contains multiple tabs displayed in a row of tabs.
- row of tabs - horizontally presented list of all tabs
contained in the tabbed pane.
- first tab - the first tab in the row of tabs.
- last tab - the last tab in the row of tabs.
|
Figure 1: Row of Tabs
|
|
4.1.2 View of Tabs
The row of tabs is presented to the user through a view (similar to the
view of scroll pane). This way if the row of tabs doesn't fit into the
tabbed pane width, only a portion of the row is shown to the user through the
view. Scroll buttons are used for moving the row of tabs inside the
view to the left or right.
- view of tabs - a visible portion of row of tabs.
- leftmost fully visible tab - the leftmost visible tab through the
view. It is either the first tab, or a left partially visible tab is left
to it.
- rightmost fully visible tab - the rightmost visible tab through the
view. It is either the last tab, or a right partially visible tab is right
to it.
- left partially visible tab - a left partially visible tab that has only
the right tab portion visible and the left tab portion is hidden.
- right partially visible tab - a right partially visible tab that has
only the left tab portion visible and the right tab portion is hidden.
- fully visible tab - a tab that is fully visible through the
view.
- hidden tab - a completely hidden tab not visible through the
view.
|
Figure 2: View of Tabs
|
|
4.1.3 Beginning and End of Label Rule
Each tab has an icon, label and close button. The beginning of label and end of
label rules are used for laying out row of tabs in the view of tabs.
- label width - width of tab label without icon
- beginning of label - a minimum portion of label visible in the right
partially visible tab. A minimum portion of label hidden in the left
partially visible tab.
- end of label - a minimum portion of label visible in the left partially
visible tab. A minimum portion of label hidden in the right partially
visible tab.
|
Figure 3: Label Width
|
|
4.1.4 Tab Width
A width of fully visible tab as presented to the user is computed from
preferred width of tab and enlarged to fill the view of tabs if needed,
according to the state of partially visible tabs. Partially visible tab width
follows the rules for beginning and end of label.
- preferred tab width - is a width computed from the preferred tab
contents (icon, label, close button).
- fully visible tab width - is a preferred tab width plus proportionally
divided gap (arose from the beginning and end of label rules) between all
fully visible tabs.
- partially visible tab width - is a width following the beginning
and end of label rules.
|
Figure 4: Tab Width
|
|
4.2 Layout States
4.2.1 All Tabs Visible
The tabbed pane shows all tabs in the view if sum of preferred width of all
tabs is less than width of view. The first tab is aligned with the left
edge of the view. In this state, both scroll buttons are disabled.
|
Figure 5: All Tabs Visible
|
|
4.2.2 Tabs Hidden on the Right Side
Tabs are hidden on the right side if the first tab is fully visible and the sum
of preferred width of all tabs is greater than width of view. The right
partially visible tab follows the beginning and end of label rule. The first
tab is aligned with the left edge of view. In this state the left scroll
button is enabled and right scroll button is disabled.
|
Figure 6: Tabs Hidden on the Right Side
|
|
4.2.3 Tabs Hidden on the Left Side
Tabs are hidden on the left side if the last tab is fully visible and the sum
of preferred width of all tabs is greater than width of view. The left
partially visible tab follows the beginning and end of label rule. The last
tab is aligned with the right edge of view. In this state the left scroll
button is disabled and right scroll button is enabled.
|
Figure 7: Tabs Hidden on the Left Side
|
|
4.2.4 Tabs Hidden on Both Sides
Tabs are hidden on the left side if the last tab is fully visible and the sum
of preferred width of all tabs is greater than width of view. The left
partially visible tab follows the beginning and end of label rule. The last
tab is aligned with the right edge of view. In this state both scroll
buttons are enabled.
|
Figure 8: Tabs Hidden on Both Side
|
|
4.3 Behavior
4.3.1 Activating Tab
If user activates a tab or it is activated automatically, following would apply
depending on the current state of tab being activated:
- fully visible tab - no change in tab layout.
- left partially visible tab - it is made the leftmost fully visible
tab.
- right partially visible tab - it is made the rightmost fully visible
tab.
- hidden tab on the left side - it is made the leftmost fully visible
tab.
- hidden tab on the right side - it is made the rightmost fully visible
tab.
4.3.2 Adding Tab
Adding a tab to the scroll tabbed pane doesn't change the tab layout. If newly
added tab is activated, then the layout changes according to above described
rules (Activating Tab).
4.3.3 Removing Tab
Removing a hidden tab doesn't modify the tabs layout. Removing a fully visible
tab or partially visible tab modifies the layout following ways depending on
the current state of removed tab:
- fully visible tab - the left partially visible tab doesn't move. The
layout computes preferred size of all the fully visible tabs, the right
partially hidden tab, all the hidden tabs on the right and tries to show as
much of those tabs as possible (making hidden tabs either fully visible or
right partially visible). The right partially visible tab follows the
beginning and end of label rule after moving the tabs (Figure 6, Figure 8).
If this procedure would make the last tab fully visible than the last tab
would be aligned with the right edge of tabs view (Figure 7), what in turn
can require moving all tabs to the right, making sure that the left
partially visible tab follows the beginning and end of label rule (Figure
7). Moving all the tabs to the right can make the first tab fully visible,
what means that this tab should be aligned with the left edge of the view,
what can require moving the tabs to the left (Figure 5).
- left partially visible tab (not the first tab) - tabs at the right of
removing tab don't move. The tab at the left side (currently hidden) of
removing tab is made the left partially visible tab.
- left partially visible tab (the first tab) - a tab at the right of
removing tab (if there is such) is made the first tab and the tabs row
moves to the left (Figure 5, Figure 6).
4.3.4 Resizing Tabbed Pane
When the whole tabbed pane resizes (e.g. when opening the GUI Editing window
group), the tabbed pane tries to keep the selected tab inside the tabs view
(then it is visible). The row of tabs moves depending on following conditions:
- Shrinking the tabbed pane (the tabs view) keeps the left partial tab or
leftmost visible tab the same. The rightmost visible tab changes if needed.
So the left side of the tabs view shows always the same tabs.
- If shrinking the tabbed pane would make the active tab hidden on the
right side of tabs view, then the tab row moves and the active tab is made
the rightmost fully visible tab.
- If enlarging the tabbed pane would make the last tab fully visible or
it already is fully visible, then the last tab is aligned to the right edge
of tabs view.
- If enlarging the tabbed pane would make the first tab fully visible or
it already is fully visible, then the first tab is aligned to the left edge
of tabs view.
- If enlarging the tabbed pane would all the tabs fully visible or they
already are fully visible, then the first tab is aligned to the left edge
of tabs view.
4.3.5 Scrolling Tabs
The user scrolls tabs without activating a tab by clicking on scroll buttons.
Clicking on the left scroll button makes the left partially visible tab the
leftmost fully visible tab. Clicking the right scroll button makes the right
partially visible tab the rightmost fully visible tab.
