SplitPane User Experience Documentation

Author: Dusan Pavlica

1. Introduction

This document is the user experience specification for the JavaFX 2.0 SplitPane UI control.

2. Interaction Design

Split pane is a control used for separating multiple panes with ability to change sizes of their areas. Email client showing list of emails on the top separated form email content below is typical example of split pane on desktop platform. The following is an overview of the split pane look.

Figure 1 Splitpane overview

Split pane has two resizable areas and there is a narrow splitter between them. User can resize these areas by dragging the splitter or he can double click it.

Splitter

There are the following features of the splitter:

• The splitter has to be visually distinguishable from the areas it is dividing.
• There should be some kind of handle visualized so user would know that he can drag/click the splitter. Proper mouse cursor has to be displayed while mouse cursor position is hovering the splitter.
• The splitter can be locked and then there is no handle for dragging visible so user can't move it and resize the surrounding areas.
• Size of areas that the splitter is dividing can be divided by percentage or by amount of pixels.

Drag and Double click behavior

• While user is dragging the splitter then a content in the surrounding areas should adjust itself to a new sizes of areas automatically.
• We can support double click the splitter functionality. It will hide or show one of the areas (minimize/normal action similar to email client on MAC OSX). We can also display a different handle icon on the splitter so user would understand that he can double click it or that one of areas is in the minimized/normal position (see image below).

Figure 2: Bottom area is minimized and there is different handle icon on the splitter

The application developers must be able to specify MIN and MAX size of the pane, or whether the pane is "resizable with the parent". Please note that it is recommended to have at least one pane in the application to be "resizable with the parent", otherwise an unexpected behavior can occur.

3. Keyboard Support

The following table describes actions that are performed when a vertical divider of a SplitPane is focused and users press the following keys:

The following table describes actions that are performed when a horizontal divider of a SplitPane is focused and users press the following keys: