Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F65820060
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
Thu, Jun 6, 10:59
Size
6 KB
Mime Type
text/html
Expires
Sat, Jun 8, 10:59 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
18132241
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