NetBeans Spacing UI Guidelines
Author: Josef Pavlicek
$Revision: 1.6 $
$Date: 2007/08/23 12:00:58 $
$Id: index.html,v 1.6 2007/08/23 12:00:58 josefpavlicek Exp $ (see full CVS history)
Content:
Summary
This document was written by Josef Pavlicek for the purpose of unification insets (spacing) between components used in NetBeans. The problem with spacing solves Mattise partially. But for non - Mattise users is useful to define Guidelines. We tried to define the spacing before (Document written by Jindrich Dinga). This paper is updating Jindra's work.
How to unified insets in NetBeans
What is the main problem?
The main problem of spacing's in NetBeans is: each L&F has different sizes (weight and high) of used components. Figure 1.1 shows the problem in the detail.
Figure 1.1: Detail of components differences
Thanks this problem, we have to use some method, which allows to add different sized components to one row.
Solution
We have to use rules defined by Jindra Dinga in the Guidelines roles (internal document).
| Rules |
Windows XP/Classic |
| 1. |
Between related components (e.g. between check boxes, radio buttons, text fields, text field and button, combo boxes, buttons, text area/list and its note - note is situated below text area or list, etc.) |
6 px |
| 2. |
Between unrelated components (e.g. text fields, combo boxes, groups of radio buttons, groups of check boxes, etc.) leave at least |
11 px |
| 3. |
Between text labels and their associated components (text field and its label, combo box and its label, group of radio buttons and its label (it is valid for vertical as well as horizontal direction - same is valid for group of check boxes and its label), text area/list and its label, etc.) |
5 px |
| 4. |
Between toggle buttons, between toggle buttons and separator and between toggle buttons and toolbar (valid for both directions - vertical and horizontal) |
3 px |
| 5. |
Between separator and components |
11 px |
| 6. |
Between command buttons (OK, Cancel, Help button) and last component |
17 px |
| 7. |
Tabbed pane - maintain a consistent margin from |
11 px |
| 8. |
Dialog - maintain a consistent margin from |
11 px |
PLEASE NOTE THESE RULES!
- The inset between components or panels we are setting between the biggest component in the row or column via defined roles.
- The labels and smaller components have to be centralized by the down label line in the highest component in the row.
Graphical examples
Figure 2.1: XP L&F - This L&F has all components with identical high. That is easy to implement it.
Figure 2.2: Metal L&F is typical example of different high of used components in the row. In this case we have to comply defined rules in this Guideline.
Thanks
- Thanks Jindra Dinga for perfect defined spacing roles in the Guideline.
- Thanks Jan Rojcek and Jeff Hoffman for UI and HIE suggestions.
- Thanks Jiri Sedlacek and Stanislav Aubrecht for practical suggestions and examples.
Joserf Pavlicek
Contact:
Ing. Josef Pavlicek, Ph.D.
Human Interface Designer
Software eXperience Design
Sun Microsystems Czech s.r.o
Phone:+420 233 009 442
GSM: +420 737 38 54 75
E-mail: Josef.Pavlicek@Sun.Com
