Graphical User Interface

Section 1
Chapter 8

An Introduction to Programming Using Python

David I. Schneider
What is a Graphical User Interface?
• Programs in previous chapters said to have a
text-based user interface
• Graphical user interfaces
– Present user with a window containing visual
objects
– Into which user can type in data
– Buttons that initiate actions
 The Button Widget
window
name Window title
Button
name Back ground color

Button text

좌 , 우 여백 상 , 하 여백

from tkinter import * 버튼크기 조정

width = 10, height = 5
window = Tk()
window.title("Button")
btnCalculate = Button(window, text="Calculate", bg="light blue")
btnCalculate.grid(padx=75, pady=15)
window.mainloop()
윈도우상 객체
위치 조절
 The Button Widget
• Example 1: Program extends code in Fig. 8.2(a)
by using event to toggle foreground color of
Button widget.
from tkinter import *
버튼 클릭 시 수행 함수
def changeColor():
if btnCalculate["fg"] == "blue": # if caption is blue
btnCalculate["fg"] = "red" # change color to red
else:
btnCalculate["fg"] = "blue" # change color to blue
Foreground : 글자색 버튼 클릭 시 수행함수 명
window = Tk()
window.title("Button")
btnCalculate = Button(window, text="Calculate", fg="blue", command=changeColor)
btnCalculate.grid(padx=100, pady=15)
window.mainloop()
 The Label Widget
text
Label name

from tkinter import *

window = Tk()
window.title("Label")
lblPrincipal = Label(window, text="Principal: ")
lblPrincipal.grid(padx=100, pady=15)
window.mainloop()
윈도우상 객체 좌 , 우 여백 상 , 하 여백
위치 조절
 The Entry Widget
from tkinter import *
window = Tk()
window.title("Entry Widget")
entName = Entry(window, width =10)
entName.grid(padx=100, pady=15)
window.mainloop()

from tkinter import *

window = Tk()
window.title("Entry Widget") Define string
variable
string = StringVar()
entName = Entry(window, textvariable = string)
entName.grid(padx=100, pady=15) Define entry
text=string variable
string.set("hello") Set entry text
window.mainloop() Output text
only,
No input
entName = Entry(window, state="readonly", textvariable = string)

string.get() get text from entry

 The Listbox Widget
• Example 5: Program places four items into list box
– Clicked item becomes highlighted, underlined
from tkinter import *
window = Tk()
window.title("Colors") Define string variable
String = StringVar()
Colors = Listbox(window, width=10, height = 5, listvariable=String)
Colors.grid(padx=100, pady=15)
Define list
= string variable
L = ["red", "yellow", "light blue", "orange"]
String.set(tuple(L)) Set string
window.mainloop() variable list

Colors.get(Colors.curselection())

get text from Listbox

 The Listbox Widget
• Example 6: Extension of program in Example 5
– Changes the background color
from tkinter import *
def changeBackgroundColor(event):
Colors["bg"]=Colors.get(Colors.curselection())
window = Tk()
window.title("Colors")
conOF1stColors = StringVar()
Colors = Listbox(window, width=10, height = 5, listvariable=conOF1stColors)
Colors.grid(padx=100, pady=15)
L = ["red", "yellow", "light blue", "orange"]
conOF1stColors.set(tuple(L))
Colors.bind("<<ListboxSelect>>", changeBackgroundColor)
window.mainloop()
리스트 선택시
수행할 함수
 The Listbox Widget
• Example 7: Extension of program in Example 5
– Sorts colors in list box
The Grid Geometry Manager

Section 2
Chapter 8

An Introduction to Programming Using Python

David I. Schneider
 Grids
• An imaginary rectangle
– Containing horizontal and vertical lines
– Divided into rectangles called cells.

(0,0) (0,1)
(1,0) (1,1)
(2,0) (2,1)

(3,0) (3,1)

(4,0) (4,1)

row 0, column 0 row 0, column 1 row 0, column 2 row 0, column 3

row 1, column 0 row 1, column 1 row 1, column 2 row 1, column 3
row 2, column 0 row 2, column 1 row 2, column 2 row 2, column 3
 Grids 좌 , 우 여백
