/usr/share/doc/racket/gui/windowing-overview.html is in racket-doc 6.1-4.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>1 Windowing</title><link rel="stylesheet" type="text/css" href="../scribble.css" title="default"/><link rel="stylesheet" type="text/css" href="../racket.css" title="default"/><link rel="stylesheet" type="text/css" href="../manual-style.css" title="default"/><link rel="stylesheet" type="text/css" href="../manual-racket.css" title="default"/><link rel="stylesheet" type="text/css" href="../doc-site.css" title="default"/><script type="text/javascript" src="../scribble-common.js"></script><script type="text/javascript" src="../manual-racket.js"></script><script type="text/javascript" src="../doc-site.js"></script><script type="text/javascript" src="../local-redirect/local-redirect.js"></script><script type="text/javascript" src="../local-redirect/local-user-redirect.js"></script><!--[if IE 6]><style type="text/css">.SIEHidden { overflow: hidden; }</style><![endif]--></head><body id="doc-racket-lang-org"><div class="tocset"><div class="tocview"><div class="tocviewlist tocviewlisttopspace"><div class="tocviewtitle"><table cellspacing="0" cellpadding="0"><tr><td style="width: 1em;"><a href="javascript:void(0);" title="Expand/Collapse" class="tocviewtoggle" onclick="TocviewToggle(this,"tocview_0");">▼</a></td><td></td><td><a href="index.html" class="tocviewlink" data-pltdoc="x">The Racket Graphical Interface Toolkit</a></td></tr></table></div><div class="tocviewsublisttop" style="display: block;" id="tocview_0"><table cellspacing="0" cellpadding="0"><tr><td align="right">1 </td><td><a href="" class="tocviewselflink" data-pltdoc="x">Windowing</a></td></tr><tr><td align="right">2 </td><td><a href="Widget_Gallery.html" class="tocviewlink" data-pltdoc="x">Widget Gallery</a></td></tr><tr><td align="right">3 </td><td><a href="Windowing_Classes.html" class="tocviewlink" data-pltdoc="x">Windowing Classes</a></td></tr><tr><td align="right">4 </td><td><a href="Windowing_Functions.html" class="tocviewlink" data-pltdoc="x">Windowing Functions</a></td></tr><tr><td align="right">5 </td><td><a href="editor-overview.html" class="tocviewlink" data-pltdoc="x">Editors</a></td></tr><tr><td align="right">6 </td><td><a href="Snip_and_Style_Classes.html" class="tocviewlink" data-pltdoc="x">Snip and Style Classes</a></td></tr><tr><td align="right">7 </td><td><a href="Editor_Classes.html" class="tocviewlink" data-pltdoc="x">Editor Classes</a></td></tr><tr><td align="right">8 </td><td><a href="Editor_Functions.html" class="tocviewlink" data-pltdoc="x">Editor Functions</a></td></tr><tr><td align="right">9 </td><td><a href="WXME_Decoding.html" class="tocviewlink" data-pltdoc="x">WXME Decoding</a></td></tr><tr><td align="right">10 </td><td><a href="mredprefs.html" class="tocviewlink" data-pltdoc="x">Preferences</a></td></tr><tr><td align="right">11 </td><td><a href="Dynamic_Loading.html" class="tocviewlink" data-pltdoc="x">Dynamic Loading</a></td></tr><tr><td align="right">12 </td><td><a href="Startup_Actions.html" class="tocviewlink" data-pltdoc="x">Startup Actions</a></td></tr><tr><td align="right">13 </td><td><a href="libs.html" class="tocviewlink" data-pltdoc="x">Platform Dependencies</a></td></tr><tr><td align="right"></td><td><a href="doc-index.html" class="tocviewlink" data-pltdoc="x">Index</a></td></tr></table></div></div><div class="tocviewlist"><table cellspacing="0" cellpadding="0"><tr><td style="width: 1em;"><a href="javascript:void(0);" title="Expand/Collapse" class="tocviewtoggle" onclick="TocviewToggle(this,"tocview_1");">►</a></td><td>1 </td><td><a href="" class="tocviewselflink" data-pltdoc="x">Windowing</a></td></tr></table><div class="tocviewsublistbottom" style="display: none;" id="tocview_1"><table cellspacing="0" cellpadding="0"><tr><td align="right">1.1 </td><td><a href="#%28part._.Creating_.Windows%29" class="tocviewlink" data-pltdoc="x">Creating Windows</a></td></tr><tr><td align="right">1.2 </td><td><a href="#%28part._canvas-drawing%29" class="tocviewlink" data-pltdoc="x">Drawing in Canvases</a></td></tr><tr><td align="right">1.3 </td><td><a href="#%28part._.Core_.Windowing_.Classes%29" class="tocviewlink" data-pltdoc="x">Core Windowing Classes</a></td></tr><tr><td align="right">1.4 </td><td><a href="#%28part._containeroverview%29" class="tocviewlink" data-pltdoc="x">Geometry Management</a></td></tr><tr><td align="right">1.5 </td><td><a href="#%28part._mouseandkey%29" class="tocviewlink" data-pltdoc="x">Mouse and Keyboard Events</a></td></tr><tr><td align="right">1.6 </td><td><a href="#%28part._eventspaceinfo%29" class="tocviewlink" data-pltdoc="x">Event Dispatching and Eventspaces</a></td></tr><tr><td align="right">1.7 </td><td><a href="#%28part._animation%29" class="tocviewlink" data-pltdoc="x">Animation in Canvases</a></td></tr></table></div></div></div><div class="tocsub"><div class="tocsubtitle">On this page:</div><table class="tocsublist" cellspacing="0"><tr><td><span class="tocsublinknumber">1.1<tt> </tt></span><a href="#%28part._.Creating_.Windows%29" class="tocsubseclink" data-pltdoc="x">Creating Windows</a></td></tr><tr><td><span class="tocsublinknumber">1.2<tt> </tt></span><a href="#%28part._canvas-drawing%29" class="tocsubseclink" data-pltdoc="x">Drawing in Canvases</a></td></tr><tr><td><span class="tocsublinknumber">1.3<tt> </tt></span><a href="#%28part._.Core_.Windowing_.Classes%29" class="tocsubseclink" data-pltdoc="x">Core Windowing Classes</a></td></tr><tr><td><span class="tocsublinknumber">1.4<tt> </tt></span><a href="#%28part._containeroverview%29" class="tocsubseclink" data-pltdoc="x">Geometry Management</a></td></tr><tr><td><span class="tocsublinknumber">1.4.1<tt> </tt></span><a href="#%28part._containees%29" class="tocsubseclink" data-pltdoc="x">Containees</a></td></tr><tr><td><span class="tocsublinknumber">1.4.2<tt> </tt></span><a href="#%28part._containers%29" class="tocsubseclink" data-pltdoc="x">Containers</a></td></tr><tr><td><span class="tocsublinknumber">1.4.3<tt> </tt></span><a href="#%28part._new-containers%29" class="tocsubseclink" data-pltdoc="x">Defining New Types of Containers</a></td></tr><tr><td><span class="tocsublinknumber">1.5<tt> </tt></span><a href="#%28part._mouseandkey%29" class="tocsubseclink" data-pltdoc="x">Mouse and Keyboard Events</a></td></tr><tr><td><span class="tocsublinknumber">1.6<tt> </tt></span><a href="#%28part._eventspaceinfo%29" class="tocsubseclink" data-pltdoc="x">Event Dispatching and Eventspaces</a></td></tr><tr><td><span class="tocsublinknumber">1.6.1<tt> </tt></span><a href="#%28part._.Event_.Types_and_.Priorities%29" class="tocsubseclink" data-pltdoc="x">Event Types and Priorities</a></td></tr><tr><td><span class="tocsublinknumber">1.6.2<tt> </tt></span><a href="#%28part._espacethreads%29" class="tocsubseclink" data-pltdoc="x">Eventspaces and Threads</a></td></tr><tr><td><span class="tocsublinknumber">1.6.3<tt> </tt></span><a href="#%28part._currenteventspace%29" class="tocsubseclink" data-pltdoc="x">Creating and Setting the Eventspace</a></td></tr><tr><td><span class="tocsublinknumber">1.6.4<tt> </tt></span><a href="#%28part._evtcontjump%29" class="tocsubseclink" data-pltdoc="x">Continuations and Event Dispatch</a></td></tr><tr><td><span class="tocsublinknumber">1.6.5<tt> </tt></span><a href="#%28part._.Logging%29" class="tocsubseclink" data-pltdoc="x">Logging</a></td></tr><tr><td><span class="tocsublinknumber">1.7<tt> </tt></span><a href="#%28part._animation%29" class="tocsubseclink" data-pltdoc="x">Animation in Canvases</a></td></tr></table></div></div><div class="maincolumn"><div class="main"><div class="navsettop"><span class="navleft"><form class="searchform"><input class="searchbox" style="color: #888;" type="text" value="...search manuals..." title="Enter a search string to search the manuals" onkeypress="return DoSearchKey(event, this, "6.1", "../");" onfocus="this.style.color="black"; this.style.textAlign="left"; if (this.value == "...search manuals...") this.value="";" onblur="if (this.value.match(/^ *$/)) { this.style.color="#888"; this.style.textAlign="center"; this.value="...search manuals..."; }"/></form> <a href="../index.html" title="up to the documentation top" data-pltdoc="x" onclick="return GotoPLTRoot("6.1");">top</a></span><span class="navright"> <a href="index.html" title="backward to "The Racket Graphical Interface Toolkit"" data-pltdoc="x">← prev</a> <a href="index.html" title="up to "The Racket Graphical Interface Toolkit"" data-pltdoc="x">up</a> <a href="Widget_Gallery.html" title="forward to "2 Widget Gallery"" data-pltdoc="x">next →</a></span> </div><h3 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""windowing-overview"">1<tt> </tt><a name="(part._windowing-overview)"></a>Windowing</h3><p>The windowing toolbox provides the basic building blocks of GUI
programs, including frames (top-level windows), modal dialogs, menus,
buttons, check boxes, text fields, and radio buttons—<wbr></wbr>all as
classes.</p><blockquote class="refpara"><blockquote class="refcolumn"><blockquote class="refcontent"><p>See <a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=guide&rel=classes.html&version=6.1" class="Sq" data-pltdoc="x">Classes and Objects</a> for an introduction to classes and
interfaces in Racket.</p></blockquote></blockquote></blockquote><h4 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""Creating_Windows"">1.1<tt> </tt><a name="(part._.Creating_.Windows)"></a>Creating Windows</h4><p>To create a new top-level window, instantiate the <span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span>
class:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Make a frame by instantiating the </span><span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span><span class="RktCmt"> class</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">frame</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Example"</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Show the frame by calling its </span><span class="RktSym"><a href="top-level-window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._top-level-window~3c~25~3e%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span><span class="RktCmt"> method</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">frame</span><span class="hspace"> </span><span class="RktSym"><a href="top-level-window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._top-level-window~3c~25~3e%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span><span class="hspace"> </span><span class="RktVal">#t</span><span class="RktPn">)</span></td></tr></table></blockquote><p>The built-in classes provide various mechanisms for handling GUI
events. For example, when instantiating the <span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span> class,
supply an event callback procedure to be invoked
when the user clicks the button. The following example program
creates a frame with a text message and a button; when the user
clicks the button, the message changes:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Make a frame by instantiating the </span><span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span><span class="RktCmt"> class</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">frame</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Example"</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Make a static text message in the frame</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">msg</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="message_.html" class="RktValLink" data-pltdoc="x">message%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">frame</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"No events so far..."</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Make a button in the frame</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">frame</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Click Me"</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Callback procedure for a button click:</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">callback</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=lambda.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._lambda%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">lambda</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">button</span><span class="hspace"> </span><span class="RktSym">event</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">msg</span><span class="hspace"> </span><span class="RktSym"><a href="message_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._message~25%29._set-label%29%29" class="RktValLink" data-pltdoc="x">set-label</a></span><span class="hspace"> </span><span class="RktVal">"Button click"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Show the frame by calling its </span><span class="RktSym">show</span><span class="RktCmt"> method</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">frame</span><span class="hspace"> </span><span class="RktSym"><a href="top-level-window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._top-level-window~3c~25~3e%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span><span class="hspace"> </span><span class="RktVal">#t</span><span class="RktPn">)</span></td></tr></table></blockquote><p>Programmers never implement the GUI event loop directly. Instead, the
windowing system automatically pulls each event from an internal queue and
dispatches the event to an appropriate window. The dispatch invokes
the window’s callback procedure or calls one of the window’s
methods. In the above program, the windowing system automatically invokes the
button’s callback procedure whenever the user clicks <span class="ssansserif">Click
Me</span>.</p><p>If a window receives multiple kinds of events, the events are
dispatched to methods of the window’s class instead of to a callback
procedure. For example, a drawing canvas receives update events,
mouse events, keyboard events, and sizing events; to handle them,
derive a new class from the built-in
<span class="RktSym"><a href="canvas_.html" class="RktValLink" data-pltdoc="x">canvas%</a></span> class and override the event-handling methods. The
following expression extends the frame created above with a canvas
that handles mouse and keyboard events:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Derive a new canvas (a drawing window) class to handle events</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">my-canvas%</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=createclass.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._class%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">class</a></span><span class="hspace"> </span><span class="RktSym"><a href="canvas_.html" class="RktValLink" data-pltdoc="x">canvas%</a></span><span class="hspace"> </span><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">The base class is </span><span class="RktSym"><a href="canvas_.html" class="RktValLink" data-pltdoc="x">canvas%</a></span></td></tr><tr><td><span class="hspace"> </span><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Define overriding method to handle mouse events</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=createclass.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._define%252Foverride%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define/override</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._on-event%29%29" class="RktValLink" data-pltdoc="x">on-event</a></span><span class="hspace"> </span><span class="RktSym">event</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">msg</span><span class="hspace"> </span><span class="RktSym"><a href="message_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._message~25%29._set-label%29%29" class="RktValLink" data-pltdoc="x">set-label</a></span><span class="hspace"> </span><span class="RktVal">"Canvas mouse"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Define overriding method to handle keyboard events</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=createclass.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._define%252Foverride%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define/override</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._on-char%29%29" class="RktValLink" data-pltdoc="x">on-char</a></span><span class="hspace"> </span><span class="RktSym">event</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">msg</span><span class="hspace"> </span><span class="RktSym"><a href="message_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._message~25%29._set-label%29%29" class="RktValLink" data-pltdoc="x">set-label</a></span><span class="hspace"> </span><span class="RktVal">"Canvas keyboard"</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Call the superclass init, passing on all init args</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._super-new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">super-new</a></span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Make a canvas that handles events in the frame</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym">my-canvas%</span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">frame</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr></table></blockquote><p>After running the above code, manually resize the frame to see the
new canvas. Moving the cursor over the canvas calls the canvas’s
<span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._on-event%29%29" class="RktValLink" data-pltdoc="x">on-event</a></span> method with an object representing a
motion event. Clicking on the canvas calls <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._on-event%29%29" class="RktValLink" data-pltdoc="x">on-event</a></span>. While the canvas has the keyboard focus, typing on the
keyboard invokes the canvas’s <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._on-char%29%29" class="RktValLink" data-pltdoc="x">on-char</a></span> method.</p><p>The windowing system dispatches GUI events sequentially; that is, after invoking
an event-handling callback or method, the windowing system waits until the
handler returns before dispatching the next event. To illustrate the
sequential nature of events, extend the frame again, adding a
<span class="ssansserif">Pause</span> button:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">frame</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Pause"</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">callback</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=lambda.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._lambda%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">lambda</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">button</span><span class="hspace"> </span><span class="RktSym">event</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=threads.html%23%2528def._%2528%2528quote._%7E23%7E25kernel%2529._sleep%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">sleep</a></span><span class="hspace"> </span><span class="RktVal">5</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr></table></blockquote><p>After the user clicks <span class="ssansserif">Pause</span>, the entire frame becomes
unresponsive for five seconds; the windowing system cannot dispatch more events
until the call to <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=threads.html%23%2528def._%2528%2528quote._%7E23%7E25kernel%2529._sleep%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">sleep</a></span> returns. For more information about
event dispatching, see <a href="#%28part._eventspaceinfo%29" data-pltdoc="x">Event Dispatching and Eventspaces</a>.</p><p>In addition to dispatching events, the GUI classes also handle the
graphical layout of windows. Our example frame demonstrates a simple
layout; the frame’s elements are lined up top-to-bottom. In general,
a programmer specifies the layout of a window by assigning each GUI
element to a parent <a href="#%28tech._container%29" class="techoutside" data-pltdoc="x"><span class="techinside">container</span></a>. A vertical container, such
as a frame, arranges its children in a column, and a horizontal
container arranges its children in a row. A container can be a child
of another container; for example, to place two buttons side-by-side
in our frame, create a horizontal panel for the new buttons:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">panel</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="horizontal-panel_.html" class="RktValLink" data-pltdoc="x">horizontal-panel%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">frame</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">panel</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Left"</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">callback</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=lambda.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._lambda%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">lambda</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">button</span><span class="hspace"> </span><span class="RktSym">event</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">msg</span><span class="hspace"> </span><span class="RktSym"><a href="message_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._message~25%29._set-label%29%29" class="RktValLink" data-pltdoc="x">set-label</a></span><span class="hspace"> </span><span class="RktVal">"Left click"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">panel</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Right"</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">callback</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=lambda.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._lambda%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">lambda</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">button</span><span class="hspace"> </span><span class="RktSym">event</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">msg</span><span class="hspace"> </span><span class="RktSym"><a href="message_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._message~25%29._set-label%29%29" class="RktValLink" data-pltdoc="x">set-label</a></span><span class="hspace"> </span><span class="RktVal">"Right click"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr></table></blockquote><p>For more information about window layout and containers, see
<a href="#%28part._containeroverview%29" data-pltdoc="x">Geometry Management</a>.</p><h4 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""canvas-drawing"">1.2<tt> </tt><a name="(part._canvas-drawing)"></a>Drawing in Canvases</h4><p>The content of a canvas is determined by its <span class="RktSym"><a href="canvas_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~25%29._on-paint%29%29" class="RktValLink" data-pltdoc="x">on-paint</a></span>
method, where the default <span class="RktSym"><a href="canvas_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~25%29._on-paint%29%29" class="RktValLink" data-pltdoc="x">on-paint</a></span> calls the
<span class="RktSym">paint-callback</span> function that is supplied when the canvas is
created. The <span class="RktSym"><a href="canvas_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~25%29._on-paint%29%29" class="RktValLink" data-pltdoc="x">on-paint</a></span> method receives no arguments
and uses the canvas’s <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._get-dc%29%29" class="RktValLink" data-pltdoc="x">get-dc</a></span> method to obtain a
<a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=draw&rel=overview.html%23%2528tech._drawing._context%2529&version=6.1" class="techoutside Sq" data-pltdoc="x"><span class="techinside">drawing context</span></a>
(DC) for drawing; the default <span class="RktSym"><a href="canvas_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~25%29._on-paint%29%29" class="RktValLink" data-pltdoc="x">on-paint</a></span> method passes
the canvas and this DC on to the <span class="RktSym">paint-callback</span> function.
Drawing operations of the <span class="RktSym">racket/draw</span> toolbox on the DC are
reflected in the content of the canvas onscreen.</p><p>For example, the following program creates a canvas
that displays large, friendly letters:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">frame</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Example"</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">width</span><span class="hspace"> </span><span class="RktVal">300</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">height</span><span class="hspace"> </span><span class="RktVal">300</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="canvas_.html" class="RktValLink" data-pltdoc="x">canvas%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">frame</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">paint-callback</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=lambda.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._lambda%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">lambda</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">canvas</span><span class="hspace"> </span><span class="RktSym">dc</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">dc</span><span class="hspace"> </span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=draw&rel=dc___.html%23%2528meth._%2528%2528%2528lib._racket%252Fdraw..rkt%2529._dc%7E3c%7E25%7E3e%2529._set-scale%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">set-scale</a></span><span class="hspace"> </span><span class="RktVal">3</span><span class="hspace"> </span><span class="RktVal">3</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">dc</span><span class="hspace"> </span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=draw&rel=dc___.html%23%2528meth._%2528%2528%2528lib._racket%252Fdraw..rkt%2529._dc%7E3c%7E25%7E3e%2529._set-text-foreground%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">set-text-foreground</a></span><span class="hspace"> </span><span class="RktVal">"blue"</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">dc</span><span class="hspace"> </span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=draw&rel=dc___.html%23%2528meth._%2528%2528%2528lib._racket%252Fdraw..rkt%2529._dc%7E3c%7E25%7E3e%2529._draw-text%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">draw-text</a></span><span class="hspace"> </span><span class="RktVal">"Don't Panic!"</span><span class="hspace"> </span><span class="RktVal">0</span><span class="hspace"> </span><span class="RktVal">0</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">frame</span><span class="hspace"> </span><span class="RktSym"><a href="top-level-window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._top-level-window~3c~25~3e%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span><span class="hspace"> </span><span class="RktVal">#t</span><span class="RktPn">)</span></td></tr></table></blockquote><p>The background color of a canvas can be set through the
<span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._set-canvas-background%29%29" class="RktValLink" data-pltdoc="x">set-canvas-background</a></span> method. To make the canvas
transparent (so that it takes on its parent’s color and texture as its
initial content), supply <span class="RktVal">'</span><span class="RktVal">transparent</span> in the <span class="RktSym">style</span>
argument when creating the canvas.</p><p>See <a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=draw&rel=overview.html&version=6.1" class="Sq" data-pltdoc="x">Overview</a> in
<a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=draw&rel=index.html&version=6.1" class="Sq" data-pltdoc="x">The Racket Drawing Toolkit</a> for an overview of
drawing with the <span class="RktSym">racket/draw</span> library. For more advanced
information on canvas drawing, see <a href="#%28part._animation%29" data-pltdoc="x">Animation in Canvases</a>.</p><h4 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""Core_Windowing_Classes"">1.3<tt> </tt><a name="(part._.Core_.Windowing_.Classes)"></a>Core Windowing Classes</h4><p>The fundamental graphical element in the windowing toolbox is an
<a name="(tech._area)"></a><span style="font-style: italic">area</span>. The following classes implement the different types
of areas in the windowing toolbox:</p><ul><li><p><a name="(tech._container)"></a><span style="font-style: italic">Containers</span> —<wbr></wbr> areas that can
contain other areas:</p><ul><li><p><span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span> —<wbr></wbr> a <a name="(tech._frame)"></a><span style="font-style: italic">frame</span> is a top-level window
that the user can move and resize.</p></li><li><p><span class="RktSym"><a href="dialog_.html" class="RktValLink" data-pltdoc="x">dialog%</a></span> —<wbr></wbr> a <a name="(tech._dialog)"></a><span style="font-style: italic">dialog</span> is a modal top-level
window; when a dialog is shown, other top-level windows are disabled
until the dialog is dismissed.</p></li><li><p><span class="RktSym"><a href="panel_.html" class="RktValLink" data-pltdoc="x">panel%</a></span> —<wbr></wbr> a <a name="(tech._panel)"></a><span style="font-style: italic">panel</span> is a subcontainer
within a container. The toolbox provides three subclasses of
<span class="RktSym"><a href="panel_.html" class="RktValLink" data-pltdoc="x">panel%</a></span>: <span class="RktSym"><a href="vertical-panel_.html" class="RktValLink" data-pltdoc="x">vertical-panel%</a></span>,
<span class="RktSym"><a href="horizontal-panel_.html" class="RktValLink" data-pltdoc="x">horizontal-panel%</a></span>, and <span class="RktSym"><a href="tab-panel_.html" class="RktValLink" data-pltdoc="x">tab-panel%</a></span>.</p></li><li><p><span class="RktSym"><a href="pane_.html" class="RktValLink" data-pltdoc="x">pane%</a></span> —<wbr></wbr> a <a name="(tech._pane)"></a><span style="font-style: italic">pane</span> is a lightweight panel.
It has no graphical representation or event-handling capabilities.
The <span class="RktSym"><a href="pane_.html" class="RktValLink" data-pltdoc="x">pane%</a></span> class has three subclasses:
<span class="RktSym"><a href="vertical-pane_.html" class="RktValLink" data-pltdoc="x">vertical-pane%</a></span>, <span class="RktSym"><a href="horizontal-pane_.html" class="RktValLink" data-pltdoc="x">horizontal-pane%</a></span>, and
<span class="RktSym"><a href="grow-box-spacer-pane_.html" class="RktValLink" data-pltdoc="x">grow-box-spacer-pane%</a></span>.</p></li></ul></li><li><p><a name="(tech._containee)"></a><span style="font-style: italic">Containees</span> —<wbr></wbr> areas that must be
contained within other areas:</p><ul><li><p><span class="RktSym"><a href="panel_.html" class="RktValLink" data-pltdoc="x">panel%</a></span> —<wbr></wbr> a panel is a containee as well as
a container.</p></li><li><p><span class="RktSym"><a href="pane_.html" class="RktValLink" data-pltdoc="x">pane%</a></span> —<wbr></wbr> a pane is a containee as well as a
container.</p></li><li><p><span class="RktSym"><a href="canvas_.html" class="RktValLink" data-pltdoc="x">canvas%</a></span> —<wbr></wbr> a <a name="(tech._canva)"></a><span style="font-style: italic">canvas</span> is a subwindow for
drawing on the screen.</p></li><li><p><span class="RktSym"><a href="editor-canvas_.html" class="RktValLink" data-pltdoc="x">editor-canvas%</a></span> —<wbr></wbr> an <a name="(tech._editor._canva)"></a><span style="font-style: italic">editor canvas</span> is a
subwindow for displaying a text editor or pasteboard editor. The
<span class="RktSym"><a href="editor-canvas_.html" class="RktValLink" data-pltdoc="x">editor-canvas%</a></span> class is documented with the editor classes
in <a href="editor-overview.html" data-pltdoc="x">Editors</a>.</p></li><li><p><a name="(tech._control)"></a><span style="font-style: italic">Controls</span> —<wbr></wbr> containees that the user can manipulate:</p><ul><li><p><span class="RktSym"><a href="message_.html" class="RktValLink" data-pltdoc="x">message%</a></span> —<wbr></wbr> a <a name="(tech._message)"></a><span style="font-style: italic">message</span> is a static
text field or bitmap with no user interaction.</p></li><li><p><span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span> —<wbr></wbr> a <a name="(tech._button)"></a><span style="font-style: italic">button</span> is a clickable
control.</p></li><li><p><span class="RktSym"><a href="check-box_.html" class="RktValLink" data-pltdoc="x">check-box%</a></span> —<wbr></wbr> a <a name="(tech._check._box)"></a><span style="font-style: italic">check box</span> is a
clickable control; the user clicks the control to set or remove
its check mark.</p></li><li><p><span class="RktSym"><a href="radio-box_.html" class="RktValLink" data-pltdoc="x">radio-box%</a></span> —<wbr></wbr> a <a name="(tech._radio._box)"></a><span style="font-style: italic">radio box</span> is a
collection of mutually exclusive <a name="(tech._radio._button)"></a><span style="font-style: italic">radio buttons</span>; when the
user clicks a radio button, it is selected and the radio box’s
previously selected radio button is deselected.</p></li><li><p><span class="RktSym"><a href="choice_.html" class="RktValLink" data-pltdoc="x">choice%</a></span> —<wbr></wbr> a <a name="(tech._choice._item)"></a><span style="font-style: italic">choice item</span> is a pop-up
menu of text choices; the user selects one item in the control.</p></li><li><p><span class="RktSym"><a href="list-box_.html" class="RktValLink" data-pltdoc="x">list-box%</a></span> —<wbr></wbr> a <a name="(tech._list._box)"></a><span style="font-style: italic">list box</span> is a
scrollable lists of text choices; the user selects one or more
items in the list (depending on the style of the list box).</p></li><li><p><span class="RktSym"><a href="text-field_.html" class="RktValLink" data-pltdoc="x">text-field%</a></span> —<wbr></wbr> a <a name="(tech._text._field)"></a><span style="font-style: italic">text field</span> is a box
for simple text entry.</p></li><li><p><span class="RktSym"><a href="combo-field_.html" class="RktValLink" data-pltdoc="x">combo-field%</a></span> —<wbr></wbr> a <a name="(tech._combo._field)"></a><span style="font-style: italic">combo field</span> combines
a text field with a pop-up menu of choices.</p></li><li><p><span class="RktSym"><a href="slider_.html" class="RktValLink" data-pltdoc="x">slider%</a></span> —<wbr></wbr> a <a name="(tech._slider)"></a><span style="font-style: italic">slider</span> is a dragable
control that selects an integer value within a fixed range.</p></li><li><p><span class="RktSym"><a href="gauge_.html" class="RktValLink" data-pltdoc="x">gauge%</a></span> —<wbr></wbr> a <a name="(tech._gauge)"></a><span style="font-style: italic">gauge</span> is an output-only
control (the user cannot change the value) for reporting an integer
value within a fixed range.</p></li></ul></li></ul></li></ul><p>As suggested by the above listing, certain <a href="#%28tech._area%29" class="techoutside" data-pltdoc="x"><span class="techinside">areas</span></a>, called
<a href="#%28tech._container%29" class="techoutside" data-pltdoc="x"><span class="techinside">containers</span></a>, manage certain other areas, called
<a href="#%28tech._containee%29" class="techoutside" data-pltdoc="x"><span class="techinside">containees</span></a>. Some areas, such as panels, are both
<a href="#%28tech._container%29" class="techoutside" data-pltdoc="x"><span class="techinside">containers</span></a> and <a href="#%28tech._containee%29" class="techoutside" data-pltdoc="x"><span class="techinside">containees</span></a>.</p><p>Most areas are <a name="(tech._window)"></a><span style="font-style: italic">windows</span>, but some are
<a name="(tech._non._window)"></a><span style="font-style: italic">non-windows</span>. A <a href="#%28tech._window%29" class="techoutside" data-pltdoc="x"><span class="techinside">window</span></a>, such as a <a href="#%28tech._panel%29" class="techoutside" data-pltdoc="x"><span class="techinside">panel</span></a>, has a
graphical representation, receives keyboard and mouse events, and can
be disabled or hidden. In contrast, a <a href="#%28tech._non._window%29" class="techoutside" data-pltdoc="x"><span class="techinside">non-window</span></a>, such as a
<a href="#%28tech._pane%29" class="techoutside" data-pltdoc="x"><span class="techinside">pane</span></a>, is useful only for geometry management; a
<a href="#%28tech._non._window%29" class="techoutside" data-pltdoc="x"><span class="techinside">non-window</span></a> does not receive mouse events, and it cannot be
disabled or hidden.</p><p>Every <a href="#%28tech._area%29" class="techoutside" data-pltdoc="x"><span class="techinside">area</span></a> is an instance of the <span class="RktSym"><a href="area___.html" class="RktValLink" data-pltdoc="x">area<%></a></span>
interface. Each <a href="#%28tech._container%29" class="techoutside" data-pltdoc="x"><span class="techinside">container</span></a> is also an instance of the
<span class="RktSym"><a href="area-container___.html" class="RktValLink" data-pltdoc="x">area-container<%></a></span> interface, whereas each <a href="#%28tech._containee%29" class="techoutside" data-pltdoc="x"><span class="techinside">containee</span></a>
is an instance of <span class="RktSym"><a href="subarea___.html" class="RktValLink" data-pltdoc="x">subarea<%></a></span>. <a href="#%28tech._window%29" class="techoutside" data-pltdoc="x"><span class="techinside">Windows</span></a> are instances
of <span class="RktSym"><a href="window___.html" class="RktValLink" data-pltdoc="x">window<%></a></span>. The <span class="RktSym"><a href="area-container___.html" class="RktValLink" data-pltdoc="x">area-container<%></a></span>,
<span class="RktSym"><a href="subarea___.html" class="RktValLink" data-pltdoc="x">subarea<%></a></span>, and <span class="RktSym"><a href="window___.html" class="RktValLink" data-pltdoc="x">window<%></a></span> interfaces are
subinterfaces of <span class="RktSym"><a href="area___.html" class="RktValLink" data-pltdoc="x">area<%></a></span>.</p><p>The following diagram shows more of the type hierarchy under
<span class="RktSym"><a href="area___.html" class="RktValLink" data-pltdoc="x">area<%></a></span>:</p><p><table cellspacing="0" cellpadding="0"><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="area___.html" class="RktValLink" data-pltdoc="x">area<%></a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">______________________|_______________</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="subarea___.html" class="RktValLink" data-pltdoc="x">subarea<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="window___.html" class="RktValLink" data-pltdoc="x">window<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="area-container___.html" class="RktValLink" data-pltdoc="x">area-container<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|____</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">_______|__________</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="subwindow___.html" class="RktValLink" data-pltdoc="x">subwindow<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="area-container-window___.html" class="RktValLink" data-pltdoc="x">area-container-window<%></a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">________|________</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="control___.html" class="RktValLink" data-pltdoc="x">control<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="canvas___.html" class="RktValLink" data-pltdoc="x">canvas<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="top-level-window___.html" class="RktValLink" data-pltdoc="x">top-level-window<%></a></span><span class="stt"></span></p></td></tr></table></p><p>The diagram below extends the one above to show the complete type
hierarchy under <span class="RktSym"><a href="area___.html" class="RktValLink" data-pltdoc="x">area<%></a></span>. (Some of the types are represented
by interfaces, and some types are represented by classes. In
principle, every area type should be represented by an interface, but
whenever the windowing toolbox provides a concrete implementation,
the corresponding interface is omitted from the toolbox.) To avoid
intersecting lines, the hierarchy is drawn for a cylindrical surface;
lines from <span class="RktSym"><a href="subarea___.html" class="RktValLink" data-pltdoc="x">subarea<%></a></span> and <span class="RktSym"><a href="subwindow___.html" class="RktValLink" data-pltdoc="x">subwindow<%></a></span> wrap from
the left edge of the diagram to the right edge.</p><p><table cellspacing="0" cellpadding="0"><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="area___.html" class="RktValLink" data-pltdoc="x">area<%></a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">_____________________|_______________</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="subarea___.html" class="RktValLink" data-pltdoc="x">subarea<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="window___.html" class="RktValLink" data-pltdoc="x">window<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="area-container___.html" class="RktValLink" data-pltdoc="x">area-container<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="RktSym"><</span><span class="stt"></span><span class="RktSym"><</span><span class="stt"></span><span class="RktSym"><</span><span class="stt">____|____</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">_____|__________</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">__|___</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">___________________</span><span class="RktSym"><</span><span class="stt"></span><span class="RktSym"><</span><span class="stt"></span><span class="RktSym"><</span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="subwindow___.html" class="RktValLink" data-pltdoc="x">subwindow<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="RktSym"><</span><span class="stt"></span><span class="RktSym"><</span><span class="stt"></span><span class="RktSym"><</span><span class="stt">______________|___________</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">_</span><span class="RktSym"><</span><span class="stt"></span><span class="RktSym"><</span><span class="stt"></span><span class="RktSym"><</span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="pane_.html" class="RktValLink" data-pltdoc="x">pane%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="control___.html" class="RktValLink" data-pltdoc="x">control<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="horizontal-pane_.html" class="RktValLink" data-pltdoc="x">horizontal-pane%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="message_.html" class="RktValLink" data-pltdoc="x">message%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="vertical-pane_.html" class="RktValLink" data-pltdoc="x">vertical-pane%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="check-box_.html" class="RktValLink" data-pltdoc="x">check-box%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="area-container-window___.html" class="RktValLink" data-pltdoc="x">area-container-window<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="slider_.html" class="RktValLink" data-pltdoc="x">slider%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="gauge_.html" class="RktValLink" data-pltdoc="x">gauge%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">__________________|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="text-field_.html" class="RktValLink" data-pltdoc="x">text-field%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="combo-field_.html" class="RktValLink" data-pltdoc="x">combo-field%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">--------</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="panel_.html" class="RktValLink" data-pltdoc="x">panel%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="radio-box_.html" class="RktValLink" data-pltdoc="x">radio-box%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="horizontal-panel_.html" class="RktValLink" data-pltdoc="x">horizontal-panel%</a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="list-control___.html" class="RktValLink" data-pltdoc="x">list-control<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="vertical-panel_.html" class="RktValLink" data-pltdoc="x">vertical-panel%</a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="choice_.html" class="RktValLink" data-pltdoc="x">choice%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="tab-panel_.html" class="RktValLink" data-pltdoc="x">tab-panel%</a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="list-box_.html" class="RktValLink" data-pltdoc="x">list-box%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="group-box-panel_.html" class="RktValLink" data-pltdoc="x">group-box-panel%</a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="top-level-window___.html" class="RktValLink" data-pltdoc="x">top-level-window<%></a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="canvas___.html" class="RktValLink" data-pltdoc="x">canvas<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="dialog_.html" class="RktValLink" data-pltdoc="x">dialog%</a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="canvas_.html" class="RktValLink" data-pltdoc="x">canvas%</a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="editor-canvas_.html" class="RktValLink" data-pltdoc="x">editor-canvas%</a></span><span class="stt"></span></p></td></tr></table></p><p>Menu bars, menus, and menu items are graphical elements, but not areas
(i.e., they do not have all of the properties that are common to
areas, such as an adjustable graphical size). Instead, the menu
classes form a separate container–containee hierarchy:</p><ul><li><p><a name="(tech._menu._item._container)"></a><span style="font-style: italic">Menu Item Containers</span></p><ul><li><p><span class="RktSym"><a href="menu-bar_.html" class="RktValLink" data-pltdoc="x">menu-bar%</a></span> —<wbr></wbr> a <a name="(tech._menu._bar)"></a><span style="font-style: italic">menu bar</span> is a top-level
collection of menus that are associated with a frame.</p></li><li><p><span class="RktSym"><a href="menu_.html" class="RktValLink" data-pltdoc="x">menu%</a></span> —<wbr></wbr> a <a name="(tech._menu)"></a><span style="font-style: italic">menu</span> contains a set of menu
items. The menu can appear in a menu bar, in a popup menu, or as a
submenu in another menu.</p></li><li><p><span class="RktSym"><a href="popup-menu_.html" class="RktValLink" data-pltdoc="x">popup-menu%</a></span> —<wbr></wbr> a <a name="(tech._popup._menu)"></a><span style="font-style: italic">popup menu</span> is a
top-level menu that is dynamically displayed in a canvas or
editor canvas.</p></li></ul></li><li><p><a name="(tech._menu._item)"></a><span style="font-style: italic">Menu Items</span></p><ul><li><p><span class="RktSym"><a href="separator-menu-item_.html" class="RktValLink" data-pltdoc="x">separator-menu-item%</a></span> —<wbr></wbr> a <a name="(tech._separator)"></a><span style="font-style: italic">separator</span> is
an unselectable line in a menu or popup menu.</p></li><li><p><span class="RktSym"><a href="menu-item_.html" class="RktValLink" data-pltdoc="x">menu-item%</a></span> —<wbr></wbr> a <a name="(tech._plain._menu._item)"></a><span style="font-style: italic">plain menu item</span> is a
selectable text item in a menu. When the item is selected, its
callback procedure is invoked.</p></li><li><p><span class="RktSym"><a href="checkable-menu-item_.html" class="RktValLink" data-pltdoc="x">checkable-menu-item%</a></span> —<wbr></wbr> a <a name="(tech._checkable._menu._item)"></a><span style="font-style: italic">checkable menu
item</span> is a text item in a menu; the user selects a checkable menu
item to toggle a check mark next to the item.</p></li><li><p><span class="RktSym"><a href="menu_.html" class="RktValLink" data-pltdoc="x">menu%</a></span> —<wbr></wbr> a menu is a menu item as well as a menu
item container.</p></li></ul></li></ul><p>The following diagram shows the complete type hierarchy for the menu
system:</p><p><table cellspacing="0" cellpadding="0"><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="menu-item___.html" class="RktValLink" data-pltdoc="x">menu-item<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="menu-item-container___.html" class="RktValLink" data-pltdoc="x">menu-item-container<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="separator-menu-item_.html" class="RktValLink" data-pltdoc="x">separator-menu-item%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">_____|___</span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="labelled-menu-item___.html" class="RktValLink" data-pltdoc="x">labelled-menu-item<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="menu-bar_.html" class="RktValLink" data-pltdoc="x">menu-bar%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">_________|_________</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="popup-menu_.html" class="RktValLink" data-pltdoc="x">popup-menu%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="menu_.html" class="RktValLink" data-pltdoc="x">menu%</a></span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="selectable-menu-item___.html" class="RktValLink" data-pltdoc="x">selectable-menu-item<%></a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="menu-item_.html" class="RktValLink" data-pltdoc="x">menu-item%</a></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span></p></td></tr><tr><td><p><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">|</span><span class="RktSym"><span class="nobreak">-</span></span><span class="stt"></span><span class="hspace"> </span><span class="stt"></span><span class="RktSym"><a href="checkable-menu-item_.html" class="RktValLink" data-pltdoc="x">checkable-menu-item%</a></span><span class="stt"></span></p></td></tr></table></p><h4 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""containeroverview"">1.4<tt> </tt><a name="(part._containeroverview)"></a>Geometry Management</h4><p>The windowing toolbox’s geometry management makes it easy to design windows that look
right on all platforms, despite different graphical representations
of GUI elements. Geometry management is based on containers; each
container arranges its children based on simple constraints, such as
the current size of a frame and the natural size of a button.</p><p>The built-in container classes include horizontal panels (and panes),
which align their children in a row, and vertical panels (and panes),
which align their children in a column. By nesting horizontal and
vertical containers, a programmer can achieve most any layout. For
example, to construct a dialog with the shape</p><p><table cellspacing="0" cellpadding="0"><tr><td><p><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">------------------------------------------------------</span></p></td></tr><tr><td><p><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt">-------------------------------------</span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt">Your name: |</span><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt">-------------------------------------</span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt">--------</span><span class="hspace"> </span><span class="stt">----</span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt">( Cancel )</span><span class="hspace"> </span><span class="stt">( OK )</span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="hspace"> </span><span class="stt">|</span><span class="hspace"> </span><span class="stt">--------</span><span class="hspace"> </span><span class="stt">----</span><span class="hspace"> </span><span class="stt">|</span></p></td></tr><tr><td><p><span class="hspace"> </span><span class="stt"></span><span class="hspace"> </span><span class="stt">------------------------------------------------------</span></p></td></tr></table></p><p>with the following program:</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Create a dialog</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">dialog</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._instantiate%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">instantiate</a></span><span class="hspace"> </span><span class="RktSym"><a href="dialog_.html" class="RktValLink" data-pltdoc="x">dialog%</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktVal">"Example"</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Add a text field to the dialog</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="text-field_.html" class="RktValLink" data-pltdoc="x">text-field%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">dialog</span><span class="RktPn">]</span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Your name"</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Add a horizontal panel to the dialog, with centering for buttons</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._define%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">define</a></span><span class="hspace"> </span><span class="RktSym">panel</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="horizontal-panel_.html" class="RktValLink" data-pltdoc="x">horizontal-panel%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">dialog</span><span class="RktPn">]</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">alignment</span><span class="hspace"> </span><span class="RktVal">'</span><span class="RktVal">(</span><span class="RktVal">center</span><span class="hspace"> </span><span class="RktVal">center</span><span class="RktVal">)</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Add </span><span class="ssansserif">Cancel</span><span class="RktCmt"> and </span><span class="ssansserif">Ok</span><span class="RktCmt"> buttons to the horizontal panel</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">panel</span><span class="RktPn">]</span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Cancel"</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="button_.html" class="RktValLink" data-pltdoc="x">button%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">parent</span><span class="hspace"> </span><span class="RktSym">panel</span><span class="RktPn">]</span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Ok"</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=when_unless.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fletstx-scheme..rkt%2529._when%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">when</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._system-position-ok-before-cancel~3f%29%29" class="RktValLink" data-pltdoc="x">system-position-ok-before-cancel?</a></span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">panel</span><span class="hspace"> </span><span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._change-children%29%29" class="RktValLink" data-pltdoc="x">change-children</a></span><span class="hspace"> </span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=pairs.html%23%2528def._%2528%2528lib._racket%252Fprivate%252Flist..rkt%2529._reverse%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">reverse</a></span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span></td></tr><tr><td><span class="RktCmt">;</span><span class="RktCmt"> </span><span class="RktCmt">Show the dialog</span></td></tr><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=ivaraccess.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._send%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">send</a></span><span class="hspace"> </span><span class="RktSym">dialog</span><span class="hspace"> </span><span class="RktSym"><a href="dialog_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._dialog~25%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span><span class="hspace"> </span><span class="RktVal">#t</span><span class="RktPn">)</span></td></tr></table></blockquote><p>Each container arranges its children using the natural size of each
child, which usually depends on instantiation parameters of the
child, such as the label on a button or the number of choices in a
radio box. In the above example, the dialog stretches horizontally to
match the minimum width of the text field, and it stretches
vertically to match the total height of the field and the
buttons. The dialog then stretches the horizontal panel to fill the
bottom half of the dialog. Finally, the horizontal panel uses the sum
of the buttons’ minimum widths to center them horizontally.</p><p>As the example demonstrates, a stretchable container grows to fill its
environment, and it distributes extra space among its stretchable
children. By default, panels are stretchable in both directions,
whereas buttons are not stretchable in either direction. The
programmer can change whether an individual GUI element is
stretchable.</p><p>The following subsections describe the container system in detail,
first discussing the attributes of a containee in
<a href="#%28part._containees%29" data-pltdoc="x">Containees</a>, and then describing
the attributes of a container in
<a href="#%28part._containers%29" data-pltdoc="x">Containers</a>. In addition to the
built-in vertical and horizontal containers, programmers can define
new types of containers as discussed in the final subsection,
<a href="#%28part._new-containers%29" data-pltdoc="x">Defining New Types of Containers</a>.</p><h5 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""containees"">1.4.1<tt> </tt><a name="(part._containees)"></a>Containees</h5><p>Each <a href="#%28tech._containee%29" class="techoutside" data-pltdoc="x"><span class="techinside">containee</span></a>, or child, has the following properties:</p><ul><li><p>a <a name="(tech._graphical._minimum._width)"></a><span style="font-style: italic">graphical minimum width</span> and a <a name="(tech._graphical._minimum._height)"></a><span style="font-style: italic">graphical minimum height</span>;</p></li><li><p>a <a name="(tech._requested._minimum._width)"></a><span style="font-style: italic">requested minimum width</span> and a <a name="(tech._requested._minimum._height)"></a><span style="font-style: italic">requested minimum height</span>;</p></li><li><p>horizontal and vertical <a name="(tech._stretchability)"></a><span style="font-style: italic">stretchability</span> (on or off); and</p></li><li><p>horizontal and vertical <a href="#%28tech._margin%29" class="techoutside" data-pltdoc="x"><span class="techinside">margins</span></a>.</p></li></ul><p>A <a href="#%28tech._container%29" class="techoutside" data-pltdoc="x"><span class="techinside">container</span></a> arranges its children based on these four
properties of each <a href="#%28tech._containee%29" class="techoutside" data-pltdoc="x"><span class="techinside">containee</span></a>. A <a href="#%28tech._containee%29" class="techoutside" data-pltdoc="x"><span class="techinside">containee</span></a>’s parent
container is specified when the <a href="#%28tech._containee%29" class="techoutside" data-pltdoc="x"><span class="techinside">containee</span></a> is created. A window
<a href="#%28tech._containee%29" class="techoutside" data-pltdoc="x"><span class="techinside">containee</span></a> can be <a href="#%28tech._hidden%29" class="techoutside" data-pltdoc="x"><span class="techinside">hidden</span></a> or <a href="#%28tech._deleted%29" class="techoutside" data-pltdoc="x"><span class="techinside">deleted</span></a> within its
parent, and its parent can be changed by <a href="#%28tech._reparent%29" class="techoutside" data-pltdoc="x"><span class="techinside">reparent</span></a>ing.</p><p>The <a name="(tech._graphical._minimum._size)"></a><span style="font-style: italic">graphical minimum size</span> of a particular containee, as
reported by <span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._get-graphical-min-size%29%29" class="RktValLink" data-pltdoc="x">get-graphical-min-size</a></span>, depends on the
platform, the label of the containee (for a control), and style
attributes specified when creating the containee. For example, a
button’s minimum graphical size ensures that the entire text of the
label is visible. The graphical minimum size of a control (such as a
button) cannot be changed; it is fixed at creation time. (A control’s
minimum size is <span style="font-style: italic">not</span> recalculated when its label is changed.)
The graphical minimum size of a panel or pane depends on the total
minimum size of its children and the way that they are arranged.</p><p>To select a size for a containee, its parent container considers the
containee’s <a name="(tech._requested._minimum._size)"></a><span style="font-style: italic">requested minimum size</span> rather than its
graphical minimum size (assuming the requested minimum is larger than
the graphical minimum). Unlike the graphical minimum, the requested
minimum size of a containee can be changed by a programmer at any
time using the <span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._min-width%29%29" class="RktValLink" data-pltdoc="x">min-width</a></span> and
<span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._min-height%29%29" class="RktValLink" data-pltdoc="x">min-height</a></span> methods.</p><p>Unless a containee is stretchable (in a particular direction), it
always shrinks to its minimum size (in the corresponding
direction). Otherwise, containees are stretched to fill all available
space in a container. Each containee begins with a default
stretchability. For example, buttons are not initially stretchable,
whereas a one-line text field is initially stretchable in the
horizontal direction. A programmer can change the stretchability of a
containee at any time using the <span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._stretchable-width%29%29" class="RktValLink" data-pltdoc="x">stretchable-width</a></span>
and <span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._stretchable-height%29%29" class="RktValLink" data-pltdoc="x">stretchable-height</a></span> methods.</p><p>A <a name="(tech._margin)"></a><span style="font-style: italic">margin</span> is space surrounding a containee. Each containee’s
margin is independent of its minimum size, but from the container’s
point of view, a margin effectively increases the minimum size of the
containee. For example, if a button has a vertical margin of
<span class="RktVal">2</span>, then the container must allocate enough room to leave two
pixels of space above and below the button, in addition to the space
that is allocated for the button’s minimum height. A programmer can
adjust a containee’s margin with <span class="RktSym"><a href="subarea___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._subarea~3c~25~3e%29._horiz-margin%29%29" class="RktValLink" data-pltdoc="x">horiz-margin</a></span> and
<span class="RktSym"><a href="subarea___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._subarea~3c~25~3e%29._vert-margin%29%29" class="RktValLink" data-pltdoc="x">vert-margin</a></span>. The default margin is <span class="RktVal">2</span> for
a control, and <span class="RktVal">0</span> for any other type of containee.</p><p>In practice, the <a href="#%28tech._requested._minimum._size%29" class="techoutside" data-pltdoc="x"><span class="techinside">requested minimum size</span></a> and <a href="#%28tech._margin%29" class="techoutside" data-pltdoc="x"><span class="techinside">margin</span></a> of a
control are rarely changed, although they are often changed for a
canvas. <a href="#%28tech._stretchability%29" class="techoutside" data-pltdoc="x"><span class="techinside">Stretchability</span></a> is commonly adjusted for any type of
containee, depending on the visual effect desired by the programmer.</p><h5 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""containers"">1.4.2<tt> </tt><a name="(part._containers)"></a>Containers</h5><p>A container has the following properties:</p><ul><li><p>a list of (non-deleted) children containees;</p></li><li><p>a requested minimum width and a requested minimum height;</p></li><li><p>a spacing used between the children;</p></li><li><p>a border margin used around the total set of children;</p></li><li><p>horizontal and vertical stretchability (on or off); and</p></li><li><p>an alignment setting for positioning leftover space.</p></li></ul><p>These properties are factored into the container’s calculation of its
own size and the arrangement of its children. For a container that is
also a containee (e.g., a panel), the container’s requested minimum
size and stretchability are the same as for its containee aspect.</p><p>A containee’s parent container is specified when the containee is
created. A containee
window can be <a href="#%28tech._hidden%29" class="techoutside" data-pltdoc="x"><span class="techinside">hidden</span></a> or <a href="#%28tech._deleted%29" class="techoutside" data-pltdoc="x"><span class="techinside">deleted</span></a> within its parent
container, and its parent can be changed by <a href="#%28tech._reparent%29" class="techoutside" data-pltdoc="x"><span class="techinside">reparent</span></a>ing
(but a non-window containee cannot be <a href="#%28tech._hidden%29" class="techoutside" data-pltdoc="x"><span class="techinside">hidden</span></a>,
<a href="#%28tech._deleted%29" class="techoutside" data-pltdoc="x"><span class="techinside">deleted</span></a>, or <a href="#%28tech._reparent%29" class="techoutside" data-pltdoc="x"><span class="techinside">reparent</span></a>ed):</p><ul><li><p>A <a name="(tech._hidden)"></a><span style="font-style: italic">hidden</span> child is invisible to the user, but space is
still allocated for each hidden child within a container. To hide or
show a child, call the child’s <span class="RktSym"><a href="window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._window~3c~25~3e%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span> method.</p></li><li><p>A <a name="(tech._deleted)"></a><span style="font-style: italic">deleted</span> child is hidden <span style="font-style: italic">and</span> ignored by
container as it arranges its other children, so no space is reserved
in the container for a deleted child. To make a child deleted or
non-deleted, call the container’s <span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._delete-child%29%29" class="RktValLink" data-pltdoc="x">delete-child</a></span> or <span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._add-child%29%29" class="RktValLink" data-pltdoc="x">add-child</a></span> method (which
calls the child’s <span class="RktSym"><a href="window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._window~3c~25~3e%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span> method).</p></li><li><p>To <a name="(tech._reparent)"></a><span style="font-style: italic">reparent</span> a window containee, use the
<span class="RktSym"><a href="subwindow___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._subwindow~3c~25~3e%29._reparent%29%29" class="RktValLink" data-pltdoc="x">reparent</a></span> method. The window retains its
<a href="#%28tech._hidden%29" class="techoutside" data-pltdoc="x"><span class="techinside">hidden</span></a> or <a href="#%28tech._deleted%29" class="techoutside" data-pltdoc="x"><span class="techinside">deleted</span></a> status within its new parent.</p></li></ul><p>When a child is created, it is initially shown and non-deleted. A
deleted child is subject to garbage collection when no external
reference to the child exists. A list of non-deleted children (hidden
or not) is available from a container through its
<span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._get-children%29%29" class="RktValLink" data-pltdoc="x">get-children</a></span> method.</p><p>The order of the children in a container’s non-deleted list is
significant. For example, a vertical panel puts the first child in
its list at the top of the panel, and so on. When a new child is
created, it is put at the end of its container’s list of
children. The order of a container’s list can be changed dynamically
via the <span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._change-children%29%29" class="RktValLink" data-pltdoc="x">change-children</a></span> method. (The
<span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._change-children%29%29" class="RktValLink" data-pltdoc="x">change-children</a></span> method can also be used to
activate or deactivate children.)</p><p>The <a href="#%28tech._graphical._minimum._size%29" class="techoutside" data-pltdoc="x"><span class="techinside">graphical minimum size</span></a> of a container, as reported by
<span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._get-graphical-min-size%29%29" class="RktValLink" data-pltdoc="x">get-graphical-min-size</a></span>, is calculated by combining
the minimum sizes of its children (summing them or taking the
maximum, as appropriate to the layout strategy of the container)
along with the spacing and border margins of the container. A larger
minimum may be specified by the programmer using <span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._min-width%29%29" class="RktValLink" data-pltdoc="x">min-width</a></span> and <span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._min-height%29%29" class="RktValLink" data-pltdoc="x">min-height</a></span> methods; when the computed
minimum for a container is larger than the programmer-specified
minimum, then the programmer-specified minimum is ignored.</p><p>A container’s spacing determines the amount of space left between
adjacent children in the container, in addition to any space required
by the children’s margins. A container’s border margin determines the
amount of space to add around the collection of children; it
effectively decreases the area within the container where children
can be placed. A programmer can adjust a container’s border and
spacing dynamically via the <span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._border%29%29" class="RktValLink" data-pltdoc="x">border</a></span> and
<span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._spacing%29%29" class="RktValLink" data-pltdoc="x">spacing</a></span> methods. The default border and
spacing are <span class="RktVal">0</span> for all container types.</p><p>Because a panel or pane is a containee as well as a container, it has
a containee margin in addition to its border margin. For a panel,
these margins are not redundant because the panel can have a
graphical border; the border is drawn inside the panel’s containee
margin, but outside the panel’s border margin.</p><p>For a top-level-window container, such as a frame or dialog, the
container’s stretchability determines whether the user can resize the
window to something larger than its minimum size. Thus, the user
cannot resize a frame that is not stretchable. For other types of
containers (i.e., panels and panes), the container’s stretchability
is its stretchability as a containee in some other container. All
types of containers are initially stretchable in both
directions—<wbr></wbr>except instances of <span class="RktSym"><a href="grow-box-spacer-pane_.html" class="RktValLink" data-pltdoc="x">grow-box-spacer-pane%</a></span>,
which is intended as a lightweight spacer class rather than a useful
container class—<wbr></wbr>but a programmer can change the stretchability of
an area at any time via the <span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._stretchable-width%29%29" class="RktValLink" data-pltdoc="x">stretchable-width</a></span> and
<span class="RktSym"><a href="area___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area~3c~25~3e%29._stretchable-height%29%29" class="RktValLink" data-pltdoc="x">stretchable-height</a></span> methods.</p><p>The alignment specification for a container determines how it
positions its children when the container has leftover space. (A
container can only have leftover space in a particular direction when
none of its children are stretchable in that direction.) For example,
when the container’s horizontal alignment is <a name="(idx._(gentag._0._(lib._scribblings/gui/gui..scrbl)))"></a><span class="RktVal">'</span><span class="RktVal">left</span>,
the children are left-aligned in the container and leftover space is
accumulated to the right. When the container’s horizontal alignment
is <a name="(idx._(gentag._1._(lib._scribblings/gui/gui..scrbl)))"></a><span class="RktVal">'</span><span class="RktVal">center</span>, each child is horizontally centered in
the container. A container’s alignment is changed with the
<span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._set-alignment%29%29" class="RktValLink" data-pltdoc="x">set-alignment</a></span> method.</p><h5 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""new-containers"">1.4.3<tt> </tt><a name="(part._new-containers)"></a>Defining New Types of Containers</h5><p>Although nested horizontal and vertical containers can express most
layout patterns, a programmer can define a new type of container with
an explicit layout procedure. A programmer defines a new type of
container by deriving a class from <span class="RktSym"><a href="panel_.html" class="RktValLink" data-pltdoc="x">panel%</a></span> or <span class="RktSym"><a href="pane_.html" class="RktValLink" data-pltdoc="x">pane%</a></span>
and overriding the <span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._container-size%29%29" class="RktValLink" data-pltdoc="x">container-size</a></span> and
<span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._place-children%29%29" class="RktValLink" data-pltdoc="x">place-children</a></span> methods. The
<span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._container-size%29%29" class="RktValLink" data-pltdoc="x">container-size</a></span> method takes a list of size
specifications for each child and returns two values: the minimum
width and height of the container. The <span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._place-children%29%29" class="RktValLink" data-pltdoc="x">place-children</a></span> method takes the container’s size and a list of size
specifications for each child, and returns a list of sizes and
placements (in parallel to the original list).</p><p>An input size specification is a list of four values:</p><ul><li><p>the child’s minimum width;</p></li><li><p>the child’s minimum height;</p></li><li><p>the child’s horizontal stretchability (<span class="RktVal">#t</span> means stretchable, <span class="RktVal">#f</span> means not stretchable); and</p></li><li><p>the child’s vertical stretchability.</p></li></ul><p>For <span class="RktSym"><a href="area-container___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._area-container~3c~25~3e%29._place-children%29%29" class="RktValLink" data-pltdoc="x">place-children</a></span>, an output
position and size specification is a list of four values:</p><ul><li><p>the child’s new horizontal position (relative to the parent);</p></li><li><p>the child’s new vertical position;</p></li><li><p>the child’s new actual width;</p></li><li><p>the child’s new actual height.</p></li></ul><p>The widths and heights for both the input and output include the
children’s margins. The returned position for each child is
automatically incremented to account for the child’s margin in
placing the control.</p><h4 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""mouseandkey"">1.5<tt> </tt><a name="(part._mouseandkey)"></a>Mouse and Keyboard Events</h4><p>Whenever the user moves the mouse, clicks or releases a mouse button,
or presses a key on the keyboard, an event is generated for some
window. The window that receives the event depends on the current
state of the graphic display:</p><ul><li><p><a name="(idx._(gentag._2._(lib._scribblings/gui/gui..scrbl)))"></a>The receiving window of a
mouse event is usually the window under the cursor when the mouse is
moved or clicked. If the mouse is over a child window, the child
window receives the event rather than its parent.</p><p>When the user clicks in a window, the window “grabs” the mouse, so
that <span style="font-style: italic">all</span> mouse events go to that window until the mouse
button is released (regardless of the location of the cursor). As a
result, a user can click on a scrollbar thumb and drag it without
keeping the cursor strictly inside the scrollbar control.</p><p>A mouse button-release event is normally generated for each mouse
button-down event, but a button-release event might get dropped. For
example, a modal dialog might appear and take over the mouse. More
generally, any kind of mouse event can get dropped in principle, so
avoid algorithms that depend on precise mouse-event sequences. For
example, a mouse tracking handler should reset the tracking state
when it receives an event other than a dragging event.</p></li><li><p><a name="(idx._(gentag._3._(lib._scribblings/gui/gui..scrbl)))"></a><a name="(idx._(gentag._4._(lib._scribblings/gui/gui..scrbl)))"></a>The receiving window of a keyboard event is
the window that owns the <a name="(tech._keyboard._focu)"></a><span style="font-style: italic">keyboard focus</span> at the time of the
event. Only one window owns the focus at any time, and focus
ownership is typically displayed by a window in some manner. For
example, a text field control shows focus ownership by displaying a
blinking caret.</p><p>Within a top-level window, only certain kinds of subwindows can have
the focus, depending on the conventions of the platform. Furthermore,
the subwindow that initially owns the focus is platform-specific. A
user can moves the focus in various ways, usually by clicking the
target window. A program can use the <span class="RktSym"><a href="window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._window~3c~25~3e%29._focus%29%29" class="RktValLink" data-pltdoc="x">focus</a></span> method
to move the focus to a subwindow or to set the initial focus.</p><p>A <a name="(idx._(gentag._5._(lib._scribblings/gui/gui..scrbl)))"></a><span class="RktVal">'</span><span class="RktVal">wheel-up</span> or <a name="(idx._(gentag._6._(lib._scribblings/gui/gui..scrbl)))"></a><span class="RktVal">'</span><span class="RktVal">wheel-down</span>
event may be sent to a window other than the one with the keyboard
focus, depending on how the operating system handles wheel events.</p><p>A key-press event may correspond to either an actual key press or an
auto-key repeat. Multiple key-press events without intervening
key-release events normally indicate an auto-key. Like any input
event, however, key-release events sometimes get dropped (e.g., due
to the appearance of a modal dialog).</p></li></ul><p>Controls, such as buttons and list boxes, handle keyboard and mouse
events automatically, eventually invoking the callback procedure that
was provided when the control was created. A canvas propagates mouse
and keyboard events to its <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._on-event%29%29" class="RktValLink" data-pltdoc="x">on-event</a></span> and
<span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._on-char%29%29" class="RktValLink" data-pltdoc="x">on-char</a></span> methods, respectively.</p><p><a name="(idx._(gentag._7._(lib._scribblings/gui/gui..scrbl)))"></a>A mouse and keyboard event is
delivered in a special way to its window. Each ancestor of the
receiving window gets a chance to intercept the event through the
<span class="RktSym"><a href="window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._window~3c~25~3e%29._on-subwindow-event%29%29" class="RktValLink" data-pltdoc="x">on-subwindow-event</a></span> and <span class="RktSym"><a href="window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._window~3c~25~3e%29._on-subwindow-char%29%29" class="RktValLink" data-pltdoc="x">on-subwindow-char</a></span> methods. See the method descriptions for more
information.</p><p><a name="(idx._(gentag._8._(lib._scribblings/gui/gui..scrbl)))"></a>The default
<span class="RktSym"><a href="window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._window~3c~25~3e%29._on-subwindow-char%29%29" class="RktValLink" data-pltdoc="x">on-subwindow-char</a></span> method for a top-level window
intercepts keyboard events to detect menu-shortcut events and
focus-navigation events. See <span class="RktSym"><a href="frame_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._frame~25%29._on-subwindow-char%29%29" class="RktValLink" data-pltdoc="x">on-subwindow-char</a></span> in <span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span> and
<span class="RktSym"><a href="dialog_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._dialog~25%29._on-subwindow-char%29%29" class="RktValLink" data-pltdoc="x">on-subwindow-char</a></span> in <span class="RktSym"><a href="dialog_.html" class="RktValLink" data-pltdoc="x">dialog%</a></span> for details. Certain OS-specific
key combinations are captured at a low level, and cannot be
overridden. For example, on Windows and Unix, pressing and releasing
Alt always moves the keyboard focus to the menu bar. Similarly,
Alt-Tab switches to a different application on Windows. (Alt-Space
invokes the system menu on Windows, but this shortcut is
implemented by <span class="RktSym"><a href="top-level-window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._top-level-window~3c~25~3e%29._on-system-menu-char%29%29" class="RktValLink" data-pltdoc="x">on-system-menu-char</a></span>,
which is called by <span class="RktSym"><a href="frame_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._frame~25%29._on-subwindow-char%29%29" class="RktValLink" data-pltdoc="x">on-subwindow-char</a></span> in <span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span> and
<span class="RktSym"><a href="dialog_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._dialog~25%29._on-subwindow-char%29%29" class="RktValLink" data-pltdoc="x">on-subwindow-char</a></span> in <span class="RktSym"><a href="dialog_.html" class="RktValLink" data-pltdoc="x">dialog%</a></span>.)</p><h4 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""eventspaceinfo"">1.6<tt> </tt><a name="(part._eventspaceinfo)"></a><a name="(idx._(gentag._9._(lib._scribblings/gui/gui..scrbl)))"></a>Event Dispatching and Eventspaces</h4><p>A graphical user interface is an inherently multi-threaded system: one
thread is the program managing windows on the screen, and the other
thread is the user moving the mouse and typing at the keyboard. GUI
programs typically use an <a name="(tech._event._queue)"></a><span style="font-style: italic">event queue</span> to translate this
multi-threaded system into a sequential one, at least from the
programmer’s point of view. Each user action is handled one at a
time, ignoring further user actions until the previous one is
completely handled. The conversion from a multi-threaded process to a
single-threaded one greatly simplifies the implementation of GUI
programs.</p><p>Despite the programming convenience provided by a purely sequential
event queue, certain situations require a less rigid dialog with
the user:</p><ul><li><p><span style="font-style: italic">Nested event handling:</span> In the process of handling an
event, it may be necessary to obtain further information from the
user. Usually, such information is obtained via a modal dialog; in
whatever fashion the input is obtained, more user events must be
received and handled before the original event is completely
handled. To allow the further processing of events, the handler for
the original event must explicitly <a name="(tech._yield)"></a><span style="font-style: italic">yield</span> to the
system. Yielding causes events to be handled in a nested manner,
rather than in a purely sequential manner.</p></li><li><p><span style="font-style: italic">Asynchronous event handling:</span> An application may
consist of windows that represent independent dialogs with the
user. For example, a drawing program might support multiple drawing
windows, and a particularly time-consuming task in one window (e.g.,
a special filter effect on an image) should not prevent the user from
working in a different window. Such an application needs sequential
event handling for each individual window, but asynchronous
(potentially parallel) event handling across windows. In other words,
the application needs a separate event queue for each window, and a
separate event-handling thread for each event queue.</p></li></ul><p>An <a name="(tech._eventspace)"></a><span style="font-style: italic">eventspace</span> is a context for processing GUI
events. Each eventspace maintains its own queue of events, and events
in a single eventspace are dispatched sequentially by a designated
<a name="(tech._handler._thread)"></a><span style="font-style: italic">handler thread</span>. An event-handling procedure running in this
handler thread can yield to the system by calling <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._yield%29%29" class="RktValLink" data-pltdoc="x">yield</a></span>, in
which case other event-handling procedures may be called in a nested
(but single-threaded) manner within the same handler thread. Events
from different eventspaces are dispatched asynchronously by separate
handler threads.</p><p><a name="(idx._(gentag._10._(lib._scribblings/gui/gui..scrbl)))"></a>When a frame or dialog is created
without a parent, it is associated with the <a href="#%28tech._current._eventspace%29" class="techoutside" data-pltdoc="x"><span class="techinside">current eventspace</span></a>
as described in <a href="#%28part._currenteventspace%29" data-pltdoc="x">Creating and Setting the Eventspace</a>. Events for a
top-level window and its descendants are always dispatched in the
window’s eventspace. Every dialog is modal; a dialog’s
<span class="RktSym"><a href="dialog_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._dialog~25%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span> method implicitly calls <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._yield%29%29" class="RktValLink" data-pltdoc="x">yield</a></span> to
handle events while the dialog is shown. (See also
<a href="#%28part._espacethreads%29" data-pltdoc="x">Eventspaces and Threads</a> for information about threads and modal
dialogs.) Furthermore, when a modal dialog is shown, the system
disables key and mouse press/release events to other top-level
windows in the dialog’s eventspace, but
windows in other eventspaces are unaffected by the modal dialog.
(Mouse motion, enter, and leave events are still delivered to
all windows when a modal dialog is shown.)</p><h5 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""Event_Types_and_Priorities"">1.6.1<tt> </tt><a name="(part._.Event_.Types_and_.Priorities)"></a><a name="(idx._(gentag._11._(lib._scribblings/gui/gui..scrbl)))"></a><a name="(idx._(gentag._12._(lib._scribblings/gui/gui..scrbl)))"></a>Event Types and Priorities</h5><p>In addition to events corresponding to user and windowing actions,
such as button clicks, key presses, and updates, the system
dispatches two kinds of internal events: <a href="#%28tech._timer._event%29" class="techoutside" data-pltdoc="x"><span class="techinside">timer events</span></a> and
<a href="#%28tech._explicitly._queued._event%29" class="techoutside" data-pltdoc="x"><span class="techinside">explicitly queued events</span></a>.</p><p><a name="(tech._timer._event)"></a><span style="font-style: italic">Timer events</span> are created by instances of <span class="RktSym"><a href="timer_.html" class="RktValLink" data-pltdoc="x">timer%</a></span>. When
a timer is started and then expires, the timer queues an event to
call the timer’s <span class="RktSym"><a href="timer_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._timer~25%29._notify%29%29" class="RktValLink" data-pltdoc="x">notify</a></span> method. Like a top-level
window, each timer is associated with a particular eventspace (the
<a href="#%28tech._current._eventspace%29" class="techoutside" data-pltdoc="x"><span class="techinside">current eventspace</span></a> as described in
<a href="#%28part._currenteventspace%29" data-pltdoc="x">Creating and Setting the Eventspace</a>) when it is created, and the timer
queues the event in its eventspace.</p><p><a name="(tech._explicitly._queued._event)"></a><span style="font-style: italic">Explicitly queued events</span> are created with
<span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._queue-callback%29%29" class="RktValLink" data-pltdoc="x">queue-callback</a></span>, which accepts a callback procedure to handle
the event. The event is enqueued in the current eventspace at the
time of the call to <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._queue-callback%29%29" class="RktValLink" data-pltdoc="x">queue-callback</a></span>, with either a high or
low priority as specified by the (optional) second argument to
<span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._queue-callback%29%29" class="RktValLink" data-pltdoc="x">queue-callback</a></span>.</p><p>An eventspace’s event queue is actually a priority queue with events
sorted according to their kind, from highest-priority (dispatched
first) to lowest-priority (dispatched last):</p><ul><li><p>The highest-priority events are high-priority events installed
with <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._queue-callback%29%29" class="RktValLink" data-pltdoc="x">queue-callback</a></span>.</p></li><li><p>Timer events have the second-highest priority.</p></li><li><p>Graphical events, such as mouse clicks or window updates, have
the second-lowest priority.</p></li><li><p>The lowest-priority events are low-priority events installed
with <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._queue-callback%29%29" class="RktValLink" data-pltdoc="x">queue-callback</a></span>.</p></li></ul><p>Although a programmer has no direct control over the order in which
events are dispatched, a programmer can control the timing of
dispatches by setting the <a name="(tech._event._dispatch._handler)"></a><span style="font-style: italic">event dispatch handler</span> via the
<span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._event-dispatch-handler%29%29" class="RktValLink" data-pltdoc="x">event-dispatch-handler</a></span> parameter. This parameter and other
eventspace procedures are described in more detail in
<a href="Windowing_Functions.html#%28part._eventspace-funcs%29" data-pltdoc="x">Eventspaces</a>.</p><h5 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""espacethreads"">1.6.2<tt> </tt><a name="(part._espacethreads)"></a>Eventspaces and Threads</h5><p>When a new eventspace is created, a corresponding <a href="#%28tech._handler._thread%29" class="techoutside" data-pltdoc="x"><span class="techinside">handler
thread</span></a> is created for the eventspace. When the system dispatches an
event for an eventspace, it always does so in the eventspace’s
handler thread. A handler procedure can create new threads that run
indefinitely, but as long as the handler thread is running a handler
procedure, no new events can be dispatched for the corresponding
eventspace.</p><p>When a handler thread shows a dialog, the dialog’s <span class="RktSym"><a href="dialog_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._dialog~25%29._show%29%29" class="RktValLink" data-pltdoc="x">show</a></span> method implicitly calls <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._yield%29%29" class="RktValLink" data-pltdoc="x">yield</a></span> for as long as the
dialog is shown. When a non-handler thread shows a dialog, the
non-handler thread simply blocks until the dialog is
dismissed. Calling <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._yield%29%29" class="RktValLink" data-pltdoc="x">yield</a></span> with no arguments from a
non-handler thread has no effect. Calling <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._yield%29%29" class="RktValLink" data-pltdoc="x">yield</a></span> with a
semaphore from a non-handler thread is equivalent to calling
<span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=semaphore.html%23%2528def._%2528%2528quote._%7E23%7E25kernel%2529._semaphore-wait%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">semaphore-wait</a></span>.</p><h5 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""currenteventspace"">1.6.3<tt> </tt><a name="(part._currenteventspace)"></a>Creating and Setting the Eventspace</h5><p>Whenever a frame, dialog, or timer is created, it is associated with
the <a name="(tech._current._eventspace)"></a><span style="font-style: italic">current eventspace</span> as determined by the
<span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._current-eventspace%29%29" class="RktValLink" data-pltdoc="x">current-eventspace</a></span> parameter (see <a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=parameters.html&version=6.1" class="Sq" data-pltdoc="x">Parameters</a>).</p><p>The <span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._make-eventspace%29%29" class="RktValLink" data-pltdoc="x">make-eventspace</a></span> procedure creates a new
eventspace. The following example creates a new eventspace and a new
frame in the eventspace (the <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=parameters.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fmore-scheme..rkt%2529._parameterize%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">parameterize</a></span> syntactic form
temporary sets a parameter value):</p><blockquote class="SCodeFlow"><table cellspacing="0" cellpadding="0" class="RktBlk"><tr><td><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=let.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fletstx-scheme..rkt%2529._let%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">let</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktPn">[</span><span class="RktSym">new-es</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._make-eventspace%29%29" class="RktValLink" data-pltdoc="x">make-eventspace</a></span><span class="RktPn">)</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=parameters.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fmore-scheme..rkt%2529._parameterize%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">parameterize</a></span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktPn">[</span><span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._current-eventspace%29%29" class="RktValLink" data-pltdoc="x">current-eventspace</a></span><span class="hspace"> </span><span class="RktSym">new-es</span><span class="RktPn">]</span><span class="RktPn">)</span></td></tr><tr><td><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=objcreation.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fclass-internal..rkt%2529._new%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">new</a></span><span class="hspace"> </span><span class="RktSym"><a href="frame_.html" class="RktValLink" data-pltdoc="x">frame%</a></span><span class="hspace"> </span><span class="RktPn">[</span><span class="RktSym">label</span><span class="hspace"> </span><span class="RktVal">"Example"</span><span class="RktPn">]</span><span class="RktPn">)</span><span class="RktPn">)</span><span class="RktPn">)</span></td></tr></table></blockquote><p>When an eventspace is created, it is placed under the management of
the <a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=eval-model.html%23%2528tech._current._custodian%2529&version=6.1" class="techoutside Sq" data-pltdoc="x"><span class="techinside">current custodian</span></a>. When a custodian
shuts down an eventspace, all frames and dialogs associated with the
eventspace are destroyed (without calling <span class="RktSym"><a href="top-level-window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._top-level-window~3c~25~3e%29._can-close~3f%29%29" class="RktValLink" data-pltdoc="x">can-close?</a></span> or <span class="RktSym"><a href="top-level-window___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._top-level-window~3c~25~3e%29._on-close%29%29" class="RktValLink" data-pltdoc="x">on-close</a></span> in <span class="RktSym"><a href="top-level-window___.html" class="RktValLink" data-pltdoc="x">top-level-window<%></a></span>), all timers
in the eventspace are stopped, and all enqueued callbacks are
removed. Attempting to create a new window, timer, or explicitly
queued event in a shut-down eventspace raises the <span class="RktSym">exn:misc</span>
exception.</p><p>An eventspace is a <a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=sync.html%23%2528tech._synchronizable._event%2529&version=6.1" class="Sq" data-pltdoc="x">synchronizable
event</a> (not to be confused with a GUI event), so it can be used with
<span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=sync.html%23%2528def._%2528%2528quote._%7E23%7E25kernel%2529._sync%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">sync</a></span>. As a synchronizable event, an eventspace is in a
blocking state when a frame is visible, a timer is active, a callback
is queued, or a <span class="RktSym"><a href="menu-bar_.html" class="RktValLink" data-pltdoc="x">menu-bar%</a></span> is created with a <span class="RktVal">'</span><span class="RktVal">root</span>
parent. (Note that the blocking state of an eventspace is unrelated
to whether an event is ready for dispatching.)</p><h5 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""evtcontjump"">1.6.4<tt> </tt><a name="(part._evtcontjump)"></a>Continuations and Event Dispatch</h5><p>Whenever the system dispatches an event, the call to the handler is
wrapped with a <a name="(tech._continuation._prompt)"></a><span style="font-style: italic">continuation prompt</span> (see
<span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=cont.html%23%2528def._%2528%2528quote._%7E23%7E25kernel%2529._call-with-continuation-prompt%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">call-with-continuation-prompt</a></span>) that delimits continuation
aborts (such as when an exception is raised) and continuations
captured by the handler. The delimited continuation prompt is
installed outside the call to the <a href="#%28tech._event._dispatch._handler%29" class="techoutside" data-pltdoc="x"><span class="techinside">event dispatch handler</span></a>, so
any captured continuation includes the invocation of the <a href="#%28tech._event._dispatch._handler%29" class="techoutside" data-pltdoc="x"><span class="techinside">event
dispatch handler</span></a>.</p><p>For example, if a button callback raises an exception, than the abort
performed by the default exception handler returns to the event-dispatch
point, rather than terminating the program or escaping past an enclosing
<span class="RktPn">(</span><span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._yield%29%29" class="RktValLink" data-pltdoc="x">yield</a></span><span class="RktPn">)</span>. If <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=exns.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fmore-scheme..rkt%2529._with-handlers%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">with-handlers</a></span> wraps a <span class="RktPn">(</span><span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._yield%29%29" class="RktValLink" data-pltdoc="x">yield</a></span><span class="RktPn">)</span> that
leads to an exception raised by a button callback, however, the exception
can be captured by the <span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=exns.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fmore-scheme..rkt%2529._with-handlers%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">with-handlers</a></span>.</p><p>Along similar lines, if a button callback captures a continuation
(using the default continuation prompt tag), then applying the
continuation re-installs only the work to be done by the handler up
until the point that it returns; the dispatch machinery to invoke the
button callback is not included in the continuation. A continuation
captured during a button callback is therefore potentially useful
outside of the same callback.</p><h5 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""Logging"">1.6.5<tt> </tt><a name="(part._.Logging)"></a>Logging</h5><p><div class="SIntrapara">The GUI system logs the timing of when events are handled and how
long they take to be handled. Each event that involves a callback
into Racket code has two events logged, both of which use
the <span class="RktSym">gui-event</span> struct:
</div><div class="SIntrapara"><blockquote class="SCodeFlow"><p><span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=define-struct.html%23%2528form._%2528%2528lib._racket%252Fprivate%252Fbase..rkt%2529._struct%2529%2529&version=6.1" class="RktStxLink Sq" data-pltdoc="x">struct</a></span><span class="hspace"> </span><span class="RktSym">gui-event</span><span class="hspace"> </span><span class="RktPn">(</span><span class="RktSym">start</span><span class="hspace"> </span><span class="RktSym">end</span><span class="hspace"> </span><span class="RktSym">name</span><span class="RktPn">)</span><span class="hspace"> </span><span class="RktPn">#:prefab</span><span class="RktPn">)</span></p></blockquote></div><div class="SIntrapara">The <span class="RktVar">start</span> field is the result of <span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=time.html%23%2528def._%2528%2528quote._%7E23%7E25kernel%2529._current-inexact-milliseconds%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">current-inexact-milliseconds</a></span><span class="RktPn">)</span>
when the event handling starts. The <span class="RktVar">end</span> field is
<span class="RktVal">#f</span> for the log message when the event handling starts,
and the result of <span class="RktPn">(</span><span class="RktSym"><a href="http://download.racket-lang.org/docs/6.1/html/local-redirect/index.html?doc=reference&rel=time.html%23%2528def._%2528%2528quote._%7E23%7E25kernel%2529._current-inexact-milliseconds%2529%2529&version=6.1" class="RktValLink Sq" data-pltdoc="x">current-inexact-milliseconds</a></span><span class="RktPn">)</span> when
it finishes for the log message when an event finishes.
The <span class="RktVar">name</span> field is
the name of the function that handled the event; in the case of a
<span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._queue-callback%29%29" class="RktValLink" data-pltdoc="x">queue-callback</a></span>-based event, it is the name of the thunk passed to
<span class="RktSym"><a href="Windowing_Functions.html#%28def._%28%28lib._mred%2Fmain..rkt%29._queue-callback%29%29" class="RktValLink" data-pltdoc="x">queue-callback</a></span>.</div></p><h4 x-source-module="(lib "scribblings/gui/gui.scrbl")" x-part-tag=""animation"">1.7<tt> </tt><a name="(part._animation)"></a>Animation in Canvases</h4><p>The content of a canvas is buffered, so if a canvas must be redrawn,
the <span class="RktSym"><a href="canvas_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~25%29._on-paint%29%29" class="RktValLink" data-pltdoc="x">on-paint</a></span> method or <span class="RktSym">paint-callback</span> function
usually does not need to be called again. To further reduce flicker,
while the <span class="RktSym"><a href="canvas_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~25%29._on-paint%29%29" class="RktValLink" data-pltdoc="x">on-paint</a></span> method or <span class="RktSym">paint-callback</span> function
is called, the windowing system avoids flushing the canvas-content
buffer to the screen.</p><p>Canvas content can be updated at any time by drawing with the result
of the canvas’s <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._get-dc%29%29" class="RktValLink" data-pltdoc="x">get-dc</a></span> method, and drawing is
thread-safe. Changes to the canvas’s content are flushed to the screen
periodically (not necessarily on an event-handling boundary), but the
<span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._flush%29%29" class="RktValLink" data-pltdoc="x">flush</a></span> method immediately flushes to the screen—<wbr></wbr>as
long as flushing has not been suspended. The <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._suspend-flush%29%29" class="RktValLink" data-pltdoc="x">suspend-flush</a></span> and <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._resume-flush%29%29" class="RktValLink" data-pltdoc="x">resume-flush</a></span> methods suspend and
resume both automatic and explicit flushes, although on some
platforms, automatic flushes are forced in rare cases.</p><p>For most animation purposes, <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._suspend-flush%29%29" class="RktValLink" data-pltdoc="x">suspend-flush</a></span>,
<span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._resume-flush%29%29" class="RktValLink" data-pltdoc="x">resume-flush</a></span>, and <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._flush%29%29" class="RktValLink" data-pltdoc="x">flush</a></span> can be
used to avoid flicker and the need for an additional drawing buffer
for animations. During an animation, bracket the construction of each
animation frame with <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._suspend-flush%29%29" class="RktValLink" data-pltdoc="x">suspend-flush</a></span> and
<span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._resume-flush%29%29" class="RktValLink" data-pltdoc="x">resume-flush</a></span> to ensure that partially drawn frames
are not flushed to the screen. Use <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._flush%29%29" class="RktValLink" data-pltdoc="x">flush</a></span> to ensure
that canvas content is flushed when it is ready if a <span class="RktSym"><a href="canvas___.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~3c~25~3e%29._suspend-flush%29%29" class="RktValLink" data-pltdoc="x">suspend-flush</a></span> will soon follow, because the process of flushing to
the screen can be starved if flushing is frequently suspend. The
method <span class="RktSym"><a href="canvas_.html#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._canvas~25%29._refresh-now%29%29" class="RktValLink" data-pltdoc="x">refresh-now</a></span> in <span class="RktSym"><a href="canvas_.html" class="RktValLink" data-pltdoc="x">canvas%</a></span> conveniently encapsulates this
sequence.</p><div class="navsetbottom"><span class="navleft"><form class="searchform"><input class="searchbox" style="color: #888;" type="text" value="...search manuals..." title="Enter a search string to search the manuals" onkeypress="return DoSearchKey(event, this, "6.1", "../");" onfocus="this.style.color="black"; this.style.textAlign="left"; if (this.value == "...search manuals...") this.value="";" onblur="if (this.value.match(/^ *$/)) { this.style.color="#888"; this.style.textAlign="center"; this.value="...search manuals..."; }"/></form> <a href="../index.html" title="up to the documentation top" data-pltdoc="x" onclick="return GotoPLTRoot("6.1");">top</a></span><span class="navright"> <a href="index.html" title="backward to "The Racket Graphical Interface Toolkit"" data-pltdoc="x">← prev</a> <a href="index.html" title="up to "The Racket Graphical Interface Toolkit"" data-pltdoc="x">up</a> <a href="Widget_Gallery.html" title="forward to "2 Widget Gallery"" data-pltdoc="x">next →</a></span> </div></div></div><div id="contextindicator"> </div></body></html>
|