Visoka škola za informacijske tehnologije

Programske metode i apstrakcije

8. Predavanje
Uvod u GUI

Dušan Mišljenčević
 Podsjetnici

• Evidentirajte prisutnost: Obvezno se potpišite!

• Konzultacije – termin prema dogovoru, online
• SCAD – svi potrebni materijali i linkovi

Programske metode i apstrakcije 2

 Izlazni test

1. Napišite korake primjene algoritma binarnog pretraživanja

vrijednosti 21 u listi: [3,4,6,7,11,5,14,21,25,33,47]
2. Napišite korake primjene algoritma binarnog pretraživanja
vrijednosti 21 u listi: [2,3,5,7,8,9,11,13,17,18,19,21,25,28,31,41,51]

Programske metode i apstrakcije 3

 Izlazni test

1. Sortirajte listu [3,4,5,6,7,11,14,21,25,33,47]

2. Odredite low=0, high=11(len(liste)) i mid=5((low+high)//2)
3. Provjerite da li je tražena vrijednost = list[mid] tj. 11
4. Ako ne provjerite da li je tražena vrijednost < list[mid] tj. 11
5. Ako da, high=mid-1
6. Ako ne, low=mid+1
7. Ponovite od koraka 3

Programske metode i apstrakcije 4

 Sadržaj predavanja

• PRIMJENA
➢ Razviti GUI program koji ima user interface koje se sastoji
iz framea, buttona, labela i polja za tekstualni unos u grid
formatu
• TEORIJA
➢ Opisati potrebi za mainloop() metodom tkinter root
prozora u uvjetima event procesiranja petljom
➢ Opisati način na koji event handler radi s GUI
komponentom kao što je button
➢ Opisati kako se koristi grid() metoda za raspored
komponenti u frameu
➢ Opisati razloge za kreiranje podklase ttk.Frame klase kada
kreiramo GUI

Programske metode i apstrakcije 5

 GUI primjer

• Prozor s osnovnim komponentama

Programske metode i apstrakcije 6

 Kreiranje root window (1/2)

• Da bi se moglo crtati, potrebno je najprije kreirati root window

• Root window je instanca Tk() koja se nalazi u modulu
tkinter
• Zato treba import tkinter modula npr. kao
➢ from tkinter import *
• Za kreiranje root window obično se koristi naziv root
➢ root = Tk()
• Da bi se root window vidio potrebno je pokrenuti metodu
➢ root.mainloop() (ili samo mainloop())
• Bez mainloop() window se ne bi vidio
• Inicijalno, naziv root window je tk i prikazuju se Minimize,
Maximize, Close

Programske metode i apstrakcije 7

 Kreiranje root window (2/2)

• Pored metode mainloop()najčešće se koriste još

title(title) i geometry(str)
• Kako kreirati prazan root window
from tkinter import *
root=Tk()
root.title('Future value calculator')
root.geometry('300x100')

• Kako učiniti root window vidljivim

root.mainloop()

Programske metode i apstrakcije 8

 Dodavanje u root window (1/2)

• Da bismo mogli dodati osnovne komponente u root window

kao što su frame i button, trebe importirati ttk modul
• Importirati se može kao:
➢ from tkinter.ttk import *
➢ from tkinter import ttk
• Za dodavanje komponenti koristi se konstruktore
➢ Frame(parent [, padding])
➢ Button(parent, text)
• Za aktiviranje svih komponenti se koristi metoda
➢ pack([fill][, expand])

Programske metode i apstrakcije 9

 Dodavanje u root window (2/2)

• Kako dodati i prikazati okvir

frame=Frame(root, padding='10 10 10 10')
frame.pack(fill=BOTH, expand=True)

• Kako dodati i prikazati funkcijske gumbe

button1=Button(frame, text='Click me')
button2=Button(frame, text='No, click me')
button1.pack()
button2.pack()

Programske metode i apstrakcije 10

 Callback funkcija (1/2)

• Kako definirati Callback funkciju za gumb

button1=Button(frame, text='Click me', command=click_button1)
button2=Button(frame, text='No, click me',
command=click_button2)

• Callback funkcija
def click_button1():
root.title('You clicked button 1')

def click_button2():
root.destroy()

Programske metode i apstrakcije 11

 Callback funkcija (2/2)

• Poziv callback funkcije

➢ uočite command uz klasu Button
➢ Klik na prvi gumb poziva callback funkciju click_button1
koja promijeni naslov
➢ Klik na drugi gumb poziva callback funkciju click_button2
koja poziva root.destroy za izlazak
➢ Mogli smo napisati i bez click_button2
button2=Button(frame, text='No, click me', command=root.destroy)

Programske metode i apstrakcije 12

 Labele i unosna polja (1/4)

Programske metode i apstrakcije 13

 Labele i unosna polja (2/4)

• Za dodavanje komponenti koristi se konstruktore

➢ Label(parent text)
➢ Entry(parent, width, textvariable[, state])
• Kako kreirati i prikazati labelu
investmentLabel = Label(frame, text='Monthly Investment')
investmentLabel.pack()

• Drugi način za kreiranje labele

Label(frame, text='Monthly Investment').pack()

Programske metode i apstrakcije 14

 Labele i unosna polja (3/4)

• Za unos teksta u polje koristi se klasa

➢ StringVar()
➢ i metode get(), set(str)
• Kako povezati polje za unos teksta sa StringVar objektom
investmentText = StringVar()
imvestmentEntry = Entry(frame, width=25, textvariable=investmentText)
imvestmentEntry.pack()

• Kako kreirati read-only polje za unos teksta

fvText = StringVar()
fvEntry = Entry (frame, width=25, textvariable=fvText, state='readonly')
fvEntry.pack()

Programske metode i apstrakcije 15

 Labele i unosna polja (4/4)

• Kako pročitati ili postaviti string u polje za unos teksta

investmentText.set('123')
investment = investmentText.get()

Programske metode i apstrakcije 16

 Grid (1/3)

Programske metode i apstrakcije 17

 Grid (2/3)

• Neki argumenti metode grid()

➢column
➢row
➢sticky
➢padx
➢pady
➢columnspan
➢rowspan

Programske metode i apstrakcije 18

 Grid (3/3)

• Kako složiti komponente u grid

Label(frame, text='Monthly investment').grid(column=0, row=0, sticky=E)
Entry(frame, width=25, textvariable=investmentText).grid(column=1, row=0)

Label(frame, text='Yearly interest rate').grid(column=0, row=1, sticky=E)

Entry(frame, width=25, textvariable=rateText).grid(column=1,row=1)

• Kako popuniti sve komponente u gridu

for child in frame.winfo_children(): #get children
child.grid_configure(padx=5, pady=3) #pad each child

Programske metode i apstrakcije 19

 Window s okvirom (1/3)

Programske metode i apstrakcije 20

 Window s okvirom (2/3)

import tkinter as tk
from tkinter import ttk
class InvestmentFrame(ttk.Frame):
def __init__(self, parent):
ttk.Frame.__init__(self, parent, padding="10 10 10 10")
self.pack(fill=tk.BOTH, expand=True)
# Define string variable for the entry field
self.monthlyInvestment = tk.StringVar()
# Create a label, an entry field, and a button
ttk.Label(self, text="Monthly Investment:").grid(
column=0, row=0, sticky=tk.E)
ttk.Entry(self, width=25,
textvariable=self.monthlyInvestment).grid(column=1, row=0)
ttk.Button(self, text="Clear", command=self.clear).grid(column=2, row=0)
# Add padding to all child components
for child in self.winfo_children():
child.grid_configure(padx=5, pady=3)

Programske metode i apstrakcije 21

 Window s okvirom (3/3)

# Define the callback method for the Clear button

def clear(self):
print("Monthly Investment:",
self.monthlyInvestment.get())
self.monthlyInvestment.set("")

if __name__ == "__main__":
root = tk.Tk() # Create the root window
root.title("Future Value Calculator")
InvestmentFrame(root) # Create the frame
root.mainloop() # Display the frame

Programske metode i apstrakcije 22

 GUI za Future Calculator

Programske metode i apstrakcije 23

 Poslovni modul

class Investment():
def __init__(self):
self.monthlyInvestment = 0
self.yearlyInterestRate = 0
self.years = 0
def calculateFutureValue(self):
monthlyInterestRate = self.yearlyInterestRate / 12 / 100
months = self.years * 12
futureValue = 0
for i in range(months):
futureValue += self.monthlyInvestment
monthlyInterestAmount = futureValue * monthlyInterestRate
futureValue += monthlyInterestAmount
return futureValue

Programske metode i apstrakcije 24

 UI modul (1/4)

import tkinter as tk
from tkinter import ttk
import locale

class FutureValueFrame(ttk.Frame):
def __init__(self, parent):
ttk.Frame.__init__(self, parent, padding="10 10 10 10")
self.parent = parent
self.investment = Investment()
result = locale.setlocale(locale.LC_ALL, '')
if result == 'C':
locale.setlocale(locale.LC_ALL, 'en_US')
# Define string variables for text entry fields
self.monthlyInvestment = tk.StringVar()
self.yearlyInterestRate = tk.StringVar()
self.years = tk.StringVar()
self.futureValue = tk.StringVar()
self.initComponents()

Programske metode i apstrakcije 25

 UI modul (2/4)

def initComponents(self):
self.pack()
ttk.Label(self, text="Monthly Investment:").grid(
column=0, row=0, sticky=tk.E)
ttk.Entry(self, width=25,
textvariable=self.monthlyInvestment).grid(
column=1, row=0)
ttk.Label(self, text="Yearly Interest Rate:").grid(column=0, row=1, sticky=tk.E)
ttk.Entry(self, width=25,
textvariable=self.yearlyInterestRate).grid(column=1, row=1)
ttk.Label(self, text="Years:").grid(column=0, row=2, sticky=tk.E)
ttk.Entry(self, width=25, textvariable=self.years).grid(column=1, row=2)
ttk.Label(self, text="Future Value:").grid(column=0, row=3, sticky=tk.E)
ttk.Entry(self, width=25, textvariable=self.futureValue,state="readonly").grid(column=1, row=3)
self.makeButtons()
for child in self.winfo_children():
child.grid_configure(padx=5, pady=3)

Programske metode i apstrakcije 26

 UI modul (3/4)

def makeButtons(self):
# Create a frame to store the two buttons
buttonFrame = ttk.Frame(self)
buttonFrame.grid(column=0, row=4, columnspan=2, sticky=tk.E)
ttk.Button(buttonFrame, text="Calculate",
command=self.calculate).grid(column=0, row=0, padx=5)
ttk.Button(buttonFrame, text="Exit",
command=self.parent.destroy).grid(column=1, row=0)

def calculate(self):
self.investment.monthlyInvestment = float(
self.monthlyInvestment.get())
self.investment.yearlyInterestRate = float(
self.yearlyInterestRate.get())
self.investment.years = int(self.years.get())
self.futureValue.set(locale.currency(
self.investment.calculateFutureValue(), grouping=True))

Programske metode i apstrakcije 27

 UI modul (4/4)

if __name__ == "__main__":
root = tk.Tk()
root.title("Future Value Calculator")
FutureValueFrame(root)
root.mainloop()

Programske metode i apstrakcije 28

 Kraj 8. predavanja

Hvala na pozornosti!

Programske metode i apstrakcije 29