New design of Multiview replacing old TAB logic
Design Specification

Author: Dusan Pavlica
Version: 3.0 - final design
Last Update: 6/4/2004

 

Contents:

  1. Introduction
  2. Requirements
  3. Design specification
    • Old TAB design
    • Main concept of New design
    • Design of TollBar
    • Design of Toggle Buttons
    • Resizing of ToolBar and Toggles
    • Impact on Menues
    • Keyboard navigation
    • All places with new Multiview
    • Other enhancements
  4. Open issues
  5. Some features are missing in the promo D

 

1. Introduction

We have reimplemented new Window System in the Netbeans and it's necessary to adjust all components to its appearance.
This document describes two concrete parts, which depend on that WS change:

  1. It defines design and behavior for Multiview instead old TAB logic, which is used at many places in the Netbeans.
  2. It specifies how to display different views on one source file by these Multiview as well (Nested TABs is more familiar name for this feature).

Important note: These two improvements are described from "Consistency point of view", not implementation point of view. Thus they are together in one document. But it was consulted with developers and seems to be implementable with united API.

2. Requirements

  • Remove strange behavior of TAB logic - Rows of TAB exchange dynamically when user choose different line of TABs (dancing TABs is common name).
  • Replace TAB by something with different look - New Window System has TAB logic too and user should distinguish between WS TAB and inner content easily. Borders of TAB Pane doesn't look nice and brings visual clutter. Selection color by TAB (on Metal L&F) isn't logical as well.
  • New design of Multiview should have good discoverability. We provided usability study and users have had really big problem to switch into form editor or find this possibility to switch.
  • Big importance is consistency of the new design throughout all IDE, not only at separate places.
  • Design should work with more then 2 category (e.g. Source Code View versus Form View) but our recommended limit is at most 6 views.


3. Design specification

Old TAB design

Bad design of old state we could demonstrate by old version of Component Palette (figure 1).
Components inside Component Palette are divided into 6 categories by default (Swing, Swing (Other), AWT, Beans, Layouts, Borders) and each of that category is presented visually like a TAB in TABPane. User could switch among these categories by clicking on TABs. There is a usability problem with more then 1 TAB's row because of their exchange during user's switching (dancing TABs are visible in settings of Windows platform). Another problem we see in visual representation of TABs inside new Windowing System and we would like to distinguish Window's TABs and components situated inside them. TabPane brings visual clutter with to many borders around TAB pane too. And that's why we have suggested the new design described below.

 palette1.png (8344 bytes)

figure 1 - old TAB design inside the Component Palette

 

 

Main concept of New design

We discussed more possible solutions for Multiview (e.g. Combobox, Toggle buttons, Context menu list) and we have suggested solution with toggle buttons, which covers all requirements easily. And what's more, this solution could be used at many places with satisfying consistency.

Main idea of the new design is following:

  • TABs are changed for toggle buttons situated into ToolBar of window.
  • When user switches among toggle buttons, then appropriate content is displayed below this ToolBar and right side of ToolBar can be changed too.
  • There are more types of content which will appear below ToolBar:
    • Types of editors - Source Editor, Form Editor, Properties Editor
    • Special components - To Do contains TreeTable, VCS contains Table, Property Sheet contains kind of TreeTable, Component Palette contains list of toggle buttons

 

palette-classic1.png (8282 bytes)

figure 2 -
Component Palette in Windows Classic L&F. Two rows of Categories and two columns of Components are visible.

palette-XP1.png (11946 bytes)

figure 3 -
Component Palette in Windows XP L&F. Three rows of Categories and one column of Components are visible.

 

 

Design of ToolBar

  • Left part of ToolBar contains toggle buttons. They are aligned to left side, when only one row of components exists (all places except Component Palette).
  • There is visible separator between left and right side of theToolBar if right side exists.
  • Right part of ToolBar can contain other components (e.g. ToolBar of To Do list has Icons, Labels, ProgressBar, Button) and they depend on activated toggle switcher.
  • Height of ToolBar depends on its content and two cases could exist:
    • ToolBar includes other components such a icons, labels, ProgressBar. Then height of grey background is 22 pixels (e.g. To Do list).
    • ToolBar includes only toggle buttons with text information - Height of grey background of ToolBar is 20 pixels (e.g. Component Palette).

 

