PresentationerSlide 1/1

Kapitel 12

Användargränssnitt

Låt användaren förstå, styra och få svar från programmet.

Mål

Efter kapitlet ska du kunna...

  • förklara vad ett användargränssnitt är
  • bygga en textbaserad meny
  • skapa ett Tkinter-fönster
  • använda Label, Entry och Button
  • koppla händelser till funktioner
  • validera input och uppdatera GUI

12.1

Gränssnittet är mötet med användaren

Programmet visar information och instruktioner.

Användaren matar in data eller väljer en åtgärd.

Programmet svarar med ett begripligt resultat.

Tre typer

Olika sätt att interagera

GränssnittExempel
Kommandoradtext via input()
Grafisktfönster, knappar och fält
Webbsidor i webbläsaren

Tydlighet

Fråga konkret

Otydligt

n = input("x: ")

Tydligt

name = input("Skriv ditt namn: ")

Användaren ska förstå både vad som efterfrågas och i vilket format.

12.2

En textmeny visar alternativen

print("1. Hälsa")
print("2. Räkna")
print("3. Avsluta")

choice = input("Välj ett alternativ: ")

Hantera valet

if, elif och else

if choice == "1":
    print("Hej!")
elif choice == "2":
    number = int(input("Skriv ett tal: "))
    print(number * 2)
elif choice == "3":
    print("Programmet avslutas")
else:
    print("Ogiltigt val")

Återkommande meny

Loop tills användaren avslutar

while True:
    print("1. Hälsa")
    print("2. Räkna")
    print("3. Avsluta")
    choice = input("Välj: ")

    if choice == "1":
        print("Hej!")
    elif choice == "3":
        break
    else:
        print("Ogiltigt val")

12.3

Tkinter skapar grafiska program

  • Tk() skapar ett fönster.
  • Label visar text.
  • Entry tar emot text.
  • Button skapar en knapp.
  • mainloop() väntar på händelser.

Hela programmet

Skapa ett fönster

import tkinter as tk

window = tk.Tk()
window.title("Mitt första program")

window.mainloop()

Programmet stannar i händelseloopen tills fönstret stängs.

Visa text

Skapa och placera en Label

label = tk.Label(window, text="Hej världen")
label.pack()

Widgeten skapas med fönstret som förälder.

pack() placerar den i fönstret.

Knapp och funktion

command kopplar händelsen

def say_hello():
    print("Hej!")

button = tk.Button(
    window,
    text="Klicka här",
    command=say_hello
)
button.pack()

Skriv command=say_hello utan parenteser.

Händelsestyrning

Programmet väntar på användaren

mainloop()knappklicksay_hello()uppdatering

12.4

Entry tar emot input

entry = tk.Entry(window)
entry.pack()

Användaren kan skriva text i fältet.

entry.get() hämtar den aktuella texten.

Uppdatera GUI

config() ändrar Label

def greet():
    name = entry.get()
    label.config(text=f"Hej {name}")

entry = tk.Entry(window)
entry.pack()

button = tk.Button(window, text="Säg hej", command=greet)
button.pack()

label = tk.Label(window, text="")
label.pack()

Interaktiv simulering

Säg hej

Simulerad Label

Input och output

Data går genom en funktion

Entry.get()funktionlabel.config()

12.5

Validera innan beräkningen

def calculate():
    try:
        number = int(entry.get())
        result_label.config(text=str(number * 2))
    except ValueError:
        result_label.config(text="Skriv ett heltal")

Felmeddelandet visas i gränssnittet i stället för en krasch.

Placering

pack() eller grid()

pack()grid()
Enkel stapling av widgets.Placering i rader och kolumner.
Bra för små exempel.Bra för formulär.

Fler widgets

Olika typer av val

WidgetAnvändning
Radiobuttonett val av flera
OptionMenudropdown-lista
Checkbuttonpå/av-val
Textflera textrader

12.6

Ett komplett GUI har flera ansvar

  • Widgets samlar input.
  • Funktioner validerar och beräknar.
  • Labels visar resultat och fel.
  • Layout gör arbetsordningen tydlig.

Övning

Temperaturomvandlare

  1. Skapa Entry för Celsius.
  2. Koppla en knapp till en funktion.
  3. Hämta och omvandla input.
  4. Beräkna Fahrenheit.
  5. Visa resultat eller fel i en Label.

Sammanfattning

Kom ihåg

  • Gränssnittet ska göra nästa steg tydligt.
  • Textmenyer använder val, villkor och loopar.
  • Tkinter bygger GUI med widgets.
  • command kopplar knapp till funktion.
  • .get() hämtar input och config() uppdaterar output.
  • mainloop() väntar på händelser.