PageSourceSearch

https://tkdocs.com/tutorial/index.html

html tkdocs.com collected 2026-10-02 05:09:41 UTC 20,979 bytes, 353 lines download raw bytes

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 &nbsp; <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 &nbsp; <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&nbsp;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 &amp; 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 &amp; 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.