Design of Toggle Buttons

Multiview can exist as a normal toggle buttons or with attached down-arrow symbol:

  • Standard toggle buttons (with reduced insets) situated in ToolBar - They Look like labels, when are inactive. Selected toggle buttons is in pressed state.
  • Toggle buttons with attached down-arrow symbol - Toggle and arrow works as a pair of buttons with following logic:
    • When toggle isn't selected, then it looks like label with arrow by right side (fig. 4).
    • When user move over toggle button or arrow, then both elements appear in mouseover state (fig. 5).
    • When user click on toggle button, then both elements appear in pressed state (fig. 6).
    • When user click on arrow button, then both elements appear in pressed state and popup menu with appropriate content will be invoked (fig. 7).

 

todo-new2.png (11213 bytes)

figure 4 - Toggle button with arrow isn't selected

todo-new3.png (11252 bytes)

figure 5 - Mouse-over effect by Toggle button with arrow

todo-new4.png (11238 bytes)

figure 6 - Mouse-pressed effect by Toggle button with arrow

todo-new6.png (11564 bytes)

figure 7 - Mouse-pressed effect with popup menu by Toggle button with arrow

 

Resizing of ToolBar and Toggles

There should exist setting in API for Static ToolBar with one row of toggle buttons inside ToolBar (e.g. ToolBar in Property Sheet, To Do list) versus Dynamic ToolBar with more rows of toggle buttons (e.g. Component Palette).
When user changes width of Toolbar, then toggle buttons and other components should adapt on that new size:

A. When components have enough space on one row, they should be aligned to the left and each has own width, which depends on length of toggle button name.

