Documentation/4.1/Developers/Style Guide/UI - Revision history

UpdateBot: Prepend documentation/versioncheck template. See http://na-mic.org/Mantis/view.php?id=2887

2013-06-14T07:26:50Z

Prepend documentation/versioncheck template. See http://na-mic.org/Mantis/view.php?id=2887

Finetjul: Update Qt version

2012-06-26T01:05:45Z

Update Qt version

JChris.FillionR: /* Links */

2012-06-20T15:18:09Z

Links

JChris.FillionR at 15:17, 20 June 2012

2012-06-20T15:17:49Z

Kikinis: /* Section */

2012-05-31T16:22:57Z

Section

Finetjul: /* Layouts */

2012-05-31T13:41:23Z

Layouts

Finetjul: /* Panels */ Reorder sections

2012-04-16T21:39:07Z

Panels: Reorder sections

Finetjul: /* Panels */

2012-04-16T21:33:58Z

Panels

Finetjul: /* Section */

2012-04-16T21:31:21Z

Section

Finetjul: /* Section */

2012-04-16T21:24:03Z

Section

← Older revision		Revision as of 07:26, 14 June 2013
Line 1:		Line 1:
		+	<noinclude>{{documentation/versioncheck}}</noinclude>
	==General guidelines==		==General guidelines==
	* As a general rule, follow those following guidelines:		* As a general rule, follow those following guidelines:

@@ Line 19: / Line 19: @@
 |[[Image:GuiGuideline2012-03-27.png|thumb|center|400px|Justify elements in panel]]
 |}