좌우 , 상하정렬
상 , 하 여백

행, 열
행, 열 병합

• FIGURE 8.24 Grid for the mortgage program.

 Grids
• Statement places the widget
– Beginning in the cell located at row m and column n
– Spanning c columns.

좌우 여백 같게
상하 여백 같게

상 r, 하 s 여백 좌 r, 우 s 여백

Table 8.1 Padding Arguments

 The sticky Attribute

• sticky= parameter causes widget to be placed

– Letter N = North/top
– E = East/right
– W = West/left
– S = South/bottom
– EW = stretch horizontally, NS = stretch vertically
– NSEW = stretch both vertically, horizontally
The sticky Attribute
• EX: doubler
from tkinter import *
def multiply():
x=eval(string1.get())*2
string2.set(x)
window = Tk()
window.title("Double")
lblPrincipal1 = Label(window, text="Input number: ")
lblPrincipal1.grid(row=0, column=0, padx=5, pady=5, sticky=E)
string1 = StringVar()
entName1 = Entry(window, width =10, textvariable = string1)
entName1.grid(row=0, column=1, padx=5, pady=5, sticky=W)
btnCalculate = Button(window, width = 20, text="Calculate", command=multiply)
btnCalculate.grid(row=1, column=0, columnspan=2, padx=20, pady=10)
lblPrincipal2 = Label(window, text="Double number: ")
lblPrincipal2.grid(row=2, column=0, padx=5, pady=5, sticky=E)
string2 = StringVar()
entName2 = Entry(window, state="readonly", textvariable = string2)
entName2.grid(row=2, column=1, padx=5, pady=5, sticky=W)
window.mainloop()
 The Scrollbar Widget

from tkinter import *

window = Tk()
window.title("Scrollbar")
yscroll = Scrollbar(window, orient=VERTICAL)
yscroll.grid(padx=110, pady=15)
window.mainloop()
 Attaching Vertical Scrollbar to List Box

from tkinter import *

window = Tk()
window.title("Color")
yscroll = Scrollbar(window, orient=VERTICAL)
yscroll.grid(row=0, column=1, rowspan=4, padx=(0,100), pady=5, sticky=NS)
string = StringVar()
Colors = Listbox(window, width=14, height = 4, listvariable=string, yscrollcommand=yscroll.set)
Colors.grid(row=0, column=0, rowspan=4, padx=(100,0), pady=5, sticky=E)
L = ["red", "yellow", "light blue", "orange", "green", "black"]
string.set(tuple(L))
yscroll["command"] = Colors.yview
window.mainloop()
• EX: doubler
• L = [“1000”, “2000”,”3000”,”4000”,”5000”,”6000”]
eval(Colors.get(Colors.curselection())) 이용

from tkinter import *

window = Tk()
window.title("Color")
yscroll = Scrollbar(window, orient=VERTICAL)
yscroll.grid(row=0, column=2, rowspan=4, padx=(0,100), pady=5, sticky=NS)
string = StringVar()
Colors = Listbox(window, width=14, height = 4, listvariable=string, yscrollcommand=yscroll.set)
Colors.grid(row=0, column=1, rowspan=4, padx=(100,0), pady=5, sticky=E)
L = ["red", "yellow", "light blue", "orange", "green", "black"]
string.set(tuple(L))
yscroll["command"] = Colors.yview
window.mainloop()
 Homework

8.3 장 3, 7, 8, 9, 19
Programming project 1 (361p)
Writing GUI Programs

Section 3
Chapter 8

An Introduction to Programming Using Python

David I. Schneider
 Converting TUI Programs
to GUI Programs

FIGURE 8.31 A TUI program and a possible output

 Filling List Boxes from a File
• Example 2: Program uses file StateBirds.txt to
display state birds in a list box
 Filling List Boxes from a File
• Example 2
 Filling List Boxes from a File
• Example 2
GUI Programs, Object-Oriented Style
• Example 3: Object-oriented version of
program in Example 2
GUI Programs, Object-Oriented Style
• Example 3