XP L&F and design for new Window System

Author: Dusan Pavlica
Version: Final design
Last update: 12/22/2003

 

Table of Contents

• Introduction
  • Context
  • References

• UI specification
• Open Issues

 

Introduction

Context

Main goal of this document is to define XP L&F style of 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

 

UI specification of XP style

There are following new elements which we designed for our XP L&F:

• Source editor TABs
• Navigation in Source editor
• TitleBars of Windows
• Active Window
• Close buttons
• Drag texture

We tried to reuse Swing XP style as much as possible (look of TABs in the Source Editor), but we created some completely new elements too (eg. TitleBars, Arrows for source Navigation, look of Active Window - blue color).
We use the most similar color palette as exists in the Swing too. Following pictures demonstrate a view of all IDE and concrete details as well.

 

Main design of all IDE:

There are visible separate windows with ecru titlebar (Properties, Output), area with shared titlebars (blue Filesystems and grey Runtime) and the Source Editor area with more document TABs.

Meaning of colors:

• Grey gradient - Unselected Titlebars or TABs have this color (e.g. Runtime or first TAB in the Source Editor).
• Ecru gradient - Is intended for selected windows or TAB (Titlebar of the Properties or ColorPreview TAB).
• Blue gradient - Only active Window or TAB has this color (Titlebar of the Filesystem).
• Yellow line - When more Titlebars or TABs exist at one raw then Selected element has yellow line which is 3 pixels high (Filesystems or ColorPreview).

 

Design of new Palette in the Form editor:

 

Single Window is focused - Properties:

 

State, when Editor area is empty:

 

The new Palette with roll over efects:

 

State, without Toolbar in the Source Editor:

a) TAB in the Source Editor is selected

b) TAB in the Source Editor is focused

 

 

Detail of blue gradient of titlebar:

Detail of ecru gradient of titlebar:

 

Detail of grey gradient of titlebar:

 

Detail of close button in three states - normal, rollover, pressed:

normal state	rollover state	pressed state
			in ECRU color
			in BLUE color
			in GREY color

 

 

Detail of arrows for navigation in the Source Editor and drag texture:

 

 

Open Issues

• Should Yellow line follow mouse cursor or should have the same behavior as exists by Swing TABs ?
• What about left and right borders. My opinion is, that they should be there, but there are no borders in a current implementation.