jsb-editor/tutorial.html
2024-10-29 18:28:39 +01:00

452 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Tutoriel Tkinter</title>
<style>
html {
line-height: 1.5;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<style type="text/css">
body {
font-family: "Libertinus Sans";
max-width: 80% !important;
font-size: 13pt !important;
}
h2 {
border-bottom: 2pt solid black;
}
h3 {
border-bottom: 1pt solid black;
}
h4 {
border-bottom: 1pt solid #ccc;
}
div.sourceCode {
margin-left: -5px;
border-left: 1px dashed #ccc;
padding-left: 4px;
}
div.sourceCode code {
font-size: 10pt !important;
}
code {
font-family: "Fira Code" !important;
}
p code {
padding-left: 4px;
}
header {
margin-top: 1cm;
}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">Tutoriel Tkinter</h1>
</header>
<h1 id="tutoriel-tkinter">Tutoriel Tkinter</h1>
<p>Pour aller plus loin : <a href="https://tkdocs.com/tutorial/index.html">TkDocs Tutorial</a></p>
<h2 id="code-de-base">Code de base</h2>
<p>Créer une fenêtre vide :</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> tkinter <span class="im">as</span> tk</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> tkinter <span class="im">import</span> ttk</span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>root <span class="op">=</span> tk.Tk()</span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a>root.mainloop()</span></code></pre></div>
<p>Ajouter des boutons dans la fenêtre :</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> tkinter <span class="im">as</span> tk</span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> tkinter <span class="im">import</span> ttk</span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>root <span class="op">=</span> tk.Tk()</span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a>bt1 <span class="op">=</span> ttk.Button(root, text<span class="op">=</span><span class="st">&quot;Bonjour&quot;</span>)</span>
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a>bt1.grid(column<span class="op">=</span><span class="dv">0</span>, row<span class="op">=</span><span class="dv">0</span>)</span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a>bt2 <span class="op">=</span> ttk.Button(root, text<span class="op">=</span><span class="st">&quot;Au revoir&quot;</span>)</span>
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a>bt2.grid(column<span class="op">=</span><span class="dv">1</span>, row<span class="op">=</span><span class="dv">0</span>)</span>
<span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a>root.mainloop()</span></code></pre></div>
<h3 id="positionnement">Positionnement</h3>
<p>On peut changer le nombre de colonnes ou de lignes occupées par un
widget en ajoutant les paramètres <code>columnspan</code> ou
<code>rowspan</code> en plus de <code>column</code> et
<code>row</code>.</p>
<p>Pour coller un widget au bord de la grille, on peut ajouter
<code>sticky</code> :</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>bt2.grid(column<span class="op">=</span><span class="dv">1</span>, row<span class="op">=</span><span class="dv">0</span>, sticky<span class="op">=</span>(tk.W, tk.N))</span></code></pre></div>
<p><code>sticky</code> prend une liste de 0 à 4 éléments parmi :</p>
<ul>
<li><code>tk.E</code> : <em>East</em> = droite</li>
<li><code>tk.N</code> : <em>North</em> = haut</li>
<li><code>tk.S</code> : <em>South</em> = bas</li>
<li><code>tk.W</code> : <em>West</em> = gauche</li>
</ul>
<h3 id="redimensionner-la-fenêtre">Redimensionner la fenêtre</h3>
<p>Il faut indiquer quelles lignes et colonnes doivent changer de taille
quand la fenêtre change de taille.</p>
<p>Dans cet exemple, ce sont la ligne 1 et la colonne 0.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>root.rowconfigure(<span class="dv">1</span>, weight<span class="op">=</span><span class="dv">1</span>)</span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a>root.columnconfigure(<span class="dv">0</span>, weight<span class="op">=</span><span class="dv">1</span>)</span></code></pre></div>
<p>On peut appeler plusieurs fois ces fonctions pour choisir plusieurs
lignes et colonnes, et changer les <code>weight</code> pour modifier les
proportions.</p>
<h2 id="widgets">Widgets</h2>
<p>Tous les widgets peuvent être positionnés avec <code>grid</code>, de
la même manière que ci-dessus.</p>
<h3 id="label">Label</h3>
<p>Juste du texte.</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a>label <span class="op">=</span> ttk.Label(root, text<span class="op">=</span><span class="st">&quot;Je suis un texte. Wow.&quot;</span>)</span></code></pre></div>
<p>On peut aussi modifier le texte plus tard :</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a>label_text <span class="op">=</span> tk.StringVar()</span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a>label[<span class="st">&quot;textvariable&quot;</span>] <span class="op">=</span> label_text</span>
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a>label_text.<span class="bu">set</span>(<span class="st">&quot;Le nouveau texte. Tout ça pour ça !&quot;</span>)</span></code></pre></div>
<h3 id="bouton">Bouton</h3>
<p>Un bouton quon peut cliquer.</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> onclick():</span>
<span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a> <span class="bu">print</span>(<span class="st">&quot;On a cliqué&quot;</span>)</span>
<span id="cb7-3"><a href="#cb7-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb7-4"><a href="#cb7-4" aria-hidden="true" tabindex="-1"></a>bt <span class="op">=</span> ttk.Button(root, text<span class="op">=</span><span class="st">&quot;Cliquez-moi&quot;</span>, command<span class="op">=</span>onclick)</span></code></pre></div>
<h3 id="image">Image</h3>
<p>Un bouton ou un label peut afficher une image :</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a>img <span class="op">=</span> tk.PhotoImage(<span class="bu">file</span><span class="op">=</span><span class="st">&#39;image.png&#39;</span>)</span>
<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a>label[<span class="st">&quot;image&quot;</span>] <span class="op">=</span> img</span></code></pre></div>
<h3 id="entrée-de-texte">Entrée de texte</h3>
<p>Boîte dans laquelle on peut écrire une ligne de texte.</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a>text <span class="op">=</span> tk.StringVar()</span>
<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a>entry <span class="op">=</span> ttk.Entry(root, textvariable<span class="op">=</span>text)</span></code></pre></div>
<p>Plus tard, on peut récupérer le texte :</p>
<div class="sourceCode" id="cb10"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="bu">print</span>(<span class="st">&quot;L&#39;utilisateur a écrit :&quot;</span>, text.get())</span></code></pre></div>
<h3 id="entrée-de-texte-multiligne">Entrée de texte multiligne</h3>
<p>Zone dans laquelle on peut écrire du texte en plusieurs lignes.</p>
<div class="sourceCode" id="cb11"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a>text <span class="op">=</span> tk.Text(root)</span></code></pre></div>
<p>Il y a plusieurs méthodes pour interagir avec le texte :</p>
<div class="sourceCode" id="cb12"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="bu">print</span>(area.get(<span class="st">&quot;1.0&quot;</span>, <span class="st">&quot;end&quot;</span>)) <span class="co"># obtenir tout le texte</span></span>
<span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a><span class="bu">print</span>(area.get(<span class="st">&quot;2.0&quot;</span>, <span class="st">&quot;8.0&quot;</span>)) <span class="co"># le texte de la ligne 2 à la ligne 8</span></span>
<span id="cb12-3"><a href="#cb12-3" aria-hidden="true" tabindex="-1"></a>area.replace(<span class="st">&quot;1.0&quot;</span>, <span class="st">&quot;end&quot;</span>, <span class="st">&quot;le nouveau texte&quot;</span>) <span class="co"># remplacer du texte</span></span>
<span id="cb12-4"><a href="#cb12-4" aria-hidden="true" tabindex="-1"></a>area.insert(<span class="st">&quot;1.0&quot;</span>, <span class="st">&quot;le nouveau texte&quot;</span>) <span class="co"># insérer du texte</span></span></code></pre></div>
<h3 id="barre-de-défilement">Barre de défilement</h3>
<p>Certains widgets (<code>Text</code>) peuvent défiler avec la molette,
mais pour afficher la barre de défilement il faut un widget
supplémentaire.</p>
<div class="sourceCode" id="cb13"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a>scroll <span class="op">=</span> ttk.Scrollbar(root, orient<span class="op">=</span>tk.VERTICAL, command<span class="op">=</span>mon_widget_qui_défile.yview)</span>
<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a>scroll.grid(column<span class="op">=</span><span class="dv">1</span>, row<span class="op">=</span><span class="dv">0</span>, sticky<span class="op">=</span>(tk.N, tk.S, tk.E, tk.W))</span>
<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a>mon_widget_qui_défile.configure(yscrollcommand<span class="op">=</span>scroll.<span class="bu">set</span>)</span></code></pre></div>
<h3 id="cadre">Cadre</h3>
<p>Un cadre qui peut avoir une bordure et contenir dautres widgets.</p>
<div class="sourceCode" id="cb14"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a>frame <span class="op">=</span> ttk.Frame(root, borderwidth<span class="op">=</span><span class="dv">5</span>, relief<span class="op">=</span><span class="st">&quot;ridge&quot;</span>, width<span class="op">=</span><span class="dv">200</span>, height<span class="op">=</span><span class="dv">100</span>)</span></code></pre></div>
<p>Les options ne sont pas obligatoires.</p>
<p>Le cadre contient ses propres lignes et colonnes. Pour placer des
widgets dedans, il suffit de remplacer <code>root</code> par
<code>frame</code> en les créant.</p>
<h3 id="barre-de-menus">Barre de menus</h3>
<p>La barre de menus en haut de la fenêtre.</p>
<div class="sourceCode" id="cb15"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a>root.option_add(<span class="st">&#39;*tearOff&#39;</span>, <span class="va">False</span>)</span>
<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a>menubar <span class="op">=</span> tk.Menu(root)</span>
<span id="cb15-3"><a href="#cb15-3" aria-hidden="true" tabindex="-1"></a>root[<span class="st">&#39;menu&#39;</span>] <span class="op">=</span> menubar</span>
<span id="cb15-4"><a href="#cb15-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb15-5"><a href="#cb15-5" aria-hidden="true" tabindex="-1"></a>menu_file <span class="op">=</span> tk.Menu(menubar)</span>
<span id="cb15-6"><a href="#cb15-6" aria-hidden="true" tabindex="-1"></a>menu_edit <span class="op">=</span> tk.Menu(menubar)</span>
<span id="cb15-7"><a href="#cb15-7" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb15-8"><a href="#cb15-8" aria-hidden="true" tabindex="-1"></a>menubar.add_cascade(menu<span class="op">=</span>menu_file, label<span class="op">=</span><span class="st">&#39;Fichier&#39;</span>)</span>
<span id="cb15-9"><a href="#cb15-9" aria-hidden="true" tabindex="-1"></a>menubar.add_cascade(menu<span class="op">=</span>menu_edit, label<span class="op">=</span><span class="st">&#39;Édition&#39;</span>)</span>
<span id="cb15-10"><a href="#cb15-10" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb15-11"><a href="#cb15-11" aria-hidden="true" tabindex="-1"></a>menu_file.add_command(label<span class="op">=</span><span class="st">&#39;Ouvrir&#39;</span>, command<span class="op">=</span>on_open)</span></code></pre></div>
<h3 id="canevas">Canevas</h3>
<p>Le canevas est une zone de dessin.</p>
<div class="sourceCode" id="cb16"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb16-1"><a href="#cb16-1" aria-hidden="true" tabindex="-1"></a>canvas <span class="op">=</span> tk.Canvas(root, background<span class="op">=</span><span class="st">&#39;white&#39;</span>)</span></code></pre></div>
<p>On peut y dessiner des formes :</p>
<div class="sourceCode" id="cb17"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb17-1"><a href="#cb17-1" aria-hidden="true" tabindex="-1"></a>canvas.create_line(x1, y1, x2, y2)</span>
<span id="cb17-2"><a href="#cb17-2" aria-hidden="true" tabindex="-1"></a>canvas.create_line(x1, y1, x2, y2, fill<span class="op">=</span><span class="st">&quot;red&quot;</span>, width<span class="op">=</span><span class="dv">3</span>, dash<span class="op">=</span><span class="dv">6</span>)</span>
<span id="cb17-3"><a href="#cb17-3" aria-hidden="true" tabindex="-1"></a>canvas.create_rectangle(x1, y1, x2, y2, fill<span class="op">=</span><span class="st">&quot;red&quot;</span>, outline<span class="op">=</span><span class="st">&quot;blue&quot;</span>)</span>
<span id="cb17-4"><a href="#cb17-4" aria-hidden="true" tabindex="-1"></a>canvas.create_oval(x1, y1, x2, y2, fill<span class="op">=</span><span class="st">&quot;red&quot;</span>, outline<span class="op">=</span><span class="st">&quot;blue&quot;</span>)</span></code></pre></div>
<h2 id="événements">Événements</h2>
<p>Quand il se passe quelque chose sur un widget, un événement est
généré. On peut écouter les événements de certains types, cest-à-dire
lancer une fonction quand laction se produit.</p>
<p>Par exemple, on affiche des informations quand une touche du clavier
est relâchée dans la zone de texte :</p>
<div class="sourceCode" id="cb18"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a>text <span class="op">=</span> tk.Text(root)</span>
<span id="cb18-2"><a href="#cb18-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb18-3"><a href="#cb18-3" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> onrelease(event):</span>
<span id="cb18-4"><a href="#cb18-4" aria-hidden="true" tabindex="-1"></a> <span class="bu">print</span>(<span class="st">&quot;On a frappé le clavier !&quot;</span>)</span>
<span id="cb18-5"><a href="#cb18-5" aria-hidden="true" tabindex="-1"></a> <span class="bu">print</span>(event)</span>
<span id="cb18-6"><a href="#cb18-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb18-7"><a href="#cb18-7" aria-hidden="true" tabindex="-1"></a>area.bind(<span class="st">&quot;&lt;KeyRelease&gt;&quot;</span>, onrelease)</span></code></pre></div>
<p>On peut aussi utiliser les infos contenues dans lévénement, par
exemple <code>event.keycode</code>.</p>
<h3 id="liste-des-événements">Liste des événements</h3>
<ul>
<li>Souris
<ul>
<li><code>ButtonPress</code>: clic enfoncé dun bouton de la souris</li>
<li><code>Button-1</code>: comme <code>ButtonPress</code> mais seulement
pour le clic gauche</li>
<li><code>Button-2</code>: comme <code>ButtonPress</code> mais seulement
pour le clic molette</li>
<li><code>Button-3</code>: comme <code>ButtonPress</code> mais seulement
pour le clic droit</li>
<li><code>ButtonRelease</code>: clic relâché dun bouton de la
souris</li>
<li><code>Double-1</code>: double-clic gauche</li>
<li><code>Double-3</code>: double-clic droit</li>
<li><code>Enter</code>: le pointeur de la souris entre</li>
<li><code>Leave</code>: le pointeur de la souris sort</li>
<li><code>Motion</code>: le pointeur de la souris bouge dedans</li>
<li><code>B1-Motion</code>: comme <code>Motion</code> mais avec le clic
gauche enfoncé</li>
<li><code>B2-Motion</code>: comme <code>Motion</code> mais avec le clic
molette enfoncé</li>
<li><code>B3-Motion</code>: comme <code>Motion</code> mais avec le clic
droit enfoncé</li>
</ul></li>
<li>Clavier
<ul>
<li><code>KeyPress</code>: appui dune touche du clavier</li>
<li><code>KeyRelease</code>: relâche dune touche du clavier</li>
</ul></li>
<li>Widget
<ul>
<li><code>Configure</code>: le widget est créé</li>
<li><code>Expose</code>: le widget est affiché ou réaffiché</li>
<li><code>FocusIn</code>: le widget reçoit le focus</li>
<li><code>FocusOut</code>: le widget pert le focus</li>
</ul></li>
</ul>
<h2 id="dialogues">Dialogues</h2>
<p>On peut ouvrir des fenêtres pour dire ou demander des choses.</p>
<h3 id="fichiers">Fichiers</h3>
<p>Demander où enregistrer un fichier, quel fichier ouvrir, choisir un
dossier.</p>
<div class="sourceCode" id="cb19"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb19-1"><a href="#cb19-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> tkinter <span class="im">import</span> filedialog</span>
<span id="cb19-2"><a href="#cb19-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb19-3"><a href="#cb19-3" aria-hidden="true" tabindex="-1"></a>filetypes <span class="op">=</span> [</span>
<span id="cb19-4"><a href="#cb19-4" aria-hidden="true" tabindex="-1"></a> (<span class="st">&quot;Texte&quot;</span>, <span class="st">&quot;*.txt&quot;</span>),</span>
<span id="cb19-5"><a href="#cb19-5" aria-hidden="true" tabindex="-1"></a> (<span class="st">&quot;Image PNG&quot;</span>, <span class="st">&quot;*.png&quot;</span>),</span>
<span id="cb19-6"><a href="#cb19-6" aria-hidden="true" tabindex="-1"></a> (<span class="st">&quot;Autre&quot;</span>, <span class="st">&quot;*.*&quot;</span>)</span>
<span id="cb19-7"><a href="#cb19-7" aria-hidden="true" tabindex="-1"></a>]</span>
<span id="cb19-8"><a href="#cb19-8" aria-hidden="true" tabindex="-1"></a>chemin <span class="op">=</span> tk.filedialog.asksaveasfilename(filetypes<span class="op">=</span>filetypes)</span>
<span id="cb19-9"><a href="#cb19-9" aria-hidden="true" tabindex="-1"></a><span class="bu">print</span>(chemin)</span></code></pre></div>
<p>On peut remplacer <code>asksaveasfilename</code> par
<code>askopenfilename</code> ou <code>askdirectory</code>.</p>
<h3 id="couleur">Couleur</h3>
<p>Demander de choisir une couleur.</p>
<div class="sourceCode" id="cb20"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb20-1"><a href="#cb20-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> tkinter <span class="im">import</span> colorchooser</span>
<span id="cb20-2"><a href="#cb20-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb20-3"><a href="#cb20-3" aria-hidden="true" tabindex="-1"></a>color <span class="op">=</span> colorchooser.askcolor(initialcolor<span class="op">=</span><span class="st">&#39;black&#39;</span>)</span>
<span id="cb20-4"><a href="#cb20-4" aria-hidden="true" tabindex="-1"></a><span class="bu">print</span>(color)</span></code></pre></div>
<p>On peut aussi indiquer la couleur initiale avec sa notation
hexadécimale <code>&quot;#000000&quot;</code>.</p>
</body>
</html>