source: MML/trunk/machine/SOLEIL/common/toolbox/GUILayout/layoutHelp/User guide5_3.html @ 17

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

To have a stable version on the server.
  • Property svn:executable set to *
File size: 13.0 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>Dock and undock</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 guide5_2.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User guide6.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>5.3: Dock and undock&nbsp;<a href="User guide5.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
23     
24       
25        <p>
26            When a <a href="uiextras.BoxPanel.html"><code class="FUNCTION">uiextras.BoxPanel</code></a> has its "DockFcn"
27            filled in, a dock/undock button (<img src="Images/panelDock.png"/> / <img src="Images/panelUndock.png"/>) is shown in the upper-right of the
28            title-bar. When the user clicks this button the specified function
29            is called. Since re-docking the panel into its previous parent
30            depends on the type of parent, it is up to the user to write
31            some code to actually extract or insert the panel.
32        </p>
33             <p>The following simple example shows how to add dock/undock
34                 functionality to a box full of panels. Save the code into
35                 a file called "dockexample.m" to run it.</p>
36                 
37                 <p>(The code for this example can be found here:
38                     [ <a href="Examples/dockexample.m">view</a>
39                     | <a href="matlab: edit(fullfile(layoutRoot,'layoutHelp','Examples','dockexample.m'))">edit</a>
40                     | <a href="matlab: p=pwd();cd(fullfile(layoutRoot,'layoutHelp','Examples')); dockexample; cd(p)">run</a> ]
41                 )</p>
42       
43            <h4>Create the layout with three panels</h4>
44            <p>Open a new figure window and add three panels.</p>
45            <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> dockexample()
46<code class="COMMENT">% Create the window and main layout</code>
47fig = <a href="matlab:doc figure"><code class="FUNCTION">figure</code></a>( <code class="STRING">'Name'</code>, <code class="STRING">'Dockable GUI example'</code>, ...
48              <code class="STRING">'NumberTitle'</code>, <code class="STRING">'off'</code>, ...
49              <code class="STRING">'Toolbar'</code>, <code class="STRING">'none'</code>, ...
50              <code class="STRING">'MenuBar'</code>, <code class="STRING">'none'</code>, ...
51              <code class="STRING">'CloseRequestFcn'</code>, @nCloseAll );
52box = <a href="uiextras.HBox.html"><code class="FUNCTION">uiextras.HBox</code></a>( <code class="STRING">'Parent'</code>, fig );
53
54<code class="COMMENT">% Add three panels to the box</code>
55panel{1} = <a href="uiextras.BoxPanel.html"><code class="FUNCTION">uiextras.BoxPanel</code></a>( <code class="STRING">'Title'</code>, <code class="STRING">'Panel 1'</code>, <code class="STRING">'Parent'</code>, box );
56panel{2} = <a href="uiextras.BoxPanel.html"><code class="FUNCTION">uiextras.BoxPanel</code></a>( <code class="STRING">'Title'</code>, <code class="STRING">'Panel 2'</code>, <code class="STRING">'Parent'</code>, box );
57panel{3} = <a href="uiextras.BoxPanel.html"><code class="FUNCTION">uiextras.BoxPanel</code></a>( <code class="STRING">'Title'</code>, <code class="STRING">'Panel 3'</code>, <code class="STRING">'Parent'</code>, box );
58
59<code class="COMMENT">% Add some contents</code><br/>
60<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( <code class="STRING">'Style'</code>, <code class="STRING">'PushButton'</code>, <code class="STRING">'String'</code>, <code class="STRING">'Button 1'</code>, <code class="STRING">'Parent'</code>, panel{1} );
61<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( <code class="STRING">'Style'</code>, <code class="STRING">'PushButton'</code>, <code class="STRING">'String'</code>, <code class="STRING">'Button 2'</code>, <code class="STRING">'Parent'</code>, panel{2} );
62<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( <code class="STRING">'Style'</code>, <code class="STRING">'PushButton'</code>, <code class="STRING">'String'</code>, <code class="STRING">'Button 3'</code>, <code class="STRING">'Parent'</code>, panel{3} );</font></pre>
63            <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/BoxPanelDockExample1.png"/></center></font></p>
64        </example>
65       
66            <h4>Add the dock/undock callback</h4>
67            <p>We set each panel to call the same dock/undock function.
68        This function is nested inside the main function so that it has access
69    to the main function's variables. A better way to do this is to make the
70main function into a class, but this nested-function approach is fine
71for simple applications.</p>
72            <p>Note that as soon as we set the "DockFcn" property the Dock/Undock
73                icon appears in the top-right of each panel. We use a cell-array to pass an
74            extra argument, the panel number, to the minimize function. This extra argument appears after the usual
75            <code>eventSource</code> and <code>eventData</code> arguments.</p>
76            <example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011"><code class="COMMENT">% Set the dock/undock callback</code><br/>
77<a href="matlab:doc set"><code class="FUNCTION">set</code></a>( panel{1}, <code class="STRING">'DockFcn'</code>, {@nDock, 1} );
78<a href="matlab:doc set"><code class="FUNCTION">set</code></a>( panel{2}, <code class="STRING">'DockFcn'</code>, {@nDock, 2} );
79<a href="matlab:doc set"><code class="FUNCTION">set</code></a>( panel{3}, <code class="STRING">'DockFcn'</code>, {@nDock, 3} );
80
81<code class="COMMENT">%-------------------------------------------------------------------------%</code><br/> 
82    <a href="matlab:doc function"><code class="FUNCTION">function</code></a> nDock( eventSource, eventData, whichpanel )
83        <code class="COMMENT">% Set the flag</code>
84        panel{whichpanel}.IsDocked = ~panel{whichpanel}.IsDocked;
85        <a href="matlab:doc if"><code class="FUNCTION">if</code></a> panel{whichpanel}.IsDocked
86            <code class="COMMENT">% Put it back into the layout</code>
87            newfig = <a href="matlab:doc get"><code class="FUNCTION">get</code></a>( panel{whichpanel}, <code class="STRING">'Parent'</code> );
88            <a href="matlab:doc set"><code class="FUNCTION">set</code></a>( panel{whichpanel}, <code class="STRING">'Parent'</code>, box );
89            <a href="matlab:doc delete"><code class="FUNCTION">delete</code></a>( newfig );
90        <a href="matlab:doc else"><code class="FUNCTION">else</code></a>&nbsp;
91            <code class="COMMENT">% Take it out of the layout</code>
92            pos = <a href="matlab:doc getpixelposition"><code class="FUNCTION">getpixelposition</code></a>( panel{whichpanel} );
93            newfig = <a href="matlab:doc figure"><code class="FUNCTION">figure</code></a>( ...
94                <code class="STRING">'Name'</code>, <a href="matlab:doc get"><code class="FUNCTION">get</code></a>( panel{whichpanel}, <code class="STRING">'Title'</code> ), ...
95                <code class="STRING">'NumberTitle'</code>, <code class="STRING">'off'</code>, ...
96                <code class="STRING">'MenuBar'</code>, <code class="STRING">'none'</code>, ...
97                <code class="STRING">'Toolbar'</code>, <code class="STRING">'none'</code>, ...
98                <code class="STRING">'CloseRequestFcn'</code>, {@nDock, whichpanel} );
99            figpos = <a href="matlab:doc get"><code class="FUNCTION">get</code></a>( newfig, <code class="STRING">'Position'</code> );
100            <a href="matlab:doc set"><code class="FUNCTION">set</code></a>( newfig, <code class="STRING">'Position'</code>, [figpos(1,1:2), pos(1,3:4)] );
101            <a href="matlab:doc set"><code class="FUNCTION">set</code></a>( p{whichpanel}, <code class="STRING">'Parent'</code>, newfig, ...
102                <code class="STRING">'Units'</code>, <code class="STRING">'Normalized'</code>, ...
103                <code class="STRING">'Position'</code>, [0 0 1 1] );
104        <a href="matlab:doc end"><code class="FUNCTION">end</code></a>&nbsp;
105    <a href="matlab:doc end"><code class="FUNCTION">end</code></a>&nbsp;<code class="COMMENT">% nDock</code></font></pre></example>
106
107       
108            <h4>Add the close callback</h4>
109            <p>If the user closes the main window we need to also close any
110            other windows that were created. This can be done by finding
111            the window that contains each panel and deleting it.</p>
112            <example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011"><code class="COMMENT">%-------------------------------------------------------------------------%</code><br/> 
113   <a href="matlab:doc function"><code class="FUNCTION">function</code></a> nCloseAll( ~, ~ )
114      <a href="matlab:doc for"><code class="FUNCTION">for</code></a> ii=1:<a href="matlab:doc numel"><code class="FUNCTION">numel</code></a>( panel )
115         <a href="matlab:doc if"><code class="FUNCTION">if</code></a> <a href="matlab:doc isvalid"><code class="FUNCTION">isvalid</code></a>( panel{ii} ) && ~<a href="matlab:doc strcmpi"><code class="FUNCTION">strcmpi</code></a>( panel{ii}.BeingDeleted, <code class="STRING">'on'</code> )
116            figh = <a href="matlab:doc ancestor"><code class="FUNCTION">ancestor</code></a>( panel{ii}, <code class="STRING">'figure'</code> );
117            <a href="matlab:doc delete"><code class="FUNCTION">delete</code></a>( figh );
118         <a href="matlab:doc end"><code class="FUNCTION">end</code></a>&nbsp;
119      <a href="matlab:doc end"><code class="FUNCTION">end</code></a>&nbsp;
120       
121   <a href="matlab:doc end"><code class="FUNCTION">end</code></a>&nbsp;<code class="COMMENT">% nCloseAll</code>
122<a href="matlab:doc end"><code class="FUNCTION">end</code></a>&nbsp;<code class="COMMENT">% Main function</code></font></pre>
123            <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/BoxPanelDockExample2.png"/></center></font></p>
124        </example>
125       
126            <h4>Click the dock buttons</h4>
127            <p>Undocking the middle panel causes the other two to fill the
128        vacated space. The undocked panel appears in its own window, with the
129    "Undock" icon replaced by a "Dock" icon.</p>
130            <example><p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/BoxPanelDockExample3.png"/>.<img src="Images/BoxPanelDockExample4.png"/></center></font></p></example>
131            <p> Re-docking the panel would
132            cause it to be appended to the right of the list in the original window. Closing the main window
133        causes all panels, docked or undocked, and their enclosing windows to be closed.</p>
134
135     
136      <br clear="ALL"/>
137      <table class="footer" width="100%" border="0" cellspacing="0" cellpadding="0">
138         <tr>
139            <td width="18" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide5_2.html"><img src="images/leftarrow.png" border="0" alt="previous page"/></a></td>
140            <td width="40%" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide5_2.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Minimize and maximize</font></a></td>
141            <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>
142            <td width="40%" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide6.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Using layouts inside GUIDE GUIs</font></a></td>
143            <td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide6.html"><img src="images/rightarrow.png" border="0" alt="next page"/></a></td>
144         </tr>
145      </table>
146      <font face="Arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">&copy; 2011 The MathWorks Ltd</font>
147      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a>
148      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
149      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
150   
151   </body>
152</html>
153
154           
Note: See TracBrowser for help on using the repository browser.