Enable JavaScript to interact with content and submit forms on Wolfram websites. Learn how

Wolfram Language & System Documentation Center

Layout Samples

Layout Samples

The functionality provided by GUIKit has been superseded by the interface construction and controls functions native to the built-in Wolfram Language.

Tabbed Pane Samples	Layout Sample 3
Split Pane Samples	Layout Sample 4
Layout Sample 1	Layout Sample 5
Layout Sample 2

It is perhaps easiest to see when to use certain layout elements by visually illustrating how they each combine to create a resizable dialog. Here are a number of further examples that combine some of the previous layout features and common interface layout design patterns.

Tabbed Pane Samples

Here is an example that generates content within a set of tabbed panes.

Wolfram Language code:

ref = GUIRun[
	Widget["Panel", 
	WidgetGroup[{
	{Widget["Button", {"text" -> "Button A"}], Widget["TextField", {"text" -> "someA"}]}, {Widget["Button", {"text" -> "Button B"}], Widget["TextField", {"text" -> "someB"}]}
	}, Name -> "myTabPane", 
	WidgetLayout -> {"Grouping" -> {Tabs, Bottom, {"One", "Two"}}}]
	]
	]

Wolfram Language code: GUIScreenShot[ref]

Each element of the tabbed WidgetGroup can be a list of widgets to populate one tab panel or a single widget whose contents will be placed within one pane.

Wolfram Language code:

ref = GUIRun[
	Widget["Panel", 
	WidgetGroup[{
	Widget["Wolfram/Example/PrimeFinder"], 
	Widget["Wolfram/Example/CellularGroup"]
	}, Name -> "myTabPane", 
	WidgetLayout -> {"Grouping" -> {Tabs, Top, {"One", "Two"}}}]
	]
	]

Wolfram Language code: GUIScreenShot[ref]

Split Pane Samples

Here is an example that uses a split pane and shows how you can optionally name the split pane so it can be manipulated using its properties at runtime.

Wolfram Language code:

ref = GUIRun[
	Widget["Panel", 
	WidgetGroup[{
	Widget["Button", {"text" -> "Button B"}], 
	WidgetGroup[{Widget["Button", {"text" -> "Button A"}], Widget["TextField", {"text" -> "some"}]}, WidgetLayout -> Column]
	}, WidgetLayout -> {"Grouping" -> {Split, Vertical}}, Name -> "mySplitPane"]
	]
	]

Wolfram Language code: GUIScreenShot[ref]

Wolfram Language code: ref @ PropertyValue[{"mySplitPane", "dividerLocation"}]

If you resize the panel a little larger, you can see that you can programmatically move the divider position.

Wolfram Language code: ref @ SetPropertyValue[{"mySplitPane", "dividerLocation"}, 50]

Wolfram Language code: GUIScreenShot[ref]

You can also use a method with percentage value instead of using the integer property value.

Wolfram Language code: ref @ InvokeMethod[{"mySplitPane", "setDividerLocation"}, 0.50]

Layout Sample 1

Wolfram Language code:

ref  = GUIRun[
	Widget["Panel", {
	{Widget["Label", {"text" -> "File"}], 
	Widget["TextField", {"columns" -> 10}], 
	Widget["Button", {"text" -> "Select"}]
	}, 
	Widget["Label", {"text" -> "Display File"}], 
	Widget["TextArea", {"text" -> "File contents here."}]
	}]
	]

Wolfram Language code: GUIScreenShot[ref]

After resizing:

Wolfram Language code: GUIScreenShot[ref]

Layout Sample 2

Wolfram Language code:

ref = GUIRun[
	Widget["Panel", 
	WidgetGroup[{
	Widget["Label", {"text" -> "Inputs"}], 
	WidgetGroup[{
	{Widget["Label", {"text" -> "A"}], 
	Widget["TextField", {"columns" -> 10}], 
	Widget["Label", {"text" -> "ft"}], 
	WidgetSpace[5]}, 
	{Widget["Label", {"text" -> "BB"}], 
	Widget["TextField", {"columns" -> 10}], 
	Widget["Label", {"text" -> "in"}], 
	Widget["CheckBox", {"label" -> "round"}]}, 
	{Widget["Label", {"text" -> "CCC"}], 
	Widget["TextField", {"columns" -> 10}], 
	Widget["Label", {"text" -> "m"}], 
	WidgetGroup[{
	Widget["Label", {"text" -> " OR "}], 
	Widget["TextField", {"columns" -> 10}], 
	Widget["Label", {"text" -> "km"}]}, 
	           WidgetLayout -> {"Grouping" -> Row, "Border" -> {{RGBColor[1, 0, 0], 3}, {{5, 5}, {5, 5}}}}]
	}
	}, WidgetLayout -> Grid]}, 
	WidgetLayout -> {"Border" -> {{RGBColor[0, 0, 1], 3}, {{5, 5}, {5, 5}}}}]
	]
	]

