Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F82380476
User_guide1_4.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
Wed, Sep 11, 02:27
Size
6 KB
Mime Type
text/html
Expires
Fri, Sep 13, 02:27 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
20660956
Attached To
rINSTCONTROL Instrument Control
User_guide1_4.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 hierarchies</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_3.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User_guide1_5.html"><IMG SRC="Images/rightarrow.png" BORDER="0" ALT="next page"/></A></td>
</tr>
</table>
<br clear="all"/>
<h2>1.4: Layout hierarchies <a href="User_guide1.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
<p>Consider the following simple interface:</p>
<center><img src="Images/why_layout1.png"/></center>
<p>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:</p>
<center><img src="Images/why_layout_anno1.png"/>.<img src="Images/why_layout_anno2.png"/></center>
<p>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.</p>
<center><img src="Images/why_layout2.png"/></center>
<p>Note that the buttons have stayed fixed height as the window grows and the
axes grow to fill the remaining space.</p>
<br clear="all"/><hr/><h3 class="hbg"><a name="HierarchyExample"> </a><a name="1.4.1">
</a>1.4.1:
Code: <a href="#Top"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h3>
<p>The example above can be created programmically pretty
much as described in text
(the completed example code is here:
[ <a href="Examples/hierarchyexample.m">view</a>
| <a href="matlab: edit(fullfile(layoutDocRoot,'Examples','hierarchyexample.m'))">edit</a>
| <a href="matlab: p=pwd();cd(fullfile(layoutDocRoot,'Examples')); hierarchyexample; cd(p)">run</a> ]
)</p>
<p><b>1. Open a window</b></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>( 'Position', 200*ones(1,4) );</font></pre></example>
<p><b>2. Create the first layout (vertical box)</b><br/>Inside this vertical box
we place the axes</p>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">vbox = <a href="uix.VBox.html"><code class="FUNCTION">uix.VBox</code></a>( 'Parent', f );
axes( 'Parent', vbox );</font></pre>
<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/why_layout0_1.png"/></center></font></p>
</example>
<p><b>3. Create the second layout (horizontal box)</b><br/>Inside this horizontal box
we place two buttons</p>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">hbox = <a href="uix.HButtonBox.html"><code class="FUNCTION">uix.HButtonBox</code></a>( 'Parent', vbox, 'Padding', 5 );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', hbox, ...
'String', 'Button 1' );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', hbox, ...
'String', 'Button 2' );</font></pre>
<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/why_layout0_2.png"/></center></font></p>
</example>
<p><b>4. Set the sizes</b><br/>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)</p>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">set( vbox, 'Heights', [-1 35] )</font></pre>
<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/why_layout1.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_3.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_3.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Sizes and units</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_5.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Why use layouts?</font></a></td>
<td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User_guide1_5.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