tuxmain/jsb-editor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tags, better diff

Browse source
This commit is contained in:
Pascal Engélibert 2024-10-29 23:29:47 +01:00
commit d202ad3b05
5 changed files with 100 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

93
tutorial.html
View file

@ -335,55 +335,66 @@ la même manière que ci-dessus.</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>
<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>
<span id="cb12-5"><a href="#cb12-5" aria-hidden="true" tabindex="-1"></a>area.insert(<span class="st">&quot;1.0 +42 chars&quot;</span>, <span class="st">&quot;le nouveau texte&quot;</span>)</span>
<span id="cb12-6"><a href="#cb12-6" aria-hidden="true" tabindex="-1"></a>area.insert(<span class="st">&quot;end -3 lines&quot;</span>, <span class="st">&quot;le nouveau texte&quot;</span>)</span></code></pre></div>
<p>Pour mettre en forme certaines parties du texte, on peut utiliser des
tags :</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>area.tag_configure(<span class="st">&quot;fond_rouge&quot;</span>, background<span class="op">=</span><span class="st">&quot;#ffaaaa&quot;</span>)</span>
<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a>area.tag_configure(<span class="st">&quot;insistance&quot;</span>, foreground<span class="op">=</span><span class="st">&quot;#008800&quot;</span>, underline<span class="op">=</span><span class="va">True</span>)</span>
<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a>area.insert(<span class="st">&quot;1.0&quot;</span>, <span class="st">&quot;ce texte sera sur fond rouge&quot;</span>, <span class="st">&quot;fond_rouge&quot;</span>)</span>
<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a>text.tag_add(<span class="st">&quot;insistance&quot;</span>, <span class="st">&quot;1.3&quot;</span>, <span class="st">&quot;1.8&quot;</span>)</span></code></pre></div>
<p><a href="https://tcl.tk/man/tcl8.6/TkCmd/text.htm#M43">Liste de tous
les styles possibles.</a></p>
<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>
<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>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="cb14-2"><a href="#cb14-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="cb14-3"><a href="#cb14-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 d’autres 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>
<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>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>
<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>root.option_add(<span class="st">&#39;*tearOff&#39;</span>, <span class="va">False</span>)</span>
<span id="cb16-2"><a href="#cb16-2" aria-hidden="true" tabindex="-1"></a>menubar <span class="op">=</span> tk.Menu(root)</span>
<span id="cb16-3"><a href="#cb16-3" aria-hidden="true" tabindex="-1"></a>root[<span class="st">&#39;menu&#39;</span>] <span class="op">=</span> menubar</span>
<span id="cb16-4"><a href="#cb16-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-5"><a href="#cb16-5" aria-hidden="true" tabindex="-1"></a>menu_file <span class="op">=</span> tk.Menu(menubar)</span>
<span id="cb16-6"><a href="#cb16-6" aria-hidden="true" tabindex="-1"></a>menu_edit <span class="op">=</span> tk.Menu(menubar)</span>
<span id="cb16-7"><a href="#cb16-7" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-8"><a href="#cb16-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="cb16-9"><a href="#cb16-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="cb16-10"><a href="#cb16-10" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-11"><a href="#cb16-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>
<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 <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>
<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>canvas.create_line(x1, y1, x2, y2)</span>
<span id="cb18-2"><a href="#cb18-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="cb18-3"><a href="#cb18-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="cb18-4"><a href="#cb18-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, c’est-à-dire
lancer une fonction quand l’action 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>
<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>text <span class="op">=</span> tk.Text(root)</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><span class="kw">def</span> onrelease(event):</span>
<span id="cb19-4"><a href="#cb19-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="cb19-5"><a href="#cb19-5" aria-hidden="true" tabindex="-1"></a> <span class="bu">print</span>(event)</span>
<span id="cb19-6"><a href="#cb19-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb19-7"><a href="#cb19-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>
@ -429,23 +440,23 @@ droit enfoncé</li>
<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>
<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> filedialog</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>filetypes <span class="op">=</span> [</span>
<span id="cb20-4"><a href="#cb20-4" aria-hidden="true" tabindex="-1"></a> (<span class="st">&quot;Texte&quot;</span>, <span class="st">&quot;*.txt&quot;</span>),</span>
<span id="cb20-5"><a href="#cb20-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="cb20-6"><a href="#cb20-6" aria-hidden="true" tabindex="-1"></a> (<span class="st">&quot;Autre&quot;</span>, <span class="st">&quot;*.*&quot;</span>)</span>
<span id="cb20-7"><a href="#cb20-7" aria-hidden="true" tabindex="-1"></a>]</span>
<span id="cb20-8"><a href="#cb20-8" aria-hidden="true" tabindex="-1"></a>chemin <span class="op">=</span> tk.filedialog.asksaveasfilename(filetypes<span class="op">=</span>filetypes)</span>
<span id="cb20-9"><a href="#cb20-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>
<div class="sourceCode" id="cb21"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb21-1"><a href="#cb21-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> tkinter <span class="im">import</span> colorchooser</span>
<span id="cb21-2"><a href="#cb21-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb21-3"><a href="#cb21-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="cb21-4"><a href="#cb21-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>