Option Menu Dialog UI Specifications

Author: Josef Pavlicek

$Revision: 1.31 $
$Date: 2007/08/23 13:01:04 $

$Id: index.html,v 1.31 2007/08/23 13:01:04 josefpavlicek Exp $ (see full CVS history)

 

Content:

• Summary
• Option Menu Settings UI redesign
  • New design of Option dialogue
  • General Panel design
  • Miscellaneous redesign
  • Panels Spacing - NOTE
• List of new designed panels
  • Ant
  • Diff settings
• Editor settings
• File Recognition
• GUI Builder options redesign
• Profiler
• Ruby
• ToDo Tasks
• SVG Settings
• Versioning
• Visual Web
• List of Miscellaneous settings
• Will be removed
  • Core settings
  • Annotation Types settings
  • Indentation Engines settings
  • Look and Feel settings
  • Diff and Merge Types settings
  • Web Browsers
  • Database Explorer
  • PDF viewer settings
  • Http Server settings
  • J2EE Servers settings
  • Internationalization

Summary:

This page is guidepost for UI Specifications which describes the new Option Dialogs placed in the NetBeans Tools | Options.

 

Option Menu Settings UI redesign

 

New design of Option dialogue

It's almost the standard to have main option categories placed on the top of Option dialogue.

Figure 1: Redesign of current Option dialogue

Figure 1: describes redesign of the Option dialogue. The general option layer is placed on the top of the Option menu dialogue.

