{"id":5801,"date":"2024-08-29T06:24:12","date_gmt":"2024-08-29T06:24:12","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-des-boutons-avec-tkinter-guide\/"},"modified":"2024-08-29T06:24:16","modified_gmt":"2024-08-29T06:24:16","slug":"creer-des-boutons-avec-tkinter-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-des-boutons-avec-tkinter-guide\/","title":{"rendered":"6.5 Cr\u00e9er des Boutons avec Tkinter : Guide"},"content":{"rendered":"\n<p><strong>Cr\u00e9er des Boutons avec Tkinter<\/strong> est une comp\u00e9tence essentielle pour quiconque souhaitant d\u00e9velopper des applications graphiques en Python. Les boutons sont des composants interactifs qui permettent aux utilisateurs d&rsquo;interagir avec votre programme en d\u00e9clenchant diff\u00e9rentes actions \u00e0 partir de clics. D\u00e9couvrez comment vous pouvez facilement ajouter des boutons \u00e0 vos interfaces utilisateurs Tkinter gr\u00e2ce \u00e0 ce guide complet avec des exemples de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation de Boutons avec Tkinter<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/583374450?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Un bouton dans Tkinter est un widget de l&rsquo;interface utilisateur permettant aux utilisateurs de d\u00e9clencher une action sp\u00e9cifique lorsqu&rsquo;ils cliquent dessus. Vous pouvez utiliser le widget <code>Button<\/code> pour ajouter des boutons dans vos applications Tkinter. Voici les \u00e9tapes essentielles pour cr\u00e9er et configurer des boutons, ajouter des actions de clic et styliser les boutons de votre interface.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Boutons Tkinter de Base<\/h3>\n\n\n\n<p>Pour commencer, ajoutez simplement un bouton \u00e0 votre fen\u00eatre principale. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\n# Cr\u00e9e la fen\u00eatre principale\nroot = tk.Tk()\n\n# Cr\u00e9e un bouton\nbutton = tk.Button(root, text=\"Cliquez-moi\")\n\n# Affiche le bouton dans la fen\u00eatre\nbutton.pack()\n\n# D\u00e9marre la boucle principale Tkinter\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Actions aux Boutons<\/h3>\n\n\n\n<p>Pour rendre votre bouton fonctionnel, vous devez lui associer une fonction qui sera ex\u00e9cut\u00e9e lorsque le bouton est cliqu\u00e9. Voici comment associer une fonction au clic d&rsquo;un bouton :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\ndef on_button_click():\n    print(\"Le bouton a \u00e9t\u00e9 cliqu\u00e9 !\")\n\nroot = tk.Tk()\n\n# Cr\u00e9e un bouton avec une fonction associ\u00e9e\nbutton = tk.Button(root, text=\"Cliquez-moi\", command=on_button_click)\nbutton.pack()\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styliser les Boutons Tkinter<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;apparence de vos boutons, vous pouvez utiliser diff\u00e9rents param\u00e8tres de configuration comme la couleur, la police, et la taille. Voici un exemple d&rsquo;un bouton stylis\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\ndef on_button_click():\n    print(\"Le bouton stylis\u00e9 a \u00e9t\u00e9 cliqu\u00e9 !\")\n\nroot = tk.Tk()\n\n# Cr\u00e9e un bouton stylis\u00e9\nbutton = tk.Button(root, text=\"Cliquez-moi\", command=on_button_click,\n                   bg=\"blue\", fg=\"white\", font=(\"Helvetica\", 16, \"bold\"))\nbutton.pack(pady=20)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Boutons Multiples<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement ajouter plusieurs boutons \u00e0 votre interface utilisateur Tkinter et leur associer diff\u00e9rentes fonctions. Voici un exemple o\u00f9 deux boutons sont ajout\u00e9s avec des actions distinctes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\ndef on_button1_click():\n    print(\"Bouton 1 cliqu\u00e9 !\")\n\ndef on_button2_click():\n    print(\"Bouton 2 cliqu\u00e9 !\")\n\nroot = tk.Tk()\n\n# Cr\u00e9e plusieurs boutons avec des fonctions distinctes\nbutton1 = tk.Button(root, text=\"Bouton 1\", command=on_button1_click)\nbutton1.pack(side=\"left\", padx=10)\n\nbutton2 = tk.Button(root, text=\"Bouton 2\", command=on_button2_click)\nbutton2.pack(side=\"left\", padx=10)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnalisation Avanc\u00e9e des Boutons<\/h3>\n\n\n\n<p>Pour des cas plus avanc\u00e9s, vous pouvez personnaliser davantage vos boutons en utilisant des images ou en modifiant les options de bordure et de soulignement. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\nfrom PIL import Image, ImageTk  # Vous devez installer Pillow pour utiliser les images\n\ndef on_button_click():\n    print(\"Image bouton cliqu\u00e9 !\")\n\nroot = tk.Tk()\n\n# Charger une image et l'int\u00e9grer dans un bouton\nimage = Image.open(\"chemin\/vers\/votre\/image.png\")\nphoto = ImageTk.PhotoImage(image)\n\nbutton = tk.Button(root, image=photo, command=on_button_click, borderwidth=0,\n                   highlightthickness=0)\nbutton.pack(pady=20)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<p>En profitant de cette flexibilit\u00e9, vous pouvez cr\u00e9er des interfaces utilisateurs attrayantes et intuitives en utilisant les boutons Tkinter. Cet exemple d&rsquo;utilisation d&rsquo;image dans les boutons est particuli\u00e8rement utile pour les applications n\u00e9cessitant des ic\u00f4nes ou des graphiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation entre Fen\u00eatres avec des Boutons<\/h3>\n\n\n\n<p>Dans des applications plus complexes, vous pourriez vouloir utiliser les boutons pour naviguer entre diff\u00e9rentes fen\u00eatres. Voici un exemple de comment impl\u00e9menter cela :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\ndef open_new_window():\n    new_window = tk.Toplevel(root)\n    tk.Label(new_window, text=\"Ceci est une nouvelle fen\u00eatre\").pack()\n\nroot = tk.Tk()\n\n# Cr\u00e9e un bouton pour ouvrir une nouvelle fen\u00eatre\nbutton = tk.Button(root, text=\"Ouvrir une nouvelle fen\u00eatre\", command=open_new_window)\nbutton.pack(pady=20)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Widget Entry avec Tkinter<\/h3>\n\n\n\n<p>Si vous souhaitez obtenir des saisies utilisateur en conjonction avec des boutons Tkinter, vous pouvez utiliser le <a href=\"https:\/\/wikiform.fr\/codespace\/saisie-avec-le-widget-entry-en-tkinter\/\">widget Entry<\/a>. Ce widget permet aux utilisateurs de saisir du texte, ce qui peut ensuite \u00eatre trait\u00e9 lors de la pression d&rsquo;un bouton :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\ndef show_input():\n    user_input = entry.get()\n    print(f\"Vous avez saisi: {user_input}\")\n\nroot = tk.Tk()\n\nentry = tk.Entry(root)\nentry.pack(pady=10)\n\nbutton = tk.Button(root, text=\"Afficher\", command=show_input)\nbutton.pack(pady=10)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Afficher des Messages avec Tkinter<\/h3>\n\n\n\n<p>Pour enrichir l\u2019interactivit\u00e9 de vos interfaces, afficher des messages informatifs est souvent n\u00e9cessaire. Vous pouvez utiliser le <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-des-messages-avec-tkinter\/\">widget Label<\/a> pour afficher des messages apr\u00e8s une action de l&rsquo;utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\n\ndef show_message():\n    label.config(text=\"Le bouton a \u00e9t\u00e9 cliqu\u00e9!\")\n\nlabel = tk.Label(root, text=\"\")\nlabel.pack(pady=10)\n\nbutton = tk.Button(root, text=\"Cliquez-moi\", command=show_message)\nbutton.pack(pady=10)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Placer des Widgets avec Tkinter<\/h3>\n\n\n\n<p>Pour organiser les diff\u00e9rents composants de votre interface, vous pouvez utiliser diff\u00e9rentes m\u00e9thodes de placement comme <a href=\"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-pack-en-tkinter\/\">pack<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-grid-en-tkinter\/\">grid<\/a> ou <a href=\"https:\/\/wikiform.fr\/codespace\/placer-des-widgets-avec-place-en-tkinter\/\">place<\/a>. Cela vous permet de structurer votre interface selon vos besoins :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-python\"><code>import tkinter as tk\n\nroot = tk.Tk()\n\nbutton1 = tk.Button(root, text=\"Bouton 1\")\nbutton2 = tk.Button(root, text=\"Bouton 2\")\n\nbutton1.pack(side=\"left\", padx=10)\nbutton2.pack(side=\"right\", padx=10)\n\nroot.mainloop()\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Cr\u00e9er des boutons avec Tkinter est une comp\u00e9tence fondamentale pour construire des interfaces utilisateur interactives en Python. En utilisant les options de base et avanc\u00e9es pour cr\u00e9er et styliser vos boutons, vous pouvez rendre vos applications plus attrayantes et fonctionnelles. Pour des tutoriels plus d\u00e9taill\u00e9s sur Tkinter, explorez notre <a href=\"https:\/\/wikiform.fr\/codespace\/tp1-exercices-pratiques-calculatrice-en-python\/\">article sur les fonctionnalit\u00e9s interm\u00e9diaires et avanc\u00e9es de Tkinter<\/a>. Commencez maintenant \u00e0 exp\u00e9rimenter avec Tkinter et d\u00e9couvrez toutes les possibilit\u00e9s offertes par cet outil puissant !<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Python Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er des Boutons avec Tkinter est une comp\u00e9tence essentielle pour quiconque souhaitant d\u00e9velopper des applications graphiques en Python. Les boutons sont des composants interactifs qui&#8230;<\/p>\n","protected":false},"author":4,"featured_media":2907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[18],"class_list":["post-5801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-python","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5801"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5801\/revisions"}],"predecessor-version":[{"id":5802,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5801\/revisions\/5802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2907"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}