Context Navigation

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

Last change on this file since 4 was 4, checked in by zhangj, 11 years ago
Initial import--MML version from SOLEIL@2013
File size: 7.5 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>Why use layouts?</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_4.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User guide2.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.5: Why use layouts? <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>MATLAB ships with a GUI design tool called <a href="matlab:doc GUIDE"><code class="FUNCTION">GUIDE</code></a>. This
25	doesn't use layouts, but forces users to manually position each element. This approach
26	is a much faster way to build simple user-interfaces, so why would you want to
27	use layouts?</p>
28	<p>The over-riding reason for using layouts or layout managers is
29	to gain control of the resizing behaviour of the interface without
30	having to write a complex "ResizeFcn". If you simply position user-interface elements
31	directly (either using <a href="matlab:doc GUIDE"><code class="FUNCTION">GUIDE</code></a> or programmatically), you
32	have two choices about what happens when the window resizes:
33	</p>
34	<h3>For example:</h3>
35	<para><b>1. The user-interface components scale with the window (normalised units)</b><br/>We didn't really want the buttons to grow but everything resizes in proportion.</para>
36	<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) );
37	<a href="matlab:doc axes"><code class="FUNCTION">axes</code></a>( 'Parent', f, ...
38	'Units', 'Normalized', ...
39	'OuterPosition', [0.02 0.2 0.96 0.8] );
40	<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', f, ...
41	'Units', 'Normalized', ...
42	'Position', [0.02 0.02 0.46 0.16], ...
43	'String', 'Button 1' );
44	<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', f, ...
45	'Units', 'Normalized', ...
46	'Position', [0.52 0.02 0.46 0.16], ...
47	'String', 'Button 2' );</font></pre>
48	<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/why_normalized1.png"/>.<img src="Images/why_normalized2.png"/></center></font></p>
49
50	<para><b>2. The user-interface components stay fixed and the window resize creates empty space (pixel units)</b><br/>Although the buttons don't now grow, neither does the axes, which looks very odd.</para>
51	<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) );
52	<a href="matlab:doc axes"><code class="FUNCTION">axes</code></a>( 'Parent', f, ...
53	'Units', 'Pixels', ...
54	'OuterPosition', [10 35 190 175] );
55	<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', f, ...
56	'Units', 'Pixels', ...
57	'Position', [5 5 90 25], ...
58	'String', 'Button 1' );
59	<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', f, ...
60	'Units', 'Pixels', ...
61	'Position', [105 5 90 25], ...
62	'String', 'Button 2' );</font></pre>
63	<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/why_fixed1.png"/>.<img src="Images/why_fixed2.png"/></center></font></p>
64
65	<p>Neither of these alternatives is particularly useful for a serious
66	user-interface. Typically there are user-interface components that should
67	be fixed size: icons, buttons, selectors etc; and others that should resize
68	with the window: graphs, images, prose text etc. To achieve this one needs
69	to be able to specify which interface components should be fixed size and
70	which variable. Over the last two decades, layouts have been shown to be
71	the method of choice for achieving this.</p>
72	<h3>For example:</h3>
73	<para>Using layouts, some user-interface components scale with the window, others stay fixed</para>
74	<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) );
75	vbox = <a href="uiextras.VBox.html"><code class="FUNCTION">uiextras.VBox</code></a>( 'Parent', f );
76	axes( 'Parent', vbox );
77	hbox = <a href="uiextras.HButtonBox.html"><code class="FUNCTION">uiextras.HButtonBox</code></a>( 'Parent', vbox, 'Padding', 5 );
78	<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', hbox, ...
79	'String', 'Button 1' );
80	<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'Parent', hbox, ...
81	'String', 'Button 2' );
82	set( vbox, 'Sizes', [-1 35] )</font></pre>
83	<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/why_layout1.png"/>.<img src="Images/why_layout2.png"/></center></font></p>
84
85
86
87	<br clear="ALL"/>
88	<table class="footer" width="100%" border="0" cellspacing="0" cellpadding="0">
89	<tr>
90	<td width="18" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide1_4.html"><img src="images/leftarrow.png" border="0" alt="previous page"/></a></td>
91	<td width="40%" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide1_4.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Layout heirarchies</font></a></td>
92	<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>
93	<td width="40%" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide2.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Positioning Axes</font></a></td>
94	<td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide2.html"><img src="images/rightarrow.png" border="0" alt="next page"/></a></td>
95	</tr>
96	</table>
97	<font face="Arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">© 2011 The MathWorks Ltd</font>
98	<TT> </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a>
99	<TT> </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
100	<TT> </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
101
102	</body>
103	</html>
104
105

Note: See TracBrowser for help on using the repository browser.

Download in other formats: