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:

  • Thanks
  •  

     

    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!

    1. The inset between components or panels we are setting between the biggest component in the row or column via defined roles.
    2. 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

     


     

     

    Project Features

    About this Project

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