Sliding windows (Auto Hide) in the new WS
Design Specification

Author: Dusan Pavlica , Talley Mulligan
Version: 5.0 - final design
Last Update: 01/20/2005

 

Contents:

  1. Introduction
  2. Requirements
  3. Use Cases
  4. Design specification
  5. Open issues
  6. Rest of features for next releases

 

1. Introduction

Sliding Windows (commonly known as Auto Hide) is a special feature of the new Window System. Many users have requested this feature and we agree that it could be useful. This document contains specifications about its design and behavior. We will adopt the same name for the Sliding Windows feature as other IDEs (Idea or .NET), namely Auto Hide.

 

2. Requirements

  • Auto hidden windows should take as little space as possible on the left, right and bottom edges of the IDE.
  • There should exist another way to invoke the Auto Hidden state, than from icon in titlebar (i.e.: to change Docked window state to Auto Hide window state).
  • Auto hidden windows should be able to be invoked programmatically.
  • Should be consistent with the concept of window groups in the new WS.
  • There should be D&D support for Auto Hidden Windows (nice to have feature).
  • Consideration of other products based on Netbeans (propose design as the best compromise).

 

3. Use Cases

This chapter mentions some typical use cases, which we should address with our design. The main goal is to successfully cover scenarios where the user is primarily working in the Editor area, but she needs to access other windows occasionally (eg. windows Project , Output, Component Palette).

  • User would like to quickly check a window's content:
    • Ability to enable special minimized mode, where window isn't visible all of the time.
    • Ability of user to reveal hidden window quickly (via mouse move).
    • Ability of window to auto hide itself without any special action (only mouse off move).
    • Typical examples are To Do, Search or VCS windows, within which time consuming actions occur, but the user would like to check if actions are finished or not.
  • User would like to interact occasionally with the content of a window (not so often):
    • Ability to enable special minimized mode, where window isn't visible all of the time.
    • Ability of user to reveal hidden window quickly (via mouse move) and interact with its content.
    • Ability of window to remain in its revealed state while user interacts with its content (to auto hide, mouse click action is required).
    • Ability of window to auto hide itself after any user action (e.g.: when user changes her focus to another component of the IDE via mouse click, etc.).
  • User would like to use the keyboard to manipulate Auto hidden windows (as opposed to the mouse):
    • Ability to invoke or close Docked windows from the keyboard
    • Ability to change the state of windows to the Auto Hide mode from the keyboard
    • Ability to reveal Auto hidden window from the keyboard
    • Ability to change the state of Auto hidden windows to the Docked mode from the keyboard

 

4. Design specification


Basic concept

Each window (except the Editor area) has the following states:

  • Closed state - Window isn't visible in IDE and can be invoked from main Window menu
                            (possible enhancement: from contextual menu situated at edges of IDE too).
  • Docked  state - Window is visible in work area of IDE somewhere around Editor area.
  • Auto Hide mode (new) - Windows in this mode have three possible states (Minimized or Slided, which is related to types of invocation).


