Homec4science
Diffusion Instrument Control (master) Browse

rINSTCONTROL/Required packages/layoutdoc/User_guide1_1.html
4a8e2a14fe67master

Last Change
Raw File

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&nbsp;<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">&copy; 2017 The MathWorks Ltd</font>
<TT>&#149; </TT><a href="matlab: termsOfUse">Terms of Use</a>
<TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
<TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
</body>
</html>
c4science · Help