Knjiga - mrežno i paralelno programiranje: Tkinter

Knjiga - mrežno i paralelno programiranje

Dalje: 7. Parametri klase Button i metode grid()

6. Tkinter - okviri i gumbi

Okviri

Na prozor se postavljaju različiti elementi sučelja.

Prije vidljivih elemenata dodat ćemo okvir (frame) koji neće biti vidljiv ali služi da na njega stavljamo ostale elemente.

Glavni prozor se može sastojati od jednog ili više okvira.

Za postavljanje okvira na prozor koristit ćemo klasu Frame.

Parametar konstruktora ove klase je objekt tipa Tk.

t = Tk()

Osim objekta tipa Tk u konstruktoru je moguće definirati i vrijednost za neki parametar.

Tri su načina na koje je moguće postavljati elemente sučelja na okvir, a zovemo ih upraviteljima geometrije prozora (eng. geometry management). Njihovi nazivi su:

Grid – okvir se podijeli u retke i stupce te se elementi sučelja stavljaju u odgovarajuće ćelije
Pack – za svaki element moguće je odrediti na koje mjesto okvira ćemo ga staviti (TOP, BOTTOM, LEFT, RIGHT), ukoliko više elemenata stavljamo na isto mjesto oni će se postaviti jedan pokraj drugoga
Place – svaki element stavljamo na točno određeno mjesto (koordinate) na prozoru

Za svaki od načina postavljanja elemenata kreirana je metoda nad klasom Frame i tom metodom naglašavamo koji ćemo upravitelj koristiti. Metode su: grid(), pack() i place()

Mi ćemo se uglavnom koristiti prvim načinom smještanja elementa na sučelje – stavljat ćemo elemente u tablicu (grid), dakle koristit ćemo metodu grid().

Parametri metode grid() su:

rows – broj redaka tablice
columns – broj stupaca tablice

Primjer

Treba kreirati prozor veličine 800 x 600 s plavom bojom pozadine te na njemu kreirati okvir (frame) veličine 400 x 300 s crvenom bojom pozadine i gridom od 4 retka i 3 stupca.

Rješenje:

U prvom koraku kreirat ćemo prozor dimenzija prozora 400 x 300, plave boje.

from tkinter import *
t = Tk()
t.config(width=800, height=600, bg='blue')
mainloop()

Nakon plavog prozora, kreirat ćemo crveni okvir (frame) s 4 reda i 3 stupca:

from tkinter import *
t = Tk()
t.config(width=800, height=600, bg='blue')
f = Frame(t, width=400, height=300, bg='red')
f.grid(rows=4, columns=3)
mainloop()

Pokretanje ovog programa rezultirat će sljedećim prozorom (slike su u odgovarajućim omjerima):

Primijetite da se veličina i boja prozora se je prilagodila okviru.

Gumbi

klasa Button
```
b = Button(f)
```

Naziv okvira na koji dodajemo gumb je prvi parametar konstruktora klase.

Najčešće korišteni parametri klase Button i metode grid() su popisani na posebnoj stranici. Pogledajte tamo ako vam zatreba neki parametar za vaš program.

Nakon što kreiramo instancu klase gumb sa svim željenim parametrima gumb je još potrebno staviti na prozor. To ćemo načiniti tako da nad gumbom pozovemo metodu grid(). U ovom slučaju metoda grid() ima nešto drugačije parametre a parametri su dani u sljedećoj tablici:

Sada konačno možemo napisati i svoj prvi program s konkretnim elementom grafičkog korisničkog sučelja.

Primjer 2

Kreirajmo grafičko korisničko sučelje koje će se sastojati od tri gumba. Dva gumba su u prvom a jedan gumb u drugom redu. Sredina gumba u drugom redu treba biti točno između dva gumba prvog reda. Na gumbima trebaju pisati redom tekstovi: Gumb A, Gumb B te Gumb C, pri čemu boje teksta trebaju biti plava, crvena i zelena te je potrebno postaviti veličinu fonta na 14 te podebljano a stil neka bude Calibri.

Rješenje:

from tkinter import *
 t = Tk()
 t.config()
 f = Frame(t)
 f.grid(rows=2, columns=2)
 a = Button(f, text='Gumb A', fg='blue', font=('Calibri', 14, 'bold'))
 a.grid(row = 1, column = 1)
 b = Button(f, text='Gumb B', fg='green', font=('Calibri', 14, 'bold'))
 b.grid(row=1, column=2)
 c = Button(f, text='Gumb C', fg='red', font=('Calibri', 14, 'bold'))
 c.grid(row=2, column=1, columnspan=2)
 mainloop()

Rezultat:

gumbi

Primjer 3

Kreirajmo grafičko korisničko sučelje s četiri gumba. Dva gumba su u prvom a dva gumb u drugom redu. Na gumbima trebaju pisati redom tekstovi: Trokut, Kvadrat, Krug i Brisanje pri čemu boje teksta biti različite. Gumbi služe za ono što piše na njima, npr. klikom na gumb Trokut, program crta trokut itd.

Treba nam paramatar command koji služi za izvođenje naredbe klikom na odgovarajući gumb.

from tkinter import *
from turtle import *
def trokut():
    for i in range(3):
        fd(200)
        lt(120)

def kvadrat():
    for i in range(4):
        fd(200)
        lt(90)
 
def krug():
    circle(100)

def brisanje():
    reset()
 
prozor = Tk()
prozor.config()
f = Frame(prozor)
f.grid(rows=2, columns=2)
a = Button(f, text='Trokut ', fg='blue', font=14, command=trokut)
a.grid(row=1, column=1)
b = Button(f, text='Kvadrat ', fg='green', font=14, command=kvadrat)
b.grid(row=1, column=2)
c = Button(f, text='Krug ', fg='brown', font=14, command=krug)
c.grid(row=2, column=1)
d = Button(f, text='Brisanje', fg='red', font=14, command=brisanje)
d.grid(row=2, column=2)
mainloop()

Pokretanjem programa dobit ćemo prozor kao na slici:

Klikom na gumbe možemo dobiti različite rezultate:

Vaš je zadatak prepraviti zadnji primjer, tako da program radi bilo što drugo. Broj gumba i funkcija nije zadan. Može biti i samo jedan gumb koji nešto pokreće. Poigrajte se i stvorite svoju kreaciju .

Predaja zadaće