The Auto Hide feature has the following logic and behavior:

  • When there are no Window in Auto Hide mode, no left, right or bottom edgebars are visible.
  • User can change Windows from the Docked state to Auto Hide mode 3 ways:
    • By clicking the Auto Hide icon situated on the right side of the window's titlebar.
    • From the Contextual menu of the window's titlebar.
    • Drag&Dropp of the window to any visible edgebars.
  • After invoking Auto Hide mode the window will slide (Minimized state) to the left, right or bottom edgebar (top edge below main toolbar isn't supported) depending on the means
  • Edgebar will appear immediately upon invocation, when no window was in Auto Hide mode for a given edge.
  • Edges contain toolbar with buttons. Each button has dragger icon and tile of window in Auto Hide state.
  • User can make window (in Auto Hide-Minimized state) visible by following actions: mouse over, mouse click, keyboard shortcut.
  • Then window will slide into work area of IDE (Slided state) along all edge.
  • Sliding can also be invoked programmatically too but window will not obtain a focus.
  • User can change Auto Hide mode to Docked state of window like this:
    • By Auto Hide icon situated in titlebar of Slided window.
    • From Contextual menu of button in edge or from Contextual menu over titlebar of Slided window.
    • By Drag&Drop into the work area of the IDE.
  • Then window will be resized and moved smoothly to the position in Docked state.


Additional behavior:

  • Window remembers its Auto Hide state or Docked state before it's being closed. When it is invoked next time, then it will be opened to that saved state.
  • Window remembers its position in Docked state before it's being changed to the Auto Hide mode. Then could be docked back on the same place.
  • Each window has defined its default position and state (Docked or Auto Hide) for their first invocation.

 

 autohide30.png (52637 bytes)

figure 1 - figure 2 - Edges with Minimized windows (visible as buttons)

 

 

Usage of Auto Hide Window

Window in Auto Hide mode is hidden at edge of IDE (left, right and down) as a button. User can slide it and minimize it by more different actions:

  • When user moves by mouse over button, then Minimized window will slide from side BUT will not obtain a focus (figure 2).
    When user moves out from that window and linked button it will hide window once again into Minimized state.
  • When user clicks by mouse on button, then Minimized window will slide from side AND will obtain a focus (figure 3).
    Window will be hidden once again after focusing of any other part of IDE, clicking by mouse out of window and linked button or by pressing ECS.
  • When user uses keyboard shortcut for concrete Minimized window (e.g. Ctrl+6 for To Do window), then it will slide from side AND will obtain a focus (figure 3).
    It will be hidden once again after focusing of any other part of IDE, clicking by mouse out of window and linked button or by pressing ECS.

There should exist a way, how to invoke any window in Auto Hide mode programmatically:

  1. Only button (without sliding into work area) will be invoked programatically in assigned edge.
  2. Button will appear in edge and window will slide into work area of IDE and will obtain a focus. Then this Slided window could be hidden once again after focusing of any other part of IDE or by pressing ESC. Then focus will return back at the previous place. Output window should work in this mode.

 

ahw-slide3.png (23215 bytes)

 ahw-slide4.png (23719 bytes)

figure 2 - Edges with Minimized windows (buttons) and Projects
window  is slided into IDE after mouse over (but isn't focused)
      

figure 3 - Edges with Minimized windows (buttons) and Projects
window  is slided into IDE after mouse click (and is focused)

 

 

Size and position of Window in Auto Hide Mode

When user changes Docked state of window to the Auto Hide mode, then window will slide to left, right or down edge of the IDE. Window will figure it out from its position (in Docked state) in regard of the Editor area. We defined following simple rules:

  • Do I occupy left side in regard of editor > Minimize window to the left edge
  • Do I occupy right area in regard of editor > Minimize window to the right edge
  • Do I occupy bottom or top area in regard of editor > Minimize window to the down edge

Size of window in Auto Hide-Slided state depends on previous size in Docked state (+10pixels of overlap at side close to the center of the IDE) and can be resized by mouse dragging. New size should be persistent.

 

 

How to dock Auto hidden window

There are following possibilities how to dock window in Auto Hide mode back:

  • User can click on dockicon1.png (355 bytes) Dock button situated in the titlebar of Slided window.
  • User can uncheck Auto Hide menu item in Contextual menu above titlebar of Slided window (see figure 10).
  • User can uncheck Auto Hide menu item in Contextual menu above button of Minimized window situated in the edge (see figure 11).

Then window will be docked back into IDE on its previous position. When position of window was removed meanwhile or changed from left to right (right to left) edge by D&D, then new dock position will be generated along that edge, where is window Minimized.

 

 

Movement of windows in Auto Hide mode - prototype

There are more different movements of windows:

  • Move from Docked state to the edges - Should be clear, that window has moved to the certain edge
  • Slide from edges into work area of IDE - Movement of window should be quick and sequential. User should see resizing of window.
  • Slide to the edges back from center work area of IDE - Reverse movement then previous.
  • Move from Auto Hide state to the Docked state

Sliding effects are faster and real in the following prototype and we recommend this one for implementation. There is Projects window with active Auto Hide icon.

 

All mentioned movements are more visible in the next version on the prototype, because sliding effect were slowed-down a bit.

 

 

Design of Auto Hide icon and Dock icon

Icons in titlebar of window are typical buttons with icon inside.
Then their mouse-over and mouse-pressed appearance for Windows 2000 L&F is following:

spinnew1.png (1899 bytes) spinnew2.png (1883 bytes)
figure 4 - Auto Hide left icon in Dock Mode figure 5 - Auto Hide right icon in Dock Mode
spinnew3.png (1879 bytes) spinnew4.png (1857 bytes)
figure 6 - Auto Hide down icon in Dock Mode figure 7 - Auto Hide left icon and Close icon
                in Dock Mode with mouse over effect
spinnew5.png (1831 bytes) spinnew6.png (1931 bytes)
figure 8 - Auto Hide left icon and Close icon
               in Dock Mode with mouse pressed effect
      figure 9 - Dock icon in Auto Hide mode

 

Pin icons for Metal L&F:

allstates-grey1.png (2157 bytes)    allstates-grey2.png (2114 bytes)

allstates-blue1.png (2192 bytes)    allstates-blue2.png (2157 bytes)

Here are all Metal icons for all possible states: zipfileicon.png (672 bytes)

 

Pin icons on Windows XP L&F:

nahled.png (4184 bytes)

 

Look for other platforms (L&F)

Appearance of toggle buttons in the edgebars on Windows XP L&F is the following (normal, mouse over and pressed states):

XPfinal-edgebars-normal2b.png (32466 bytes)

XPfinal-edgebars-over2b.png (34681 bytes)

XPfinal-edgebars-pressed2b.png (32855 bytes)

 

 

Contextual Menu

Auto Hide checkbox menu item will be added to the current Contextual menu, which will appear:

  • Above titlebar of window
  • Above buttons situated in edges of the IDE.

Right shortcuts for these Auto Hide action: Ctrl+Backspace


contextual2.png (2295 bytes) 
figure 10 - Auto Hide checkbox menu item in the Dock state

 

contextual3.png (2160 bytes)

figure 11 - Auto Hide checkbox menu item in the Auto Hide-Minimized state

 

Maximalization of window in Auto Hide mode

Visual indication

This functionality should work similar to maximalization of docked windows. We need better visual indication of max mode, so there will exist Restore icon in the toolbar of window, when window is maximized.

Permanency of this mode

  • When any window in sliding mode is maximized, all windows situated in edgebars can share its maximized area by clicking on them or hovering over them. This behavior should by checked by real usecases or on usability study.
  • When the sliding window is closed/hidden/docked back, then maximized mode is cancelled.

 

Keyboard navigation

  • Each window has defined keyboard shortcut and it's visible in Window menu (e.g. Ctrl+6 for To Do window).
  • When window is in Dock state, then window will be focused after usage of concrete shortcut.
  • When window is in Auto Hide state, then behavior of window will be the same like after mouse click on button situated in the edge.

 

Drag&Drop ability

We should support D&D of windows into/from edges (Auto Hide state) from/into work area of IDE (Docked state) and D&D of minimized windows among edges like this:

  • Docked windows can be dragged to an edges - Then it will change state of window from Docked state to the Auto Hide state automatically
  • Buttons (or titlebar of Slided window) can be dragged:
    • On different place inside the same edgebar
    • Out to Another edge, where they will become Auto Hide windows there
    • Somewhere in the work area of the IDE, with the same feedback we give now.
  • User can drag toggle button or titlebar of window.
  • Drag&Drop indication of active place should be changed a bit against old implementation for windows system.
  • When user drops window on new position, then window will stay in minimized state.
  • Dynamical behavior and visual feedback at mentioned areas depends on initial state of edgebar and is the following:
    • When target edgebar is visible before D&D of window:
      • All D&D areas are moved into inner part of IDE for amount of pixels, which is the same as the width of edgebar.
    • When target edgebar isn't visible before D&D of window:
      • Edgebar appears when user points mouse over edges and out of a border of the IDE (20 pixels outside, see Flash demo below)

 

figure 12 - Drag&Drop dynamical behavior and active areas

 

 

Other possible Enhancements

  • New Auto Hide icon, because it wasn't intuitive for some users on usability study
  • New name for Auto Hiding... Minimize Window
  • Minimize Window (Ctrl+BackSpace) menu item name in Window menu
  • Indication of Maximalized mode ...new icon
  •  
  • Window could be opened directly in any edge from contextual menu over this edge. Contextual menu contains the same list of windows like Window menu in main menu.
  • User can change edge for any Minimized window from Contextual menu above minimized window or titlebar of window. This menu should contains all three edges (left, right, down) but current is disabled.
  • Others?... 

 

 

5. Open issues

  • Output window should exist in Auto Hide mode by default. Maybe some other windows too? We discussed the Component Palette window already.
  • Gray (inactive) icon buttons on non-selected tabs
  • Improvment of Sliding effects
  • MAC OS L&F should be polished

 

6. List of features that should be implemented in promo E

There are these big features:

  • Drag and drop operations of sliding windows
  • Allow resizing of slided window
  • Maximalization of windows in Autohide Mode

Project Features

About this Project

ui was started in November 2009, is owned by Jiří Kovalský, and has 43 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