B. When components haven't enough space on one row, then TollBar has following behavior:

  • Static ToolBar with one row of toggle buttons inside ToolBar is set - Then logic of resizing is following:
    • Only buttons with icons are situated on the right side of the ToolBar - Hidden icons will be listed in popup menu, which could be invoked by double-arrow icon.
    • Only Toggle buttons are at left part of  the ToolBar - Toggle Buttons will be resized, Label will be cut and "..." appears at the end of labels (it's standard swing behavior by resizing of buttons).
    • Toggle buttons and other components are in ToolBar - The same behavior like in previous case and components at the right side of the ToolBar will be hidden.
  • Dynamic ToolBar with more rows of toggle buttons is set - Then more rows of toggle buttons should be displayed  with following logic:
  • Width of toggle buttonsa should be the same. Minimal width is taken from toggle button with longest label visible inside and maximal width is the same like the width of internal size of ToolBar.
  • Show the same number of categories on each row if it's possible.
  • Let's keep similar number of toggle buttons in each row if isn't possible to have the same number.
  • When any empty space appears on any row, then width of this space has the same width like an other toggle buttons.

 

Impact on Menues

New design of the Multiview with toggle buttons has impact on quick list button (with arrow icon) situated at right side of header of documents.
User could invoke list of all opened documents in editor (and all views of these documents) by this button.
Main change will be following:

  • Only file names and icons associated with them will be visible in this list. It means no more views will be shown there.

There is another change in View main menu:

  • User should see a list of actual Editors in the special submenu as a radiobutton menu items
  • This submenu is situated under Editors menu item in the View menu (you can find new look of View menu here: http://ui.netbeans.org/docs/hi/promoD/editorMenus.html)
  • Selected radio button is visible by active editor's view
  • When only one view is in that list, then no radio button is there.
  • When no Editor is opened, then Editors menu item is disabled.

Example (Source and Desig toggle buttons are opened in editor):

VIEW MENU
==========
Editors     >   +=============+
Code Folds  >   |(o) Source   | 
-------------   |    Design   |
                +=============+
.
.
-------------
Toolbars    >

 

Keyboard navigation

  • User can jump to the local ToolBar of focused window by pressing CTRL+F10 combination (similar to F10 for focusing main menu or Shift+F10 for local Contextual menu).
  • Active Toggle Button will be selected primarily.
  • User can navigate among components inside ToolBar by Left arrow and Right arrow and change of editor will appear immediatelly.
  • ECS key or focusing of something else out off TollBar will leave focus from the ToolBar.


All places with new Multiview

Design mentioned above will exist at many places in the Netbeans:

  • Component Palette
  • Property Sheet
  • VCS Outputs
  • To Do list
  • Views in Editor
  • ...

Each from these places could brink additional behavior which are defined in next part of document.

 

Views in Editor

Toggle buttons will be used for switching among possible views on source file (more familiar name for this functionality is nested TABS).
Ideal state of Toggle buttons without ComboBox, which will be "moved" into Outline View in some of next promotions is visible below (figure 8 and figure 11).

Technique to find out count of toggle buttons and their labels is the following:

  1. Title of opened TAB situated in header of Editor is derived from node of file in the Projects window
  2. Icon in TAB depends on selected toggle button (View)
  3. Labels on Toggle buttons are derived from nodes under node of opened file like this:
    • Java file node with name xyz.java has assigned one toggle button:
      • class xyz > Source toggle button
    • Form file node with name xyz.java has assigned these names for toggle buttons:
      • class xyz > Source toggle button
      • form xyz > Design toggle button
    • Properties file node with name qwe.properties has assigned these names for toggle buttons:
      • qwe.properties > Table toggle button
      • default language > Default language toggle button
      • ja_JP - Japanese (Japan) > Japanese (Japan) toggle button
  4. When any node of potentional editors are created suddenly in other places then in the Editor's area (e.g. Projects window) then list of toggle buttons in the Editor's toolbar have to be updated.
  5. There can exist TABs in the Editor without Toolbar (e.g. Welcome TAB). These TABs haven't given toggle buttons

 

Clonable Editors

All aditors should be clonable and then more Toolbars with toggle buttons could exist at a time.
In a case, when some editors couldn't be clonable, then their toggle button can be active only in one view at a time and has to be disabled in the others.

 

Synchronization of Editors

All editors have to be synchronized continually or in time of switching to another editor.


Closing Editor's content

When user closes some non saved document in the Editor, then only one common Save dialog should appear for all opened editors (e.g. Source, Design).

 

 

toggles-editor-code6.png (49814 bytes)

figure 8 - New design of Multiview inside Source editor. Ideal state, when Combo Box is moved into Outline window.

 

toggles-editor-design6.png (17117 bytes)

figure 9 - New design of Multiview inside ToolBar of Form editor

 

toggle-editor-detail1.png (7722 bytes)

figure 10 - New design of Multiview inside ToolBar of Source editor. Special separator is visible  between area with toggle buttons and rest of ToolBar.

 

toggles-editor-moreicons2.png (8870 bytes)

figure 11 - Button of arrows will appear at the right side of ToolBar, when it isn't long enough. Then user could invoke popup menu with list of hidden actions.

 

Other Enhancements

  • To have History toggle button - History of opened file could be visible in view under ToolBar
  • To have Browser toggle button - View on hierarchy and connections among classes could be visible in view under ToolBar
  • Idea about another enhancement with minimization of Toolbars I took from Mozzila. It's about intelligent dragger on the left side of Toolbar. It has these two states:
    • expanded - Small drag texture in a vertical position is on the left side and ToolBar is visible.
    • collapsed - Small drag texture in a horizontal position is on the left side and ToolBar isn't visible.


4. Open issues

  • New design should be checked with all supported L&Fs...Some improvement will be necessary maybe.
  • We need to check others team for possible view in Editors.
  •  

 

 

5. Some features are missing in the promo D

  • This document was intended as the spec for Promo-D first, but then development realized, that they can't make it all for D.
    So, the content of spec is actual still and the following features should be implemented in next releases:
    • Multiview for all possible Editor's Views (e.g. Bundle property file or VCS stuff)
    • Consistent look of all places with switching by toggle buttons situated in the local Toolbars

     

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