-Elements in panels should be justified (use of a [http://doc.qt.nokia.com/4.7-snapshot/qformlayout.html QFormLayout] can simplify the task)
+Elements in panels should be justified (use of a [http://doc.qt.nokia.com/{{documentation/{{documentation/version}}/qtversion}}/qformlayout.html QFormLayout] can simplify the task)
 ===Text===
 *Capitalize the first letter in any text specified for a label or button
@@ Line 29: / Line 29: @@
 ==Layouts==
-*Use the default values for the margins or 0. Default margins are automatically controlled by the [http://viewvc.slicer.org/viewvc.cgi/Slicer4/trunk/Base/QTGUI/qSlicerStyle.cxx?view=markup Slicer custom style] (see [http://qt-project.org/doc/qt-4.7/qstyle.html QStyle::PM_LayoutLeftMargin])
+*Use the default values for the margins or 0. Default margins are automatically controlled by the [http://viewvc.slicer.org/viewvc.cgi/Slicer4/trunk/Base/QTGUI/qSlicerStyle.cxx?view=markup Slicer custom style] (see [http://doc.qt.nokia.com/{{documentation/{{documentation/version}}/qtversion}}/qstyle.html QStyle::PM_LayoutLeftMargin])
 *The minimum size hint of the top level module widget is used to determine the minimum width of the module. The minimum width of a module must not be larger than 500px (subject to change). This is enforced by the automatic test qSlicer''MY_MODULE_NAME''ModuleGenericTest. [http://www.na-mic.org/Bug/view.php?id=2093 If the width is too large], you have multiple ways of narrowing the module panel:
-**In Qt Designer, you can ensure the sizing is correct by changing the [http://qt-project.org/doc/qt-4.7/qlayout.html#id-73362ab2-896f-435f-9ca9-dcb3ac1f72d1 QLayout::SizeConstraint] to <code>QLayout::SetMinimumSize</code>. When you preview the module (Ctrl-R), it appears with the same size as it would in Slicer.
+**In Qt Designer, you can ensure the sizing is correct by changing the [http://doc.qt.nokia.com/{{documentation/{{documentation/version}}/qtversion}}/qlayout.html#id-73362ab2-896f-435f-9ca9-dcb3ac1f72d1 QLayout::SizeConstraint] to <code>QLayout::SetMinimumSize</code>. When you preview the module (Ctrl-R), it appears with the same size as it would in Slicer.
 **Ideally the minimum size hint of each wide GUI element should be fixed, it is unlikely that a large size hint is "ideal". **Alternatively, you might want to investigate the following:
-***Consider setting the horizontal size policy of such element to [http://qt-project.org/doc/qt-4.7/qsizepolicy.html QSizePolicy::Ignored]
+***Consider setting the horizontal size policy of such element to [http://doc.qt.nokia.com/{{documentation/{{documentation/version}}/qtversion}}/qsizepolicy.html QSizePolicy::Ignored]
-***If the element is in a form layout, [http://qt-project.org/doc/qt-4.7/qformlayout.html QFormLayout::layoutFieldGrowthPolicy] might need to be set to <code>AllNonFixedFieldsGrow</code>.
+***If the element is in a form layout, [http://doc.qt.nokia.com/{{documentation/{{documentation/version}}/qtversion}}/qformlayout.html QFormLayout::layoutFieldGrowthPolicy] might need to be set to <code>AllNonFixedFieldsGrow</code>.
 ***All those changes can be set from Qt Designer.
 == Links ==
 * [[Slicer3:Human_Interface_and_Style_Guide_for_Developers|Slicer3 - Human Interface and Style Guide for Developers]]

← Older revision		Revision as of 15:18, 20 June 2012
Line 38:		Line 38:

	== Links ==		== Links ==
−	* [[Slicer3:Human_Interface_and_Style_Guide_for_Developers\|Human Interface and Style Guide for Developers]]	+	* [[Slicer3:Human_Interface_and_Style_Guide_for_Developers\|Slicer3 - Human Interface and Style Guide for Developers]]

← Older revision		Revision as of 15:17, 20 June 2012
Line 36:		Line 36:
	***If the element is in a form layout, [http://qt-project.org/doc/qt-4.7/qformlayout.html QFormLayout::layoutFieldGrowthPolicy] might need to be set to <code>AllNonFixedFieldsGrow</code>.		***If the element is in a form layout, [http://qt-project.org/doc/qt-4.7/qformlayout.html QFormLayout::layoutFieldGrowthPolicy] might need to be set to <code>AllNonFixedFieldsGrow</code>.
	***All those changes can be set from Qt Designer.		***All those changes can be set from Qt Designer.
		+
		+	== Links ==
		+	* [[Slicer3:Human_Interface_and_Style_Guide_for_Developers\|Human Interface and Style Guide for Developers]]

@@ Line 7: / Line 7: @@
 ===Section===
 [[Image:QSlicerVolumeRendering-default.png|thumb|right|200px|Volume Rendering sections]]
-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 should be organized in such a way that the workflow takes the user from top to bottom:
+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. This reduces visual cluttering by hiding advanced and rarely used parameters. Sections should be organized in such a way that the workflow takes the user from top to bottom:
 # The 'Inputs' section is first as it controls the inputs of the volume rendering.
 # then the 'Display' section controls important display properties
@@ Line 14: / Line 14: @@
 To create a section you must use a ctkCollapsibleButton [http://www.commontk.org/docs/html/classctkCollapsibleButton.html|ctkCollapsibleButton] with no panel frame.
 Typically, the main node selector (''Volume:'' in [[Documentation/{{documentation/version}}/Modules/VolumeRendering|Volume Rendering]]) is the first GUI element and is outside any section.
 ===Parameters===
 {|style=width:100%

@@ Line 8: / Line 8: @@
 |- align="left"
+|
-*Elements in panels should be justified (use of a [http://doc.qt.nokia.com/4.7-snapshot/qformlayout.html QFormLayout] can simplify this task)
+*Elements in panels should be justified (use of a [http://doc.qt.nokia.com/4.7-snapshot/qformlayout.html QFormLayout] can simplify the task)
 *Capitalize the first letter in any text specified for a label or button
 ** "Load volumes" instead of "Load Volumes"
@@ Line 17: / Line 16: @@
 ===Section===
 [[Image:QSlicerVolumeRendering-default.png|thumb|right|200px|Volume Rendering sections]]
-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''':
+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 should be organized in such a way that the workflow takes the user from top to bottom:
 # The 'Inputs' section is first as it controls the inputs of the volume rendering.
 # then the 'Display' section controls important display properties

@@ Line 22: / Line 22: @@
 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]]
 |-