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 <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> |
---|
47 | fig = <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 ); |
---|
52 | box = <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> |
---|
55 | panel{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 ); |
---|
56 | panel{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 ); |
---|
57 | panel{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 |
---|
70 | main function into a class, but this nested-function approach is fine |
---|
71 | for 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> |
---|
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> |
---|
105 | <a href="matlab:doc end"><code class="FUNCTION">end</code></a> <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> |
---|
119 | <a href="matlab:doc end"><code class="FUNCTION">end</code></a> |
---|
120 | |
---|
121 | <a href="matlab:doc end"><code class="FUNCTION">end</code></a> <code class="COMMENT">% nCloseAll</code> |
---|
122 | <a href="matlab:doc end"><code class="FUNCTION">end</code></a> <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">© 2011 The MathWorks Ltd</font> |
---|
147 | <TT>• </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a> |
---|
148 | <TT>• </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a> |
---|
149 | <TT>• </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a> |
---|
150 | |
---|
151 | </body> |
---|
152 | </html> |
---|
153 | |
---|
154 | |
---|