Floating Windows UI Specification

Author: Jindrich Dinga
Date: July 2006
Version: Final

$Id: floating_windows.html,v 1.18 2007/01/20 10:58:33 josefpavlicek Exp $ (see full CVS history)

Content:

  1. Introduction
  2. UI Specification
    1. Undocking a Window
    2. Docking a Window
    3. Behavior of Floating Window
    4. Appearance of Floating Window
    5. Appearance of Floating Editor
    6. Keyboard Navigation Between Floating Windows/Editors
    7. Editor "Pop-Up" Button
    8. "Documents" Dialog
    9. Opening a Document In Editor
    10. Menu Bar and Tool Bar
  3. Others

1. Introduction

Result of a NB survey from JavaONE05: "More than half of our users are using two monitors". Because of this result and many requirements posted to Issuezilla by NetBeans users, it was decided to improve "multi monitor" support in NetBeans IDE.

Use cases and scenarios are here.

2. UI Specification

2.1. Undocking a Window

A window can be undocked by dragging the window's title bar outside the NetBeans IDE, by selecting the "Undock Window" menu item from the contextual menu invoked on the window's title bar, by selecting "Undock Window" menu item from Window menu or by using the "Alt+Shift+D" shortcut. The following images show position of "Undock Window" menu item and its shortcut in the contextual menu of a window/editor and in Window menu.


figure 1 - position of "Undock Window" menu item in contextual menu invoked on title bar


figure 2 - position of "Undock Window" menu item in contextual menu invoked on editor tab


figure 3
- position of "Undock Window" menu item in Window menu

2.2. Docking a Window

When a window is undocked, the "Undock Window" menu item is changed to "Dock Window" menu item. To dock a floating window back to the previous position, the user must select "Dock Window" menu item from contextual menu, select same action from Window menu, use "Alt+Shift+D" shortcut or simply drag the window back to the IDE.


figure 4
- position of "Dock Window" menu item in contextual menu invoked on title bar


figure 5 - position of "Dock Window" menu item in contextual menu invoked on editor tab


figure 6
- position of "Dock Window" menu item in Window menu

2.3. Behavior of Floating Window

The following flash movie shows drop feedback during dragging a window outside the IDE.


flash 1
- drop feedback

As it is mentioned in paragraph 2.1., the user can undock a window by using the mouse or keyboard. When the user invokes "Undock Window" action from the context menu, the undocked window appears few pixels away from the position the window had in docked state; the window's height/width is same as the editor's height/width when the window is undocked for the first time (see flash 2 for more details).

The user can change the window's size by dragging its edge, this change is persistent (it means, in case the undocked window is closed or docked somewhere in the IDE, after next opening or undocking the window from the IDE, the floating window remembers its last sizes). Another change that is persistent is position of the floating window.


flash 2 - keyboard navigation

When a window does not make sense to be displayed, that window is automatically hidden by the IDE. Same behavior is valid also for floating windows.

Floating windows can be grouped together; during dragging a floating window over another floating window drop feedback appears (see flash 3). Same is valid for floating windows and floating editors - they can be grouped together as well.


flash 3 - grouping of floating windows

In case a floating window is placed on the second monitor and then that monitor is disconnected, the floating window appears on the first monitor.

Note: Same behavior is also valid for floating editor.

2.4. Appearance of Floating Window

A floating window looks like a common window which is placed into the system window - JDialog. Dragging the system window title bar moves the floating window to the new position. On the other hand, dragging the NetBeans title bar allows the floating window to be docked to another floating window or to be moved to the new position on the screen.

In case at least two floating windows are docked together, the NetBeans title bar of selected window contains the "Close" button. In case there is only one floating window inside the JDialog, the NetBeans title bar does not contain any icon.

figure 7 - appearance of floating window on Win XP

2.5. Appearance of Floating Editor

The floating editor is JFrame - it gives all necessary actions the user needs such as maximizing, minimizing and closing the floating editor. In addition to that, the user can easily and quickly jump to the floating editor by using "Alt+Tab" shortcut on Windows platform (this shortcut may vary on different platforms). The editor tabs can be grouped together so thus they can create one floating editor. The appearance of the floating editor is following: a) title bar of floating editor contains "Name of Selected Tab - Editor" (figure 8), b) there is no menu bar as well as toolbar and c) floating editor has editor status line (figure 9).


figure 8 - appearance of floating editor on Win XP

The following picture shows appearance of "new" editor status line (redesign of the status line is planned for next release, the UI specification is available here). The information area contains messages related to the selected tab of the floating editor, the position area shows the caret row position and the mode area tells the user the mode s/he currently works in.


figure 9 - appearance of editor status line on Win XP

Note: In case "global status line" is not implemented in next release, old status line will be used.

Another thing that should be mentioned here is a cooperation with "Maximize and Full Screen Mode" feature that is planned for next release (the UI specification is available here). "Full Screen Mode" is not available for the floating editor; floating editor can be just maximized (action is available on the system title bar). On the other hand, the "Maximize Mode" is available for the floating tab, because there might be a need for maximizing the editor tab when another window is docked into the floating editor.

2.6. Keyboard Navigation Between Floating Windows/Editors

For switching between floating windows, the user can use the window's shortcut; for switching between floating editors, the user can use "Alt+Tab" (on Windows, Linux and Solaris) or "Cmd+~" (on Mac OS) shortcut.

2.7. Editor "Pop-Up" Button

Clicking the pop-up button that is situated above the editor shows list of opened documents that are available only in the selected editor (see figure 10).


figure 10 - "pop-up" button in editor

2.8. "Documents" Dialog

This dialog, which shows list of documents that are opened in all editors, can be invoked by using "Shift+F4" shortcut or from menu Window | Documents... (see figure 11). This dialog is opened over the selected editor; double click on a document, which is opened in different editor than is currently selected, or pressing the "Switch to Document" button gives focus to the appropriate editor with selected document.


figure 11 - appearance of "Documents" dialog

2.9. Opening a Document In Editor

All documents are opened in editor that is selected. It means, e.g.

  • User works within a class that is opened in a floating editor. In the floating editor, the user presses "Ctrl" and clicks on an interface that is implemented by the class, then the interface is opened in the floating editor.
  • Or the user works within a class that is opened in a floating editor, then s/he switches to the Inheritance view in Navigator and wants to see a method that the class inherits. After double click on the method, the class that contains the method is opened in the floating editor.
  • Or the user selected a floating editor, then s/he uses "Ctrl+N" shortcut to create new file. The new file is created in the floating editor.
  • Or the user selected a floating editor, then s/he uses "Alt+F" shortcut to open the "File" menu and presses "N" key to create new file. The new file is created in the floating editor.
  • Etc.

Note: In case the user is trying to open a document that is already opened, this document is selected in the appropriate editor.

2.10. Menu Bar and Tool Bar

While working within a floating window/editor, all "Alt+ "shortcuts as well as the "tool bar" buttons work globally like in MDI mode.

3. Others

Because of improving the "multi monitor" support, it is recommended to remove the "SDI/MDI mode" from Options.

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