Vista L&F and Design for Window System
Author: Jindrich Dinga
Date: August, 2006
- UI Specification
- Open Issues
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.
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).
figure 1 - Projects view is focused
figure 2 - Projects view is selected
Note: The mouse over effect is not available on active window or tab.
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.
Click here to download icons.
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)