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.

Project Features

About this Project

ui was started in November 2009, is owned by Jiří Kovalský, and has 44 members.
By use of this website, you agree to the NetBeans Policies and Terms of Use (revision 20160708.bf2ac18). © 2014, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
 
 
Close
loading
Please Confirm
Close