Wolfram Language code: GUIScreenShot[ref]

After resizing:

Wolfram Language code: GUIScreenShot[ref]

Layout Sample 3

Wolfram Language code:

ref = GUIRun[
	Widget["Panel", {
	WidgetGroup[{
	WidgetGroup[{
	WidgetGroup[{
	{Widget["Label", {"text" -> "A"}, 
	    WidgetLayout -> {"Alignment" -> {Right, Automatic}}], 
	Widget[" TextField", {"columns" -> 10}], 
	Widget["Label", {"text" -> "ft"}]}, 
	{Widget["Label", {"text" -> "BB"}, 
	    WidgetLayout -> {"Alignment" -> {Right, Automatic}}], 
	Widget[" TextField", {"columns" -> 10}], 
	Widget["Label", {"text" -> "in"}]}, 
	{Widget["Label", {"text" -> "CCC"}, 
	    WidgetLayout -> {"Alignment" -> {Right, Automatic}}], 
	Widget[" TextField", {"columns" -> 10}], 
	Widget["Label", {"text" -> "m"}]}
	}, WidgetLayout -> {
	       "Grouping" -> Grid, 
	       "Border" -> {{RGBColor[1, 0, 0], 3}, {{5, 5}, {5, 5}}}}], 
	WidgetFill[]}, 
	        WidgetLayout -> {"Border" -> {{RGBColor[1, 1, 0], 3}, {{5, 5}, {5, 5}}}}], 
	WidgetSpace[5], 
	{WidgetFill[], 
	Widget["Button", {"text" -> "foo"}]}}, WidgetLayout -> {"Grouping" -> Row, "Border" -> {{RGBColor[0, 0, 1], 3}, {{5, 5}, {5, 5}}}}]
	}]
	]

Wolfram Language code: GUIScreenShot[ref]

After resizing:

Wolfram Language code: GUIScreenShot[ref]

Layout Sample 4

Wolfram Language code:

ref = GUIRun[
	Widget["Panel", 
	{Widget["Label", {"text" -> "These are inputs"}, 
	   WidgetLayout -> {"Alignment" -> Center}, Name -> "mainLabel"], 
	{Widget["Label", {"text" -> "BB"}], 
	WidgetAlign[], 
	Widget["TextField", {"columns" -> 10}], 
	WidgetAlign[], 
	Widget["Label", {"text" -> "in"}], 
	WidgetAlign[], 
	Widget["CheckBox", {"label" -> "round"}]}, 
	{Widget["Label", {"text" -> "CCC"}], 
	WidgetAlign[], 
	Widget["TextField", {"columns" -> 10}], 
	WidgetAlign[], 
	Widget["Label", {"text" -> "m"}], 
	Widget["Label", {"text" -> " OR "}], 
	WidgetAlign[], 
	Widget["TextField", {"columns" -> 10}], 
	Widget["Label", {"text" -> "km"}]}, 
	{WidgetFill[], 
	WidgetAlign[{"mainLabel", After}, Before], 
	Widget["Button", {"text" -> "Submit"}], 
	WidgetFill[]}
	}]
	]

Wolfram Language code: GUIScreenShot[ref]

After resizing:

Wolfram Language code: GUIScreenShot[ref]

Layout Sample 5

Wolfram Language code:

ref = GUIRun[
	Widget["Panel", {
	{Widget["Label", {"text" -> "int"}], 
	Widget["TextField", {"columns" -> 5}], 
	Widget["Label", {"text" -> "double"}], 
	Widget["TextField", {"columns" -> 5}, 
	   WidgetLayout -> {"Stretching" -> {Maximize, None}}], 
	Widget["Label", {"text" -> "double"}], 
	Widget["TextField", {"columns" -> 5}, 
	   WidgetLayout -> {"Stretching" -> {Maximize, None}}]}, 
	{
	{Widget["Label", {"text" -> "reallyreallyreallyreallyreallylonglabel"}], 
	Widget["TextArea", {}, 
	    WidgetLayout -> {"Stretching" -> {WidgetAlign, True}}]}, 
	{WidgetFill[], 
	Widget["Button", {"text" -> "Submit"}]}
	}
	}]
	]

Wolfram Language code: GUIScreenShot[ref]

After resizing:

Wolfram Language code: GUIScreenShot[ref]

Top