DD1312

Programmeringsteknik

Föreläsning 15 GUI del 1

Skolan för Datavetenskap och kommunikation

idag

Grafiska gränssnitt - GUI (Graphical User Interface)

Tkinter

Tillstånd

Komponenter

Layout

Händelser

exempel

...finns i Dropbox, se länken "GUI-exempel"

tkinter

• tkinter är ett av flera sätt att skriva grafiska gränssnitt i Python
• Vi använder tkinter därför att:
• tkinter följer med Pythoninstallationen,
• och introduceras i kursboken, se kap 13

​

textbaserat program

tillstånd

• Med ett grafiskt gränssnitt måste man tänka på vad som visas på skärmen i ett visst läge.
• Man brukar använda sig av tillstånd (state) när man modellerar hur programmet ska fungera.
• Programmets tillstånd beror av variablers värden, t ex

användare = "elev"

• Vad ska synas för en elev? Hur skiljer det sig från det läraren ser?

tillstånd - graf

klasser i tkinter

Modulen tkinter, har klasser för grafiska komponenter.

​

from tkinter import *

roten = Tk()

knapp = Button(roten, text="Tryck")

knapp.pack()

roten.mainloop()

​

​

​

enklast.py

​

from tkinter import *

roten = Tk()

knapp = Button(roten, text="Tryck")

knapp.pack()

roten.mainloop()

Hämtar alla klasser i modulen Tkinter.

Knappen placeras ut.

Button-konstruktorn - skapar en knapp.

Tk-konstruktorn - skapar rotfönstret.

Startar en slinga som väntar på inmatning från användaren.

att använda komponenter

• Knappar och annat kallas komponenter och är objekt.
• Varje komponent har en konstruktor (__init__-metod) med många defaultparametrar.
• Anropa bara med det som behövs:

knapp = Button(roten,text="Handla")

• Första parameter ska vara roten

att ändra attribut

Varje komponent fungerar som en dictionary med attributen som nycklar. Ändra attributets värde så här:

knapp["width"] = 9

​

OBS! Attributets namn ("width") står inom citattecken.

config

Vill du ändra flera attribut?

Använd metoden config

​

knapp.config(bg = "lightblue",\

height = 3,\

width = 9,\

font = ('times', 20, 'italic'))

​

Här ändrar vi knappens färg, storlek, och font.

OBS! Attributets namn står inte inom citattecken här.

​

​

finare.py

​

command

• Ett attribut som alla komponenter har är command
• Där anger man vilken metod/funktion som ska anropas när komponenten används.
• Om vi skriver en funktion addera() som ska anropas när nån trycker på knapp så kan vi koppla ihop funktion med knapp så här:
• knapp["command"] = addera

OBS! Funktionsnamnet

(inte anrop)

​

​

from tkinter import *

​

def byttext():

knapp["text"] = "Aj!"

​

roten = Tk()

knapp = Button(roten, text="Tryck inte")

knapp["command"] = byttext

knapp.pack()

roten.mainloop()

​

parametrar då?

• I exemplet ovan skickar vi bara med namnet på funktionen.
• Hur ska vi göra om funktionen har parametrar?
• Lösning: Använd en lambda-funktion (ett sätt att skapa en funktion där den behövs)

lambda-funktion

​

​

​

Parameter

Returvärde

from tkinter import *

​

def byttext(t):

knapp["text"] = t

​

roten = Tk()

knapp = Button(roten,text = "Tryck inte")

nytt = "Aj!"

knapp["command"] = lambda: byttext(nytt)

knapp.pack()

roten.mainloop()

​

byttext.py

​

lambda i command

DD1312

Programmeringsteknik

Föreläsning 15 GUI del 2

Skolan för Datavetenskap och kommunikation

layout

• Komponenter har metoder som styr hur de ska placeras i fönstret.
• Enklast är att använda pack:

knapp.pack()

• Men bättre kontroll fås med grid:

knapp.grid(row=4, column=3)

• Rita först en skiss över hur det ska se ut!

​

saga1.py ... saga7.py

​

0 1 2 3

0

​

​

1

​

​

2

​

​

3

​

​

4

​

​

5

​

​

6

etikett1 = Label(roten, text="Person:")

etikett2 = Label(roten, text="Plats:")

etikett3 = Label(roten, text="Verb:")

roten.grid()

etikett1.grid(row=1, column=0)

etikett2.grid(row=2, column=0)

etikett3.grid(row=3, column=0)

​

​

variabler

• Ett attribut som alla komponenter har är variable.
• Om man i förväg skapat ett variabelobjekt:

s = StringVar()

...så kan man koppla ihop variabel och komponent med

knapp["variable"] = s

• Metoden get hämtar sen data från ett variabelobjekt.

​

​

​

adj1 = StringVar()

kryssruta1 = Checkbutton(roten, text="modig")

kryssruta1["variable"] = adj1

kryssruta1["onvalue"] = " modig "

...

adjektiv = adj1.get()

​

felhantering i tkinter

• I messagebox finns "popupfönster" som lämpar sig för felhantering:
• showinfo
• showwarning
• showerror
• askquestion
• askyesnocancel
• Alla tar två parametrar: title och message
• Vissa har returvärde (t ex askyesnocancel)

exempel

from tkinter import *

from tkinter import messagebox

​

rot = Tk()

try:

x = 1/0

except ZeroDivisionError:

messagebox.showerror(title="Mattefel",\

message="Försökte dela med 0.")

rot.mainloop()

​

​

message.py

​

​

​

Dokumentation

TkDocs https://tkdocs.com/tutorial/index.html

Välj "Python" under Tutorial till höger på sidan