ในการเขียนโปรแกรมที่มีส่วนติดต่อประสานกราฟิกกับผู้ใช้ (Graphical User Interface: GUI) ช่วยให้เห็นภาพรวมของโปรแกรมได้เป็นอย่างดี ในภาษาไพทอนมีโมดูล tkinter ที่ช่วยให้การพัฒนาส่วนต่อประสานกราฟิกกับผู้ใช้ ทำได้โดยง่ายและรวดเร็ว มี 4 ขั้นตอนดังนี้
1. นำเข้าโมดูล tkinter
2. สร้างหน้าต่างหลัก (main window)
3. จัดวางวิดเจ็ต (widget) หรือองค์ประกอบอื่นที่เป็นส่วนต่อประสานกราฟิกกับผู้ใช้ลงในหน้าต่างหลัก เช่น ปุ่มกด กล่องข้อความ
4. เชื่อมโยงเหตุการณ์ (event) ต่างๆ ที่เกิดขึ้นจากการทำงานกับวิดเจ็ตเข้ากับส่วนของโปรแกรมย่อย เพื่อให้แอปพลิเคชันทำงานได้ตามต้องการ
ในบทเรียนนี้นักเรียนจะได้สร้างโปรแกรมที่มีส่วนติดต่อประสานกราฟิกกับผู้ใช้ (Graphical User Interface: GUI) ด้วยโมดูล tkinter ของไพทอน เพื่อสร้างแอปพลิเคชันเครื่องคิดเลขอย่างง่ายที่สามารถคำนวณผลบวก ลบ คูณ และหารจำนวนเต็ม โดยมีขั้นตอนดังนี้
การสร้างหน้าต่างหลักด้วย tkinter
ให้นักเรียนเปิดโปรแกรม Thonny หรือใช้เว็บไซต์ https://repl.it/ หรือ IDE ที่นักเรียนถนัด แล้วเขียนโค้ดคำสั่งตามนี้
import tkinter as tk
m=tk.Tk()
m.title(‘Main window’)
m.mainloop()
ผลลัพธ์ของโปรแกรม

การเพิ่มปุ่มลงในหน้าต่างหลัก
ตัวอย่างนี้ นักเรียนจะได้ทดลองสร้างโปรแกรมโดยการสร้าง button ที่มีชื่อ “Stop” และเมื่อคลิกที่ปุ่มจะทำการหน้าต่างโปรแกรมจะปิดออกไป
import tkinter as tk
m=tk.Tk()
m.title(‘Main window’)
button=tk.Button(m,text=’Stop’,width=25,command=lambda:m.destroy())
button.pack()
m.mainloop()
ผลลัพธ์ของโปรแกรม

การเพิ่มวิดเจ็ตลาเบลลงในหน้าต่างหลัก
ตัวอย่างนี้ นักเรียนจะได้ทดลองสร้างโปรแกรมนับเลข โดยจะมี label แสดงจำนวนครั้งของการคลิกที่ปุ่ม “Counting” และเมื่อคลิกที่ปุ่ม “Stop” โปรแกรมจะหยุดการทำงานและปิดออกไป
import tkinter as tk
def counting():
global count
global label1Text
count+=1
label1Text.set(str(count))
m=tk.Tk()
count=0
label1Text=tk.StringVar()
label1Text.set(str(count))
m.title(‘Main window’)
button=tk.Button(m,text=’Stop’,width=25,command=lambda:m.destroy())
button.pack()
button2=tk.Button(m,text=’Counting’,width=25,command=lambda:counting())
button2.pack()
label1=tk.Label(m,borderwidth=2,relief=”ridge”,textvariable=label1Text,width=30)
label1.pack()
m.mainloop()
ผลลัพธ์ของโปรแกรม

การเพิ่มปุ่มตัวเลขบนเครื่องคิดเลข
ตัวอย่างนี้ นักเรียนจะได้ทดลองสร้างโปรแกรมเครื่องคิดเลข โดยจะมี label แสดงผลของการคลิกปุ่มตัวเลข 1 และเมื่อคลิกที่ปุ่ม “Stop” โปรแกรมจะหยุดการทำงานและปิดออกไป
import tkinter as tk
def press(n):
global expression
global label1Text
expression = expression+n
label1Text.set(expression)
m=tk.Tk()
m.title(‘Main window’)
expression=’ ‘
label1Text=tk.StringVar()
label1Text.set(expression)
label1=tk.Label(m,borderwidth=2,relief=’ridge’,textvariable=label1Text,width=30)
label1.pack()
button1=tk.Button(m,text=’1′,width=25,command=lambda:press(‘1’))
button1.pack()
button=tk.Button(m,text=’Stop’,width=25,command=lambda:m.destroy())
button.pack()
m.mainloop()
ผลลัพธ์ของโปรแกรม

การจัดวางวิดเจ็ตแบบกริด
import tkinter as tk
def press(n):
global expression
global label1Text
expression = expression+n
label1Text.set(expression)
m=tk.Tk()
m.title(‘Main window’)
expression=’ ‘
label1Text=tk.StringVar()
label1Text.set(expression)
label1=tk.Label(m,borderwidth=2,relief=’ridge’,textvariable=label1Text,width=20)
label1.grid(row=0,columnspan=2)
button1=tk.Button(m,text=’1′,width=6,command=lambda:press(‘1’))
button1.grid(row=2,column=0)
button2=tk.Button(m,text=’2′,width=5,command=lambda:press(‘2’))
button2.grid(row=2,column=1)
button3=tk.Button(m,text=’3′,width=6,command=lambda:press(‘3’))
button3.grid(row=1,column=0)
button4=tk.Button(m,text=’4′,width=5,command=lambda:press(‘4’))
button4.grid(row=1,column=1)
button=tk.Button(m,text=’Stop’,width=16,command=lambda:m.destroy())
button.grid(row=3,columnspan=2)
m.mainloop()
ผลลัพธ์ของโปรแกรม

อ้างอิง : สถาบันส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี, “เทคโนโลยี(วิทยาการคำนวณ)”, โรงพิมพ์แห่งจุฬาลงกรณ์มหาวิทยาลัย, ศูนย์หนังสือแห่งจุฬาลงกรณ์มหาวิทยาลัย, 2562 หน้า 38
Comments are closed.