ว21172 เทคโนโลยี (วิทยาการคำนวณ)2
Benjamarachutit
Computing science2
4.2 การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้
ในการเขียนโปรแกรมที่มีส่วนต่อประสานกราฟิก กับผู้ใช้ (Graphical User Interface: GUI) จะช่วยให้ เห็นภาพรวมของโปรแกรมได้ดี ในภาษาไพทอนมีโมดูล tkinter ที่ช่วยให้การพัฒนาส่วนต่อประสานกราฟิก กับผู้ใช้ทําได้ง่าย และรวดเร็วขึ้น ซึ่งมี 4 ขั้นตอนดังนี้
1. นําเข้าโมดูล tkinter
2. สร้างหน้าต่างหลัก (main window)
3. จัดวางวิดเจ็ต (widget) หรือองค์ประกอบอื่นที่เป็นส่วนต่อประสานกราฟิกกับผู้ใช้ลงในหน้าต่างหลัก เช่น - ปุ่มกด กล่องข้อความ
4. เชื่อมโยงเหตุการณ์ (event) ต่าง ๆ ที่เกิดขึ้นจากการทํางานกับวิดเจ็ตเข้ากับส่วนของโปรแกรมย่อย เพื่อให้
แอปพลิเคชันทํางานได้ตามต้องการ
ในที่นี้จะให้นักเรียนทดลองใช้โมดูล tkinter ของไพทอนเพื่อสร้างแอปพลิเคชันเครื่องคิดเลขอย่างง่าย ที่สามารถคํานวณผลบวก ลบ คูณ และหาร ของจํานวนเต็ม โดยจะเริ่มต้นจากการทํางานง่าย ๆ ก่อน แล้วเพิ่มเติม ความสามารถเข้าไปที่ละส่วน จนได้โปรแกรมเครื่องคิดเลขที่สมบูรณ์ดังรูป 2.1
ตัวอย่างที่ 4.11 การสร้างหน้าต่างหลักด้วย tkinter
ทดลองรันโปรแกรมไพทอนต่อไปนี้
ตัวอย่างที่ 4.11 อธิบายได้ดังนี้
1. บรรทัดที่ 1 เป็นการนําโมดูล tkinter เข้ามาในโปรแกรม แล้ว
จะอ้างถึงโมดูลนี้ด้วยชื่อ tk
2. บรรทัดที่ 3 เป็นการเรียกใช้ฟังก์ชัน Tk () จากโมดูล tkinter
ซึ่งเป็นฟังก์ชันที่ช่วยสร้างหน้าต่างหลักขึ้นมา โดยจะอ้างถึงหน้าต่างนี้
ด้วยชื่อ m
3. บรรทัดที่ 4 ใช้เมท็อด title() เพื่อกําหนดชื่อให้กับหน้าต่าง m
4. บรรทัดที่ 5 ใช้เมท็อด mainloop () เพื่อให้หน้าต่าง m ถูกแสดงผล
ขึ้นบนจอภาพ โดยฟังก์ชันนี้จะรอรับคําสั่งและประมวลผลโปรแกรม ตามเหตุการณ์ที่เกิดขึ้นไปจนกว่าหน้าต่างหลักจะถูกปิดลงด้วยการ คลิกปุ่ม X (Close) ของหน้าต่าง
ตัวอย่างที่ 4.10
ตัวอย่างที่ 4.12 การเพิ่มปุ่มลงในหน้าต่างหลัก
ทดลองรันโปรแกรมไพทอนต่อไปนี้
ตัวอย่างที่ 4.12 อธิบายได้ดังนี้
1. บรรทัดที่ 6 สร้างปุ่มชื่อ button ในหน้าต่างหลัก โดยเรียกใช้ฟังก์ชัน Button ( ) ที่มีการกําหนด
อาร์กิวเมนต์แรกคือตัวแปรที่ใช้อ้างอิงถึงหน้าต่างหลักในที่นี้คือ m ส่วนอาร์กิวเมนต์อื่นจะเป็นการกําหนด ตัวเลือกต่าง ๆ ได้แก่ © text= "stop" เป็นการกําหนดข้อความหรือป้ายชื่อที่จะปรากฏบนปุ่ม
© width=25 เป็นการกําหนดความกว้างของปุ่ม ให้เท่ากับ 25 ตัวอักขระ
© command=lambda: m.destroy () เป็นการกําหนดคําสั่งเมื่อคลิกปุ่ม เพื่อเรียกใช้เมท็อด destroy () ให้จบการทํางานของ mainloop ( )
2. บรรทัดที่ 7 เป็นคําสั่งที่กําหนดให้มีการแสดงปุ่ม button บนหน้าต่างหลัก เนื่องจากโดยปกติแล้ววิดเจ็ต
ที่สร้างขึ้นจะไม่ปรากฏให้เห็นบนหน้าต่างหลัก จนกว่าจะมีการสั่งให้แสดง ซึ่งเมท็อด pack () เป็นวิธีหนึ่ง ในการกําหนดให้นําปุ่ม button ไปจัดวางในหน้าต่างหลัก ด้วยวิธีการตามที่เมท็อด pack () ได้ออกแบบไว้ ถ้าผู้เขียนโปรแกรมไม่ได้ระบุเงื่อนไขการแสดงผล เมท็อด pack () จะแสดงวิดเจ็ตเรียงต่อเนื่องกันไป จากบนลงล่างในหน้าต่างหลัก
5
6
ตัวอย่างที่ 4 .13 การเพิ่มวิดเจ็ตลาเบลลงในหน้าต่างหลัก
โปรแกรมนี้จะสร้างหน้าต่างหลักที่มีลาเบล (label) แสดงจํานวนครั้งของการที่ปุ่มถูกกด ให้ทดลองรัน โปรแกรมต่อไปนี้
ตัวอย่างที่ 4.13 อธิบายได้ดังนี้
1. บรรทัดที่ 3 ประกาศฟังก์ชัน counting () ที่จะทําหน้าที่เพิ่มจํานวนครั้งที่ปุ่มถูกกดทีละหนึ่ง (ค่าของ
ตัวแปร count) แล้วแปลงเป็นข้อมูลชนิดสตริง เพื่อนําไปแสดงผลลาเบล
2. บรรทัดที่ 4-5 กําหนดให้ตัวแปร count และ label1Text เป็นตัวแปรโกลบอลที่สามารถอ้างอิงถึง
ตัวแปร count และ label1Text ที่อยู่ภายนอกฟังก์ชัน
3. บรรทัดที่ 6 เพิ่มจํานวนครั้งที่กดปุ่มขึ้นทีละหนึ่ง
4. บรรทัดที่ 7 นําค่าของจํานวนครั้งที่กด ไปแสดงบนลาเบล labellText
5. บรรทัดที่ 10 กําหนดค่าเริ่มต้นให้กับตัวแปร count=0
6. บรรทัดที่ 11 สร้างตัวแปร label1Text ซึ่งอ้างอิงไปถึงตัวแปรสตริง (StringVar)
7. บรรทัดที่ 12 แปลงค่าในตัวแปร count ให้เป็นสตริง แล้วนําไปเก็บใน lablelText โดยใช้เมท็อด set ()
8. บรรทัดที่ 18 สร้างปุ่ม button2 ที่มีข้อความบนปุ่มว่า “Counting" และเมื่อปุ่มถูกคลิก จะเรียกฟังก์ชัน
counting () ให้ทํางาน
9. บรรทัดที่ 21 สร้างลาเบลที่จะถูกอ้างถึงด้วยตัวแปร label1 โดยใช้ฟังก์ชัน Label () ของ tkinterพร้อมกับกําหนดตัวเลือกเพิ่มเติม ได้แก่
© borderwidth=2 กําหนดให้ลาเบลมีเส้นขอบหนา 2 พิกเซล (pixel)
©relief="ridge" กําหนดให้ลาเบล มีลักษณะเป็นขอบนูน (ridge)
©textvariable กําหนดให้มีข้อความบน label เป็นสตริงที่เก็บในตัวแปร labellText
© width=30 กําหนดให้ label มีความกว้างเท่ากับ 30 ตัวอักขระ
ตัวอย่างที่ 4.14 การเพิ่มปุ่มตัวเลขบนเครื่องคิดเลข
โปรแกรมไพทอนนี้ สร้างหน้าต่างหลักที่มีปุ่มตัวเลข ซึ่งเมื่อถูกคลิก จะแสดงตัวเลขบนลาเบลโปรแกรมนี้ สามารถปรับปรุงจากตัวอย่างที่ 2.13 ให้เปลี่ยนจากปุ่ม Counting เป็นปุ่มตัวเลข เมื่อรันโปรแกรมแล้วคลิกปุ่มตัวเลข จะแสดงตัวเลขเพิ่มต่อท้ายตัวเลขที่ปรากฏอยู่ ให้ทดลองรันโปรแกรมต่อไปนี้
ตัวอย่างที่ 4.14 อธิบายได้ดังนี้
1. บรรทัดที่ 3 ประกาศฟังก์ชัน press () ซึ่งทําหน้าที่เชื่อมต่อตัวเลขที่ผู้ใช้คลิกเข้าด้วยกันในบรรทัดที่ 6
เก็บไว้ในตัวแปร expression แล้วนําไปแสดงผลใน label1Text ในบรรทัดที่ 7
2. บรรทัดที่ 12 กําหนดค่าเริ่มต้นให้กับตัวแปร expression เป็นสตริงว่าง
3. บรรทัดที่ 13 สร้างตัวแปร label1Text ซึ่งจะใช้ในการแสดงผลของเครื่องคิดเลข โดยในบรรทัดที่ 14
เป็นการกําหนดให้แสดงค่าตัวแปร expression บน label1Text
4. บรรทัดที่ 18 สร้างปุ่ม buttonl ที่แสดงตัวเลข 1 บนปุ่มและเรียกฟังก์ชัน press () ให้ทํางานพร้อมกับ
ส่งอาร์กิวเมนต์ คือ สตริง '1' ไปให้
จากหน้าต่างหลักของแอปพลิเคชันที่ได้เมื่อวางวิดเจ็ตด้วยเมท็อด pack () จะพบว่า แต่ละวิดเจ็ตถูกวาง เรียงต่อกันในแนวตั้งจากบนลงล่าง หากต้องการจัดให้เรียงต่อกันในรูปแบบตาราง เพื่อให้มีความสะดวกในการ ใช้งานคล้ายกับการวางปุ่มของเครื่องคิดเลขจริง โมดูล tkinter ได้มีฟังก์ชันการวางวิดเจ็ตลักษณะนี้ให้เรียก ใช้งาน คือ เมท็อด grid () โดยพื้นที่หน้าต่างหลักจะถูกแบ่งเป็นตารางในลักษณะของคอลัมน์และแถว เรียกแต่ละช่องในตารางว่าเซล (cell) โดยอ้างอิงถึงแต่ละเซลได้จาก หมายเลขคอลัมน์นับจากซ้ายไปขวา และหมายเลขแถวจากบนลงล่าง เริ่มต้นตั้งแต่หมายเลข 0 การวางวิดเจ็ตจะใช้เมท็อด grid ( ) (แทนการ ใช้ pack () ) โดยมีตัวเลือก row=x และ column=y (x และ y เป็นหมายเลขประจําแถวและคอลัมน์ ตามลําดับ) ตัวอย่างดังรูป 2.2
ตัวอย่างที่ 4.15 การจัดวางวิดเจ็ตแบบกริด
ให้นักเรียนทดลองรันโปรแกรมไพทอนต่อไปนี้
ตัวอย่างที่ 4.15 อธิบายได้ดังนี้
1. บรรทัดที่ 17 เมท็อด grid () กําหนดตัวเลือก row-0 ทําให้
label1 ถูกวางลงในแถวที่ 0 คือ แถวบนสุดของหน้าต่าง แต่ไม่มี การระบุคอลัมน์ หมายถึงให้วางในคอลัมน์ที่ 0 และตัวเลือก Columnspan=2 กําหนดให้ลาเบลนี้ถูกวางลงในพื้นที่ขนาด 2 คอลัมน์ในที่นี้คือถูกวางลงบนพื้นที่ของคอลัมน์ 0 และ 1
2. บรรทัดที่ 20 เป็นการวาง button1 ลงในคอลัมน์ที่ 0 แถวที่ 2 3. บรรทัดที่ 22, 24, 26 และ 29 เป็นการกําหนดเซลที่จะวาง button2, button3, button4 และ button ตามลําดับ
ตัวอย่างที่ 4.16 การทํางานของแอปพลิเคชันเครื่องคิดเลข
เพื่อให้เครื่องคิดเลขแสดงผลลัพธ์ จากการคํานวณ หลังจากเพิ่มปุ่มเครื่องหมาย - แล้ว นักเรียนต้องเขียนฟังก์ชันซึ่งจะถูก เรียกเมื่อผู้ใช้กดปุ่มเครื่องหมาย = ดังแสดง ในส่วนของโปรแกรมต่อไปนี้
ตัวอย่างที่ 4.16 อธิบายได้ดังนี้
1. ฟังก์ชัน equal () นี้ จะประมวลผลสตริงของนิพจน์ที่เก็บอยู่ในตัวแปร expression โดยโครงสร้างหลัก
ของฟังก์ชันจะอยู่ในบล็อก try-except โดยที่คําสั่งภายในบล็อก try: จะทํางานตามปกติ หากไม่มีข้อผิดพลาดใด ๆ และคําสั่งในบล็อก except: จะถูกข้ามไป แต่ถ้าคําสั่งภายในบล็อก try: เกิดข้อผิดพลาดขึ้นอย่างใดอย่างหนึ่ง คําสั่งภายในบล็อก except: จะถูกทํางาน
2. ในบรรทัดที่ 5 ข้อความที่เก็บอยู่ในตัวแปร expression จะถูกนําไปคํานวณค่าด้วยฟังก์ชัน eval ()
และผลที่ได้ถูกแปลงเป็นค่าสตริงเก็บไว้ในตัวแปร result
3. ในบรรทัดที่ 6 เป็นการนําค่าสตริงในตัวแปร result ไปเก็บไว้ในตัวแปร expression อีกครั้งหนึ่ง เพื่อใช้
ในการคํานวณต่อไป
4. ในบรรทัดที่ 7-9 หากการคํานวณผลลัพธ์เกิดข้อผิดพลาดขึ้นจากฟังก์ชัน eval() แล้ว ตัวแปร result
จะเก็บค่าสตริง ERROR' และจะกําหนดค่าตัวแปร expression เป็นสตริงว่าง (!")
5. ในบรรทัดที่ 10 เป็นการนําผลที่ได้ไปแสดงบน label1Text
