Page MenuHomec4science
Files F99251850

User_guide7_1.html
No OneTemporary
Actions

File Metadata

Created
Wed, Jan 22, 19:35

User_guide7_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>Application structure</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.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User_guide7_2.html"><IMG SRC="Images/rightarrow.png" BORDER="0" ALT="next page"/></A></td>
</tr>
</table>
<br clear="all"/>
<h2>7.1: Application structure&nbsp;<a href="User_guide7.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
<p>There are many ways to build graphical applications in MATLAB, but
here we will take a very simple approach. If the application were to become
larger and more complex, this approach would be changed to better mitigate
the complexity. Some notes on this are contained <a href="demoBrowserScalability.html">at the end</a>.</p>
<p>The application is structured as a single function with callbacks and other helper
functions stored as "nested" subfunctions, i.e. functions inside the main function. This has
the advantage that the nested subfunctions can share access to any variables
declared in the main function. This is also a risk as anything we accidentally
declare in the main function becomes "global" within the application. For that reason
<em>all</em> logic is put into subfunctions and we restrict the main
function to just declaring two shared variables:</p>
<ul>
<li><b>data</b>: a structure containing all shared data</li>
<li><b>gui</b>: a structure containing handles to GUI widgets</li>
</ul>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> demoBrowser()
<code class="COMMENT">% Declare shared variables</code>
data = createData();
gui = createInterface( data.DemoNames );
<code class="COMMENT">% Now update the GUI with the current data</code>
updateInterface();
redrawDemo();
<code class="COMMENT">% Helper subfunctions</code>.
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> data = createData() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> gui = createInterface(names) ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> updateInterface() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> redrawDemo() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<code class="COMMENT">% Callback subfunctions</code>.
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> onMenuSelection() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> onListSelection() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> onDemoHelp() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> onHelp() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<a href="matlab:doc function"><code class="FUNCTION">function</code></a> onExit() ... <a href="matlab:doc end"><code class="FUNCTION">end</code></a>;
<a href="matlab:doc end"><code class="FUNCTION">end</code></a> <code class="COMMENT"> % Main function</code>
</font></pre></example>
<p>Note that all of the work is done in subfunctions. Most subfunctions
are callbacks executed when a button is pressed or a menu selected. The four used
at startup are helper functions:</p>
<ul>
<li><b>createData</b>: build the structure which contains all application data</li>
<li><b>createInterface</b>: build the user interface</li>
<li><b>updateInterface</b>: update selectors etc in response to a change in the data</li>
<li><b>redrawDemo</b>: redraw the plot part of the interface</li>
</ul>
<p>We will not dig into all the subfunctions and callbacks, but instead
concentrate on the GUI creation (<a href="demoBrowserCreateInterface.html">createInterface</a>)
and update (<a href="demoBrowserUpdateInterface.html">updateInterface</a>).</p>
<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.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.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">A complete example</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_2.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">createInterface</font></a></td>
<td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User_guide7_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>

Event Timeline

c4science · Help