สร้างส่วนติดต่อผู้ใช้งาน (GUI)

ในการเขียนโปรแกรมที่มีส่วนติดต่อประสานกราฟิกกับผู้ใช้ (Graphical User Interface: GUI) ช่วยให้เห็นภาพรวมของโปรแกรมได้เป็นอย่างดี ในภาษาไพทอนมีโมดูล tkinter ที่ช่วยให้การพัฒนาส่วนต่อประสานกราฟิกกับผู้ใช้ ทำได้โดยง่ายและรวดเร็ว มี 4 ขั้นตอนดังนี้

1. นำเข้าโมดูล tkinter
2. สร้างหน้าต่างหลัก (main window)
3. จัดวางวิดเจ็ต (widget) หรือองค์ประกอบอื่นที่เป็นส่วนต่อประสานกราฟิกกับผู้ใช้ลงในหน้าต่างหลัก เช่น ปุ่มกด กล่องข้อความ
4. เชื่อมโยงเหตุการณ์ (event) ต่างๆ ที่เกิดขึ้นจากการทำงานกับวิดเจ็ตเข้ากับส่วนของโปรแกรมย่อย เพื่อให้แอปพลิเคชันทำงานได้ตามต้องการ

รู้จัก Tkinter

Tkinter นั้นย่อมาจาก TK Interface เป็น library สำหรับการพัฒนา GUI ที่ติดมากับ python มีการเรียนรู้ที่ค่อนข้างง่ายสำหรับมือใหม่ การใช้งานไม่ซับซ้อนตรงตัว

ใน python มี GUI library หลายตัว แต่ tkinter เป็นหนึ่งในตัวที่นิยมมากตัวหนึ่งด้วยความที่มันง่าย และ cross platform สามารถใช้ได้ทั้ง MacOS, Linux, Windows

การ Import tkinter

tkinter เป็น GUI library ที่ติดมากับ Python อยู่แล้ว ดังนั้นเราสามารถ Import มาใช้งานได้เลย โดยใช้คำสั่งคือ

import tkinter as tk #เป็นการเรียก tkinter ในรูปแบบของ python3

สร้างหน้าโปรแกรม

window = tk.Tk()
window.title(“Learn computer with Teacher Ice.”)
window.mainloop()

Labels – แสดงผลข้อความ

label=tk.Label(text=’Learn computer with Teacher Ice.’)
label.pack()

สามารถเพิ่มรูปแบบตัวอักษร และขนาดให้กับข้อความได้ดังนี้

label.config(font=(“Tahoma”, 28))

Button – สร้างปุ่ม

btClick = tk.Button(master=window, text=”RUN”)
btClick.grid()

สามารถเพิ่มรูปแบบตัวอักษร และขนาดให้กับข้อความได้ดังนี้

btClick.config(font=(“Tahoma”, 36), width=10)

หรือจะสร้างปุ่มแบบกำหนดตำแหน่งแสดงผล สามารถเพิ่มคำสั่งได้ดังนี้

btClick2 = tk.Button(master=window, text=”STOP”)
btClick2.grid(row=1, column=1, padx=(5,20), pady=(5,20))

ในบทเรียนนี้นักเรียนจะได้สร้างโปรแกรมที่มีส่วนติดต่อประสานกราฟิกกับผู้ใช้ (Graphical User Interface: GUI) ด้วยโมดูล tkinter ของไพทอน เพื่อสร้างแอปพลิเคชันเครื่องคิดเลขอย่างง่ายที่สามารถคำนวณผลบวก ลบ คูณ และหารจำนวนเต็ม โดยมีขั้นตอนดังนี้

การสร้างหน้าต่างหลักด้วย tkinter

ให้นักเรียนเปิดโปรแกรม Thonny หรือใช้เว็บไซต์ https://repl.it/ หรือ IDE ที่นักเรียนถนัด แล้วเขียนโค้ดคำสั่งตามนี้

import tkinter as tk
m=tk.Tk() #m ย่อมาจาก main window คือ หน้าต่างหลัก
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‘))