Difference between revisions of "Documentation/4.1/Developers/Style Guide/UI"

From Slicer Wiki
Jump to: navigation, search
(4.0 -> 4.1)
 
(→‎Panels: Add Section)
Line 15: Line 15:
 
*Try to use brief phrases when specifying text for a label or button rather than using sentences or sentence fragments ( use "Load volumes" instead of "Choose a volume to load")
 
*Try to use brief phrases when specifying text for a label or button rather than using sentences or sentence fragments ( use "Load volumes" instead of "Choose a volume to load")
 
*Provide fully descriptive tool tips with each widget defined
 
*Provide fully descriptive tool tips with each widget defined
 +
===Section===
 +
A section is used in a panel to categorize parameters by visually grouping them. In the [Documentation/{{documentation/version]]/Modules/VolumeRendering|Volume Rendering module]], there are 3 sections: 'Inputs', 'Display', and 'Advanced...'. By default, the 'Inputs' and 'Advanced...' sections are collapsed. It reduce visual cluttering by hiding advanced and rarely used parameters. Sections must be sorted by '''order of usage''':
 +
# The 'Inputs' section is first as it controls the inputs of the volume rendering.
 +
# then the 'Display' section controls important display properties
 +
# finally, if the previous parameters are not enough to obtain the desired result, the ''Advanced..'' section offers fine tuning of the volume rendering.
 +
Please note that the ''Advanced-ness'' of a section doesn't necessarily impacts its position in the section ordering.
 +
To create a section you must use a ctkCollapsibleButton [http://www.commontk.org/docs/html/classctkCollapsibleButton.html|ctkCollapsibleButton] with no panel frame.
 
| align="center" |[[Image:GuiGuideline2012-03-27.png|500px]]
 
| align="center" |[[Image:GuiGuideline2012-03-27.png|500px]]
 
|-
 
|-

Revision as of 21:13, 16 April 2012

Home < Documentation < 4.1 < Developers < Style Guide < UI

General guidelines

Panels

  • Elements in panels should be justified (use of a QFormLayout can simplify this task)
  • Sections should be organized in such a way that the workflow takes the user from top to bottom.
  • Capitalize the first letter in any text specified for a label or button
  • Try to use brief phrases when specifying text for a label or button rather than using sentences or sentence fragments ( use "Load volumes" instead of "Choose a volume to load")
  • Provide fully descriptive tool tips with each widget defined

Section

A section is used in a panel to categorize parameters by visually grouping them. In the [Documentation/{{documentation/version]]/Modules/VolumeRendering|Volume Rendering module]], there are 3 sections: 'Inputs', 'Display', and 'Advanced...'. By default, the 'Inputs' and 'Advanced...' sections are collapsed. It reduce visual cluttering by hiding advanced and rarely used parameters. Sections must be sorted by order of usage:

  1. The 'Inputs' section is first as it controls the inputs of the volume rendering.
  2. then the 'Display' section controls important display properties
  3. finally, if the previous parameters are not enough to obtain the desired result, the Advanced.. section offers fine tuning of the volume rendering.

Please note that the Advanced-ness of a section doesn't necessarily impacts its position in the section ordering. To create a section you must use a ctkCollapsibleButton [1] with no panel frame.

GuiGuideline2012-03-27.png

Layouts

  • Use the default values for the margins or 0. Default margins are automatically controlled by the Slicer custom style (see QStyle::PM_LayoutLeftMargin)
  • The minimum size hint of the top level module widget is used to determine the minimum width of the module. In Qt Designer, you can ensure it's sizing is correct by changing the QLayout::SizeConstraint to QLayout::SetMinimumSize.
Retrieved from "https://www.slicer.org/w/index.php?title=Documentation/4.1/Developers/Style_Guide/UI&oldid=25752"