Page MenuHomec4science
Files F92650047

User_guide7_2.html
No OneTemporary
Actions

File Metadata

Created
Fri, Nov 22, 09:35

User_guide7_2.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>createInterface</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_guide7_1.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User_guide7_3.html"><IMG SRC="Images/rightarrow.png" BORDER="0" ALT="next page"/></A></td>
</tr>
</table>
<br clear="all"/>
<h2>7.2: createInterface&nbsp;<a href="User_guide7.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
<p>The interface creation is handled in the <code>createInterface</code>
subfunction. This has two distinct sections: menu building and widget arrangement.
The menus are built using the standard MATLAB menu building command <a href="matlab:doc uimenu"><code class="FUNCTION">uimenu</code></a>,
so let's concentrate on the widget arrangement.</p>
<p>The top-level layout is a horizontal arrangement, placing the controls
to the left of the main plot. We make the layout draggable by using the
"flex" variant of HBox, and put a panel in each side. Note that setting the
"HelpFcn" for the view panel adds a small "?" icon for bringing up help. See
<a href="PanelHelp.html">here</a> for more details.</p>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">
<code class="COMMENT">% Add the contents</code>
mainLayout = <a href="uix.HBoxFlex.html"><code class="FUNCTION">uix.HBoxFlex</code></a>( <code class="STRING">'Parent'</code>, gui.Window, <code class="STRING">'Spacing'</code>, 3 );
<code class="COMMENT">% Create the panels</code>
controlPanel = <a href="uix.BoxPanel.html"><code class="FUNCTION">uix.BoxPanel</code></a>( ...
<code class="STRING">'Parent'</code>, mainLayout, ...
<code class="STRING">'Title'</code>, <code class="STRING">'Select a demo:'</code> );
gui.ViewPanel = <a href="uix.BoxPanel.html"><code class="FUNCTION">uix.BoxPanel</code></a>( ...
<code class="STRING">'Parent'</code>, mainLayout, ...
<code class="STRING">'Title'</code>, <code class="STRING">'Viewing: ???'</code>, ...
<code class="STRING">'HelpFcn'</code>, @onDemoHelp );
<code class="COMMENT">% Adjust the main layout</code><br/>
<a href="matlab:doc set"><code class="FUNCTION">set</code></a>( mainLayout, <code class="STRING">'Widths'</code>, [-1,-2] );
</font></pre>
<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/demoBrowser1.png"/></center></font></p>
</example>
<p>The controls panel is filled with a vertical layout containing the listbox
and a button. Note the callbacks that are specified for both the list and button. These
both call further subfunctions that are able to access the common "data" and "gui"
shared structures.</p>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">
<code class="COMMENT">% Create the controls</code>
controlLayout = <a href="uix.VBox.html"><code class="FUNCTION">uix.VBox</code></a>( <code class="STRING">'Parent'</code>, controlPanel, ...
<code class="STRING">'Padding'</code>, 3, <code class="STRING">'Spacing'</code>, 3 );
gui.ListBox = <a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( <code class="STRING">'Style'</code>, <code class="STRING">'list'</code>, ...
<code class="STRING">'BackgroundColor'</code>, <code class="STRING">'w'</code>, ...
<code class="STRING">'Parent'</code>, controlLayout, ...
<code class="STRING">'String'</code>, demoList(:), ...
<code class="STRING">'Value'</code>, 1, ...
<code class="STRING">'Callback'</code>, @onListSelection);
gui.HelpButton = <a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( <code class="STRING">'Style'</code>, <code class="STRING">'PushButton'</code>, ...
<code class="STRING">'Parent'</code>, controlLayout, ...
<code class="STRING">'String'</code>, <code class="STRING">'Help for &lt;demo&gt;'</code>, ...
<code class="STRING">'Callback'</code>, @onDemoHelp );
<a href="matlab:doc set"><code class="FUNCTION">set</code></a>( controlLayout, <code class="STRING">'Heights'</code>, [-1 28] ); <code class="COMMENT">% Make the list fill the space</code>
</font></pre>
<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/demoBrowser2.png"/></center></font></p>
</example>
<p>Finally, the view itself is simply an axes placed inside the view panel:</p>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">
<code class="COMMENT">% Create the view</code>
gui.ViewAxes = <a href="matlab:doc axes"><code class="FUNCTION">axes</code></a>( <code class="STRING">'Parent'</code>, gui.ViewPanel );
</font></pre>
<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/demoBrowser3.png"/></center></font></p>
</example>
<p><small>(Full source code for this application is available here:
[ <a href="Examples/demoBrowser.m">view</a>
| <a href="matlab: edit(fullfile(layoutDocRoot,'Examples','demoBrowser.m'))">edit</a>
| <a href="matlab: p=pwd();cd(fullfile(layoutDocRoot,'Examples')); demoBrowser; cd(p)">run</a> ]
)</small></p>
<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_guide7_1.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_guide7_1.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Application structure</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_guide7_3.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">updateInterface</font></a></td>
<td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User_guide7_3.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>

Event Timeline

c4science · Help