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

 

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).

XPfinal-filefocus.png (77784 bytes)

 

Design of new Palette in the Form editor:

XPfinal-palette12.png (72763 bytes)

 

Single Window is focused - Properties:

XPfinal-propertiesfocus.png (77226 bytes)

 

State, when Editor area is empty:

XPfinal-editorisempty.png (56141 bytes)

 

The new Palette with roll over efects:

 

State, without Toolbar in the Source Editor:

a) TAB in the Source Editor is selected

XPfinal-notoolbar-selected.png (27091 bytes)

b) TAB in the Source Editor is focused

XPfinal-notoolbar-focused.png (26988 bytes)

 

 

Detail of blue gradient of titlebar:

bluetab-colors5.png (20093 bytes)

Detail of ecru gradient of titlebar:

ecrutab-colors2.png (19842 bytes)

 

Detail of grey gradient of titlebar:

greytab-colors3.png (15826 bytes)

 

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

normal state

rollover state

pressed state

 
close-buttons.png (17348 bytes) in ECRU color
in BLUE color
in GREY color

 

 

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

editor-colors.png (17644 bytes)

 

 

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.

 

 

Project Features

About this Project

ui was started in November 2009, is owned by Jiří Kovalský, and has 37 members.
By use of this website, you agree to the NetBeans Policies and Terms of Use (revision 20140418.2d69abc). © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
 
 
Close
loading
Please Confirm
Close