source: MML/trunk/machine/SOLEIL/common/toolbox/GUILayout/layoutHelp/User guide1_4.html @ 4

Last change on this file since 4 was 4, checked in by zhangj, 10 years ago

Initial import--MML version from SOLEIL@2013
File size: 6.8 KB
Line 
1<html xmlns:saxon="http://icl.com/saxon">
2   <head>
3      <link rel="stylesheet" type="text/css" href="doc.css"/>
4      <link rel="stylesheet" type="text/css" href=""/>
5      <meta author="The MathWorks Ltd."/>
6      <meta copyright="2011 The MathWorks Ltd."/>
7      <title>Layout heirarchies</title>
8   </head>
9
10   
11    <body>
12      <table class="header" width="100%" border="0" cellspacing="0" cellpadding="0">
13         <tr>
14            <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>
15            <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>
16         </tr>
17      </table>
18   
19
20      <br clear="all"/>
21         
22      <h2>1.4: Layout heirarchies&nbsp;<a href="User guide1.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
23     
24                <p>Consider the following simple interface:</p>
25                <center><img src="Images/why_layout1.png"/></center>
26                <p>Instead of thinking of this in terms of three elements that need
27                    positioning, we can break it up into two simple linear ("box") arrangements:
28                    a vertical box with the axes at the top and a control area at the bottom and
29                a horizontal box containing two buttons:</p>
30                <center><img src="Images/why_layout_anno1.png"/>.<img src="Images/why_layout_anno2.png"/></center>
31                <p>By placing the second layout (horizontal box) inside the first (vertical box)
32                    we arrive at the complete layout. Since the sizes of the elements in each list
33                    can be set to be fixed or flexible we can achieve a user-interface that is not just
34                arranged correctly when created, but also behaves well when resized.</p>
35                <center><img src="Images/why_layout2.png"/></center>
36                <p>Note that the buttons have stayed fixed height as the window grows and the
37                axes grow to fill the remaining space.</p>
38               
39               
40<br clear="all"/><hr/><h3 class="hbg"><a name="HeirarchyExample">&nbsp;</a><a name="1.4.1">
41                        &nbsp;</a>1.4.1:
42                        Code:&nbsp;<a href="#Top"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h3>
43                <p>The example above can be created programmically pretty
44                much as described in text
45                (the completed example code is here:
46                [ <a href="Examples/heirarchyexample.m">view</a>
47                | <a href="matlab: edit(fullfile(layoutRoot,'layoutHelp','Examples','heirarchyexample.m'))">edit</a>
48                | <a href="matlab: p=pwd();cd(fullfile(layoutRoot,'layoutHelp','Examples')); heirarchyexample; cd(p)">run</a> ]
49                )</p>
50                <p><b>1. Open a window</b></p>
51                <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>
52                <p><b>2. Create the first layout (vertical box)</b><br/>Inside this vertical box
53            we place the axes</p>
54            <example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">vbox = <a href="uiextras.VBox.html"><code class="FUNCTION">uiextras.VBox</code></a>( 'Parent', f );
55axes( 'Parent', vbox );</font></pre>
56                <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>
57                </example>
58                <p><b>3. Create the second layout (horizontal box)</b><br/>Inside this horizontal box
59            we place two buttons</p>
60<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">hbox = <a href="uiextras.HButtonBox.html"><code class="FUNCTION">uiextras.HButtonBox</code></a>( 'Parent', vbox, 'Padding', 5 );
61<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', hbox, ...
62    'String', 'Button 1' );
63<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', hbox, ...
64    'String', 'Button 2' );</font></pre>
65                <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>
66                </example>
67    <p><b>4. Set the sizes</b><br/>We want the axes to grow with the window so
68    set the first size to be -1 (which means variable size with wieght 1) and the buttons to stay fixed height so set the
69second size to 35 (fixed height of 35 pixels)</p>
70<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">set( vbox, 'Sizes', [-1 35] )</font></pre>
71                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/why_layout1.png"/></center></font></p>
72                </example>
73
74     
75      <br clear="ALL"/>
76      <table class="footer" width="100%" border="0" cellspacing="0" cellpadding="0">
77         <tr>
78            <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>
79            <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>
80            <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>
81            <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>
82            <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>
83         </tr>
84      </table>
85      <font face="Arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">&copy; 2011 The MathWorks Ltd</font>
86      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a>
87      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
88      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
89   
90   </body>
91</html>
92       
Note: See TracBrowser for help on using the repository browser.