Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F79509030
User_guide1_1.html
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Mon, Aug 26, 20:13
Size
6 KB
Mime Type
text/html
Expires
Wed, Aug 28, 20:13 (2 d)
Engine
blob
Format
Raw Data
Handle
20196513
Attached To
rINSTCONTROL Instrument Control
User_guide1_1.html
View Options
<html
xmlns:saxon=
"http://icl.com/saxon"
>
<head>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"doc.css"
/>
<link
rel=
"stylesheet"
type=
"text/css"
href=
""
/>
<meta
author=
"The MathWorks Ltd."
/>
<meta
copyright=
"2017 The MathWorks Ltd."
/>
<title>
Layout basics
</title>
</head>
<body>
<table
class=
"header"
width=
"100%"
border=
"0"
cellspacing=
"0"
cellpadding=
"0"
>
<tr>
<td
bgcolor=
"#e4f0f8"
><A
href=
"User_guide.html"
><font
face=
"Arial"
bgcolor=
"#e4f0f8"
size=
"+0"
underline=
"0"
color=
"#000000"
><b>
User_guide
</b></font></A></td>
<td
width=
"36"
bgcolor=
"#e4f0f8"
><A
HREF=
"User_guide1.html"
><IMG
SRC=
"Images/leftarrow.png"
BORDER=
"0"
ALT=
"previous page"
/></A><A
HREF=
"User_guide1_2.html"
><IMG
SRC=
"Images/rightarrow.png"
BORDER=
"0"
ALT=
"next page"
/></A></td>
</tr>
</table>
<br
clear=
"all"
/>
<h2>
1.1: Layout basics
<a
href=
"User_guide1.html"
><img
src=
"Images/uparrow.png"
border=
"0"
align=
"top"
alt=
"Go back up one level"
/></a></h2>
<p>
To see how layouts work, let's use the most basic layout,
a horizontal list (or box). We first create a window:
</p>
<example>
<pre
style=
"background-color: #eeeeff; margin-left: 20px; margin-right: 20px"
><font
color=
"#000011"
>
f =
<a
href=
"matlab:doc figure"
><code
class=
"FUNCTION"
>
figure
</code></a>
();
</font></pre>
</example>
<p>
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
<code>
Parent
</code>
property - this will automatically
adjust the list of
<code>
Children
</code>
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:
</p>
<example>
<pre
style=
"background-color: #eeeeff; margin-left: 20px; margin-right: 20px"
><font
color=
"#000011"
>
layout =
<a
href=
"uix.HBox.html"
><code
class=
"FUNCTION"
>
uix.HBox
</code></a>
( 'Parent', f );
</font></pre>
</example>
<p>
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!
</p>
<example>
<pre
style=
"background-color: #eeeeff; margin-left: 20px; margin-right: 20px"
><font
color=
"#000011"
><a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 1', 'Parent', layout );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 2', 'Parent', layout );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 3', 'Parent', layout );
</font></pre>
<p
style=
"background-color: #ddddee; margin-left: 20px; margin-right: 20px"
><font
color=
"#000022"
><center><img
src=
"Images/basics_example2.png"
/>
.
<img
src=
"Images/basics_example3.png"
/>
.
<img
src=
"Images/basics_example4.png"
/></center></font></p>
</example>
<p>
Other layouts work in exactly the same way, although visually
the end-result is quite different:
</p>
<example>
<pre
style=
"background-color: #eeeeff; margin-left: 20px; margin-right: 20px"
><font
color=
"#000011"
>
f =
<a
href=
"matlab:doc figure"
><code
class=
"FUNCTION"
>
figure
</code></a>
();
layout =
<a
href=
"uix.VBox.html"
><code
class=
"FUNCTION"
>
uix.VBox
</code></a>
( 'Parent', f );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 1', 'Parent', layout );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 2', 'Parent', layout );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 3', 'Parent', layout );
</font></pre>
<p
style=
"background-color: #ddddee; margin-left: 20px; margin-right: 20px"
><font
color=
"#000022"
><center><img
src=
"Images/basics_example_vbox.png"
/></center></font></p>
</example>
<example>
<pre
style=
"background-color: #eeeeff; margin-left: 20px; margin-right: 20px"
><font
color=
"#000011"
>
f =
<a
href=
"matlab:doc figure"
><code
class=
"FUNCTION"
>
figure
</code></a>
();
layout =
<a
href=
"uix.TabPanel.html"
><code
class=
"FUNCTION"
>
uix.TabPanel
</code></a>
( 'Parent', f );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 1', 'Parent', layout );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 2', 'Parent', layout );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 3', 'Parent', layout );
</font></pre>
<p
style=
"background-color: #ddddee; margin-left: 20px; margin-right: 20px"
><font
color=
"#000022"
><center><img
src=
"Images/basics_example_tab.png"
/></center></font></p>
</example>
<br
clear=
"ALL"
/>
<table
class=
"footer"
width=
"100%"
border=
"0"
cellspacing=
"0"
cellpadding=
"0"
>
<tr>
<td
width=
"18"
height=
"15"
bgcolor=
"#e4f0f8"
align=
"left"
><a
href=
"User_guide1.html"
><img
src=
"images/leftarrow.png"
border=
"0"
alt=
"previous page"
/></a></td>
<td
width=
"40%"
height=
"15"
bgcolor=
"#e4f0f8"
align=
"left"
><a
href=
"User_guide1.html"
><font
face=
"arial"
bgcolor=
"#e4f0f8"
size=
"normal"
underline=
"0"
color=
"#000000"
>
Understanding layouts
</font></a></td>
<td
width=
"20%"
height=
"15"
bgcolor=
"#e4f0f8"
align=
"center"
><a
href=
"index.html"
><font
face=
"arial"
bgcolor=
"#e4f0f8"
size=
"normal"
underline=
"0"
color=
"#000000"
>
[Top]
</font></a></td>
<td
width=
"40%"
height=
"15"
bgcolor=
"#e4f0f8"
align=
"right"
><a
href=
"User_guide1_2.html"
><font
face=
"arial"
bgcolor=
"#e4f0f8"
size=
"normal"
underline=
"0"
color=
"#000000"
>
Types of layout
</font></a></td>
<td
width=
"18"
height=
"15"
bgcolor=
"#e4f0f8"
align=
"right"
><a
href=
"User_guide1_2.html"
><img
src=
"images/rightarrow.png"
border=
"0"
alt=
"next page"
/></a></td>
</tr>
</table>
<font
face=
"Arial"
bgcolor=
"#e4f0f8"
size=
"normal"
underline=
"0"
color=
"#000000"
>
©
2017 The MathWorks Ltd
</font>
<TT>
•
</TT><a
href=
"matlab: termsOfUse"
>
Terms of Use
</a>
<TT>
•
</TT><a
href=
"matlab: helpview([matlabroot,'/patents.txt'])"
>
Patents
</a>
<TT>
•
</TT><a
href=
"matlab: helpview([matlabroot,'/trademarks.txt'])"
>
Trademarks
</a>
</body>
</html>
Event Timeline
Log In to Comment