NOTICE: If the Advanced Options button will be visible (it's only in the case if some module needs old advanced options settings) the button does'n have Mnemonic. The user can open it by TAB key.

 

Figure 1.1: General settings design - example

Description of figure 1.1: If the user needs to change Browser Executable settings, he/she uses "Edit..." button. The system shows Browser Executalbe Settings dialog (Figure 1.1.2).

Navigation:

• Navigation between main categories- General, Editor etc...is realized by pointers key - <- Left, Right ->.
• To move from main category to sub-category [Miscellaneous -ANT] is realized by [TAB] key.
• To move between tabs is realized by pointers key too.
• If the user wants to return to the main category, he/she uses TAB+SHIFT.

 

 

Mnemonics designed for figure 1.1:

• W - Web Browser,
• E - Edit [Button],
• N - No Proxy,
• U - Use System Proxy Settings,
• M - Manual Proxy Settings,
• P - HTTP Proxy Settings,
• R - Port,
• O- More [Button],
• H - Help [Button].

 

Figure 1.1.2: Browser Executable settings dialog

Mnemonics designed for figure 1.1.2:

• A - Add [Button],
• B - Web Browsers,
• E - Executable,
• N - Name,
• P - Parameters
• R - Remove[Button] ,
• W - Browse [Button].

 

Miscellaneous redesign

Figure 1.2: Miscellaneous redesign

 

Panels Spacing - NOTE

 

PLEASE NOTE THESE RULES!

1. The inset between components or panels we are setting between the biggest component (for more information click here)in the row or column via defined roles.
2. The labels and smaller components  have to be  centralized by the down label line in the highest component in the row.

 

Rules		Windows XP/Classic
1.	Between related components (e.g. between check boxes, radio buttons, text fields, text field and button, combo boxes, buttons, text area/list and its note - note is situated below text area or list, etc.)	6 px
2.	Between unrelated components (e.g. text fields, combo boxes, groups of radio buttons, groups of check boxes, etc.) leave at least	11 px
3.	Between text labels and their associated components (text field and its label, combo box and its label, group of radio buttons and its label (it is valid for vertical as well as horizontal direction - same is valid for group of check boxes and its label), text area/list and its label, etc.)	5 px
4.	Between toggle buttons, between toggle buttons and separator and between toggle buttons and toolbar (valid for both directions - vertical and horizontal)	3 px
5.	Between separator and components	11 px
6.	Between command buttons (OK, Cancel, Help button) and last component	17 px
7.	Tabbed pane - maintain a consistent margin from	11 px
8.	Dialog - maintain a consistent margin from	11 px

 

Left Space Example:

Right Space Example:

Top and Lower Space Example:

Description of Top and Lower Space Example:

• 17 pixs is space between panel buttons and bottom of the panel edge,
• 11 pixs is is space between panel buttons and bottom op the Option Dialog edge,
• 6 pixels is between buttons.

 

List of redesigned panels

NOTICE: All panels placed in the Miscellaneous category (they are inside the Miscellaneous frame) are resizable if the user drags the edge of Miscellaneous frame.

Ant settings:

Figure 2.1: Ant Settings redesign

Description of figure 2.1:

Figure 2.1 shows new redesign of ANT panel in Miscellaneous. Main changes are Classpath and Properties settings accessible directly from Ant panel.

Mnemonics designed for figure 2.1:

• A - Ant Home,
• C - Classpath,
• D -Move Down [Button],
• E - Default [Button],
• H - Help [Button],
• J - Add JAR/ZIPP [Button],
• M - Move Up [Button],
• O - Always Show Output,
• P - Properties,
• R- Remove [Button],
• S - Save All Modified Files Before Running Ant,
• T - Reuse Output Tabs from Finished Processes,
• V -Verbosity Level,
• W-Browse [Button],
• Y - Add Directory [Button].

 

Diff Settings redesign

Figure 2.2: Diff settings redesign

Mnemonics designed for figure 2.2:

• C - Command,
• E - External Diff,
• H - Help [Button],
• I - Internal Diff,
• N - Ignore Whitespacess,
• W-Browse [Button].

 

Editor Settings

Editor settings will be removed into Editor Panel.

 

File Recognition redesign

Figure 2.3: File Recognition option redesign

Mnemonics designed for figure 2.3:

• A - Add Extension [Button],
• D - Edit File Extension [Button],
• E - Edit [Button],
• F- File Type,
• H - Help [Button],
• I - Ignored Files,
• M- Add Mime Type [Button],
• O - Open in Editor [Button],
• R- Remove [Button],
• T - File Type Definition.

Description of Figure:

The user can:

• Select File Type
• See all extensions and mime types
• Add/Remove/Edit extensions by Add Extension Dialog
• Add/Remove mime types by Add Mimetypes Dialog
• Edit extensions
• Open in Editor for mime types (similar action which we have now - open in editor)

Figure 2.3.2: Add Extension Dialog

Mnemonics designed for figure 2.3.2:

• E - Extension.

Figure 2.3.3: Add Mime Type Dialog

Mnemonics designed for figure 2.3.3:

• M - Mime Types.

 

GUI Builder options redesign

Figure 2.4: Gui Builder option settings redesign

Mnemonics designed for figure 2.4:

• A - Automatic Resource Management /I18,
• F - Fields in the Form Class,
• G - Listener Generation Style,
• H - Help [Button],
• L - Local Variables in initComponents() Method,
• O - Fold Generation Code,
• S - Show Assistant in Designer ,
• U - Use Indentation Engine,
• V - Variables Modifier,
• Y - Layout Generation Style.

 

Profiler settings redesign

Profiler settings will be removed from the main Option menu into the Profiler tab in Miscellaneous

 

Ruby settings redesign

Figure 2.5: Ruby settings (current Install and Debugger) will be joined together into the tab Ruby

Mnemonics designed for figure 2.5:

• C - Classic Debugger,
• F - Fast Debugger (ruby–debug–ide),
• H - Help [Button],
• I - Install Fast Debugger [Button],
• R - Ruby Interpreter,
• V - Verbose Output,
• W - Browse [Button].

SVG Settings redesign

Figure 2.6: SVG option settings redesign

Mnemonics designed for figure 2.6:

• E - External Editor Path,
• H - Help [Button],
• W - Browse [Button].

 

ToDo Tasks List settings redesign

Figure 2.7: ToDo Tasks List Settings redesign

Mnemonics designed for figure 2.7:

• A - Add [Button],
• D - Delete [Button],
• E - Edit [Button],
• H - Help [Button],
• S - Show ToDos from Comments Only,
• T - ToDo Patterns.

 

Versioning settings redesign

Versioning settings tab will be joined by Versioning Systems:

• CVS
• Subversion
• Local History

settings.

List of "Versioning Systems" will be realized by list component on the left side of Miscellaneous panel.

Figure 2.8.1: CVS settings redesign

Mnemonics designed for figure 2.8.1:

• A - Apply “Exclude From Commit“ On New Files Automatically,
• D - Add Variable [Button],
• H - Help [Button],
• S - Status Label Format,
• V - Versioning System,
• W - Wrap Commit Messages To (characters).

Figure 2.8.2: Subversion settings redesign

Mnemonics designed for figure 2.8.2:

• A - Add Variable [Button],
• D - Define {folder} [Button],
• F - Format,
• H - Help [Button],
• M - Manage Connection Settings [Button],
• S - Specify the SVN Home Folder,
• V - Versioning System,
• W - Browse [Button].

Figure 2.8.3: Local History settings redesign

Mnemonics designed for figure 2.8.3:

• H - Help [Button],
• K - Keep Local History Files for [] Days,
• V - Versioning System.

 

Visual Web

Figure 2.9 Visual Web Designer redesign

Mnemonics designed for figure 2.9:

• C - Create RowSets in Session,
• D - Default Font Size,
• E - Check for Duplicate RowSets,
• G - Grid Height,
• H - Help [Button],
• N - Snap To Grid,
• P - Prompt for Data Source Name,
• S - Show Grid,
• T - Target Browser Window,
• U - Suffix for Data Providers,
• W - Grid Width,
• X -Suffix for RowSets.

 

List of Miscellaneous settings

If we remove the Advanced Options (cleaning and redesign them) we have new settings into the Miscellaneous.

• The list of settings placed in the Miscellaneous has to be reordered by Alphabet (A - start),
• The Miscellaneous shows Advance option button if some third party module will be installed in the NetBeans IDE. This function will be saved for backward compatibility too.

 

List of Miscellaneous:

1. Ant
2. Diff
3. GUI Designer
4. File Recognition
5. Profiler
6. Ruby
7. SVG
8. ToDo Tasks
9. Versioning
10. Visual Web

 

Figure 3: Miscellaneous list

 

 

Will be removed

 

Core settings

Figure 4.1: Core Settings will be removed from the Advanced Option

Figure 4.1 description:

The Core Settings will be removed from Advanced Options and will not be moved to Miscellaneous.

 

Annotation Types settings

Figure 4.2: Annotation types will be removed

Figure 4.2 description:

The Annotation types are placed in the Font & Color -> Annotations now. From Advanced dialogue will be removed.

 

Indentation Engines settings

Figure 4.3: Indentation Engines will be removed

 

Look and Feel settings

Figure 4.4: Look and Feel will be removed

 

Diff and Merge Types settings

Figure 4.5: Diff and Merge Types will be removed and placed it the Miscellaneous

 

Web Browsers

Figure 4.6.1: Web Browsers will be removed and placed into the General category (Figure 4.6.2).

Figure 4.6.2: Web Browser settings will be added to General panel

 

 

Database Explorer

Figure 4.7: Database Explorer will be removed

 

PDF viewer settings

Figure 4.8: PDF viewer settings will be removed

 

HTTP Server settings

HTTP Server settings will be removed.

J2EE Servers settings

J2EE Server settings should be move to Runtime-> Services -> Server Properties settings.

Internationalization

Internationalization settings will be removed from NetBeans IDE.

 

 

 

 

---

Contact:

Ing. Josef Pavlicek, Ph.D.
Human Interface Designer
Software eXperience Design
Sun Microsystems Czech s.r.o

Phone:+420 233 009 442
GSM: +420 737 38 54 75
E-mail: Josef.Pavlicek@Sun.Com

 

---