1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <title>TkDocs Tutorial</title> 7 <meta name="description" content="Modern Tk Tutorial for Python, Tcl, Ruby, and Perl"> 8 <meta name="keywords" content="TkDocs, Tk, Tkinter, Tkx, GUI, Tcl, Python, Perl, Ruby"> 9 10 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> 11 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 12 <link rel="stylesheet" type="text/css" href="../tkd.css" media="screen,print"> 13 14 15 16 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/stackoverflow-light.min.css">
17<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
vendor: 1 bytes, line 17
17
18<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/tcl.min.js"></script>
vendor: 1 bytes, line 18
18
19<script>hljs.highlightAll();</script>
19 20 21 22 23<!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 64 bytes, lines 23-24
23 24<script async src="https://www.googletagmanager.com/gtag/js?id=
24UA-2043168-3
vendor: 12 bytes, line 24
24"></script>
25<script> 26
vendor: 133 bytes, lines 26-29
26window.dataLayer = window.dataLayer || []; 27 function gtag(){dataLayer.push(arguments);} 28 gtag('js', new Date()); 29 gtag('config', '
29UA-2043168-3
vendor: 4 bytes, line 29
29');
30</script>
30 31 32 33</head> 34<body data-bs-no-jquery="true"> 35 36 <!-- Start Header/Navigation --> 37 <nav class="custom-navbar navbar navbar navbar-expand-md navbar-dark bg-dark" aria-label="navigation bar"> 38 <div class="container"> 39 <a class="navbar-brand" href="../index.html">tk<span>docs</span></a> 40 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsTkdocs" aria-controls="navbarsTkdocs" aria-expanded="false" aria-label="Toggle navigation"> 41 <span class="navbar-toggler-icon"></span> 42 </button> 43 <div class="collapse navbar-collapse" id="navbarsTkdocs"> 44 <ul class="custom-navbar-nav navbar-nav ms-auto mb-2 mb-md-0"> 45 <li class="nav-item dropdown active"><a class="nav-link dropdown-toggle" href="../tutorial/index.html" id="tutorialDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tutorial</a> 46 <ul class="dropdown-menu" aria-labelledby="tutorialDropdown"> 47 <li><a class="dropdown-item" href="../tutorial/index.html">Table of Contents</a></li> 48 <li><a class="dropdown-item" href="../tutorial/intro.html">Introduction</a></li> 49 <li><a class="dropdown-item" href="../tutorial/install.html">Installing Tk</a></li> 50 <li><a class="dropdown-item" href="../tutorial/firstexample.html">A First (Real) Example</a></li> 51 <li><a class="dropdown-item" href="../tutorial/concepts.html">Tk Concepts</a></li> 52 <li><a class="dropdown-item" href="../tutorial/widgets.html">Basic Widgets</a></li> 53 <li><a class="dropdown-item" href="../tutorial/grid.html">The Grid Geometry Manager</a></li> 54 <li><a class="dropdown-item" href="../tutorial/morewidgets.html">More Widgets</a></li> 55 <li><a class="dropdown-item" href="../tutorial/eventloop.html">Event Loop</a></li> 56 <li><a class="dropdown-item" href="../tutorial/menus.html">Menus</a></li> 57 <li><a class="dropdown-item" href="../tutorial/windows.html">Windows and Dialogs</a></li> 58 <li><a class="dropdown-item" href="../tutorial/complex.html">Organizing Complex Interfaces</a></li> 59 <li><a class="dropdown-item" href="../tutorial/fonts.html">Fonts, Colors, Images</a></li> 60 <li><a class="dropdown-item" href="../tutorial/canvas.html">Canvas</a></li> 61 <li><a class="dropdown-item" href="../tutorial/text.html">Text</a></li> 62 <li><a class="dropdown-item" href="../tutorial/tree.html">Treeview</a></li> 63 <li><a class="dropdown-item" href="../tutorial/styles.html">Styles and Themes</a></li> 64 <li><a class="dropdown-item" href="../tutorial/customstyles.html">Custom Styles and Themes</a></li> 65 <li><a class="dropdown-item" href="../tutorial/idle.html">Case Study: IDLE Modernization</a></li> 66 </ul> 67 </li> 68 <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="../resources/index.html" id="resourcesDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Resources</a> 69 <ul class="dropdown-menu" aria-labelledby="resourcesDropdown"> 70 <li><a class="dropdown-item" href="../resources/index.html">Overview</a></li> 71 <li><a class="dropdown-item" href="../resources/backgrounder.html">Tk Backgrounder</a></li> 72 <li><a class="dropdown-item" href="../widgets/index.html">Widget Roundup</a></li> 73 <li><a class="dropdown-item" href="../resources/languages.html">Languages Using Tk</a></li> 74 <li><a class="dropdown-item" href="../pyref/index.html">Tkinter API Reference</a></li> 75 <li><a class="dropdown-item" href="../shipman/index.html">Shipman Tkinter Reference</a></li> 76 </ul> 77 </li> 78 <li class="nav-item"><a class="nav-link" href="../book.html" title="Book">Modern Tkinter</a></li> 79 <li class="nav-item"><a class="nav-link" href="../about.html" title="About">About</a></li> 80 <li class="searchbox">
80<script async src="https://cse.google.com/cse.js?cx=003320820744845249553:21x-yikoeim"></script>
80 81 <div class="gcse-searchbox-only" data-resultsUrl="../search.html"></div></li>
82<script> 83 window.onload = function(){ 84 document.getElementById('gsc-i-id1').placeholder = 'Search TkDocs'; 85 }; 86</script>
86 87 88 89 </ul> 90 </div> 91 </div> 92 </nav> 93 94 95 96 97 98 99 <!-- Start Hero Section --> 100 <div class="hero" style="padding:calc(4rem - 30px) 0 2rem 0;"> 101 <div class="container"> 102 <div class="row justify-content-between"> 103 <div class="col-lg-8"> 104 <div class="intro-excerpt" style="max-width:800px;"> 105 <h1>Tutorial</h1> 106 <p class="mb-0 mt-5">This tutorial will quickly get you up and running with the latest Tk from Python, Tcl, Ruby, and Perl on macOS, Windows, or Linux. It provides all the essentials about core Tk concepts, the various widgets, layout, events and more that you need for your application.</p> 107 </div> 108 </div> 109 </div> 110 </div> 111 </div> 112 <!-- End Hero Section --> 113 114 115<div class="container"> 116 <div class="row justify-content-between align-items-start"> 117 <div class="sidebar-sticky sidebar-topic col-lg-2 order-lg-2 mx-auto"> 118 <p class="d-none d-lg-block text-center fs-6 fw-bold text-secondary text-uppercase">Tutorial</p> 119 <form name="langform" id="langform" class="langselector"> 120 <div class="input-group input-group-sm"> 121 <label for="languageselect" class="input-group-text">Show:</label> 122 <select name="langs" id="languageselect" class="form-select form-select-sm shadow-none" onChange="adjustView(document.getElementById('languageselect').options[document.getElementById('languageselect').selectedIndex].value);"> 123 <option value="python">Python 124 <option value="tcl">Tcl 125 <option value="ruby">Ruby 126 <option value="perl">Perl 127 <option selected value="all">All Languages 128 </select> 129 </div> 130 </form> 131 <ul class="tightlist d-none d-lg-block"> 132<li><a href="index.html">Table of Contents</a></li> 133<li><a href="intro.html">Introduction</a></li> 134<li><a href="install.html">Installing Tk</a></li> 135<li><a href="firstexample.html">A First (Real) Example</a></li> 136<li><a href="concepts.html">Tk Concepts</a></li> 137<li><a href="widgets.html">Basic Widgets</a></li> 138<li><a href="grid.html">The Grid Geometry Manager</a></li> 139<li><a href="morewidgets.html">More Widgets</a></li> 140<li><a href="eventloop.html">Event Loop</a></li> 141<li><a href="menus.html">Menus</a></li> 142<li><a href="windows.html">Windows and Dialogs</a></li> 143<li><a href="complex.html">Organizing Complex Interfaces</a></li> 144<li><a href="fonts.html">Fonts, Colors, Images</a></li> 145<li><a href="canvas.html">Canvas</a></li> 146<li><a href="text.html">Text</a></li> 147<li><a href="tree.html">Treeview</a></li> 148<li><a href="styles.html">Styles and Themes</a></li> 149<li><a href="customstyles.html">Custom Styles and Themes</a></li> 150<li><a href="idle.html">Case Study: IDLE Modernization</a></li> 151</ul> 152 153 </div> 154 <div class="col-lg-10 order-1 pe-5 tutorial"> 155<nav><ul class="pagination justify-content-center"><li class="page-item disabled"><a class="page-link" href="#"><i class='fa fa-arrow-circle-o-left fa-lg'></i></a></li><li class="page-item"><a title='Table of Contents' class="page-link" href="index.html"><i class='fa fa-list fa-lg'></i></a></li><li class="page-item"><a title='Single Page' class="page-link" href="onepage.html"><i class='fa fa-file-text-o fa-lg'></i></a></li><li class="page-item"><a class="page-link" href="intro.html">Introduction <i class='fa fa-arrow-circle-o-right fa-lg'></i></a></li></ul></nav> 156<ol id=toc> 157<li><a href="intro.html">Introduction</a></li> 158<ul> 159<li><a href="intro.html#audience">Who this tutorial is for</a></li> 160<li><a href="intro.html#bestpractices">Modern best practices</a></li> 161<li><a href="intro.html#betterway">The better way forward</a></li> 162<li><a href="intro.html#usage">How to use this tutorial</a></li> 163</ul> 164<li><a href="install.html">Installing Tk</a></li> 165<ul> 166<li><a href="install.html#installmac">Installing Tk on macOS</a></li> 167<li><a href="install.html#installwin">Installing Tk on Windows</a></li> 168<li><a href="install.html#installlinux">Installing Tk on Linux</a></li> 169<li><a href="install.html#helloworld">The obligatory first program</a></li> 170</ul> 171<li><a href="firstexample.html">A First (Real) Example</a></li> 172<ul> 173<li><a href="firstexample.html#design">Design</a></li> 174<li><a href="firstexample.html#code">
174Code</a></li> 175<li><a href="firstexample.html#walkthrough">Step-by-step walkthrough</a></li> 176<li><a href="firstexample.html#missing">What's missing?</a></li> 177</ul> 178<li><a href="concepts.html">Tk Concepts</a></li> 179<ul> 180<li><a href="concepts.html#widgets">Widgets</a></li> 181<li><a href="concepts.html#geometry">Geometry management</a></li> 182<li><a href="concepts.html#events">Event handling</a></li> 183</ul> 184<li><a href="widgets.html">Basic Widgets</a></li> 185<ul> 186<li><a href="widgets.html#frame">Frame</a></li> 187<li><a href="widgets.html#label">Label</a></li> 188<li><a href="widgets.html#button">Button</a></li> 189<li><a href="widgets.html#checkbutton">Checkbutton</a></li> 190<li><a href="widgets.html#radiobutton">Radiobutton</a></li> 191<li><a href="widgets.html#entry">Entry</a></li> 192<li><a href="widgets.html#combobox">Combobox</a></li> 193</ul> 194<li><a href="grid.html">The Grid Geometry Manager</a></li> 195<ul> 196<li><a href="grid.html#colsrows">Columns and rows</a></li> 197<li><a href="grid.html#span">Spanning multiple cells</a></li> 198<li><a href="grid.html#incell">Layout within the cell</a></li> 199<li><a href="grid.html#resize">Handling resize</a></li> 200<li><a href="grid.html#padding">Padding</a></li> 201<li><a href="grid.html#morefeatures">Additional grid features</a></li> 202<li><a href="grid.html#nestedlayout">Nested layouts</a></li> 203</ul> 204<li><a href="morewidgets.html">More Widgets</a></li> 205<ul> 206<li><a href="morewidgets.html#listbox">Listbox</a></li> 207<li><a href="morewidgets.html#scrollbar">Scrollbar</a></li> 208<li><a href="morewidgets.html#text">Text</a></li> 209<li><a href="morewidgets.html#scale">Scale</a></li> 210<li><a href="morewidgets.html#spinbox">Spinbox</a></li> 211<li><a href="morewidgets.html#progressbar">Progressbar</a></li> 212</ul> 213<li><a href="eventloop.html">Event Loop</a></li> 214<ul> 215<li><a href="eventloop.html#blocking">Blocking the event loop</a></li> 216<li><a href="eventloop.html#timer">One step at a time</a></li> 217<li><a href="eventloop.html#asyncio">Asynchronous I/O</a></li> 218<li><a href="eventloop.html#threads">Threads or processes</a></li> 219<li><a href="eventloop.html#nested">Nested event processing</a></li> 220</ul> 221<li><a href="menus.html">Menus</a></li> 222<ul> 223<li><a href="menus.html#menubars">Menubars and the menu hierarchy</a></li> 224<li><a href="menus.html#macosmenus">Special menus on macOS</a></li> 225<li><a href="menus.html#winmenus">Special menus on Windows</a></li> 226<li><a href="menus.html#popupmenus">Contextual menus</a></li> 227</ul> 228<li><a href="windows.html">Windows and Dialogs</a></li> 229<ul> 230<li><a href="windows.html#createdestroy">Creating and destroying windows</a></li> 231<li><a href="windows.html#wm">Window behavior and styles</a></li> 232<li><a href="windows.html#dialogs">Dialog windows</a></li> 233</ul> 234<li><a href="complex.html">Organizing Complex Interfaces</a></li> 235<ul> 236<li><a href="complex.html#separator">Separator</a></li> 237<li><a href="complex.html#labelframe">Label Frames</a></li> 238<li><a href="complex.html#panedwindow">Paned Windows</a></li> 239<li><a href="complex.html#notebook">Notebook</a></li> 240</ul> 241<li><a href="fonts.html">Fonts, Colors, Images</a></li> 242<ul> 243<li><a href="fonts.html#fonts">Fonts</a></li> 244<li><a href="fonts.html#colors">Colors</a></li> 245<li><a href="fonts.html#images">Images</a></li> 246</ul> 247<li><a href="canvas.html">Canvas</a></li> 248<ul> 249<li><a href="canvas.html#creating">Creating items</a></li> 250<li><a href="canvas.html#bindings">Event bindings</a></li> 251<li><a href="canvas.html#tags">Tags</a></li> 252<li><a href="canvas.html#scrolling">Scrolling</a></li> 253</ul> 254<li><a href="text.html">Text</a></li> 255<ul> 256<li><a href="text.html#basics">The basics</a></li> 257<li><a href="text.html#modifying">Modifying the text in code</a></li> 258<li><a href="text.html#tags">Formatting with tags</a></li> 259<li><a href="text.html#bindings">Events and bindings</a></li> 260<li><a href="text.html#selection">Selecting text</a></li> 261<li><a href="text.html#marks">Marks</a></li> 262<li><a href="text.html#images">Images and widgets</a></li> 263<li><a href="text.html#more">Even more</a></li> 264</ul> 265<li><a href="tree.html">Treeview</a></li> 266<ul> 267<li><a href="tree.html#adding">Adding items to the tree</a></li> 268<li><a href="tree.html#rearranging">Rearranging items</a></li> 269<li><a href="tree.html#iteminfo">Displaying Information for each Item</a></li> 270<li><a href="tree.html#appearance">Item appearance and events</a></li> 271<li><a href="tree.html#display">Customizing the display</a></li> 272</ul> 273<li><a href="styles.html">Styles and Themes</a></li> 274<ul> 275<li><a href="styles.html#usetheme">Using existing themes</a></li> 276</ul> 277<li><a href="customstyles.html">Custom Styles and Themes</a></li> 278<ul> 279<li><a href="customstyles.html#insidestyle">What's inside a style?</a></li> 280<li><a href="customstyles.html#styleoptions">Manipulating styles</a></li> 281<li><a href="customstyles.html#whydifficult">Sound difficult to you?</a></li> 282<li><a href="customstyles.html#moreelements">Advanced: more on elements</a></li> 283</ul> 284<li><a href="idle.html">Case Study: IDLE Modernization</a></li> 285<ul> 286<li><a href="idle.html#idlegoals">Project goals</a></li> 287<li><a href="idle.html#idlemenus">Menus</a></li> 288<li><a href="idle.html#idlemainwin">Main window</a></li> 289<li><a href="idle.html#idleprefs">Preferences dialog</a></li> 290<li><a href="idle.html#idledialogs">Other dialogs</a></li> 291<li><a href="idle.html#idleintegration">Window integration</a></li> 292<li><a href="idle.html#idlehacks">Workarounds, hacks, and more</a></li> 293</ul> 294</ol> 295 296<nav><ul class="pagination justify-content-center"><li class="page-item disabled"><a class="page-link" href="#"><i class='fa fa-arrow-circle-o-left fa-lg'></i></a></li><li class="page-item"><a title='Table of Contents' class="page-link" href="index.html"><i class='fa fa-list fa-lg'></i></a></li><li class="page-item"><a title='Single Page' class="page-link" href="onepage.html"><i class='fa fa-file-text-o fa-lg'></i></a></li><li class="page-item"><a class="page-link" href="intro.html">Introduction <i class='fa fa-arrow-circle-o-right fa-lg'></i></a></li></ul></nav> 297 </div></div></div> 298 299 300 301 <footer class="footer-section mt-5"> 302 <div class="container relative"> 303 <div class="row"> 304 <div class="col-12 order-1 order-lg-1 col-lg-3 col-xl-3
304col-xxl-4"> 305 <div class="mb-lg-3 mb-xxl-0 pb-3 footer-logo-wrap"><a href="../index.html" class="footer-logo">tk<span>docs</span></a></div> 306 <p class="pt-xxl-5 pe-xxl-5 copyright mb-lg-2 text-left text-lg-start"> 307 <a href="https://tkdocs.com">TkDocs</a> © 2007-
307<script>document.write(new Date().getFullYear());</script>
307 308 by <a href="https://markroseman.com">Mark Roseman</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="CC" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="BY" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="NC" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="SA" style="max-width: 1em;max-height:1em;margin-left: .2em;">. 309 </p> 310 <ul class="list-unstyled custom-social mt-lg-4"> 311 <li><a href="../about.html" title="About TkDocs"><i class="fa fa-question-circle fa-lg"></i></a></li> 312 <li><a href="mailto:[email protected]" title="[email protected]"><i class="fa fa-envelope-square fa-lg"></i></a></li> 313 <li><a href="http://twitter.com/markroseman" title="@markroseman"><i class="fa fa-twitter-square fa-lg"></i></a></li> 314 <li><a href="http://markroseman.com" title="Personal Site"><i class="fa fa-external-link-square fa-lg"></i></a></li> 315 </ul> 316 </div> 317 <div class="order-3 order-md-2 order-lg-1 col-10 offset-1 offset-md-0 col-md-6 col-lg-4 col-xl-4 text-end align-self-end ps-2 ps-xxl-5 mb-xxl-0 mb-xl-3 fw-medium bg-waxrning" style="opacity:0.9;color:#314d43;font-size:0.95rem;letter-spacing:-0.04rem;"> 318 <!-- <p class="mb-2 fw-medium fs-6" style="color:#314d43;">All the Python material from TkDocs⦠plus exclusive extras to help you design, develop, and evolve larger Tkinter applications.</p> --> 319 <p class="mb-1 border-bottom border-danger text-danger fw-bold fs-5 text-right">New for 2025: Fourth Edition</p> 320 <p class="mb-0"><b>All of Python TkDocs.</b> <span class="smaller fst-italic">New in this edition:</span></p> 321 <p class="mb-0"><i class="fa fa-check-circle-o fs-4 text-success pe-1"></i> Now includes <a href="../pyref/">Tkinter API Reference</a></p> 322 <p class="mb-0"><i class="fa fa-check-circle-o fs-4 text-success pe-1"></i> Structuring & refining Tkinter code<span class="text-danger">*</span></p> 323 <p class="mb-0"><i class="fa fa-check-circle-o fs-4 text-success pe-1"></i> Third-party themes & widgets<span class="text-danger">*</span></p> 324 <p class="mb-2"><span class="text-danger">*</span><span class="text-secondary small fst-italic">Bonus material not available on TkDocs web site.</small></p> 325 326 <p class="mb-4"><a href="../book.html" class='btn btn-primary'>Explore</a></p> 327 </div> 328 <div class="col-12 col-md-6 col-lg-5 order-2 order-md-3 order-lg-2 col-xxl-4 px-0 mt-5 mt-md-3 mt-lg-0"> 329 <div style="position:relative;top:-85px;margin-bottom:-85px;"><img src="../images/combo3d2025.png" alt="Image" class="img-fluid"></div> 330 </div> 331 </div> 332 <div class="row d-none"> 333 <div class="d-sm-none">extra small</div> 334 <div class="d-none d-sm-block d-md-none">small</div> 335 <div class="d-none d-md-block d-lg-none">medium</div> 336 <div class="d-none d-lg-block d-xl-none">large</div> 337 <div class="d-none d-xl-block d-xxl-none">extra large</div> 338 <div class="d-none d-xxl-block">extra extra large</div> 339 </div> 340 </div> 341 </footer> 342 343
343<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
343 344
344<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
344 345
345<script src="../tkdocs.js"></script>
345 346
346<script type="text/javascript">function EJEJC_lc(th) { return false; }; </script>
346 347
347<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript"></script>
347 348
348<script>setDefaultLang()</script>
348 349</body> 350</html> 351 352 353
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.