รูปแบบการเขียนคำสั่งภาษาไพธอนมี 2 รูปแบบ คือ แบบป้อนคำสั่งทีละบรรทัด (Command line interface และแบบกราฟิก คือ การติดต่อสื่อสารกับระบบคอมพิวเตอร์โดยอาศัยอินเตอร์เฟสแบบกราฟิก ซึ่งประกอบไปด้วยเมนู รูปภาพ ไอคอน โดยการใช้เมาส์คลิกเพื่อสั่งงาน ซึ่งในบทนี้จะอธิบายการสร้างอินเตอร์เฟสแบบกราฟิกด้วยภาษาไพธอนเป็นหลัก ไพธอนได้รับการสนับสนุนโมดูลสำหรับพัฒนา GUI (Graphic User Interface) ไว้มากมาย เช่นtkinter, wxPython, JPython, wxWidgets, Qt, Gtk+, FLTK, FOX และ OpenGL เป็นต้น ซึ่งมีรายละเอียดเฉพาะโมดูลที่สำคัญๆ ดังนี้คือ 1. Tkinter เป็นโมดูลที่พัฒนามาจาก Tk GUI Toolkit ซึ่งทางานอยู่บนระบบปฏิบัติการยูนิกซ์มาก่อน ไพธอนได้เลือกโมดูลนี้ในการพัฒนากราฟิกบนไพธอนเป็นหลัก 2. wxPython เป็นโมดูลที่ถูกพัฒนาขึ้นเพื่อให้ทางานอยู่บนระบบปฏิบัติการวินโดวส์เป็นหลัก และเป็นลิขสิทธิ์แบบ Open source 3. JPython เป็นโมดูลที่พัฒนาขึ้นเพื่อให้ไพธอนสามารถทำงานร่วมกับกราฟิกของภาษาจาวาได้ ก่อนการพัฒนา GUI ด้วยไพธอน จะต้องออกแบบหน้าตาของ GUI เสียก่อน โดยการสเก็ตช์ภาพบนกระดาษ หรือออกแบบด้วยโปรแกรมสำหรับสร้างงานกราฟิกด้วยคอมพิวเตอร์อย่างคร่าวๆ เสียก่อน ดังรูป การสเก็ตช์ GUI อย่างคร่าวๆ บนกระดาษ ภาพสเก็ตช์ของโปรแกรมแปลงจาก feet เป็น meters จากรูปด้านบน ผู้ใช้จะป้อนตัวเลขจำนวนจริงในช่อง Feet เมื่อกดปุ่ม calculate โปรแกรมจะทำการแปลงค่าจำนวนจริงที่ป้อนให้กับโปรแกรมเป็นเมตรและแสดงใน meters ขั้นตอนต่อไปให้ผู้เขียนโปรแกรมทำการวาดเส้นกริดเพื่อใช้กำหนดขอบเขตสำหรับจัดวางตำแหน่ง (Layout) ของอ๊อปเจ็กต์ต่างๆ ในโปรแกรม จากตัวอย่างด้านบน จะทำการกำหนดเส้นกริดเป็น 3 แถว 3 คอลัมน์ดังรูปการวาดเส้นกริด 3 x 3 ลงบนภาพสเก็ตช์ ก่อนการสร้างกราฟิกจาก Tk หรือ Tkinter ผู้เขียนโปรแกรมจำเป็นต้องเข้าใจถึงแนวความคิดและหลักการทำงานของ Tk เสียก่อน เพื่อเป็นพื้นฐานในการสร้าง GUI ที่สมบูรณ์ต่อไป Tk ประกอบไปด้วย 3 ส่วนที่สำคัญคือ widgets, geometry management และ event handling ซึ่งมีรายละเอียดดังนี้2.1 Widgets คือสิ่งต่างๆ (หรือเรียกว่า อ๊อปเจ็กต์) ที่ปรากฏอยู่บนจอภาพ เช่น Button, Label, Frame, checkbox, tree views, scrollbars, text areas เป็นต้น ดังรูปแสดงตัวอย่าง Widgets ต่างๆ Widgets ต่างๆ เหล่านี้ถูกออกแบบให้มีลักษณะการทำงานแบบลำดับชั้น นั่น คือ การสร้าง GUI ใดๆ ให้ปรากฏบนจอภาพ จะเริ่มต้นสร้างจากลำดับชั้น ที่เรียกว่า root window (root) ขึ้นเสียก่อน ดังรูปที่ 9.5 ลำดับชั้นที่ 2 จึงสร้างเฟรม (Content frame) หรือผืนผ้า (Canvas) เพื่อบรรจุ widgets ต่างๆ ลงบน root window ในลำดับชั้นที่ 3 เป็นการเพิ่ม Widgets ต่างๆ ที่ได้ออกแบบไว้บนกระดาษลงบนเฟรมหรือ Canvas ที่ได้จัดเตรียมไว้ สำหรับการควบคุมการทำงานของWidgets จะเป็นแบบลำดับชั้นเช่นเดียวกันลำดับของการสร้าง GUI ด้วย Tk จากรูป แสดงลำดับชั้นการสร้าง GUI ของโปรแกรมแปลงหน่วยวัดระยะทางจากฟุตเป็นเมตรโดยเริ่มต้นจากการสร้างหน้าต่างหลัก (Root) ขึ้นก่อนเสมอ เพื่อรองรับ Widgets ที่ทำหน้าที่ต่างๆ กัน โดย Widgets จะถูกสร้างขึ้นลงบนเฟรม (Content frame) อีกที ซึ่งเฟรมดังกล่าวเปรียบเสมือนหน้ากระดาษบนคอมพิวเตอร์นั่นเอง2. การเรียกใช้งาน Widgets โดย Widgets ในภาษาไพธอนถูกเขียนขึ้นด้วยโปรแกรมเชิงวัตถุ ดังนั้นทุกๆ Widget ที่สร้างขึ้นจะถูกเรียกว่า อ๊อปเจ็กต์ (Object) หรือวัตถุ เมื่อทำการสร้างอินสแตนซ์ของ Widget ใดๆ ขึ้นจะต้องส่งพารามิเตอร์ให้กับคลาสแม่ตามลำดับชั้นตามที่กล่าวมาแล้ว ยกเว้น Root ซึ่งเป็นคลาสแม่ที่อยู่ในตำแหน่งบนสุด (Top level window) ของลำดับชั้น คลาสลูกทุกๆ คลาสจะถูกสร้างภายใน root เท่านั้น จากตัวอย่างต่อไปนี้เป็นตัวอย่างการสร้าง Root, Content frame และ WidgetsWidget แต่ละประเภทมีหน้าที่การทำงานที่ต่างกัน ดังนั้นเมื่อสร้าง Widget ขึ้นมาแล้วจำเป็นที่จะต้องการทำการปรับแต่งคุณสมบัติของ Widgets (Configuration option) แต่ละตัวให้เหมาะสมกับงานที่จะทำ ตัวอย่างเช่น Label และ Button สามารถกำหนดข้อความที่แสดงผลด้วยออฟชัน text = "Textname" ในขณะที่ scrollbar ไม่จำเป็นต้องใช้ออฟชันดังกล่าว และถ้ามีการกดปุ่ม Button จะต้องเรียกใช้ฟังก์ชันหรือเมธอดที่เหมาะกับงานดังกล่าวโดยใช้คำสั่ง command แต่สำหรับ Label ไม่จำเป็นต้องใช้คำสั่ง command ในการทำงาน เป็นต้นConfiguration option จะถูกกำหนดในขณะที่ทำการสร้าง Widget โดยการส่งเป็นพารามิเตอร์ที่เหมาะสมให้กับแต่ละ Widget ที่จะถูกสร้างขึ้น ตัวอย่างเช่น เมื่อต้องการสร้างปุ่ม Button โดยปุ่มดังกล่าวประกอบด้วยชื่อของปุ่ม และเหตุการณ์ที่เกิดขึ้นหลังจากมีการกดปุ่มดังกล่าว ดังนี้ 1. นำเข้าโมดูล tkinter2. สร้างปุ่ม Button โดยส่งพารามิเตอร์ให้ 2 ค่า คือ ข้อความที่แสดงบนปุ่ม (text = "Hello") และวิธีการตอบสนองเมื่อปุ่มดังกล่าวถูกกด (command = "buttonpressed") พร้อมกับกำหนดค่ากริดผลลัพธ์ที่ได้ คือ3. ทดสอบเปลี่ยนข้อความที่แสดงบนปุ่มจาก "Hello" เป็น "Goodbye"หรือใช้เมธอด configure() เพื่อเปลี่ยนข้อความบนปุ่มแทนก็ได้ผลลัพธ์ที่ได้ คือ 3. การจัดการรูปทรงเรขาคณิตให้กับ Widgets (Geometry management) จากที่กล่าวมาแล้วข้างต้นว่าการวาง Widgets ลงบนเฟรมนั้น จะต้องกำหนดตำแหน่งในการวาง โดยอาศัยศาสตร์ทางด้านเรขาคณิตเข้าช่วย เพื่อให้ Widgets ที่จะวางอยู่ในตำแหน่งที่เหมาะสม ซึ่งไพธอนมี 3 เมธอดในการจัดการเกี่ยวกับเรขาคณิตของ Widgets ประกอบไปด้วยเมธอด pack(), grid() และ place() ซึ่งจะกล่าวในหัวข้อการจัดวาง Widgets ด้วยเรขาคณิต สำหรับปัญหาการวาง Widgets ที่เกิดขึ้นเสมอ คือ การปรับขนาดของเฟรมหรือ Widgets จะส่งผลกระทบซึ่งกันและกัน เช่น ถ้าผู้ใช้งานย่อหรือขยายขนาดของหน้าต่างหลัก จะส่งผลให้กระทบกับอ๊อปเจ็กต์ต่างๆ ที่อยู่ภายในหน้าต่างหลักนั้นๆ ทันที ซึ่งอาจจะทำให้ปุ่ม ตัวอักษร ลาเบล เกิดความผิดเพี้ยนไปจากเดิม ปัญหาต่างๆ เหล่านี้จะถูกจัดการด้วย Geometry management ที่อยู่ใน Tk โดยใช้เทคนิคที่เรียกว่า Master and Slave โดย Master คืออ๊อปเจ็กต์ที่ทำหน้าที่รองรับ Widgets ต่างๆ ที่จะทำงาน เช่น root หรือ content frame สำหรับ Slave คือ Widgets ต่างๆ ที่วาดหรือวางลงบน Master นั่นเอง สำหรับการทำงานของ Geometry management นั้นจะใช้วิธีสอบถามไปยัง Widgets ต่างๆ ที่กำลังจะทำงานว่าแต่ละ Widgets ต้องการพื้นที่ๆ ใช้สำหรับการทำงานมากน้อยเพียงใด จากนั้น Geometry management จะคำนวณพื้นที่ทั้งหมดในภาพรวม เพื่อจัดวาง Widgets เหล่านั้นในตำแหน่งที่เหมาะสมต่อไป จากตัวอย่าง เมื่อผู้ใช้ต้องการเพิ่ม Widget อันใดอันหนึ่งลงบนเฟรมจะเรียกใช้เมธอด grid() และตามด้วยพารามิเตอร์คอลัมน์ (Column) และแถว (Low) ในการกำหนดตำแหน่งการวาง พร้อมกับพารามิเตอร์ "sticky" เพื่อบอกว่าให้วาง Widget ตามขนาดจริงที่ปรากฏ เช่น ความกว้างและยาวของปุ่มจะมีขนาดตามฟอนต์ที่ปรากฏบนปุ่ม เป็นต้น หรืออาจจะใช้เมธอด columnconfigure() หรือ rowconfigure() เพื่อปรับขนาดของ Widget ตามที่ผู้ใช้งานต้องการก็ได้4. การจัดการกับเหตุการณ์ต่างๆ (Event Handling) Event handling คือ เหตุการณ์ต่างๆ ที่ผู้ใช้งานกระทำกับ Widgets ใดๆ บน GUI เช่น การกดปุ่ม การกดปุ่มใดๆ บนแป้นพิมพ์ การเคลื่อนเมาส์ การปรับขนาดของหน้าต่างวินโดวส์ เป็นต้น ซึ่งเหตุการณ์ต่าง ๆ เหล่านี้จะถูกจัดการโดย Tk ซึ่งเรียกว่า event loop โดยจะทำงานร่วมกับระบบปฏิบัติการโดยตรง เช่น เมื่อเคลื่อนเมาส์ไปยังปุ่มจะส่งผลให้ปุ่มดังกล่าวจะเปลี่ยนสี และเมื่อเคลื่อนเมาส์ออกจากปุ่มจะทำให้สีของปุ่มกลับไปเป็นสีเดิม เป็นต้น 5. การตอบสนองต่อเหตุการณ์ที่เกิดขึ้น (Command Callbacks) มีหลาย Widgets จำเป็นต้องกระทำอย่างใดอย่างหนึ่งเมื่อมีการคลิกหรือกระทำกับ Widgets เหล่านั้น เช่น เมื่อกดปุ่ม Save as… จะส่งผลให้มีการเปิดหน้าต่างวินโดวส์ เพื่อให้ผู้ใช้เลือกไดเรคทอรีที่ต้องการบันทึกผลลงฮาร์ดดิสก์ เป็นต้น ในไพธอนจะใช้คำสั่ง "command" หรือเรียกว่า "Callbacks" ในการตอบสนองต่อเหตุการณ์ต่างๆ ที่เกิดขึ้นกับ Widgets โดยมีรูปแบบคำสั่งคือ command = functionName ตัวอย่างเช่น เมื่อคลิกปุ่ม Hello แล้วไปยังฟังก์ชัน helloCallBack เพื่อพิมพ์คำว่า Hello World!ผลลัพธ์ที่ได้ คือ6. การผูกเหตุการณ์ต่างๆ เข้ากับไพธอน Widgets มีคำสั่ง "command" ซึ่งมาพร้อมกับขณะที่มีการสร้าง Widget อยู่แล้ว เพื่อผูกเหตุการณ์ต่างๆ เข้ากับการกระทำอย่างใดอย่างหนึ่งในโปรแกรม แต่ผู้ใช้สามารถเรียกใช้คำสั่ง bind เพื่อเป็นทางเลือกในการดักจับเหตุการณ์ต่างๆ เหมือนกับการใช้คำสั่ง command ได้เช่นเดียวกัน ดังตัวอย่างต่อไปนี้จะแสดงการจัดการกับ Widget ชนิด Label ด้วยคำสั่ง bind ดังนี้ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม คือจากภาพด้านบนแสดงการทำงานของโปรแกรม โดยเริ่มจากบรรทัดที่ 2 โปรแกรมทำการสร้างหน้าต่างหลัก (root) โดยเรียกคลาส Tk() ขึ้นมาทำงาน จากนั้นบรรทัดที่ 3 โปรแกรมทำการสร้าง Label ลงบนหน้าต่างหลัก โดยมีพารามิเตอร์ 2 ตัวคือ หน้าต่างหลักที่จะเพิ่ม Label ลงไป ในที่นี้คือ root และข้อความที่จะให้ปรากฏบน Label คือ text="Starting..." บรรทัดที่ 4 โปรแกรมเรียกใช้เมธอดกริด (เมื่อไม่กำหนดคอลัมน์และแถวจะมีค่าเป็น 1 คอลัมน์ และ 1 แถว) บรรทัดที่ 6 ทำการผูกเหตุการณ์เมื่อผู้ใช้มีการกระทำ ใดๆ บน Label ดังกล่าวด้วยคำสั่ง bind โดยจะทำงานก็ต่อเมื่อผู้ใช้เคลื่อนเมาส์เข้าไปในวินโดวส์ โดยจะพิมพ์ข้อความว่า "Move mouse inside" บรรทัดที่ 6, 7, 8 และ 9 จะทำงานก็ต่อเมื่อผู้ใช้เคลื่อนเมาส์ออกจากวินโดวส์ คลิกเมาส์ซ้าย ดับเบิ้ลคลิก และการคลิกพร้อมกับลากเมาส์ตามลำดับ ผลลัพธ์แสดงดังรูปด้านบน ส่วนบรรทัดที่ 10 โปรแกรมจะทำการวนลูปเพื่อรอรับเหตุการณ์ต่างๆ ของผู้ใช้งานไปเรื่อยๆ จนกว่าจะปิดโปรแกรม7. สรุปขั้นตอนการสร้าง GUI ด้วย tkinter มีขั้นตอนดังนี้1. นำเข้าโมดูล Tkinter ด้วยคำสั่ง from tkinter import * 2. สร้างหน้าต่าง GUI หลัก ด้วยคำสั่ง root = Tk() 3. เพิ่มWidgets หรืออ๊อปเจ็กต์ลงในหน้าต่างหลัก เช่น Button, Canvas หรือ Label เป็นต้น 4. เขียนโปรแกรมสำหรับตรวจสอบเหตุการณ์ต่างๆ (Events) ที่เกิดขึ้นจากผู้ใช้งานกระทำกับอ๊อปเจ็กต์ใดๆ เช่น การคลิก การลาก การปล่อย เป็นต้น 5. สั่งให้โปรแกรมวนลูปรับคำสั่งจากผู้ใช้งานไปเรื่อยๆ จนกว่าจะปิดโปรแกรม ด้วยคำสั่ง root.mainloop() - ลำดับการสร้างหน้าต่าง GUI ด้วย Tk- แสดงหน้าต่างหลัก (root window)ทุกๆ Widgets จะต้องอาศัยเรขาคณิตช่วยในการจัดวาง (Geometry management) ซึ่งไพธอนได้จัดเตรียมไว้ 3 เมธอดคือ pack(), grid() และ place() ดังนี้ 3.1 เมธอด pack() ทำหน้าที่จัดวาง Widgets ให้อยู่ในกลุ่ม (block) ก่อนวางลงใน Widget แม่ ซึ่งมีรูปแบบคำสั่งดังนี้ widget.pack( pack_options ) pack_options มี 3 รูปแบบคือ expand, fill และ side1) expand เมื่อกำหนดให้เป็น True หรือ YES โปรแกรมจะขยายขนาด Widget โดยการเพิ่มช่องว่างเข้าไปแทน และอยู่ตรงกลางหน้าต่างหลัก เช่น widget.pack(expand = True)2) fill กำหนดให้ขยายขนาดของ Widget ตามขนาดจริงที่น้อยที่สุด หรือสามารถกำหนดเป็น Y (vertically : ขยายทางแนวตั้ง) หรือกำหนดเป็น X (horizontally : ขยายทางแนวนอน) หรือทั้งคู่ก็ได้ แต่ค่าดีฟอลต์ (default) เป็น NONE เช่น fill = X, fill = Y หรือ fill = BOTH ตัวอย่างเช่น widget.pack(fill = BOTH)3) side กำหนดตำแหน่งในการวาง Widget คือ TOP (ดีฟอลต์) ด้านบน, BOTTOM ด้านล่าง, LEFT ด้านซ้าย และ RIGHT ด้านขวา เช่น side = BOTTOM เช่น widget.pack(side = BOTTOM) จากตัวอย่างโปรแกรม แสดงการใช้เมธอด pack() ในการจัดวาง Widgets โดยโปรแกรมสร้างเฟรม (บรรทัดที่ 4) ด้วยเมธอด Frame(root) อ๊อปเจ็กต์ที่สร้างขึ้นจะเก็บไว้ในตัวแปรชื่อ frame จากนั้นบรรทัดที่ 5 โปรแกรมเรียกเมธอด pack() โดยไม่มีพารามิเตอร์ ซึ่งส่งผลให้เฟรมดังกล่าวจะวางอยู่ในตำแหน่งบนสุดของหน้าต่างหลัก (root window) บรรทัดที่ 6 – 11 โปรแกรมสร้างปุ่มสีแดง น้ำเงิน และน้ำตาลลงบนเฟรมดังกล่าว บรรทัดที่ 13 และ 14 โปรแกรมสร้างเฟรมชื่อ bottomframe โดยวางอยู่ในตำแหน่งด้านล่างของหน้าต่างหลัก บรรทัดที่ 15 และ 16 โปรแกรมสร้างปุ่มสีดำ และวางลงในเฟรมชื่อ bottomframe2. เมธอด grid() ทำหน้าที่จัดวาง Widgets ลงในหน้าต่างหลัก (root window) โดยอยู่ในรูปแบบของตาราง ซึ่งมีรูปแบบคำสั่ง ดังนี้ widget.grid( grid_options ) grid_options มีรูปแบบ ดังนี้คือ1. column ตำแหน่งคอลัมน์ที่ต้องการวาง Widget ค่าดีฟอลต์คือ 0 (คอลัมน์ซ้ายสุด) 2. columnspan จำนวนคอลัมน์ที่ต้องการใช้ ค่าดีฟอลต์คือ 1 บรรทัด 3. ipadx, ipady ขนาดภายในขอบของ Widget ในแนวตั้งและแนวนอน มีหน่วยเป็นพิกเซล 4. padx, pady ขนาดภายนอกขอบของ Widget ในแนวตั้งและแนวนอน มีหน่วยเป็นพิกเซล 5. row ตำแหน่งแถวที่ต้องการวาง Widget 6. rowspan จำนวนแถวที่ต้องการใช้ ค่าดีฟอลต์คือ 1 คอลัมน์ 7. sticky ใช้เมื่อต้องการวาง Widget ในตำแหน่งที่ต้องการ โดยค่าดีฟอลต์จะอยู่ตรงกลาง แต่สามารถกำหนดตำแหน่งด้วยการบอกทิศทาง โดยใช้อักษรต่างๆ ดังนี้ N (ทิศเหนือ), E (ตะวันออก), S (ใต้), W (ตะวันตก), NE (ทิศตะวันออกเฉียงเหนือ), NW (ทิศตะวันตกเฉียงเหนือ), SE (ทิศตะวันออกเฉียงใต้) และ SW (ทิศตะวันตกเฉียงใต้) เป็นต้น ตัวอย่างการใช้งานเมธอด grid() ดังนี้ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรมดังรูปจากตัวอย่างโปรแกรม แสดงการใช้เมธอด grid() ในการจัดวาง Widgets โดยบรรทัดที่ 5 โปรแกรมสร้างเลเบลที่ทำการพิมพ์ตำแหน่งแถวและคอลัมน์ลงบนหน้าต่างหลัก โดยใช้เมธอด grid() ในการกำหนดตำแหน่งของเลเบล ผลลัพธ์ที่ได้แสดงดังรูปด้านบน 3. เมธอด place() ทำหน้าที่จัดวาง Widgets ลงในหน้าต่างหลัก (root window) โดยการระบุตำแหน่ง ซึ่งมีรูปแบบคำสั่ง ดังนี้ widget.place( place_options ) place_options มีรูปแบบดังนี้ คือ1. anchor กำหนดตำแหน่งการวาง Widget โดยอาศัยทิศ เช่น N (ทิศเหนือ), E (ตะวันออก), S, W, NE, NW, SE หรือ SW เป็นต้น 2. bordermode กำหนดตำแหน่งการวาง Widget โดยอาศัยขอบด้านใน (INSIDE) และขอบด้านนอก (OUTSIDE) ค่าดีฟอลต์คือ INSIDE 3. height, width กำหนดขนาดความกว้างและความยาว มีหน่วยเป็นพิกเซล 4. relheight, relwidth กำหนดขนาดความกว้างและความยาว โดยใช้เลขจำนวนจริงระหว่าง 0.0 – 1.0 5. relx, rely ขนาดแนวตั้งและแนวนอนของ offset โดยใช้เลขจำนวนจริงระหว่าง 0.0 – 1.0 6. x, y ขนาดแนวตั้งและแนวนอนของ offset มีหน่วยเป็นพิกเซล ตัวอย่างการใช้งานเมธอด place() ดังนี้ ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรมจากตัวอย่างโปรแกรม แสดงการใช้เมธอด place() ในการจัดวาง Widgets โดยบรรทัดที่ 6 โปรแกรมสร้างเมธอดชื่อว่า helloCallBack() ทำหน้าที่แสดงกล่องข้อความ (messagebox) โดยพิมพ์ข้อความว่า "Hello World" เมธอดดังกล่าวนี้จะถูกเรียกใช้เมื่อมีการกดปุ่ม Hello บรรทัดที่ 8 โปรแกรมสร้างปุ่มซึ่งมีข้อความบนปุ่มคือ "Hello" โดยมีพารามิเตอร์ 3 ตัวคือ อ๊อปเจ็กต์ของหน้าต่างหลัก (root), ข้อความที่ต้องการแสดงบนปุ่ม ("Hello") และการกระทำ (action) เมื่อปุ่มถูกกด ในที่นี้โปรแกรมจะเรียกเมธอด helloCallBack() มาทำงาน บรรทัดที่ 10 โปรแกรมจะวางปุ่มดังกล่าวนอกขอบ (border = OUTSIDE) ที่เมธอด pack() ได้กำหนดไว้ โดยปุ่มมีขนาดความกว้างและความยาวเท่ากับ 100 พิกเซลWidgets ต่างๆ ที่ใช้สำหรับออกแบบ GUI มีคุณสมบัติพื้นฐานหลายประการที่สามารถใช้งานร่วมกันได้ เช่น ขนาด สี และฟอนต์ เป็นต้น ซึ่งมีรายละเอียดของคุณสมบัติต่างๆ ดังนี้ 1. Dimension (ขนาด) ขนาดของ Widgets สามารถกำหนดได้หลายแบบดังนี้ - กำหนดขนาดด้วยตัวอักษร เช่น 'c' = เซนติเมตร (Centimeters), 'i' = นิ้ว (Inches), 'm' = มิลลิเมตร (Millimeters), 'p' = Printer's points (ประมาณ 1/72) - กำหนดขนาดด้วยตัวเลข มีหน่วยเป็นพิกเซล (Pixels) เช่น 1, 3, หรือ 5 เป็นต้น Dimension ถูกนำไปใช้กำหนดคุณสมบัติของ Widgets ดังต่อไปนี้ - borderwidth ความกว้างเส้นขอบของ Widget - highlightthickness ความกว้างของรูปสี่เหลียมที่ใช้สำหรับเน้นความสนใจ (highlight rectangle) เมื่อ Widget ถูกโฟกัส - padX padY ขนาดพื้นที่ว่างเพิ่มเติมรอบๆ Widget - selectborderwidth ความกว้างเส้นขอบเมื่อ Widget ถูกเลือก - wraplength ความยาวสูงสุดที่เกิดจากการครอบคำหรือข้อความ - height กำหนดความสูงของ Widget - width ความกว้างของ Widget - underline ขีดเส้นใต้ตัวอักษรที่ต้องการ (0 คืออักษรตัวแรกของข้อความ) 2. Color (สี) การกำหนดสีให้กับตัวอักษรหรือ Widgets ได้ 2 รูปแบบคือ - กำหนดค่าของสีโดยใช้เลขฐาน 16 ตัวอย่างเช่น #ffff คือสีขาว, #0000 คือสีดำ หรือ #00ffff คือสีฟ้า เป็นต้น - กำหนดค่าของสีโดยใช้ข้อความ เช่น "red" = สีแดง, "green" = สีเขียว หรือ "white" = สีขาว เป็นต้น ดังรูปด้านล่าง Color ถูกนำไปใช้กำหนดคุณสมบัติของ Widgets ดังต่อไปนี้ - activebackground กำหนดสีพื้นหลังของ Widgets เมื่อ Widgets ทำงาน (Active) - activeforeground กำหนดสีด้านหน้าของ Widgets เมื่อ Widgets ทำงาน (Active) - background กำหนดสีพื้นหลังของ Widgets หรือเขียนย่อเป็น bg - foreground กำหนดสีด้านหน้าของ Widgets หรือเขียนย่อเป็น fg - disabledforeground กำหนดสีด้านหน้าของ Widgets เมื่อ Widgets ถูก Disable - highlightbackground กำหนดสีพื้นหลังเมื่อ Widgets ถูกโฟกัส - highlightcolor กำหนดสีด้านหน้าเมื่อ Widgets ถูกโฟกัส - selectbackground กำหนดสีพื้นหลังเมื่อมีการเลือกรายการใดรายการหนึ่งใน Widget เช่น เลือกรายการจาก Dropdown - selectforeground กำหนดสีด้านหน้าเมื่อมีการเลือกรายการใดรายการหนึ่งใน Widget 3. Font (ฟอนต์) การกำหนดรูปแบบของฟอนต์ให้กับ Widgets สามารถกำหนดได้ 2 รูปแบบ คือ - กำหนดฟอนต์โดยใช้เครื่องหมายวงเล็บครอบ เช่น ("Helvetica", "16") หรือ ("Times", "24", "bold italic") - กำหนดฟอนต์โดยใช้เมธอด font ที่มากับ Tk ซึ่งมีรูปแบบคือ myFont = font.Font( option, ... ) สำหรับ option มีรายละเอียดดังนี้- family ชื่อของฟอนต์ เช่น 'Helvetica', 'Verdana', 'Times' ตัวอย่าง family = 'Helvetica' - size ขนาดของฟอนต์ เช่น size = 15 - weight ขนาดความหนาของฟอนต์ เช่น bold คือฟอนต์ตัวหนา, normal คือ ความหนาปกติ ตัวอย่าง weight = 'bold' - slant ตัวอักษรเอียง เช่น italic คือตัวอักษรเอียง, roman คือ ตัวอักษรปกติ - underline ขีดเส้นใต้ เช่น underline = 1 คือการขีดเส้นตัวอักษร, 0 คือ ตัวอักษรปกติ - overstrike ขีดเส้นทับตัวอักษร เช่น overstrike = 1 คือขีดเส้นทับตัวอักษร, 0 คือไม่ขีดเส้นทับ 4. Anchors กำหนดจุดอ้างอิงที่ใช้สำหรับจัดวาง Widgets มีรูปแบบคือ NW: ทิศตะวันตกเฉียงเหนือ, N: ทิศเหนือ, NE: ทิศตะวันออกเฉียงเหนือ, W: ทิศตะวันตก, CENTER: จุดกลางของแผนที่, E: ทิศตะวันออก, SW: ทิศตะวันตกเฉียงใต้, S: ทิศใต้, SE: ทิศตะวันออกเฉียงใต้ ตัวอย่างเช่น anchor = NE, anchor = SE สำหรับตัวอย่างตำแหน่งทิศต่างๆ แสดงดังรูป 5. Relief styles กำหนดลักษณะภาพในรูปแบบ 3 มิติ (3D) รอบๆ บริเวณ Widgets มีรูปแบบคือ - FLAT แสดงภาพในลักษณะแบนราบ (ไม่เป็นภาพนูน) - RAISED แสดงภาพในลักษณะยกขึ้น หรือนูนขึ้น - SUNKEN แสดงภาพในลักษณะจมลงไป - GROOVE แสดงภาพในลักษณะกรอบเป็นร่องลึก - RIDGE แสดงภาพในลักษณะกรอบนูนขึ้น ตัวอย่างการใช้งาน Relief แสดงในโปรแกรมผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม6. Bitmaps (บิตแมป) Bitmap คือภาพที่เกิดจากจุดสีที่เรียกว่า Pixel (พิกเซล) ประกอบกันเป็นรูปร่างบนพื้นที่ที่มีลักษณะเป็นเส้นตาราง (กริด) แต่ละพิกเซลจะมีค่าของตำแหน่ง และค่าสีของตัวเอง ภาพหนึ่งภาพ จะประกอบด้วยพิกเซลหลายๆ พิกเซลผสมกัน ไฟล์ภาพเหล่านี้มีหลายรูปแบบ อาทิ เช่น BMP, TIF, JPG, PCT เป็นต้น ไพธอนมีภาพบิตแมปให้เลือกใช้งานดังรูปตัวอย่างการใช้งาน Bitmapsผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม7. Cursors เคอร์เซอร์หรือตัวชี้เมาส์ คือ สัญลักษณ์แสดงตำแหน่งของเมาส์บนจอภาพ ไพธอนเตรียมสัญลักษณ์สำหรับใช้เป็นเคอร์เซอร์ให้เลือกใช้งานดังรูปตัวอย่างการใช้งานเคอร์เซอร์ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม ในหัวข้อนี้จะกล่าวถึงวิธีการสร้าง Widgets พื้นฐานที่สำคัญๆ สำหรับใช้ในการสร้าง GUI เช่น frames, labels, buttons, checkbuttons, radiobuttons, entries และ comboboxes เป็นต้นเฟรมเป็น Widget ที่มีลักษณะเป็นรูปสี่เหลี่ยม โดยปกติเฟรมจะถูกใช้สำหรับจัดกลุ่มหรือบรรจุ Widgets อื่นๆ ที่เกี่ยวข้องหรือสัมพันธ์กันเข้าไว้ด้วยกัน รูปแบบคำสั่งสำหรับการสร้างเฟรม คือ f = Frame( root, option=value, ... ) พารามิเตอร์ คือ - root คือ วินโดวส์หลัก (root window) - option คือ คุณสมบัติต่างๆ ของเฟรม แสดงในตารางด้านล่าง
บรรทัดที่ 12 โปรแกรมทำการสร้างเฟรมอีกครั้ง ชื่อ bottomframe โดยเฟรมดังกล่าวมีลักษณะของกรอบที่จมลึกลงไป (relief = SUNKEN) และเฟรมดังกล่าวถูกจัดวางให้อยู่ในตำแหน่งด้านล่างของหน้าต่างหลักด้วยเมธอด bottomframe.pack(side = BOTTOM) จากนั้นโปรแกรมสร้างปุ่มที่มีข้อความสีดำ ใส่ลงในเฟรม bottomframe โดยกำหนดให้วางในตำแหน่งด้านล่างของเฟรม (side = BOTTOM) ผลลัพธ์ที่ได้แสดงในรูปด้านบน ผู้เขียนโปรแกรมสามารถเลือกใช้เมธอด grid() แทนเมธอด pack() ในการจัดวาง Widgets ก็ได้ ดังตัวอย่างโปรแกรมด้านล่าง ตัวอย่างการใช้งานเฟรม (ตัวอย่างที่ 2) ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม Button คือ Widget ที่มีลักษณะเป็นรูปสี่เหลี่ยมผืนผ้า มีหน้าที่ตอบสนองกับผู้ใช้งานโดยวิธีการกดลงและปล่อย
การแสดงผลบนปุ่มจะเป็นได้ทั้งข้อความหรือรูปภาพก็ได้ เมื่อกดปุ่มและปล่อย (เกิด event) จะส่งผลให้เกิดการเรียกใช้งานฟังก์ชันหรือเมธอดที่ฝังอยู่กับปุ่มได้ เพื่อทำหน้าที่อย่างใดอย่างหนึ่ง เช่น กดปุ่ม Cancel จะทำให้โปรแกรมยกเลิกคำสั่งที่เพิ่งกระทำเสร็จ เป็นต้น
Widget ชนิดปุ่มมีเมธอดที่ช่วยเสริมในการทำงานของปุ่มคือ ตัวอย่างการสร้างและใช้งานปุ่ม ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม ให้ทดลองคลิกที่ปุ่ม Go! และปุ่มเครื่องพิมพ์ หมายเหตุ จะต้องบันทึกไฟล์รูปภาพ ซึ่งในที่นี้คือ ไฟล์ printer.png ไว้ในโฟลเดอร์เดียวกับไฟล์ .py จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Button (ปุ่ม) โดยบรรทัดที่ 7 โปรแกรมสร้างเมธอดชื่อ helloCallBack() มีหน้าที่สร้างกล่องข้อความโดยพิมพ์ข้อความว่า "Hello World" ออกจอภาพ บรรทัดที่ 10 โปรแกรมสร้างเมธอดชื่อ printCallBack() มีหน้าที่สร้างกล่องข้อความ โดยพิมพ์ข้อความว่า "Hello Printer" ออกจอภาพ บรรทัดที่ 12
สร้างอ๊อปเจ็กต์ image ที่เชื่อมโยงไปยังรูปภาพชื่อว่า "printer.png" เพื่อใช้สำหรับแสดงบนปุ่ม บรรทัดที่ 13 โปรแกรมสร้างปุ่มโดยมีข้อความบนปุ่มคือ "Go!" (text = "Go!"), ขีดเส้นใต้ที่ตัวอักษร "G" (underline=0), ขอบของปุ่มเป็นแบบร่องลึก (relief=GROOVE), เมื่อปุ่มถูกกด ปุ่มจะเป็นสีเหลือง (activebackground = "yellow"), เมื่อปุ่มถูกกดข้อความจะเป็นสีแดง (activeforeground = "red") และเมื่อปุ่มดังกล่าวถูกคลิก โปรแกรมจะเรียกใช้เมธอด helloCallBack() Canvas คือ Widget ที่มีลักษณะเป็นรูปสี่เหลี่ยม มีเป้าหมายเพื่อใช้สำหรับจัดวางรูปภาพ เฟรม ข้อความ หรือวาดรูปภาพที่มีความซับซ้อนได้ รูปร่างของ Canvas แสดงดังรูป รูปแบบคำสั่งสำหรับการสร้าง Canvas คือ c = Canvas( root, option=value, ... )
Canvas สามารถวาดรูปต่างๆ ลงบน Canvas ได้ ดังนั้นเมธอดต่อไปนี้ จึงใช้งานร่วมกับ Canvas ได้เป็นอย่างดี ตัวอย่างการสร้างและใช้งาน Canvas ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Canvas โดยบรรทัดที่ 4 โปรแกรมสร้าง Canvas ที่มีสีพื้นหลังเป็นสีน้ำเงิน (bg = "blue") มีความกว้างเท่ากับ 300 และสูงเท่ากับ 250 บรรทัดที่ 5 กำหนดตำแหน่งของ coord ซึ่งเป็นตัวแปรชนิด Tuple เท่ากับ 10, 50, 240, 210 ตามลำดับ บรรทัดที่ 6 โปรแกรมทำการวาดวงกลมเสี้ยวสีแดงลงบน Canvas ดังรูปด้านบน Checkbutton คือ Widget ที่มีลักษณะเป็นรูปสี่เหลี่ยมเล็กๆ เพื่อให้ผู้ใช้สามารถเลือกได้โดยการคลิกบน Checkbutton ดังกล่าว ผู้ใช้สามารถเลือกได้มากกว่า 1 ตัวเลือก
Widget ชนิด Checkbutton มีเมธอดที่ช่วยสนับสนุนการทำงานคือ ตัวอย่างการสร้างและใช้งาน Checkbutton ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรมดังรูป ให้ทดลองคลิกที่ Checkbutton และสังเกตการเปลี่ยนแปลง จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Checkbutton บรรทัดที่ 4 เป็นการสร้างตัวแปรชื่อ CheckVar1 เพื่อใช้สำหรับเก็บค่าข้อมูลชนิดสตริง ในที่นี้คือ 'on' หรือ 'off' ที่เกิดขึ้นจากการคลิกที่
Checkbutton (C1) โดยตัวแปรดังกล่าวสร้างขึ้นจากคลาสชื่อ StringVar() บรรทัดที่ 5 เป็นการสร้างตัวแปรชื่อ CheckVar2 ซึ่งเป็นชนิดจำนวนเต็ม ในที่นี้คือ 0 หรือ 1 ที่เกิดจากการคลิก Checkbutton (C2) โดยสร้างมาจากคลาสชื่อ IntVar() บรรทัดที่ 7 โปรแกรมสร้างฟังชันชื่อ checkCallBack() เพื่อทดสอบการทำงานของ Checkbutton C1 และ C2 โดยฟังชันดังกล่าวเรียกใช้งานเมธอด select() และ toggle() พร้อมกับพิมพ์ค่า CheckVar1 และ CheckVar2 ออกทางจอภาพเมื่อผู้ใช้มีการคลิกที่ Checkbutton Entry (นำเข้าข้อมูล) คือ Widget ที่มีลักษณะเป็นกล่องข้อความ
เพื่อใช้รับข้อมูลจากผู้ใช้เข้ามาประมวลผลในโปรแกรม เช่น การป้อนชื่อ-สกุล รหัสผ่าน เป็นต้น
Widget ชนิด Entry มีเมธอดที่ช่วยสนับสนุนการทางาน คือ ตัวอย่างการสร้างและใช้งาน Entry ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรมดังรูป ให้ลองป้อนข้อมูลและคลิกเลือกปุ่มต่างๆ พร้อมกับสังเกตการเปลี่ยนแปลง จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Entry บรรทัดที่ 3 สร้างตัวแปรชื่อ entryVar เพื่อใช้สำหรับเก็บค่าข้อมูลชนิดสตริงที่ป้อนลงใน Entry โดยตัวแปรดังกล่าวสร้างขึ้นจากคลาสชื่อ StringVar() บรรทัดที่ 4 สร้างฟังชันชื่อ deleteCallBack() ทำหน้าที่ลบข้อความใน Entry โดยการระบุตำแหน่งเริ่มต้น (first) และสิ้นสุด (last) ของข้อความด้วยเมธอด delete(first, last) บรรทัดที่ 6
สร้างฟังชันชื่อ insertCallBack() ทำหน้าที่แทรกหรือเพิ่มข้อความลงใน Entry ด้วยเมธอด insert(index, s) โดย index คือตำแหน่งที่ต้องการเพิ่มข้อความลงใน Entry และ s คือข้อความ บรรทัดที่ 8 สร้างฟังชัน selectCallBack() ทำหน้าที่เลือกช่วงของข้อความ (highlight) ใน Entry โดยใช้เมธอด selectRange(start, end) บรรทัดที่ 12 สร้างฟังชันชื่อ showCallBack() ทำหน้าที่แสดงผลข้อมูลที่อยู่ใน Entry ผ่านตัวแปรชนิดสตริงชื่อ entryVar โดยใช้เมธอด get() Label (เลเบลหรือป้ายชื่อ) คือ Widget ที่มีลักษณะเป็นป้ายของข้อความ เพื่อใช้แสดงข้อความต่างๆ ผู้ใช้งานทราบ เช่น ป้ายชื่อผู้ใช้งาน (User label) ป้ายชื่อรหัสผ่าน (Password label) เป็นต้น
คลาส StringVar() และคลาส IntVar() มีเมธอดสำคัญที่ช่วยสนับสนุนการทำงานของ Widgets คือ ตัวอย่างการสร้างและใช้งาน Label ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรมดังรูป จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Label บรรทัดที่
5 และ 6 สร้างตัวแปรชื่อ userVar และ passwordVar เพื่อใช้สำหรับเก็บค่าข้อมูลชนิดสตริงที่ป้อนลงใน Entry ของ User Name และ Password ตามลำดับ บรรทัดที่ 8 สร้างฟังชันชื่อ showLoginInfo() ทำหน้าที่แสดงชื่อผู้ใช้งานและรหัสผ่านด้วยกล่องข้อความชื่อ "Login info" และพิมพ์ข้อมูลออกทาง Python shell ด้วย บรรทัดที่ 12 สร้างฟังชันชื่อ clearLogin() ทำหน้าที่ลบชื่อผู้ใช้และรหัสผ่านออกจาก Entry Listbox คือ Widget ที่มีลักษณะเป็นรายการของสมาชิกที่ส่วนใหญ่มีตัวเลือกมากกว่า 1 ตัวเลือก โดยผู้ใช้งานสามารถเลือกสมาชิกจากรายการดังกล่าวได้เพียงตัวเดียวเท่านั้น เช่น ประเทศ คำนำหน้าชื่อ เป็นต้น
- เมธอด selection_set(first, last) ทำหน้าที่เลือกช่วงสมาชิกที่ต้องการ โดยใช้กำหนดตำแหน่งสมาชิกตัวแรกในพารามิเตอร์ first และสมาชิกตัวสุดท้ายคือ last ถ้าระบุเฉพาะ first แสดงว่าเลือกสมาชิกจาก Listbox เพียงตัวเดียวเท่านั้น เช่น ตัวอย่างการสร้างและใช้งาน Listbox ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม ตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Listbox บรรทัดที่ 4 สร้าง Listbox ในหน้าต่างหลัก บรรทัดที่ 5 – 10 เป็นการเพิ่มสมาชิกให้กับ Listbox คือ 'Python', 'Perl', 'C', 'PHP', 'JSP' และ 'Ruby' ผลลัพธ์ที่ได้แสดงดังรูปด้านบน Menubutton คือ Widget ที่มีลักษณะเป็นเมนูแบบเลื่อนลง
เมื่อผู้ใช้คลิกเลือกเมนูดังกล่าวจะคงอยู่ตลอดไปจนกว่าจะปิดโปรแกรม ผู้ใช้สามารถเลือกรายการใดรายการหนึ่งใน Menubutton โดยการคลิกที่รายการที่ต้องการ
ตัวอย่างการสร้างและใช้งาน Menubutton ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Menubutton บรรทัดที่ 4 สร้าง Menubutton ชื่อ mb โดยเมนูดังกล่าวมีข้อความคือ "Colors" และเมนูย่อยจะปรากฏทางด้านขวาของเมนู "Colors" บรรทัดที่ 6 สร้างเมนูย่อยภายใน Menubutton บรรทัดที่ 9 และ 10 เพิ่มรายการในเมนูย่อยชื่อ "Red" และ "Green" ตามลำดับ Message (ข้อความ) คือ Widget ที่มีลักษณะเป็นข้อความเพื่ออธิบายบางสิ่งบางอย่างในโปรแกรม (โดยแก้ไขไม่ได้) คล้ายกับ Label แต่แตกต่างกันคือ Message จะถูกปรับขนาดการแสดงผลให้เหมาะสมโดยอัตโนมัติ ตัวอย่างการสร้างและใช้งาน Message ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Message บรรทัดที่ 4 สร้างตัวแปรชื่อ var เป็นชนิดสตริง ใช้สำหรับเก็บข้อมูลของ Message บรรทัดที่ 5 สร้าง Message ชื่อ me โดยไม่มีข้อความใดๆ แสดงออกจอภาพ การควบคุมการแสดงผลจะขึ้นอยู่กับตัวแปรที่ถูกกำหนดใน textvariable นั่นคือ ตัวแปรชื่อ var นั่นเอง บรรทัดที่ 7 กำหนดข้อความใหม่ว่า " Hello!! Welcome to Python Programming?" โดยใช้ เมธอด set() ให้กับตัวแปร var ส่งผลให้ Message เปลี่ยนเป็นข้อความใหม่ที่กำหนดขึ้นทันที Menu คือ Widget ที่มีลักษณะเป็นเมนูย่อย แบ่งออกเป็น 3 ประเภทคือ เมนูแบบ popup, toplevel และ pull-down ตัวอย่างเช่น เมนู File, Edit, Option, Windows และ Help เป็นต้น รูปแบบคำสั่งสำหรับการสร้าง Menu คือ me = Menu( root, option=value, ... )
Widget ชนิด Menu มีเมธอดที่ช่วยสนับสนุนการทางาน คือ ตัวอย่างการสร้างและใช้งาน Menu ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งานเมนู บรรทัดที่ 3 สร้างฟังชันชื่อว่า donothing() ทำ หน้าที่สร้างหน้าต่างวินโดวส์ใหม่ที่เป็นอิสระจากวินโดวส์หลัก โดยฟังชันดังกล่าวสร้างปุ่มและพิมพ์ข้อความบนปุ่มว่า "Do nothing button" บรรทัดที่ 8
สร้างวินโดวส์หลักพร้อมกับเมนูหลักชื่อว่า menubar เพื่อใช้สำหรับรองรับเมนูย่อยที่จะสร้างขึ้นในคำสั่งลำดับถัดไป Radiobutton คือ Widget ที่มีลักษณะเป็นปุ่มกลมมีช่องว่างอยู่ภายใน
เมื่อถูกเลือกจะเปลี่ยนสถานะเป็นสีที่ทึบขึ้น Radiobutton ส่วนใหญ่จะถูกสร้างเป็นกลุ่มของตัวเลือก เพื่อให้ผู้ใช้งานสามารถเลือกรายการใดรายการหนึ่งเพียงรายการเดียวเท่านั้น เช่น เลือกคำนำหน้าชื่อ ชาย, นางสาว, นาง เป็นต้น
Widget ชนิด Radiobutton มีเมธอดที่ช่วยสนับสนุนการทา งาน คือ ตัวอย่างการสร้างและใช้งาน Radiobutton ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Radiobutton บรรทัดที่ 3
สร้างฟังชันชื่อว่า sel() ทำหน้าที่กำหนดข้อความใหม่ให้กับ Label เป็น "You selected the option" ตามด้วยค่าที่เก็บอยู่ในตัวแปร var (var.get()) โดยใช้เมธอด Label.config() บรรทัดที่ 8 สร้างตัวแปรชื่อ var เป็นชนิดจำนวนเต็ม สำหรับเก็บข้อมูลที่เกิดขึ้นจากการดาเนินการใดๆ บน Radiobutton บรรทัดที่ 9 สร้าง Radiobutton ชื่อ R1 มีข้อความว่า "Mr." มีค่าเท่ากับ 1 (value = 1) เมื่อมีการคลิกเลือกปุ่ม Radiobuttion ดังกล่าว ผลลัพธ์จาก value จะถูกนามาเก็บไว้ในตัวแปรชื่อ var (variable = var)
เมื่อปุ่มดังกล่าวถูกคลิกเลือก โปรแกรมจะเรียกฟังชัน ชื่อว่า sel() มาทำงานทันที (command = sel) Scale คือ Widget ที่มีลักษณะเลื่อนสไลด์ขึ้นลงหรือซ้ายขวาได้ เพื่อทำหน้าที่แสดงขอบเขตของข้อมูลที่ผู้ใช้ต้องการ เช่น ปรับขนาดความเข้มของสี ความสว่าง ความคมชัด เป็นต้น รูปแบบคำสั่งสำหรับการสร้าง Scale คือ s = Scale( root, option = value, ... )
Widget ชนิด Scale มีเมธอดที่ช่วยสนับสนุนการทำงาน คือ ตัวอย่างการสร้างและใช้งาน Scale ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Scale บรรทัดที่ 2 สร้างฟังชันชื่อว่า sel() ทำหน้าที่แสดงข้อความให้กับ Label มีค่าเท่ากับ "Value =" ตามด้วยค่าที่เก็บอยู่ในตัวแปร var (var.get()) โดยใช้เมธอด Label.config() บรรทัดที่ 7 สร้างตัวแปรชื่อ var เป็นชนิดจำนวนจริงขนาดใหญ่ (Double) สำหรับเก็บข้อมูลที่เกิดขึ้นจากการเลื่อนสเกล บรรทัดที่ 8 สร้าง Scale ชื่อ scale มีขอบเขตของสเกลตั้งแต่ 1 ถึง 15 (from_ = 1, to = 15), ช่วงของสเกลเท่ากับ 1 (resolution = 1), แสดงค่าของสเกลอยู่ด้านซ้ายตั้งแต่ 1 ถึง 15 (tickinterval = 1), รางของสเกลเป็นสีเหลือง (troughcolor = "yellow"), เป็นสเกลในแนวตั้ง (orient = VERTICAL), เมื่อผู้ใช้เลื่อนแท็บของสเกล ผลลัพธ์จะเก็บไว้ในตัวแปรชื่อ var (variable = var) บรรทัดที่ 12 สร้างปุ่มชื่อ button มีข้อความว่า "Get Scale Value" เมื่อคลิกปุ่มดังกล่าวโปรแกรมจะเรียกฟังชัน sel() มาทำงาน ผลการทำงานของโปรแกรมแสดงดังรูปด้านบน Scrollbar คือ Widget ที่มีลักษณะเป็นแท็บสไลด์เลื่อนขึ้น - ลง หรือซ้าย - ขวาได้ เพื่อเพิ่มขนาดพื้นที่สำหรับแสดงผลหรือให้ผู้ใช้ป้อนข้อมูลเพิ่มขึ้น นิยมใช้งานร่วมกับ Listbox, Text, Canvas และ Entry เป็นต้น รูปแบบคำสั่งสำหรับการสร้าง Scrollbar คือ s = Scrollbar( root, option = value, ... )
Widget ชนิด Scale มีเมธอดที่ช่วยสนับสนุนการทำงาน คือ ตัวอย่างการสร้างและใช้งาน Scrollbar ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Scrollbar บรรทัดที่ 5 สร้าง Scrollbar ชื่อ scrollbar บรรทัดที่ 8 สร้าง Listbox ชื่อว่า mylist จากนั้นทำการเพิ่ม Scrollbar เข้าไปใน Listbox ในแนวตั้งหรือแนวแกน y ด้วยคำสั่ง yscrollcommand (yscrollcommand = scrollbar.set) บรรทัดที่ 10 โปรแกรมใช้ลูป for สั่งพิมพ์ "This is line number" และตามด้วยตัวเลขที่เริ่มตั้งแต่ 0 – 99 ลงใน Listbox โดยใช้เมธอด insert() ส่งผลให้ Scrollbar สร้างแท็บสไลด์มีขนาดที่ครอบคลุมรายการทั้งหมด (ถ้าสั่งพิมพ์รายการน้อยๆ เช่น 5 รายการ Scrollbar จะไม่สร้างแท็บสำหรับเลื่อนสไลด์ให้) บรรทัดที่ 14 โปรแกรมสั่งกระตุ้นให้ Scrollbar ทำ งานด้วยเมธอด config() ผ่านอ๊อปชัน command ผลการทำงานของโปรแกรมแสดงดังรูปด้านบน Text คือ Widget ที่อนุญาตให้ผู้เขียนโปรแกรมสามารถสร้างข้อความเพื่ออธิบายบางสิ่งบางอย่างในโปรแกรม โดย Text
มีความสามารถหลายอย่าง เช่น เปลี่ยนสีพื้นข้อความ สีตัวอักษร รูปแบบฟอนต์ ขนาด และอื่นๆ
Widget ชนิด Text มีเมธอดที่ช่วยสนับสนุนการทำงาน คือ Text ยังมีเมธอดที่ช่วยสำหรับการทำ Marks, Tabs และ Indexes ดังนี้ Text ยังมีเมธอดที่ช่วยสำหรับการทำงานเกี่ยวกับ Tag ดังนี้ ตัวอย่างการสร้างและใช้งาน Text ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Text บรรทัดที่ 3 สร้างเฟรมชื่อ frame มีความหนาของกรอบเท่ากับ 2 พิกเซล เป็นชนิดกรอบแบบร่องลึก บรรทัดที่ 4 และ 5
สร้างกริดบนเฟรมมีขนาดเท่ากับ 1 แถว 1 คอลัมน์ บรรทัดที่ 6 และ 7 สร้าง Scrollbar ในแนวนอนลงบนเฟรม วางในตำแหน่งแถวที่ 1 และคอลัมน์ที่ 0 ในกริด และวาง Scrollbar จากด้านทิศตะวันออกไปทิศตะวันตก (sticky=E+W) บรรทัดที่ 8 และ 9 สร้าง Scrollbar ในแนวตั้งลงบนเฟรม วางในตำแหน่งแถวที่ 0 และคอลัมน์ที่ 1 ในกริด และวาง Scrollbar จากด้านทิศเหนือไปทิศใต้ (sticky=N+S) Toplevel เป็น Widget ที่อยู่บนสุดของวินโดวส์ ไม่จำเป็นต้องมีวินโดวส์อื่นๆ คอยควบคุมหรืออยู่ภายใต้วินโดวส์ใดๆ หรือพูดง่ายๆ คือ Toplevel จะถูกดูแลจาก Window Manager โดยตรงนั่นเอง ดังแสดงดังรูป รูปแบบคำสั่งสำหรับการสร้าง Toplevel คือ t = Toplevel( root, option=value, ... ) Widget ชนิด Toplevel มีเมธอดที่ช่วยสนับสนุนการทำงาน คือ ตัวอย่างการสร้างและใช้งาน Text (ตัวอย่างที่ 1) ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Toplevel บรรทัดที่ 3 สร้างวินโดวส์หลักหรือ root window ชื่อว่า root บรรทัดที่ 4 สร้างวินโดวส์หลักที่เป็นอิสระจาก root ชื่อว่า top บรรทัดที่ 5 กำหนด title ของ top เท่ากับ "Toplevel" บรรทัดที่ 6 สั่งวาดวินโดวส์ใหม่ด้วยเมธอด deiconify() ผลลัพธ์แสดงดังรูปด้านบน ตัวอย่างการสร้างและใช้งาน Text (ตัวอย่างที่ 2) ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม ตัวอย่างโปรแกรม บรรทัดที่ 3 สร้างหน้าต่างหลักชื่อ root จากนั้นบรรทัดที่ 4 โปรแกรมลบวินโดวส์ด้วยเมธอด withdraw() บรรทัดที่ 6 โปรแกรมสร้างวินโดวส์ใหม่ชื่อ top โดยสืบทอดคุณสมบัติทั้งหมดมาจากวินโดวส์ root บรรทัดที่ 7 โปรแกรมทำการลงทะเบียนเมธอด root.destroy กับ "WM_DELETE_WINDOW" เพื่อใช้สำหรับลบหรือทาลายวินโดวส์ออกจากจอภาพ บรรทัดที่ 9 สร้างปุ่มชื่อ but มีข้อความบนปุ่มคือ 'deiconify' บรรทัดที่ 10 เป็นการกำหนดว่าเมื่อคลิกปุ่มดังกล่าว โปรแกรมจะเรียกเมธอด root.deiconify เพื่อยุติการทำงานของวินโดวส์ ผลลัพธ์แสดงดังรูปด้านบน Spinbox คือ Widget ที่เหมือนกับ Entry แต่สามารถกำหนดขอบเขตของข้อมูลได้ ดังแสดงในรูป รูปแบบคำสั่งสำหรับการสร้าง Spinbox คือ s = Spinbox( root, option=value, ... )
Widget ชนิด Spinbox มีเมธอดที่ช่วยสนับสนุนการทำงาน คือ ตัวอย่างการสร้างและใช้งาน Spinbox ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Spinbox ในบรรทัดที่ 4 สร้าง Spinbox ชื่อ spin มีจำนวนบรรทัดเท่ากับ 10 บรรทัด เพื่อให้ผู้ใช้งานสามารถป้อนข้อมูลได้เพิ่มขึ้น โดยการคลิกเลือกที่ลูกศรขึ้นและลงที่อยู่ทางด้านขวาของ Spinbox LabelFrame คือ Widget ที่ผสมผสานกันระหว่าง Frame กับ Label นั่นคือ มีความสามารถในการรองรับ Widgets ต่างๆ เหมือนเฟรม และจัดการกับข้อความได้เหมือนกับ Label นั่นเอง รูปแบบคำสั่งสำหรับการสร้าง LabelFrame คือ lf1 = LabelFrame( root, option = value, ... )
ตัวอย่างการสร้างและใช้งาน LabelFrame ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน LabelFrame ในบรรทัดที่ 4 สร้าง LabelFrame ชื่อ lf1 โดยมีข้อความว่า "Group" วางอยู่ในทิศเหนือ (labelanchor = "n") ของวินโดวส์ บรรทัดที่ 7 สร้าง Entry และเพิ่มลงใน LabelFrame MessageBox คือ Widget ที่ใช้สำหรับแสดงข้อความที่เหมาะสม
หรือตามที่ผู้เขียนโปรแกรมต้องการ เช่น ข้อความเกี่ยวกับการกระทำที่ผิดพลาดของผู้ใช้งาน ข้อความแจ้งเตือนต่างๆ เป็นต้น สำหรับฟังชัน (FunctionName) ที่สามารถใช้งานได้ดังนี้ ตัวอย่างการสร้างและใช้งาน messagebox ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน messagebox ในบรรทัดที่ 4 สร้างฟังชันชื่อ hello() โดยพิมพ์ข้อความว่า "Hello World" ผ่าน messagebox บรรทัดที่ 7 สร้างปุ่มชื่อ B1 มีข้อความว่า "Say Hello" เมื่อกดปุ่มดังกล่าว โปรแกรมจะเรียกฟังชัน hello() มาทำงาน Widgets อื่นๆ ที่น่าสนใจ ไพธอนยังมี Widgets ที่น่าสนใจอื่นๆ เช่น Paned Windows, Notebook, Tree, Combobox, SizeGrip, Progressbar ซึ่งมีรูปแบบคือ
ตัวอย่างโปรแกรมแสดงการสร้างและใช้งาน Widgets ต่างๆ ที่แสดงไว้ในรูปด้านบน ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม ในหัวข้อนี้ผู้เขียนจะนาเสนอรูปแบบการใช้งานไพธอน GUI ประยุกต์เข้ากับการใช้งานจริง ซึ่งมีเป้าหมายเพื่อต้องการให้ผู้อ่านเข้าใจวิธีการพัฒนาไพธอน GUI ในภาพรวม โดยการนำเอา Widgets ต่างๆ ที่อธิบายมาแล้วในตอนต้น ประกอบเข้าเป็นแอพพลิเคชันที่มีความซับซ้อนมากขึ้น เพื่อเป็นแนวทางในการพัฒนาโปรแกรมต่อไปในอนาคตได้ ซึ่งจะยกตัวอย่างโปรแกรมเครื่องคิดเลข ดังนี้คือ โปรแกรมเครื่องคิดเลขขนาดเล็ก (Mini-Calculator)
มีขั้นตอนในการออกแบบและพัฒนาโปรแกรมดังนี้ 2) นำเข้าโมดูลในการสร้าง GUI (tkinter) ตัวอย่างโปรแกรมชื่อ calculator.py ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม บรรทัดที่ 1 เป็นการนำเข้าโมดูล tkinter เพื่อสร้าง GUI สำหรับเครื่องคิดเลข บรรทัดที่ 3 ประกาศตัวแปรชนิดโกลบอลชื่อ expression
เพื่อใช้สำหรับเก็บนิพจน์คณิตศาสตร์ที่ผู้ใช้ป้อนให้กับเครื่องคิดเลข บรรทัดที่ 5 สร้างหน้าต่างหลัก โดยมี title คือ "Mini-Calculator" บรรทัดที่ 10 สร้างเมนูที่มีเมนูย่อยเพียงเมนูเดียวคือ Quit เพื่อใช้สำหรับออกจากโปรแกรม บรรทัดที่ 16 สร้าง Entry เพื่อรับข้อมูลจากผู้ใช้งานเพื่อนำมาประมวลผลภายในโปรแกรมเครื่องคิดเลข โดยวางลงบนกริดในตำแหน่งแถวที่ 1 คอลัมน์ที่ 0 และวางเลเบลเพื่อคั่นระหว่างปุ่มเครื่องคิดเลขกับ Entry โดยวางอยู่บนกริดในตำแหน่งแถวที่ 2 คอลัมน์ที่ 0
|