Polished design of Classic L&F
for new Window System

Author: Dusan Pavlica in cooperation with Jan Rojcek and Gabriel Tichy
Version: 5
Last update: 12/12/2003

Table of Contents

• Introduction
  • Context
  • References
• Polished design
• Open Issues

Introduction

Context

This document isn't intended to specify complete design specification for Classic L&F, but it's about betterment and polish Classic L&F style for new Windowing System of Netbeans. Comprehensive specification of all new WS you could find at address mentioned below.

References

• http://ui.netbeans.org/docs/ui/ws/ws_spec.html - User Interface Specification: Window System, Final Draft
• http://ui.netbeans.org/docs/ui/ws/ws_visual_spec_classic.html - Windowing System Visual Specification - Windows Classic

Polished Design

I would like to show current design first by following picture, then mention list of diferrences and demonstrate polished design on next figures with exact size or positions of all elements mainly.

figure 1 - Design before polishing (version from dev build 11/27/2003):

figure 2 - Main look of polished Classic L&F design:

Following parts was changed:

1. Main ToolBar - Its height is 25pixels of grey now instead 33 pixels (see detail fig. 6)
2. TitleBar of Internal Windows - Heavy borders was removed, height change minus 2 pixel and positions of elements inside repaired (see detail fig.6). Small change with border in upper right corner and light grey line from bottom of TitleBar was changed to dark grey (see detail fig. 7)
3. Source editor TABs - Height of document TABs was changed to 18 pixels of grey instead 20 pixels (see detail figure 7).
4. Space between TABs of documents and border of Source editor was removed (see detail figure 7).
5. Arrows intended for switching among documents - Small change in design of buttons plus reposition of them. It means, that left and right arrows are grouped together and down arrow is moved to the right. (see detail fig.8)
6. Positions of close buttons - Close buttons in Windows and TABs are repositioned (see detail fig. 7)
7. Drag texture - Design was changed to single line with highlight-shadows and moved to the left a bit (see detail fig.6)
8. Splitters in all IDE - All borders should be consistent. It means 5 pixels height and 5 pixels width (see main look on figure 2 and detail figure 6)
9. Borders inside the Source Editor - Additional double borders was removed (see main look on figure 2 and detail figure 7)
10. ToolBar of the Source Editor - Height of Editor ToolBar is 25 pixels of grey instead 23 pixels. Combobox was moved more to the left side (see detail figure 7).
11. Status Line of the Source Editor - Borders weren't logical, so it was repaired at the left and upper side (see detail fig. 9).
12. Text situated in Titlebar of each window isn't bolded yet.
13. Blue icon of folder should be changed to typical yellow icon used on Windows 2000.
14. Left margin in the Source editor should have color, which is more consistent to Windows L&F. We chose this RGB 237,233,225 which is derived from color of main ToolBar.

|

figure 6 - Design of Window's TitleBar and positions of elements inside. Size of splitters and main ToolBar.

figure 7 - Design of rigt side of Windows TitleBar, Editor's ToolBar and Area with document headers

figure 8 - design of the arrows for document switching

figure 9 - Design of the Editor's Status Line

Open Issues

• Design issue about right appearance of selected Titlebar of window and selected document TAB  (see figure 2). It's too much contrast and could be improved in this way for example:
  
      
  
      
  
  

• Do you have other one ?...