XP L&F and design for new Window System
Author: Dusan Pavlica
Version: Final design
Last update: 12/22/2003
Table of Contents
- UI specification
- Open Issues
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
- 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:
|in ECRU color|
|in BLUE color|
|in GREY color|
Detail of arrows for navigation in the Source Editor and drag texture:
- 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.