Programmering nivå 2

Kap 5.4 – Skapa GUI med tkinter

Bygg ett enkelt fönster med textfält, knapp och funktioner som reagerar på klick.

Mål med lektionen

När du har arbetat klart med denna lektion ska du:

  • Förstå vad ett grafiskt användargränssnitt, GUI, är och varför det används.
  • Känna till grunderna i biblioteket tkinter.
  • Kunna skapa ett enkelt GUI med etiketter, textfält, knappar och funktioner.
  • Kunna koppla GUI-element till funktioner i din kod.

Så här lär du dig bäst

Du lär dig bäst genom att först bygga ett enkelt fönster med ett fåtal komponenter: en etikett, ett textfält och en knapp. När du ser hur gränssnittet reagerar på dina klick och inmatningar kan du börja koppla det till funktioner, till exempel att spara något, visa resultat eller hämta data från en fil. Tänk på att tkinter arbetar med en händelsestyrd modell: programmet väntar på att användaren ska göra något.

Centrala begrepp

  • GUI - Graphical User Interface, ett användarvänligt gränssnitt med knappar, textfält och fönster.
  • tkinter - Ett inbyggt Pythonbibliotek för att skapa GUI-program.
  • Widget - Ett grafiskt element, till exempel knapp, etikett eller textfält.
  • Eventhantering - Koden som reagerar när användaren klickar, skriver eller trycker.

Exempel: Enkel GUI-applikation

import tkinter as tk

def visa_meddelande():
    namn = namn_entry.get()
    resultat_label.config(text=f"Hej, {namn}!")

# Skapa fönster
rot = tk.Tk()
rot.title("Mitt första GUI")

# Skapa etikett och textfält
tk.Label(rot, text="Vad heter du?").pack()
namn_entry = tk.Entry(rot)
namn_entry.pack()

# Skapa knapp
tk.Button(rot, text="Säg hej", command=visa_meddelande).pack()

# Skapa resultatetikett
resultat_label = tk.Label(rot, text="")
resultat_label.pack()

# Starta programmet
rot.mainloop()

Att förstå koden

  • tk.Tk() skapar ett nytt fönster.
  • Entry används för att läsa in text från användaren.
  • Button skapar en knapp som kan kopplas till en funktion.
  • pack() används för att placera ut element i fönstret.
  • command=visa_meddelande kopplar funktionen till knapptryckningen.
  • mainloop() startar GUI-programmet och väntar på användarens händelser.

Så fungerar händelsestyrning

I ett terminalprogram körs koden ofta uppifrån och ned. I ett GUI-program skapas först fönstret och dess widgets. Sedan väntar programmet på händelser, till exempel att användaren klickar på en knapp. När knappen trycks körs funktionen som är kopplad till command.

Interaktiv simulering: tkinter-fönster

Det här är en webbsimulering av fönstret som koden skapar. Skriv i fältet och klicka på knappen i det simulerade fönstret för att se hur Entry, Button, command och Label.config() samarbetar.

Mitt första GUI

Vad händer i koden?

mainloop() väntar på att användaren ska skriva eller klicka.

Programmering 2-koppling: övningen visar skillnaden mellan att skapa widgets och att reagera på en händelse. Funktionen visa_meddelande körs först när knappen klickas, inte när knappen skapas.

Öva själv

Övning 1: Skapa ett informationsfönster

Skapa ett tkinter-fönster med en titel och tre Label-widgets som visar ditt namn, din klass och en hobby. Placera alla widgets med pack() och starta programmet med mainloop().

Fundera: Vilken rad skapar själva fönstret?

När du har försökt själv: visa lösningsförslaget till övning 1 på GitHub.

Övning 2: Hälsa med en knapp

Skapa ett fönster med en Entry, en Button och en tom Label. När användaren klickar på knappen ska en funktion hämta namnet med get() och ändra etikettens text med config().

Fundera: Varför skrivs funktionsnamnet utan parenteser i command?

När du har försökt själv: visa lösningsförslaget till övning 2 på GitHub.

Övning 3: Dubbla ett tal

Skapa ett GUI där användaren skriver ett tal och klickar på Dubbla. Visa resultatet i en Label. Hantera ValueError och visa ett felmeddelande i samma etikett om inmatningen inte är ett tal.

Testa: heltal, decimaltal och text.

När du har försökt själv: visa lösningsförslaget till övning 3 på GitHub.

Övning 4: Klickräknare

Skapa ett fönster med en etikett som visar antalet klick och två knappar: Öka och Nollställ. Knapparna ska vara kopplade till var sin funktion och uppdatera etiketten efter varje klick.

Fundera: Vilket värde måste finnas kvar mellan flera knapptryckningar?

När du har försökt själv: visa lösningsförslaget till övning 4 på GitHub.

Övning 5: Anteckningar med GUI

Svårare övning: Här kombinerar du tkinter med filhantering, funktioner och felhantering.

Skapa ett GUI med ett textfält och knapparna Spara anteckning och Visa anteckningar. Spara texten i anteckningar.txt med läget "a". Visa filens innehåll i en etikett och hantera att filen ännu inte finns.

Fundera: Vilken kod körs endast efter ett knapptryck?

När du har försökt själv: visa lösningsförslaget till övning 5 på GitHub.

Övning 6: Väder i ett GUI

Svårare övning: Här kombinerar du tkinter med ett API-anrop, JSON och robust felhantering.

Skapa ett GUI med en knapp som hämtar aktuellt väder för en bestämd plats från Open-Meteo. Visa temperatur och vindhastighet i en etikett. Använd timeout, raise_for_status() och try/except. Ett fel ska visas i fönstret och får inte krascha programmet.

Fundera: Varför ska API-anropet ligga i funktionen som körs av knappen?

När du har försökt själv: visa lösningsförslaget till övning 6 på GitHub.

Sammanfattning

  • Du har skapat ett första grafiskt gränssnitt med tkinter.
  • Du har använt etiketter, textfält och knappar.
  • Du har kopplat knapptryck till funktioner i din kod.
  • Du har påbörjat en övergång från terminalbaserade program till användarvänliga GUI-lösningar.

Tillbaka till Kapitel 5