| GUI Layout Toolbox 2.3.1 | +  |
+
Examples 
+
+ The following examples are provided as part of this documentation. Click + the name of any example to go to the corresponding page.
+ +Basics
+-
+
- Layout hierarchy +
- Using layouts inside layouts to produce more complex designs +
Using axes
+-
+
- Positioning axes +
- Using the different axes position properties. + +
- Axes legends and colorbars +
- How to work with axes that may also have legends and/or colorbars. +
Using panels
+-
+
- Context help +
- Adding context-sensitive help using panels. + +
- Minimize and maximize +
- Creating a user interface with panels that can be minimized and + maximized. + +
- Dock and undock +
- Creating a user interface with panels that can be undocked into + separate windows. +
Visible
+-
+
- Show and hide +
- Showing and hiding a layout and its contents. +
Applications
+-
+
- Building a complete application +
- Using layouts together to produce a complete application. +
+ + +
+
 |
+ Front page | +[Top] | +Front page | + |
+
| GUI Layout Toolbox 2.3.1 | + |
+
Function reference
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1: Panels+
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ |
| 1.1 uix.Panel | +Arrange a single element inside a standard panel | +
| 1.2 uix.CardPanel | +Show one element (card) from a list | +
| 1.3 uix.BoxPanel | +Arrange a single element in a panel with boxed title | +
| 1.4 uix.TabPanel | +Arrange elements in a panel with tabs for selecting which is visible | +
| 1.5 uix.ScrollingPanel | +Arrange a single element inside a scrollable panel | +
2: Boxes+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ |
| 2.1 uix.HBox | +Arrange elements horizontally in a single row | +
| 2.2 uix.VBox | +Arrange elements vertically in a single column | +
| 2.3 uix.HBoxFlex | +Arrange elements horizontally with draggable dividers | +
| 2.4 uix.VBoxFlex | +Arrange elements vertically with draggable dividers | +
| 2.5 uix.HButtonBox | +Arrange buttons horizontally in a single row | +
| 2.6 uix.VButtonBox | +Arrange buttons vertically in a single column | +
3: Grids+
+ 
+
+
+
+
+
+ |
+ |
| 3.1 uix.Grid | +Arrange elements in a two dimensional grid | +
| 3.2 uix.GridFlex | +Arrange elements in a two dimensional grid with draggable dividers | +
4: Other functions+ + + + + + + + |
+ |
| 4.1 uix.Empty | +Create an empty space | +
| 4.2 uix.tracking | +Track usage | +
| 4.3 layoutRoot | +Return the folder containing the GUI layout toolbox | +
+ + +
+
|
+ Front page | +[Top] | +uix.Panel | + |
+
| Function_reference | + |
+
+ +
1.1: uix.Panel
+
+
+
+ +
Arrange a single element inside a standard panel
+-
+
obj= uix.Panel()
+ - creates a standard
uipanelobject but with automatic management + of the contained widget or layout. The properties available are largely + the same as the builtinuipanelobject. Where more than one child is + added, the currently visible child is determined using the Selection property.
+
+ obj= uix.Panel(prop,value,...)
+ - also sets one or more property values. + +
uix.Panel properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
BorderType | ||
BorderWidth | ||
Contents | ||
DeleteFcn | function_handle | |
FontAngle | ||
FontName | ||
FontSize | ||
FontUnits | ||
FontWeight | ||
ForegroundColor | colorspec | |
HighlightColor | colorspec | |
Padding | ||
Parent | ||
Position | ||
Selection | ||
ShadowColor | colorspec | |
Tag | ||
Title | ||
TitlePosition | ||
Type | ||
Units | ||
Visible |
For example:
+f =+figure(); +p =uix.Panel('Parent', f,'Title','A Panel','Padding', 5 ); +uicontrol('Parent', p,'Background','r')
+
f =+figure(); +p =uix.Panel('Parent', f,'Title','A Panel','TitlePosition', 'CenterTop'); +b =uix.HBox('Parent', p,'Spacing', 5,'Padding', 5 ); +uicontrol( 'Style', 'listbox','Parent', b,'String', {'Item 1','Item 2'} ); +uicontrol('Parent', b,'Background','b'); +set( b,'Widths', [100 -1] );
+
See also:
uix.CardPanel- for creating an undecorated paneluix.BoxPanel- for creating a more boxy paneluix.TabPanel- for a panel with tabs for selecting the visible child
+
|
+ Function reference | +[Top] | +uix.CardPanel | + |
+
| Function_reference | + |
+
+ +
1.2: uix.CardPanel
+
+
+
+ +
Show one element (card) from a list
+-
+
obj= uix.CardPanel()
+ - creates a new card panel which allows + selection between the different child objects contained, making the + selected child fill the space available and all other children + invisible. This is commonly used for creating wizards or quick + switching between different views of a single data-set. + +
obj= uix.CardPanel(prop,value,...)
+ - also sets one or more property values. + +
uix.CardPanel properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
Padding | ||
Parent | ||
Position | ||
Selection | ||
Tag | ||
Type | ||
Units | ||
Visible |
For example:
+f =+figure(); +p =uix.CardPanel('Parent', f,'Padding', 5 ); +uicontrol('Parent', p,'Background','r'); +uicontrol('Parent', p,'Background','b'); +uicontrol('Parent', p,'Background','g'); +p.Selection = 2;
+
See also:
uix.Panel- for creating a standard paneluix.BoxPanel- for creating a more boxy paneluix.TabPanel- for a panel with tabs for selecting the visible child
+
|
+ uix.Panel | +[Top] | +uix.BoxPanel | + |
+
| Function_reference | + |
+
+ +
1.3: uix.BoxPanel
+
+
+
+ +
Arrange a single element in a panel with boxed title
+-
+
obj= uix.BoxPanel()
+ - creates a box-styled panel object with
+ automatic management of the contained widget or layout. The
+ properties available are largely the same as the builtin
UIPANEL+ object. Where more than one child is added, the currently visible + child is determined using the Selection property.
+
+ obj= uix.BoxPanel(prop,value,...)
+ - also sets one or more property values. + +
uix.BoxPanel properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
BorderType | ||
Contents | ||
CloseRequestFcn | function_handle | |
DeleteFcn | function_handle | |
DockFcn | ||
FontAngle | ||
FontName | ||
FontSize | ||
FontUnits | ||
FontWeight | ||
ForegroundColor | colorspec | |
HelpFcn | ||
HighlightColor | colorspec | |
IsDocked | ||
Minimized | ||
MinimizeFcn | ||
Padding | ||
Parent | ||
Position | ||
Selection | ||
ShadowColor | colorspec | |
Tag | ||
Title | ||
TitleColor | colorspec | |
Type | ||
Units | ||
Visible |
For example:
+f =+figure(); +p =uix.BoxPanel('Parent', f,'Title', 'A BoxPanel','Padding', 5 ); +uicontrol('Parent', p,'Background','r')
+
f =+figure(); +p =uix.BoxPanel('Parent', f,'Title', 'A BoxPanel','Padding', 5 ); +b =uix.HBox('Parent', p,'Spacing', 5,'Padding', 5 ); +uicontrol( 'Style', 'listbox','Parent', b,'String', {'Item 1','Item 2'} ); +uicontrol('Parent', b,'Background','b'); +set( b,'Widths', [100 -1] ); +p.FontSize = 12; +p.FontWeight = 'bold'; +p.HelpFcn = @(x,y) disp('Help me!');
+
See also:
uix.Panel- for creating a more standard paneluix.CardPanel- for creating an undecorated paneluix.TabPanel- for a panel with tabs for selecting the visible child
+
|
+ uix.CardPanel | +[Top] | +uix.TabPanel | + |
+
| Function_reference | + |
+
+ +
1.4: uix.TabPanel
+
+
+
+ +
Arrange elements in a panel with tabs for selecting which is visible
+-
+
obj= uix.TabPanel()
+ - creates a panel with tabs along one edge + to allow selection between the different child objects contained. + +
obj= uix.TabPanel(prop,value,...)
+ - also sets one or more property values. + +
uix.TabPanel properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
FontAngle | ||
FontName | ||
FontSize | ||
FontUnits | ||
FontWeight | ||
ForegroundColor | colorspec | |
HighlightColor | colorspec | |
ShadowColor | colorspec | |
Padding | ||
Parent | ||
Position | ||
Selection | ||
SelectionChangedFcn | function_handle | OldValue and NewValue giving the previously selected and newly selected tab indices. |
TabContextMenus | ||
TabEnables | ||
TabTitles | ||
TabWidth | ||
Tag | ||
Type | ||
Units | ||
Visible |
For example:
+f =+figure(); +p =uix.TabPanel('Parent', f,'Padding', 5 ); +uicontrol('Parent', p,'Background','r'); +uicontrol('Parent', p,'Background','b'); +uicontrol('Parent', p,'Background','g'); +p.TabTitles = {'Red','Blue','Green'}; +p.Selection = 2;
+
See also:
uix.Panel- for creating a more standard paneluix.CardPanel- for creating an undecorated paneluix.BoxPanel- for creating a panel with boxed title
+
|
+ uix.BoxPanel | +[Top] | +uix.ScrollingPanel | + |
+
| Function_reference | + |
+
+ +
1.5: uix.ScrollingPanel
+
+
+
+ +
Arrange a single element inside a panel and provide scrollbars if the panel is smaller than the element
+-
+
obj= uix.ScrollingPanel()
+ - creates a new scrolling panel. + +
obj= uix.ScrollingPanel(prop,value,...)
+ - also sets one or more property values. + +
uix.ScrollingPanel properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
Heights | ||
HorizontalOffsets | ||
HorizontalSteps | ||
MinimumHeights | ||
MinimumWidths | ||
MouseWheelEnabled | ||
Padding | ||
Parent | ||
Position | ||
Selection | ||
Tag | ||
Type | ||
Units | ||
VerticalOffsets | ||
VerticalSteps | ||
Visible | ||
Widths |
For example:
+f =+figure( 'Name', 'uix.ScrollingPanel Help Example' ); +f.Position(3:4) = 400; +p =uix.ScrollingPanel( 'Parent', f ); +a =axes( 'Parent', p ); +[x, y, z] =peaks(); +surf( a, x, y, z ) +a.ActivePositionProperty = 'position'; +set( p, 'Widths', 600, 'Heights', 600, 'HorizontalOffsets', 100, 'VerticalOffsets', 100 )
+
See also:
uix.Panel- for creating a standard paneluix.CardPanel- for creating an undecorated paneluix.BoxPanel- for creating a more boxy panel
+
|
+ uix.TabPanel | +[Top] | +uix.HBox | + |
+
| Function_reference | + |
+
+ +
2.1: uix.HBox
+
+
+
+
+
+
+ +
Arrange elements horizontally in a single row
+-
+
obj= uix.HBox()
+ - creates a new horizontal box layout with all properties set to defaults. + The output is a new layout object that can be used as the parent for other user-interface components. + +
obj= uix.HBox(prop,value,...)
+ - also sets one or more property values. + +
uix.HBox properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
MinimumWidths | ||
Padding | ||
Parent | ||
Position | ||
Spacing | ||
Tag | ||
Type | ||
Units | ||
Visible | ||
Widths |
For example:
+f =+figure(); +b =uix.HBox('Parent', f ); +uicontrol('Parent', b,'Background','r') +uicontrol('Parent', b,'Background','b') +uicontrol('Parent', b,'Background','g') +set( b,'Widths', [-1 100 -2],'Spacing', 5 );
+
f =+figure(); +b1 =uix.VBox('Parent', f ); +uicontrol('Parent', b1,'Background','r') +b2 =uix.HBox('Parent', b1,'Padding', 5,'Spacing', 5 ); +uicontrol('Parent', b2,'String','Button1') +uicontrol('Parent', b2,'String','Button2') +set( b1,'Widths', [30 -1] );
+
See also:
uix.VBox- for creating a vertical arrangementuix.HBoxFlex- for creating a horizontal arrangement with draggable dividers
+
|
+ uix.ScrollingPanel | +[Top] | +uix.VBox | + |
+
| Function_reference | + |
+
+ +
2.2: uix.VBox
+
+
+
+
+
+ +
Arrange elements vertically in a single column
+-
+
obj= uix.VBox()
+ - creates a new vertical box layout with all properties set to defaults. + The output is a new layout object that can be used as the parent for other user-interface components. + +
obj= uix.VBox(prop,value,...)
+ - also sets one or more property values. + +
uix.VBox properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
Heights | ||
MinimumHeights | ||
Padding | ||
Parent | ||
Position | ||
Spacing | ||
Tag | ||
Type | ||
Units | ||
Visible |
For example:
+f =+figure(); +b =uix.VBox('Parent', f ); +uicontrol('Parent', b,'Background','r') +uicontrol('Parent', b,'Background','b') +uicontrol('Parent', b,'Background','g') +set( b,'Heights', [-1 100 -2],'Spacing', 5 );
+
f =+figure(); +b1 =uix.VBox('Parent', f ); +uicontrol('Parent', b1,'Background','r') +b2 =uix.HBox('Parent', b1,'Padding', 5,'Spacing', 5 ); +uicontrol('Parent', b2,'String','Button1') +uicontrol('Parent', b2,'String','Button2') +set( b1,'Heights', [30 -1] );
+
See also:
uix.HBox- for creating a horizontal arrangementuix.VBoxFlex- for creating a vertical arrangement with draggable dividers
+
|
+ uix.HBox | +[Top] | +uix.HBoxFlex | + |
+
| Function_reference | + |
+
+ +
2.3: uix.HBoxFlex
+
+
+
+
+
+
+
+ +
Arrange elements horizontally with draggable dividers
+-
+
obj= uix.HBoxFlex()
+ - creates a new horizontal box layout with draggable dividers and with all properties set to defaults. + The output is a new layout object that can be used as the parent for other user-interface components. + +
obj= uix.HBoxFlex(prop,value,...)
+ - also sets one or more property values. + +
uix.HBoxFlex properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
DividerMarkings | ||
MinimumWidths | ||
Padding | ||
Parent | ||
Position | ||
Spacing | ||
Tag | ||
Type | ||
Units | ||
Visible | ||
Widths |
For example:
+f =+figure('Name','uix.HBoxFlex example'); +b =uix.HBoxFlex('Parent', f ); +uicontrol('Parent', b,'Background','r') +uicontrol('Parent', b,'Background','b') +uicontrol('Parent', b,'Background','g') +uicontrol('Parent', b,'Background','y') +set( b,'Widths', [-1 100 -2 -1],'Spacing', 5 );
+
See also:
uix.HBox- for creating a horizontal arrangementuix.VBoxFlex- for creating a vertical arrangement with draggable dividers
+
|
+ uix.VBox | +[Top] | +uix.VBoxFlex | + |
+
| Function_reference | + |
+
+ +
2.4: uix.VBoxFlex
+
+
+
+
+
+
+
+ +
Arrange elements vertically with draggable dividers
+-
+
obj= uix.VBoxFlex()
+ - creates a new vertical box layout with draggable dividers and with all properties set to defaults. + The output is a new layout object that can be used as the parent for other user-interface components. + +
obj= uix.VBoxFlex(prop,value,...)
+ - also sets one or more property values from the list below. +
uix.VBoxFlex properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
DividerMarkings | ||
Heights | ||
MinimumHeights | ||
Padding | ||
Parent | ||
Position | ||
Spacing | ||
Tag | ||
Type | ||
Units | ||
Visible |
For example:
+f =+figure('Name','uix.VBoxFlex example'); +b =uix.VBoxFlex('Parent', f ); +uicontrol('Parent', b,'Background','r') +uicontrol('Parent', b,'Background','b') +uicontrol('Parent', b,'Background','g') +uicontrol('Parent', b,'Background','y') +set( b,'Heights', [-1 100 -2 -1],'Spacing', 5 );
+
See also:
uix.VBox- for creating a vertical arrangementuix.HBoxFlex- for creating a horizontal arrangement with draggable dividers
+
|
+ uix.HBoxFlex | +[Top] | +uix.HButtonBox | + |
+
| Function_reference | + |
+
+ +
2.5: uix.HButtonBox
+
+
+
+
+
+
+ +
Arrange buttons horizontally in a single row
+-
+
obj= uix.HButtonBox()
+ - is a type of HBox specialised for + arranging a row of buttons, check-boxes or similar graphical + elements. All buttons are given equal size and by default are + centered in the drawing area. The justification can be changed as + required. + +
obj= uix.HButtonBox(prop,value,...)
+ - also sets one or more property values. + +
uix.HButtonBox properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
ButtonSize | ||
Contents | ||
DeleteFcn | function_handle | |
HorizontalAlignment | ||
Padding | ||
Parent | ||
Position | ||
Spacing | ||
Tag | ||
Type | ||
Units | ||
VerticalAlignment | ||
Visible |
For example:
+f =+figure(); +b =uix.HButtonBox('Parent', f ); +uicontrol('Parent', b,'String', 'One' ); +uicontrol('Parent', b,'String', 'Two' ); +uicontrol('Parent', b,'String', 'Three' ); +set( b,'ButtonSize', [130 35],'Spacing', 5 );
+
See also:
uix.VButtonBox- for creating a vertical arrangement of buttonsuix.HBox- for creating a general horizontal arrangement
+
|
+ uix.VBoxFlex | +[Top] | +uix.VButtonBox | + |
+
| Function_reference | + |
+
+ +
2.6: uix.VButtonBox
+
+
+
+
+
+
+ +
Arrange buttons vertically in a single column
+-
+
obj= uix.VButtonBox()
+ - is a type of VBox specialised for + arranging a column of buttons, check-boxes or similar graphical + elements. All buttons are given equal size and by default are + centered in the drawing area. The justification can be changed as + required. + +
obj= uix.VButtonBox(prop,value,...)
+ - also sets one or more property values. + +
uix.VButtonBox properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
ButtonSize | ||
Contents | ||
DeleteFcn | function_handle | |
HorizontalAlignment | ||
Padding | ||
Parent | ||
Position | ||
Spacing | ||
Tag | ||
Type | ||
Units | ||
VerticalAlignment | ||
Visible |
For example:
+f =+figure(); +b =uix.VButtonBox('Parent', f ); +uicontrol('Parent', b,'String', 'One' ); +uicontrol('Parent', b,'String', 'Two' ); +uicontrol('Parent', b,'String', 'Three' ); +set( b,'ButtonSize', [130 35],'Spacing', 5 );
+
See also:
uix.HButtonBox- for creating a horizontal arrangement of buttonsuix.VBox- for creating a general vertical arrangement
+
|
+ uix.HButtonBox | +[Top] | +uix.Grid | + |
+
| Function_reference | + |
+
+ +
3.1: uix.Grid
+
+
+
+ +
Arrange elements in a two dimensional grid
+-
+
obj= uix.Grid()
+ - creates a new new grid layout with all properties set to defaults. The number of rows and + columns to use is determined from the number of elements in the + Heights and Widths properties respectively. Child elements are + arranged down column one first, then column two etc. If there are insufficient + columns then a new one is added. + The output is a new layout object that can be used as the parent for other user-interface components. + +
obj= uix.Grid(prop,value,...)
+ - also sets one or more property values. + +
uix.Grid properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
Heights | ||
Padding | ||
Parent | ||
Position | ||
Spacing | ||
Tag | ||
Type | ||
Units | ||
Visible | ||
Widths |
For example:
+f =+figure(); +g =uix.Grid('Parent', f,'Spacing', 5 ); +uicontrol('Parent', g,'Background','r') +uicontrol('Parent', g,'Background','b') +uicontrol('Parent', g,'Background','g') +uix.Empty('Parent', g ) +uicontrol('Parent', g,'Background','c') +uicontrol('Parent', g,'Background','y') +set( g,'Widths', [-1 100 -2],'Heights', [-1 100] );
+
See also:
uix.GridFlex- for creating a grid arrangement with draggable dividers
+
|
+ uix.VButtonBox | +[Top] | +uix.GridFlex | + |
+
| Function_reference | + |
+
+ +
3.2: uix.GridFlex
+
+
+
+
+ +
Arrange elements in a two dimensional grid with draggable dividers
+-
+
obj= uix.GridFlex()
+ - creates a new new grid layout with draggable dividers between elements. The number of rows and + columns to use is determined from the number of elements in the + Heights and Widths properties respectively. Child elements are + arranged down column one first, then column two etc. If there are insufficient + columns then a new one is added. + The output is a new layout object that can be used as the parent for other user-interface components. + +
obj= uix.GridFlex(prop,value,...)
+ - also sets one or more property values. + +
uix.GridFlex properties
+| Property | Value | Description |
|---|---|---|
BackgroundColor | colorspec | |
BeingDeleted | ||
Contents | ||
DeleteFcn | function_handle | |
DividerMarkings | ||
Heights | ||
Padding | ||
Parent | ||
Position | ||
Spacing | ||
Tag | ||
Type | ||
Units | ||
Visible | ||
Widths |
For example:
+f =+figure(); +g =uix.GridFlex('Parent', f,'Spacing', 5 ); +uicontrol('Parent', g,'Background','r') +uicontrol('Parent', g,'Background','b') +uicontrol('Parent', g,'Background','g') +uix.Empty('Parent', g ) +uicontrol('Parent', g,'Background','c') +uicontrol('Parent', g,'Background','y') +set( g,'Widths', [-1 100 -2],'Heights', [-1 -2] );
+
See also:
uix.Grid- for creating a grid arrangement
+
|
+ uix.Grid | +[Top] | +uix.Empty | + |
+
| Function_reference | + |
+
+ +
4.1: uix.Empty
+
+
+ Create an empty space
+-
+
obj= uix.Empty()
+ - creates an empty space object that can be + used in layouts to add gaps between other elements. + +
obj= uix.Empty(param,value,...)
+ - also sets one or more property values. + +
uix.Empty properties
+The empty space is achieved using a container that monitors + its parent's color and changes its own to match.
+| Property | Value | Description |
|---|---|---|
BeingDeleted | ||
HandleVisibility | ||
Parent | ||
Position | ||
Tag | ||
Type | ||
Units | ||
Visible |
For example:
+f =+figure(); +box =uix.HBox('Parent', f,'Spacing', 5 ); +uicontrol('Parent', box,'Background','r') +uix.Empty('Parent', box ) +uicontrol('Parent', box,'Background','g')
See also:
uix.HBox- for arranging widgets horizontally
+
|
+ uix.GridFlex | +[Top] | +uix.tracking | + |
+
| Function_reference | + |
+
+ +
4.2: uix.tracking
+
+
+ tracks anonymized usage data
+-
+
uix.tracking(p,v,id)
+ - tracks usage to the property p for the version v and identifier id using Google Analytics. +
uix.tracking(state)
+ - turns tracking on or off. +
state= uix.tracking('query')
+ - queries whether tracking is on or off. + +
For example:
++ +uix.tracking('UA-45678-9','1.2.3','featurename')
+ +uix.tracking('on')
state =+uix.tracking('query')
state = 'on'
+
|
+ uix.Empty | +[Top] | +layoutRoot | + |
+
| Function_reference | + |
+
+ +
4.3: layoutRoot
+
+
+
+
+ returns the folder containing the GUI layout toolbox
+-
+
folder= layoutRoot()
+ - returns the full path to the folder containing the GUI Layout Toolbox. + +
For example:
+folder = layoutRoot()
+ folder = 'C:\tools\glt2'
+
|
+ uix.tracking | +[Top] | +Front page | + |
+
| GUI Layout Toolbox 2.3.1 | + |
+
Getting Started
+ + This chapter gives an overview of this package, including its purpose, +how to install it and any known issues at the time of release. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + ++
Contents
+-
+
- 1. What is GUI Layout Toolbox? +
- 2. Compatibility considerations +
- 3. Release notes +
- 4. Installation +
- 5. Support +
- 6. Acknowledgements +
+
|
+ Front page | +[Top] | +What is GUI Layout Toolbox? | + |
+
| Getting_Started | + |
+
1: What is GUI Layout Toolbox?
+
+
+ GUI Layout Toolbox provides a package of MATLAB objects that allow for complex + arrangement of graphical user interface elements within a figure window. The + main capabilities provided are:
+-
+
- Automatic element arrangement horizontally, vertically or in grids +
- Ability to specify fixed sizes or resizing weights for each element +
- Ability to "nest" layouts to produce virtually any element arrangement +
- Divider bars for user-resizing of elements +
These element arrangement capabilities are designed to match those found as + standard in other user-interface toolkits such as Java Swing, GTK, QT etc.
+ + ++
|
+ Getting Started | +[Top] | +Compatibility considerations | + |
+
| Getting_Started | + |
+
2: Compatibility considerations
+
+
+
+
+
+
+
+ Section contents:
+-
+
- 2.1. Minimum MATLAB version +
- 2.2. Compatibility with version 1 +
-
+
-
+
+ +
2.1: Minimum MATLAB version
+
+ This is version 2 of GUI Layout Toolbox, designed to work with the new + MATLAB graphics system that was introduced in R2014b.
+Version 1 works with MATLAB releases prior to R2014b that use the old + graphics system.
++ +
2.2: Compatibility with version 1
+
+ If you are upgrading from version 1, there are a number of compatibility + considerations:
+ +Package name
+Version 1 classes were contained in the package "uiextras". Version 2 classes are +contained in the package "uix". In version 2, a package "uiextras" is included +to provide support for legacy code. Classes in "uiextras" extend +corresponding classes in "uix", and contain only compatibility-related +code.
+ +Contents property
+The contents of version 1 objects were accessible via the property Children.
+The contents of version 2 objects are accessible via the property Contents.
+Version 2 objects also provide a property Children, but this controls the
+vertical stacking order rather than the layout order. Legacy code that accesses
+Children will run without error, but will not achieve the desired change in
+layout order, and should be modified to access Contents instead.
An upcoming release of version 1 will include support for code that references
+contents via Contents. That way, code modified to work in version 2 will also
+work in version 1.
The background to this change is as follows. Version 1 objects were wrappers
+for built-in graphics objects, and presented contents in layout order via
+the property Children. Version 2 objects extend built-in graphics objects,
+and as such, inherit properties, methods and events. One such property is
+Children which is used to control the top-to-bottom stacking order.
+MATLAB stacking rules, e.g. controls are always on top of axes, mean that
+some reasonable layout orders may be invalid stacking orders, so a new
+property for layout order is required.
Auto-parenting
+The new MATLAB graphics system introduces unparented objects, i.e. those with property Parent
+empty. The new system also introduces a separation between formal class constructors, e.g.
+matlab.ui.container.Panel, and informal construction functions, e.g. uipanel.
+Construction functions are auto-parenting, i.e. if Parent is not specified then it is set to
+gcf, whereas class constructors return objects with Parent empty unless
+explicitly specified. Version 2 presents a formal interface of class constructors which follow this new
+convention.
Classes in "uiextras" are auto-parenting so the behavior of legacy code is +unchanged. However, best practice is to specify parent explicitly during +construction.
+ +Defaults mechanism
+Version 1 provided a defaults mechanism (uiextras.get, uiextras.set
+and uiextras.unset) that mimicked get and set in the MATLAB
+graphics system itself. This feature has been removed from version 2. Users should use an
+alternative programming pattern, e.g. factory function, to create objects with standard settings.
Enable and disable
+Version 1 provided a mechanism to enable and disable container contents using the property
+Enable. This feature has been removed from version 2. Users should enable and disable
+controls directly rather than via containers.
For more commentary, see this article.
+ +Other property name changes
+A number of property names have changed to achieve greater consistency
+across the package. For example, RowSizes and ColumnSizes in
+uiextras.Grid are now Heights and Widths in uix.Grid. The package
+"uiextras" provides support for legacy property names.
-
+
RowSizesin "uiextras" isHeightsin "uix"
+ ColumnSizesin "uiextras" isWidthsin "uix"
+ ShowMarkingsin "uiextras" isDividerMarkingsin "uix"
+
Property shape changes
+Version 2 contents companion properties are now of the same size as Contents,
+i.e. column vectors. In version 1, these properties were row vectors. The
+package "uiextras" provides support for legacy property values.
Tab selection behavior
+In version 1, after adding a tab to a tab panel, the new tab is selected.
+In version 2, the original selection is preserved, except if the tab panel was
+ empty, in which case the new tab is selected. This is consistent with the
+ behavior of uitabgroup.
+
|
+ What is GUI Layout Toolbox? | +[Top] | +Release notes | + |
+
| Getting_Started | + |
+
3: Release notes
+
+
+ The GUI Layout Toolbox version numbers take the form major.minor.iter. The
+ current version you have installed can be checked by typing ver
+ at the MATLAB command prompt.
+
Section contents:
+-
+
- 3.1. Version 2.3.1 +
- 3.2. Version 2.3 +
- 3.3. Version 2.2.2 +
- 3.4. Version 2.2.1 +
- 3.5. Version 2.2 +
- 3.6. Version 2.1.2 +
- 3.7. Version 2.1.1 +
- 3.8. Version 2.1 +
-
+
-
+
+ +
3.1: Version 2.3.1
+
+ -
+
- Released 1 February 2017 +
- Specify minimum width and height of contents in uix.ScrollingPanel +
- Update contents position while dragging uix.ScrollingPanel scrollbox +
- Scroll uix.ScrollingPanel using mouse wheel +
- Updated toolbox logo +
- Updated documentation +
+ +
3.2: Version 2.3
+
+ -
+
- Released 24 November 2016 +
- Added scrolling panel +
- Expand and collapse box panel by clicking on title +
- Fixed G1493103 "Error on construction behavior is inconstistent with builtin objects" +
- Updated documentation +
+ +
3.3: Version 2.2.2
+
+ -
+
- Released 22 August 2016 +
- Fixed G1175938 "Cannot use data cursor mode with GUI Layout Toolbox containers" +
- Fixed G1367337 "Update flex container pointer on mouse press event" +
- Fixed G1380756 "Space behind TabPanel tabs should match parent color" +
- Updated documentation +
- Added anonymous tracking of version, operating system and usage to help + us prioritize the improvements we should work on +
+ +
3.4: Version 2.2.1
+
+ -
+
- Released 26 February 2016 +
- Fixed G1346921 "Mouse pointer gets confused when moving between adjacent flex containers" +
- Fixed G1357340 "BoxPanel property ForegroundColor is initialized incorrectly" +
+ +
3.5: Version 2.2
+
+ -
+
- Released 18 December 2015 +
- Improved box panel title bar appearance +
- Changed selection behavior of uix.TabGroup to match that of uitabgroup when the selected tab is removed +
- Fixed G1253937 "uix.TabPanel/redrawTabs fails" (R2015b) +
- Fixed G1292238 "uix.BoxPanel/redrawBorders fails" (R2015b) +
- Fixed G1330841 "mouse-over-divider detection does not work for docked figures" (all) +
- Fixed G1332109 "uix.Empty background color does not match that of its Parent" (all) +
- Fixed G1334867 "cannot add axes to container" (R2016a prerelease) +
- Removed internal helper classes uix.AncestryObserver, uix.LocationObserver, uix.VisibilityObserver +
- Updated documentation +
+ +
3.6: Version 2.1.2
+
+ -
+
- Released 29 May 2015 +
- Fixed G1250248 "uix.Empty becomes visible in a panel" +
- Fixed G1250249 "missing property Selection of uix.BoxPanel" +
- Fixed G1250808 "uix.TabPanel context menus are orphaned when reparenting to a different figure" +
- Updated documentation +
+ +
3.7: Version 2.1.1
+
+ -
+
- Released 15 May 2015 +
- Added context menus on uix.TabPanel tab labels (G1245669) +
- Fixed G1164656 "cannot set relative tab widths" +
- Fixed G1019441 "property RowSizes of uiextras.GridFlex sets heights not widths" +
- Fixed G1165274 "missing properties RowSizes, MinimumRowSizes, ColumnSizes, + MinimumColumnSizes of uiextras.Grid, uiextras.GridFlex" +
- Fixed G1218142 "contents are lost when reordering via property Children" +
- Protected against G1136196 "segv when setting child visibility from 'off' to 'on' in response to being reparented" +
- Updated documentation +
+ +
3.8: Version 2.1
+
+ -
+
- Released 2 October 2014 +
- Initial version for MATLAB R2014b +
- Versions 2.0.x were for prerelease testing +
+
|
+ Compatibility considerations | +[Top] | +Installation | + |
+
| Getting_Started | + |
+
4: Installation
+
+
+
+ GUI Layout Toolbox is provided as a MATLAB toolbox file (.mltbx).
+
+ For instructions on installing and uninstalling, see the section on + managing toolboxes + in the MATLAB documentation. +
+ + ++
|
+ Release notes | +[Top] | +Support | + |
+
| Getting_Started | + |
+
5: Support
+
+
+ + This toolbox is not a MathWorks supported product. However, if you + have problems, suggestions or other comments, please contact the + authors: +
+-
+
- David Sampson +
- Ben Tordoff +
If you like this toolbox, help others to find it by leaving a rating + and comment on the MATLAB Central File Exchange. +
+ + ++
|
+ Installation | +[Top] | +Acknowledgements | + |
+
| Getting_Started | + |
+
6: Acknowledgements
+
+ The authors wish to acknowledge the earlier contributions of the following MathWorks + consultants to this area:
+-
+
- Brad Phelan +
- Malcolm Wood +
- Richard Lang +
- Paul Kerr-Delworth +
+
|
+ Support | +[Top] | +Front page | + |
+
| GUI Layout Toolbox 2.3.1 | + |
+
User guide
+ + This chapter describes the purpose and overall design of the layout + tools that the toolbox provides. It also provides some examples of + creating some user interfaces using layouts. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ++
Contents
+-
+
- 1. Understanding layouts +
- 2. Positioning axes +
- 3. Controlling visibility +
- 4. Advanced maneuvers with panels +
- 5. Using layouts inside GUIDE GUIs +
- 6. Deploying GUIs using the MATLAB Compiler +
- 7. A complete example +
+
|
+ Front page | +[Top] | +Understanding layouts | + |
+
| User_guide | + |
+
1: Understanding layouts
+
+ The purpose of a "layout" is to manage the positioning of one + or more user-interface components. This means that instead of + worrying about the exact position of each user interface component + you instead worry about the relative positioning of them; are they + arranged in a vertical list, horizontal list, a grid pattern, etc.
+The best way to understand what layouts are and why they are a good user-interface + design tool is to see some examples. The sections below go through the + basics of building an interface using layouts and how to build complex + interfaces using them.
+ + + + + + + + + + + +Section contents:
+-
+
-
+
-
+
- 1.1. Layout basics +
- 1.2. Types of layout +
- 1.3. Sizes and units +
- 1.4. Layout hierarchies +
- 1.5. Why use layouts? +
+
|
+ User guide | +[Top] | +Layout basics | + |
+
| User_guide | + |
+
+ +
1.1: Layout basics
+
+ To see how layouts work, let's use the most basic layout, + a horizontal list (or box). We first create a window:
+f = figure();
+ Now let's create the horizontal layout and add it to the figure. Note
+ that in common with other MATLAB graphics objects, one object is added to
+ another by setting the Parent property - this will automatically
+ adjust the list of Children in the parent object. The job of a
+ horizontal box layout is to arrange its contents in a horizontal line,
+ setting the position of each element to best fill the space:
layout = uix.HBox( 'Parent', f );
+ Nothing's changed! That's because the layout is for arranging + other user-interface components - it doesn't draw anything itself. Let's + add some buttons. Note how after creating each button the existing contents + of the box make room for the new addition; we don't need to set the position of + any user-interface component!
++uicontrol( 'String', 'Button 1', 'Parent', layout ); +uicontrol( 'String', 'Button 2', 'Parent', layout ); +uicontrol( 'String', 'Button 3', 'Parent', layout );
.
.
Other layouts work in exactly the same way, although visually + the end-result is quite different:
+f =+figure(); +layout =uix.VBox( 'Parent', f ); +uicontrol( 'String', 'Button 1', 'Parent', layout ); +uicontrol( 'String', 'Button 2', 'Parent', layout ); +uicontrol( 'String', 'Button 3', 'Parent', layout );
f =+figure(); +layout =uix.TabPanel( 'Parent', f ); +uicontrol( 'String', 'Button 1', 'Parent', layout ); +uicontrol( 'String', 'Button 2', 'Parent', layout ); +uicontrol( 'String', 'Button 3', 'Parent', layout );
+
|
+ Understanding layouts | +[Top] | +Types of layout | + |
+
| User_guide | + |
+
+ +
1.2: Types of layout
+
+ The layouts in this toolbox come in three forms:
+-
+
- Panels: show a single child element with some decoration. Other children + of the layout are hidden from view. The visible child can be switched. Available + panels include + Panel, + CardPanel, + BoxPanel, + TabPanel and + ScrollingPanel. + +
- Boxes: arrange children linearly in a single row or column. Available boxes include + HBox, + VBox, + HBoxFlex and + VBoxFlex. + +
- Grids: (also known as tables) arrange children in a two-dimensional grid. Available grids include + Grid and + GridFlex. + +
+
|
+ Layout basics | +[Top] | +Sizes and units | + |
+
| User_guide | + |
+
+ +
1.3: Sizes and units
+
+ In the previous section we noted that when using layouts + you never need to set the position or size of a user-interface + component yourself - the layouts take care of it. So how do + you control the sizes of the components?
+Each layout that arranges multiple items within its drawing area
+ has a sizing property: for horizontal boxes this is Widths
+ and for vertical boxes Heights; for grids we have both Widths
+ and Heights. These all obey the same convention:
-
+
- Positive numbers indicate sizes in pixels (similar to "pixel" units) +
- Negative numbers indicate a weighting for variable sizing (similar to "normalized" units) +
By default all sizes are set to -1 (variable size with unit weighting).
+Let's take a simple example:
+f =+figure(); +layout =uix.HBox( 'Parent', f ); +uicontrol( 'String', 'Button 1', 'Parent', layout ); +uicontrol( 'String', 'Button 2', 'Parent', layout ); +uicontrol( 'String', 'Button 3', 'Parent', layout );
We can set the middle element to be twice as wide as the others + (but still variable width) by setting its weight to -2 with the others at -1:
+layout.Widths = [-1 -2 -1]+
Alternatively we might want the first element to have a + fixed width of 100 pixels with the others filling any remaining + space equally:
+layout.Widths = [100 -1 -1]+
This ability to mix fixed and variable sized elements is + crucial in interface design. It really comes into its own when building + a hierarchy of layouts, described next.
+ + + +
+ 1.3.1:
+ Minimum sizes
+ Many of the multi-element layouts also provide a MinimumWidths
+ or MinimumHeights
+ property to prevent an element becoming too small. This is measured in
+ pixels and defaults to one pixel. Take care to ensure that the available
+ space is at least the sum of the minimum sizes, plus any padding and
+ spacing.
+
|
+ Types of layout | +[Top] | +Layout hierarchies | + |
+
| User_guide | + |
+
+ +
1.4: Layout hierarchies
+
+ Consider the following simple interface:
+
Instead of thinking of this in terms of three elements that need + positioning, we can break it up into two simple linear ("box") arrangements: + a vertical box with the axes at the top and a control area at the bottom and + a horizontal box containing two buttons:
+
.
By placing the second layout (horizontal box) inside the first (vertical box) + we arrive at the complete layout. Since the sizes of the elements in each list + can be set to be fixed or flexible we can achieve a user-interface that is not just + arranged correctly when created, but also behaves well when resized.
+
Note that the buttons have stayed fixed height as the window grows and the + axes grow to fill the remaining space.
+ + +
+ 1.4.1:
+ Code:
+ The example above can be created programmically pretty + much as described in text + (the completed example code is here: + [ view + | edit + | run ] + )
+1. Open a window
+f = figure( 'Position', 200*ones(1,4) );2. Create the first layout (vertical box)
Inside this vertical box
+ we place the axes
vbox = uix.VBox( 'Parent', f );
+axes( 'Parent', vbox );
+ 
3. Create the second layout (horizontal box)
Inside this horizontal box
+ we place two buttons
hbox =+uix.HButtonBox( 'Parent', vbox, 'Padding', 5 ); +uicontrol( 'Parent', hbox, ... + 'String', 'Button 1' ); +uicontrol( 'Parent', hbox, ... + 'String', 'Button 2' );
4. Set the sizes
We want the axes to grow with the window so
+ set the first size to be -1 (which means variable size with wieght 1) and the buttons to stay fixed height so set the
+second size to 35 (fixed height of 35 pixels)
set( vbox, 'Heights', [-1 35] )+
+
|
+ Sizes and units | +[Top] | +Why use layouts? | + |
+
| User_guide | + |
+
+ +
1.5: Why use layouts?
+
+ MATLAB ships with a GUI design tool called GUIDE. This
+ doesn't use layouts, but forces users to manually position each element. This approach
+ is a much faster way to build simple user-interfaces, so why would you want to
+use layouts?
The over-riding reason for using layouts or layout managers is
+ to gain control of the resizing behaviour of the interface without
+ having to write a complex "ResizeFcn". If you simply position user-interface elements
+ directly (either using GUIDE or programmatically), you
+ have two choices about what happens when the window resizes:
+
For example:
+We didn't really want the buttons to grow but everything resizes in proportion.
f =+figure( 'Position', 200*ones(1,4) ); +axes( 'Parent', f, ... + 'Units', 'Normalized', ... + 'OuterPosition', [0.02 0.2 0.96 0.8] ); +uicontrol( 'Parent', f, ... + 'Units', 'Normalized', ... + 'Position', [0.02 0.02 0.46 0.16], ... + 'String', 'Button 1' ); +uicontrol( 'Parent', f, ... + 'Units', 'Normalized', ... + 'Position', [0.52 0.02 0.46 0.16], ... + 'String', 'Button 2' );
.
Although the buttons don't now grow, neither does the axes, which looks very odd.
f =+figure( 'Position', 200*ones(1,4) ); +axes( 'Parent', f, ... + 'Units', 'Pixels', ... + 'OuterPosition', [10 35 190 175] ); +uicontrol( 'Parent', f, ... + 'Units', 'Pixels', ... + 'Position', [5 5 90 25], ... + 'String', 'Button 1' ); +uicontrol( 'Parent', f, ... + 'Units', 'Pixels', ... + 'Position', [105 5 90 25], ... + 'String', 'Button 2' );
.
Neither of these alternatives is particularly useful for a serious + user-interface. Typically there are user-interface components that should + be fixed size: icons, buttons, selectors etc; and others that should resize + with the window: graphs, images, prose text etc. To achieve this one needs + to be able to specify which interface components should be fixed size and + which variable. Over the last two decades, layouts have been shown to be + the method of choice for achieving this.
+For example:
+f =+figure( 'Position', 200*ones(1,4) ); +vbox =uix.VBox( 'Parent', f ); +axes( 'Parent', vbox ); +hbox =uix.HButtonBox( 'Parent', vbox, 'Padding', 5 ); +uicontrol( 'Parent', hbox, ... + 'String', 'Button 1' ); +uicontrol( 'Parent', hbox, ... + 'String', 'Button 2' ); +set( vbox, 'Heights', [-1 35] )
.+
|
+ Layout hierarchies | +[Top] | +Positioning axes | + |
+
| User_guide | + |
+
2: Positioning axes
+
+
+
+ Unlike other MATLAB user interface components, axes
+ have two position properties: Position and
+ OuterPosition. This means one has some extra
+ options as to how the layout will arrange the axes.
+
Section contents:
+-
+
-
+
-
+
- 2.1. Position vs OuterPosition +
- 2.2. Axes inside layouts +
- 2.3. Colorbars and legends +
+
|
+ Why use layouts? | +[Top] | +Position vs OuterPosition | + |
+
| User_guide | + |
+
+ +
2.1: Position vs OuterPosition
+
+ Typically one
+ would position some axes using their OuterPosition so that the
+ axis labels, title and other annotations are all contained within the
+ specified area. Sometimes, particularly if drawing images, one might want
+ to instead make the axes canvas (the white bit!) fill the specified area.
+ This is done by setting the Position property instead.
+
For example:
++figure+axes( 'Units', 'Normalized', 'OuterPosition', [0 0 1 1] ) +
+figure+axes( 'Units', 'Normalized', 'Position', [0 0 1 1] ) +
+
|
+ Positioning axes | +[Top] | +Axes inside layouts | + |
+
| User_guide | + |
+
+ +
2.2: Axes inside layouts
+
+ (The code for this example can be found here: + [ view + | edit + | run ] + )
+
+ When using layouts to position axes, the position property
+ is set by the layout, not the user. Whether the Position
+ or OuterPosition property is used is determined by the
+ ActivePositionProperty property of the axes.
+ Note that the default setting is "outerposition".
+
+ The following example illustrates the two usages. +
+ +Open a window
+Open a new figure window and remove the toolbar and menus.
+window = figure( 'Name', 'Axes inside layouts', ...
+ 'MenuBar', 'none', ...
+ 'Toolbar', 'none', ...
+ 'NumberTitle', 'off' );
+ Create the layout
+The layout involves two axes side by side. This is done using a flexible horizontal box. The left-hand axes is left with the ActivePositionProperty set to "outerposition", but the right-hand axes is switched to use Position.
hbox =+uix.HBoxFlex('Parent', window, 'Spacing', 3); +axes1 =axes( 'Parent', hbox, ... + 'ActivePositionProperty', 'outerposition' ); +axes2 =axes( 'Parent', hbox, ... + 'ActivePositionProperty', 'Position' ); +set( hbox, 'Widths', [-2 -1] );
Fill the axes
+Using OuterPosition (left-hand axes) is the normal mode and looks good for virtually any plot type. Using Position is only really useful for 2D plots with the axes turned off, such as images.
x = membrane( 1, 15 ); ++surf( axes1, x ); +lighting( axes1, 'gouraud' ); +shading( axes1, 'interp' ); +l =light( 'Parent', axes1 ); +camlight( l, 'head' ); +axis( axes1, 'tight' ); + +imagesc( x, 'Parent', axes2 ); +set( axes2, 'xticklabel', [], 'yticklabel', [] );
+
|
+ Position vs OuterPosition | +[Top] | +Colorbars and legends | + |
+
| User_guide | + |
+
+ +
2.3: Colorbars and legends
+
+ (The code for this example can be found here: + [ view + | edit + | run ] + )
+
+ When using layouts to position axes that can also have a
+ colorbar or legend it is very important to group the axes
+ with its colorbar and legend by putting them inside a uicontainer.
+
+ The following example illustrates this. +
+ +Open a window
+Open a new figure window and remove the toolbar and menus.
+window = figure( 'Name', 'Axes legend and colorbars', ...
+ 'MenuBar', 'none', ...
+ 'Toolbar', 'none', ...
+ 'NumberTitle', 'off' );
+ Create the layout
+The layout involves two axes side by side. Each axes is placed into a uicontainer so that the legend and colorbar are "grouped" with the axes.
+hbox =+uix.HBoxFlex('Parent', window, 'Spacing', 3); +axes1 =axes( 'Parent',uicontainer('Parent', hbox) ); +axes2 =axes( 'Parent',uicontainer('Parent', hbox) );
Add decorations
+Give the first axes a colorbar and the second axes a legend.
++surf( axes1,membrane( 1, 15 ) ); +colorbar( axes1 ); +
+theta = 0:360; +plot( axes2, theta,sind(theta), theta,cosd(theta) ); +legend( axes2, 'sin', 'cos', 'Location', 'NorthWestOutside' );
+
|
+ Axes inside layouts | +[Top] | +Controlling visibility | + |
+
| User_guide | + |
+
3: Controlling visibility
+
+ The examples in this section show the effect of setting the
+ Visible property on a layout object.
Section contents:
+-
+
-
+
-
+
- 3.1. Visible example +
+
|
+ Colorbars and legends | +[Top] | +Visible example | + |
+
| User_guide | + |
+
+ +
3.1: Visible example
+
+ (The code for this example can be found here: + [ view + | edit + | run ] + )
+
+ This example shows how the Visible property can be
+ used to hide whole sections of an interface.
+
fig =+figure( 'Name', 'Visible example', ... + 'Position', [100 100 150 250], ... + 'MenuBar', 'none', ... + 'ToolBar', 'none', ... + 'NumberTitle', 'off' ); +panel =uix.BoxPanel( 'Parent', fig, 'Title', 'Panel' );
box =+uix.VButtonBox( 'Parent', panel ); +uicontrol( 'Parent', box, 'String', 'Button 1' ); +uicontrol( 'Parent', box, 'String', 'Button 2' ); +uicontrol( 'Parent', box, 'String', 'Button 3', 'Visible', 'off' ); +uicontrol( 'Parent', box, 'String', 'Button 4' ); +uicontrol( 'Parent', box, 'String', 'Button 5', 'Visible', 'off' ); +uicontrol( 'Parent', box, 'String', 'Button 6' );
set( panel, 'Visible', 'off' );+
Visible state of each button is remembered.set( panel, 'Visible', 'on' );+
+
|
+ Controlling visibility | +[Top] | +Advanced maneuvers with panels | + |
+
| User_guide | + |
+
4: Advanced maneuvers with panels
+
+
+ The uix.BoxPanel provides some extra buttons
+ and callbacks that can be used to design advanced user-interface
+ layouts. In particular, the sections below illustrate how to create
+ interfaces with context help, and panels that can be minimized or undocked.
+
Section contents:
+-
+
-
+
-
+
- 4.1. Context help +
- 4.2. Minimize and maximize +
- 4.3. Dock and undock +
+
|
+ Visible example | +[Top] | +Context help | + |
+
| User_guide | + |
+
+ +
4.1: Context help
+
+
+ When a uix.BoxPanel has its HelpFcn
+ filled in, a help button (?) is shown in the upper-right of the
+ title-bar. When the user clicks this button the specified function
+ is called.
+
For example:
+f =+figure( 'Name', 'uix.BoxPanel Help Example' ); +b =uix.HBox( 'Parent', f ); +uix.BoxPanel( 'Parent', b, 'Title', 'sin', 'HelpFcn', @(a,b) doc('sin') ); +uix.BoxPanel( 'Parent', b, 'Title', 'cos', 'HelpFcn', @(a,b) doc('cos') ); +uix.BoxPanel( 'Parent', b, 'Title', 'tan', 'HelpFcn', @(a,b) doc('tan') ); +
+
|
+ Advanced maneuvers with panels | +[Top] | +Minimize and maximize | + |
+
| User_guide | + |
+
+ +
4.2: Minimize and maximize
+
+
+ When a uix.BoxPanel has its MinimizeFcn
+ filled in, a minimize/maximize button (â–´/â–¾) is shown in the upper-right of the
+ title-bar. When the user clicks this button the specified function
+ is called. Since the behaviour of the parent container is
+ different in different use-cases, it is up to the user to write
+ some code to actually resize the panel. Note that minimizing
+ a panel to its title-bar only really makes sense inside a
+ uix.VBox or uix.VBoxFlex.
+
The following simple example shows how to add minimize/maximize + functionality to a box full of panels. Save the code into + a file called "minimizeexample.m" to run it.
+ +(The code for this example can be found here: + [ view + | edit + | run ] + )
+ + +Create the layout with three panels
+Open a new figure window and add three panels.
++functionminimizeexample() +width = 200; +pheightmin = 20; +pheightmax = 100; + +% Create the window and main layout+fig =figure('Name','Collapsable GUI example', ... +'NumberTitle','off', ... +'Toolbar','none', ... +'MenuBar','none'); +box =uix.VBox( 'Parent', fig ); + +panel{1} =uix.BoxPanel('Title','Panel 1','Parent', box ); +panel{2} =uix.BoxPanel('Title','Panel 2','Parent', box ); +panel{3} =uix.BoxPanel('Title','Panel 3','Parent', box ); +set( box, 'Heights', pheightmax*ones(1,3) ); + +% Add some contents. +uicontrol('Style','PushButton','String','Button 1','Parent', panel{1} ); +uicontrol('Style','PushButton','String','Button 2','Parent', panel{2} ); +uicontrol('Style','PushButton','String','Button 3','Parent', panel{3} ); + +% Resize the window+pos =get( fig,'Position'); +set( fig,'Position', [pos(1,1:2),width,sum(box.Heights)] );
Add the minimize/maximize callback
+We set each panel to call the same minimize/maximize function. + This function is nested inside the main function so that it has access + to the main function's variables. A better way to do this is to make the +main function into a class, but this nested-function approach is fine +for simple applications.
+Note that as soon as we set the "MinimizeFcn" property the minimize/maximize
+ icon appears in the top-right of each panel. We use a cell-array to pass an
+ extra argument, the panel number, to the minimize function. This extra argument appears after the usual
+ eventSource and eventData arguments.
+% Hook up the minimize callback. +set( panel{1},'MinimizeFcn', {@nMinimize, 1} ); +set( panel{2},'MinimizeFcn', {@nMinimize, 2} ); +set( panel{3},'MinimizeFcn', {@nMinimize, 3} ); + +%-------------------------------------------------------------------------%
+functionnMinimize( eventSource, eventData, whichpanel ) +% A panel has been maximized/minimized+ s =get( box,'Heights'); + pos =get( fig,'Position'); + panel{whichpanel}.Minimized = ~panel{whichpanel}.Minimized; +ifpanel{whichpanel}.Minimized + s(whichpanel) = pheightmin; +else+ s(whichpanel) = pheightmax; +end+set( box,'Heights', s ); + +% Resize the figure, keeping the top stationary+ delta_height = pos(1,4) -sum( box.Heights ); +set( fig,'Position', pos(1,:) + [0 delta_height 0 -delta_height] ); +end% Minimize+ +end% Main function
Click the minimize buttons
+Minimizing the middle panel causes it to shrink to just its + title-bar and the window shrinks accordingly. The + "Minimize" icon is replaced by a "Maximise" icon.
+
Re-maximizing the panel would + cause it to re-appear in full and the window to grow again.
+ + + ++
|
+ Context help | +[Top] | +Dock and undock | + |
+
| User_guide | + |
+
+ +
4.3: Dock and undock
+
+
+
+ When a uix.BoxPanel has its DockFcn
+ filled in, a dock/undock button (↘/↗) is shown in the upper-right of the
+ title-bar. When the user clicks this button the specified function
+ is called. Since re-docking the panel into its previous parent
+ depends on the type of parent, it is up to the user to write
+ some code to actually extract or insert the panel.
+
The following simple example shows how to add dock/undock + functionality to a box full of panels. Save the code into + a file called "dockexample.m" to run it.
+ +(The code for this example can be found here: + [ view + | edit + | run ] + )
+ +Create the layout with three panels
+Open a new figure window and add three panels.
++functiondockexample() +% Create the window and main layout+fig =figure('Name','Dockable GUI example', ... +'NumberTitle','off', ... +'Toolbar','none', ... +'MenuBar','none', ... +'CloseRequestFcn', @nCloseAll ); +box =uix.HBox('Parent', fig ); + +% Add three panels to the box+panel{1} =uix.BoxPanel('Title','Panel 1','Parent', box ); +panel{2} =uix.BoxPanel('Title','Panel 2','Parent', box ); +panel{3} =uix.BoxPanel('Title','Panel 3','Parent', box ); + +% Add some contents
+uicontrol('Style','PushButton','String','Button 1','Parent', panel{1} ); +uicontrol('Style','PushButton','String','Button 2','Parent', panel{2} ); +uicontrol('Style','PushButton','String','Button 3','Parent', panel{3} );
Add the dock/undock callback
+We set each panel to call the same dock/undock function. + This function is nested inside the main function so that it has access + to the main function's variables. A better way to do this is to make the +main function into a class, but this nested-function approach is fine +for simple applications.
+Note that as soon as we set the "DockFcn" property the Dock/Undock
+ icon appears in the top-right of each panel. We use a cell-array to pass an
+ extra argument, the panel number, to the minimize function. This extra argument appears after the usual
+ eventSource and eventData arguments.
% Set the dock/undock callback
+set( panel{1},'DockFcn', {@nDock, 1} ); +set( panel{2},'DockFcn', {@nDock, 2} ); +set( panel{3},'DockFcn', {@nDock, 3} ); + +%-------------------------------------------------------------------------%
+functionnDock( eventSource, eventData, whichpanel ) +% Set the flag+ panel{whichpanel}.IsDocked = ~panel{whichpanel}.IsDocked; +ifpanel{whichpanel}.IsDocked +% Put it back into the layout+ newfig =get( panel{whichpanel},'Parent'); +set( panel{whichpanel},'Parent', box ); +delete( newfig ); +else+% Take it out of the layout+ pos =getpixelposition( panel{whichpanel} ); + newfig =figure( ... +'Name',get( panel{whichpanel},'Title'), ... +'NumberTitle','off', ... +'MenuBar','none', ... +'Toolbar','none', ... +'CloseRequestFcn', {@nDock, whichpanel} ); + figpos =get( newfig,'Position'); +set( newfig,'Position', [figpos(1,1:2), pos(1,3:4)] ); +set( p{whichpanel},'Parent', newfig, ... +'Units','Normalized', ... +'Position', [0 0 1 1] ); +end+end% nDock
Add the close callback
+If the user closes the main window we need to also close any + other windows that were created. This can be done by finding + the window that contains each panel and deleting it.
++%-------------------------------------------------------------------------%
+functionnCloseAll( ~, ~ ) +forii=1:numel( panel ) +ifisvalid( panel{ii} ) && ~strcmpi( panel{ii}.BeingDeleted,'on') + figh =ancestor( panel{ii},'figure'); +delete( figh ); +end+end+ +end% nCloseAll+end% Main function
Click the dock buttons
+Undocking the middle panel causes the other two to fill the + vacated space. The undocked panel appears in its own window, with the + "Undock" icon replaced by a "Dock" icon.
+
.
Re-docking the panel would + cause it to be appended to the right of the list in the original window. Closing the main window + causes all panels, docked or undocked, and their enclosing windows to be closed.
+ + ++
|
+ Minimize and maximize | +[Top] | +Using layouts inside GUIDE GUIs | + |
+
| User_guide | + |
+
5: Using layouts inside GUIDE GUIs
+
+
+ Whilst the layouts in this toolbox do not integrate into the
+ MATLAB Graphical User Interface Design Environment (GUIDE), it
+ is possible to insert layouts into a GUIDE-built GUI as follows:
Create the GUIDE GUI
+Create you GUIDE application as usual, placing a panel where you + want to insert the layout. You can turn the panel border and title + off if you do not want them.
+
Insert the layout
+Edit the "OpeningFcn" in the GUIDE-created code and insert your
+ layout into the panel, making it fill the space. In the example below
+four boxpanels are inserted into a grid, which itself is placed inside
+ uipanel1:
+% --- Executes just before guideApp is made visible.+functionguideApp_OpeningFcn(hObject, eventdata, handles, varargin) + +% Choose default command line output for guideApp+handles.output = hObject; + +% Update handles structure+guidata(hObject, handles); + +% Put a layout in the panel+g =uix.GridFlex('Parent', handles.uipanel1, ... +'Units','Normalized','Position', [0 0 1 1], ... +'Spacing', 5 ); +uix.BoxPanel('Parent', g,'Title','Panel 1'); +uix.BoxPanel('Parent', g,'Title','Panel 2'); +uix.BoxPanel('Parent', g,'Title','Panel 3'); +uix.BoxPanel('Parent', g,'Title','Panel 4'); +g.Heights = [-1 -1];
(Full source code for this application is available here: + [ view + | edit + | run ] + )
+ + + ++
|
+ Dock and undock | +[Top] | +Deploying GUIs using the MATLAB Compiler | + |
+
| User_guide | + |
+
6: Deploying GUIs using the MATLAB Compiler
+
+
+
+ Applications built using these layout tools can be deployed as standalone + executables using the MATLAB Compiler in + the same way as any other MATLAB application. There is, however, one thing to watch out for:
+-
+
- You must explicitly include the "Resources" folder within the +uix package +
Example
+Below is a screen-shot of the deploytool setup
+ used to build the example application.
+ The "Resources" folder from the toolbox has been explicitly added as a
+shared resource so that the mouse-pointers and panel icons continue to work.
+
|
+ Using layouts inside GUIDE GUIs | +[Top] | +A complete example | + |
+
| User_guide | + |
+
7: A complete example
+
+
+
+
+ The following example application uses many of the layout features + discussed above in order to create a good-looking user interface that + scales well when resized. It is not designed to showcase all the + layout functionality, but shows how callbacks are added to provide + user interaction. It also exemplifies separating the data from the GUI, + a fundamental part of creating modular and maintainable applications.
+The full application is available here:
+ + + + + + + + + + + + + + + + + + + +Section contents:
+-
+
-
+
-
+
- 7.1. Application structure +
- 7.2. createInterface +
- 7.3. updateInterface +
- 7.4. onListSelection +
- 7.5. Running it +
- 7.6. Scalability +
+
|
+ Deploying GUIs using the MATLAB Compiler | +[Top] | +Application structure | + |
+
| User_guide | + |
+
+ +
7.1: Application structure
+
+
+ There are many ways to build graphical applications in MATLAB, but + here we will take a very simple approach. If the application were to become +larger and more complex, this approach would be changed to better mitigate + the complexity. Some notes on this are contained at the end.
+ +The application is structured as a single function with callbacks and other helper + functions stored as "nested" subfunctions, i.e. functions inside the main function. This has + the advantage that the nested subfunctions can share access to any variables + declared in the main function. This is also a risk as anything we accidentally + declare in the main function becomes "global" within the application. For that reason + all logic is put into subfunctions and we restrict the main + function to just declaring two shared variables:
+-
+
- data: a structure containing all shared data +
- gui: a structure containing handles to GUI widgets +
+functiondemoBrowser() + +% Declare shared variables+ data = createData(); + gui = createInterface( data.DemoNames ); + +% Now update the GUI with the current data+ updateInterface(); + redrawDemo(); + +% Helper subfunctions. +functiondata = createData() ...end; +functiongui = createInterface(names) ...end; +functionupdateInterface() ...end; +functionredrawDemo() ...end; + +% Callback subfunctions. +functiononMenuSelection() ...end; +functiononListSelection() ...end; +functiononDemoHelp() ...end; +functiononHelp() ...end; +functiononExit() ...end; + +end% Main function+
Note that all of the work is done in subfunctions. Most subfunctions +are callbacks executed when a button is pressed or a menu selected. The four used +at startup are helper functions:
+-
+
- createData: build the structure which contains all application data +
- createInterface: build the user interface +
- updateInterface: update selectors etc in response to a change in the data +
- redrawDemo: redraw the plot part of the interface +
We will not dig into all the subfunctions and callbacks, but instead + concentrate on the GUI creation (createInterface) + and update (updateInterface).
+ +(Full source code for this application is available here: + [ view + | edit + | run ] + )
+ + ++
|
+ A complete example | +[Top] | +createInterface | + |
+
| User_guide | + |
+
+ +
7.2: createInterface
+
+ The interface creation is handled in the createInterface
+ subfunction. This has two distinct sections: menu building and widget arrangement.
+ The menus are built using the standard MATLAB menu building command uimenu,
+ so let's concentrate on the widget arrangement.
The top-level layout is a horizontal arrangement, placing the controls +to the left of the main plot. We make the layout draggable by using the +"flex" variant of HBox, and put a panel in each side. Note that setting the +"HelpFcn" for the view panel adds a small "?" icon for bringing up help. See +here for more details.
+++% Add the contents+mainLayout =uix.HBoxFlex('Parent', gui.Window,'Spacing', 3 ); + +% Create the panels+controlPanel =uix.BoxPanel( ... +'Parent', mainLayout, ... +'Title','Select a demo:'); +gui.ViewPanel =uix.BoxPanel( ... +'Parent', mainLayout, ... +'Title','Viewing: ???', ... +'HelpFcn', @onDemoHelp ); + +% Adjust the main layout
+set( mainLayout,'Widths', [-1,-2] ); +
The controls panel is filled with a vertical layout containing the listbox +and a button. Note the callbacks that are specified for both the list and button. These +both call further subfunctions that are able to access the common "data" and "gui" +shared structures.
+++% Create the controls+controlLayout =uix.VBox('Parent', controlPanel, ... +'Padding', 3,'Spacing', 3 ); +gui.ListBox =uicontrol('Style','list', ... +'BackgroundColor','w', ... +'Parent', controlLayout, ... +'String', demoList(:), ... +'Value', 1, ... +'Callback', @onListSelection); +gui.HelpButton =uicontrol('Style','PushButton', ... +'Parent', controlLayout, ... +'String','Help for <demo>', ... +'Callback', @onDemoHelp ); +set( controlLayout,'Heights', [-1 28] );% Make the list fill the space+
Finally, the view itself is simply an axes placed inside the view panel:
+++% Create the view+gui.ViewAxes =axes('Parent', gui.ViewPanel ); +
(Full source code for this application is available here: + [ view + | edit + | run ] + )
+ + ++
|
+ Application structure | +[Top] | +updateInterface | + |
+
| User_guide | + |
+
+ +
7.3: updateInterface
+
+ The second subfunction we will look at, updateInterface, uses the
+ current selections to update the interface. This uses the structure
+ "data" to update various parts of the interface. For this simple example this just means:
+
1. Update the selected item in the listbox
+set( gui.ListBox, 'Value', data.SelectedDemo );2. Update the help button label
+demoName = data.DemoNames{ data.SelectedDemo };
set( gui.HelpButton, 'String', ['Help for ',demoName] );3. Update the view panel title
+set( gui.ViewPanel,'Title',sprintf('Viewing: %s', demoName ) );
4. Update the ticked menu
+menus =get( gui.ViewMenu,'Children'); +set( menus,'Checked','off'); +% Use the name to work out which menu item should be ticked+whichMenu =strcmpi( demoName,get( menus,'Label') ); +set( menus(whichMenu),'Checked','on'); +
In general, this update function is called whenever the underlying + shared "data" structure is changed. This happens when the user clicks + a button, selects a list item or a menu. Next we will look at a typical + callback.
+(Full source code for this application is available here: + [ view + | edit + | run ] + )
+ + ++
|
+ createInterface | +[Top] | +onListSelection | + |
+
| User_guide | + |
+
+ +
7.4: onListSelection
+
+ Finally, let's have a look at how one of the callbacks works: "onListSelection", the function + that is called when an item is selected in the listbox. The other + callbacks obey the same pattern.
+The basic rule of thumb is that a callback should not update any part of + the user interface directly - it's job is to respond to user interaction by changing the "data" structure. + In this example, each callback changes the underlying data structure + then asks the interface to refresh. This might mean that things update in the +interface that don't need to, but ensures the callbacks remain simple and that all +interface update logic is in one place. Extending this to more granular interface updates + is straightforward. See Scalability for more details.
+For the listbox callback, the "src" argument is a handle to the + listbox and we simply need to update the SelectedDemo field of "data" + to reflect the new selection. We then ask the rest of the interface to + update in response to the change. +
+++% User selected a demo from the list - update "data" and refresh+data.SelectedDemo =get( src,'Value'); +updateInterface(); +redrawDemo();
(Full source code for this application is available here: + [ view + | edit + | run ] + )
+ + ++
|
+ updateInterface | +[Top] | +Running it | + |
+
| User_guide | + |
+
+ +
7.5: Running it
+
+ When the main function is launched (click + here) + it first creates the data, then the GUI, then updates the GUI using the data. At this point the + function exits and control is returned to the command prompt. Note, however, + that the GUI is still onscreen and will still respond to user interaction.
+This works because the "shared" variables in the main function are not cleared when the + function exits. They are only cleared once the GUI is closed. This is a slightly + unusual, but very useful, feature of using nested functions for building + applications.
+For example:
+>> demoBrowser+
(Full source code for this application is available here: + [ view + | edit + | run ] + )
+ + ++
|
+ onListSelection | +[Top] | +Scalability | + |
+
| User_guide | + |
+
+ +
7.6: Scalability
+
+ As applications get bigger the code gets more complex. The simple + application structure used here does not scale well to large applications, + however some small adjustments can make life much better:
+-
+
- Convert the "data" structure into a handle object. This allows + a single "data" object to be shared between mutliple graphical interfaces, and in turn means that the interface + need not be built as a single monolithic entity. +
- Use the events system to trigger updates + to specific parts of the GUI in response to bits of the data object changing. This removes the need + for a single large "UpdateInterface" function and reduces coupling between parts of the interface. For example, + the "SelectedDemo" property would have an associated event such that when it is changed by a callback (or from the command-line) it + notifies other interface components of the change. Each interface component (or group thereof) can + just listen for the events that affect it. +
Advice on how to build large-scale applications is beyond the scope + of this document. If you need help in this area, please contact your MathWorks + account manager who will be able to put you in touch with a technical specialist.
+ + ++
|
+ Running it | +[Top] | +Front page | + |
+
| + GUI Layout Toolbox 2.3.1 + |
Alphabetical index
++
| + Back to Top + |
GUI Layout+ +
Getting Started+
1. What is GUI Layout Toolbox?+
2. Compatibility considerations+
3. Release notes+
4. Installation+
5. Support+
6. Acknowledgements+
+ +
Examples+
+ +
User guide+
1. Understanding layouts+
2. Positioning axes+
3. Controlling visibility+
4. Advanced maneuvers with panels+
5. Using layouts inside GUIDE GUIs+
6. Deploying GUIs using the MATLAB Compiler+
7. A complete example+
+ +
Function reference+
+
Index
+
+
diff --git a/Required packages/layoutdoc/helptoc.xml b/Required packages/layoutdoc/helptoc.xml
new file mode 100644
index 0000000..09e8009
--- /dev/null
+++ b/Required packages/layoutdoc/helptoc.xml
@@ -0,0 +1,12 @@
+
+
+
+
+ 
+ | |||||||||||||||
|
+ + GUI Layout Toolbox documentation+ Version: 2.3.1 ++ GUI Layout Toolbox is a layout manager for creating MATLAB graphical user + interfaces that resize gracefully. The classes supplied can be used in + combination to produce virtually any user interface layout. + + +
+ This toolbox was developed by + David Sampson and + Ben Tordoff from the + Consulting Services group + at MathWorks. + + + Contents:+
|
+
© 2017 The MathWorks Ltd + • Terms of Use + • Patents + • Trademarks
+ + diff --git a/Required packages/layoutdoc/info.xml b/Required packages/layoutdoc/info.xml new file mode 100644 index 0000000..ef78de7 --- /dev/null +++ b/Required packages/layoutdoc/info.xml @@ -0,0 +1,11 @@ +