Vista L&F and Design for Window System

Author: Jindrich Dinga
Date: August, 2006
Version: Final

Content:

  1. Introduction
  2. UI Specification
    1. Screenshots of NetBeans IDE
    2. Detail of Non-Selected Title Bar
    3. Detail of Mouse Over Effect
    4. Detail of Active Title Bar without Focus
    5. Detail of Active Title Bar with Focus
    6. Detail of Dragger
    7. Icons
  3. Open Issues

1. Introduction

The main goal of this UI specification is improvement of NetBeans Window System to look as much native as possible on Windows Vista. The Window System specification is available here.

Because the Windows Vista visual guidelines are still not complete and JDK 1.6.0-rc-b97 does not support native look of all components used in NetBeans IDE, this specification might change in the future. This specification is currently based on default color scheme used in Windows Vista - Aero.

2. UI Specification

The elements that are designed for Vista L&F are as follow:

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

We tried to reuse the Swing Vista style as much as possible (appearance of tabs in the source editor), however we also created new elements, such as Title Bars, Arrow buttons, Pop-Up button as well as Maximize/Restore buttons for the source editor and draggers. In addition to the design, we used the most similar color palette that is currently available in Swing. Following pictures show the NetBeans IDE and concrete details.

Meaning of colors:

  • Gray gradient - is used for not selected title bars or tabs (e.g. Files or first tab in the Source Editor).
  • Blue gradient - is used for mouse over effect.
  • Light Gray color - is used for selected title bars or tabs that are not active (e.g. Navigator title bar, second tab in the Source Editor).
  • Light Blue color - is used only for active window or tab (e.g. Projects title bar).

2.1. Screenshots of NetBeans IDE

figure 1 - Projects view is focused

figure 2 - Projects view is selected

2.2. Detail of Non Selected Title Bar

2.3. Detail of Mouse Over Effect

Note: The mouse over effect is not available on active window or tab.

2.4. Detail of Active Title Bar without Focus

2.5. Detail of Active Title Bar with Focus

2.6. Detail of Dragger

Windows Vista currently has no draggers. Because of that we use draggers that are used on Windows XP platform, however we polish them a bit.

Note: VS .NET has draggers for their tool bars, however these draggers are too light to be used for NetBeans IDE. On the other hand, MS Excel/Word also has draggers (but not for tool bars) that are too dark to be used for NetBeans IDE. Because guidelines about look of draggers are missing, I suggest to use draggers (picture above) that are polished for default theme on Windows Vista.

2.7. Icons

Click here to download icons.

3. Open Issues

This UI spec must be reviewed when Windows Vista visual guidelines are marked as final and all components used in NetBeans IDE will use Vista L&F.

From quick look at NetBeans IDE, these problematic areas were identified:

  • color of the tree selection (currently uses XP selection)
  • main menu selection (currently uses XP selection)
  • different fonts in main menu than used in entire IDE (current system font is "Segoe UI" on Windows Vista - should it be used for all fonts used in the IDE?)
  • tool tips appearance is different (currently uses XP tool tips)
  • error stripe has almost same color as scroll bar (it should be polished)
  • color of categories in Properties/Palette does not match color scheme used in Windows Vista - issue 83810
  • color of editor status bar as well as toolbar (currently uses XP color) - issue 83817
  • buttons in the edge bar looks ugly (different position of gradient) - issue 83828
  • process list does not look native (improve look of the list) - for appearance of the list click here
  • different appearance of toolbars (Windows Vista's applications have toolbars with gradient)
  • check the appearance of global progress bar (Windows Vista visual guidelines do not recommend displaying a text inside the progress bar - should we display a text (percentage/estimated time) at the end of the process name and use this behavior for all platforms?)
  • currently there is no visualization of maximized editor for Windows Vista (we should create it)
  • etc.

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 20131025.e7cbc9d). © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
 
 
Close
loading
Please Confirm
Close