ก่อนการพัฒนา GUI ด้วยไพธอน จะต้องออกแบบหน้าตาของ GUI เสียก่อน โดยการสเก็ตช์ภาพบนกระดาษ หรือออกแบบด้วยโปรแกรมสำหรับสร้างงานกราฟิกด้วยคอมพิวเตอร์อย่างคร่าวๆ เสียก่อน ดังรูป การสเก็ตช์ GUI อย่างคร่าวๆ บนกระดาษ ยกตัวอย่างการเขียนโปรแกรมแปลงค่าหน่วยวัดระยะทางจากฟุต (feet) เป็นเมตร (meters) ภาพสเก็ตช์ของโปรแกรมแปลงจาก 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 และ Widgets Widget แต่ละประเภทมีหน้าที่การทำงานที่ต่างกัน ดังนั้นเมื่อสร้าง Widget ขึ้นมาแล้วจำเป็นที่จะต้องการทำการปรับแต่งคุณสมบัติของ Widgets (Configuration option) แต่ละตัวให้เหมาะสมกับงานที่จะทำ ตัวอย่างเช่น Label และ Button สามารถกำหนดข้อความที่แสดงผลด้วยออฟชัน text = "Textname" ในขณะที่ scrollbar ไม่จำเป็นต้องใช้ออฟชันดังกล่าว และถ้ามีการกดปุ่ม Button จะต้องเรียกใช้ฟังก์ชันหรือเมธอดที่เหมาะกับงานดังกล่าวโดยใช้คำสั่ง command แต่สำหรับ Label ไม่จำเป็นต้องใช้คำสั่ง command ในการทำงาน เป็นต้น 2. สร้างปุ่ม Button โดยส่งพารามิเตอร์ให้ 2 ค่า คือ ข้อความที่แสดงบนปุ่ม (text = "Hello") และวิธีการตอบสนองเมื่อปุ่มดังกล่าวถูกกด (command = "buttonpressed") พร้อมกับกำหนดค่ากริด ผลลัพธ์ที่ได้ คือ 3. ทดสอบเปลี่ยนข้อความที่แสดงบนปุ่มจาก "Hello" เป็น "Goodbye" หรือใช้เมธอด configure() เพื่อเปลี่ยนข้อความบนปุ่มแทนก็ได้ ผลลัพธ์ที่ได้ คือ 3. การจัดการรูปทรงเรขาคณิตให้กับ Widgets (Geometry management) จากที่กล่าวมาแล้วข้างต้นว่าการวาง Widgets ลงบนเฟรมนั้น จะต้องกำหนดตำแหน่งในการวาง โดยอาศัยศาสตร์ทางด้านเรขาคณิตเข้าช่วย เพื่อให้ Widgets ที่จะวางอยู่ในตำแหน่งที่เหมาะสม ซึ่งไพธอนมี 3 เมธอดในการจัดการเกี่ยวกับเรขาคณิตของ Widgets ประกอบไปด้วยเมธอด pack(), grid() และ place() ซึ่งจะกล่าวในหัวข้อการจัดวาง Widgets ด้วยเรขาคณิต 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 มีขั้นตอนดังนี้ - ลำดับการสร้างหน้าต่าง GUI ด้วย Tk - แสดงหน้าต่างหลัก (root window) ทุกๆ Widgets จะต้องอาศัยเรขาคณิตช่วยในการจัดวาง (Geometry management) ซึ่งไพธอนได้จัดเตรียมไว้ 3 เมธอดคือ pack(), grid() และ place() ดังนี้ widget.pack( pack_options ) pack_options มี 3 รูปแบบคือ expand, fill และ side 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() ดังนี้ ผลลัพธ์ที่ได้ คือ จากตัวอย่างโปรแกรม แสดงการใช้เมธอด pack() ในการจัดวาง Widgets โดยโปรแกรมสร้างเฟรม (บรรทัดที่ 4) ด้วยเมธอด Frame(root) อ๊อปเจ็กต์ที่สร้างขึ้นจะเก็บไว้ในตัวแปรชื่อ frame จากนั้นบรรทัดที่ 5 โปรแกรมเรียกเมธอด pack() โดยไม่มีพารามิเตอร์ ซึ่งส่งผลให้เฟรมดังกล่าวจะวางอยู่ในตำแหน่งบนสุดของหน้าต่างหลัก (root window) บรรทัดที่ 6 – 11 โปรแกรมสร้างปุ่มสีแดง น้ำเงิน และน้ำตาลลงบนเฟรมดังกล่าว 2. เมธอด grid() ทำหน้าที่จัดวาง Widgets ลงในหน้าต่างหลัก (root window) โดยอยู่ในรูปแบบของตาราง ซึ่งมีรูปแบบคำสั่ง ดังนี้ widget.grid( grid_options ) grid_options มีรูปแบบ ดังนี้คือ ตัวอย่างการใช้งานเมธอด grid() ดังนี้ ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรมดังรูป จากตัวอย่างโปรแกรม แสดงการใช้เมธอด grid() ในการจัดวาง Widgets โดยบรรทัดที่ 5 โปรแกรมสร้างเลเบลที่ทำการพิมพ์ตำแหน่งแถวและคอลัมน์ลงบนหน้าต่างหลัก โดยใช้เมธอด grid() ในการกำหนดตำแหน่งของเลเบล ผลลัพธ์ที่ได้แสดงดังรูปด้านบน 3. เมธอด place() ทำหน้าที่จัดวาง Widgets ลงในหน้าต่างหลัก (root window) โดยการระบุตำแหน่ง ซึ่งมีรูปแบบคำสั่ง ดังนี้ widget.place( place_options ) place_options มีรูปแบบดังนี้ คือ ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการใช้เมธอด place() ในการจัดวาง Widgets โดยบรรทัดที่ 6 โปรแกรมสร้างเมธอดชื่อว่า helloCallBack() ทำหน้าที่แสดงกล่องข้อความ (messagebox) โดยพิมพ์ข้อความว่า "Hello World" เมธอดดังกล่าวนี้จะถูกเรียกใช้เมื่อมีการกดปุ่ม Hello บรรทัดที่ 8 โปรแกรมสร้างปุ่มซึ่งมีข้อความบนปุ่มคือ "Hello" โดยมีพารามิเตอร์ 3 ตัวคือ อ๊อปเจ็กต์ของหน้าต่างหลัก (root), ข้อความที่ต้องการแสดงบนปุ่ม ("Hello") และการกระทำ (action) เมื่อปุ่มถูกกด ในที่นี้โปรแกรมจะเรียกเมธอด helloCallBack() มาทำงาน บรรทัดที่ 10 โปรแกรมจะวางปุ่มดังกล่าวนอกขอบ (border = OUTSIDE) ที่เมธอด pack() ได้กำหนดไว้ โดยปุ่มมีขนาดความกว้างและความยาวเท่ากับ 100 พิกเซล Widgets ต่างๆ ที่ใช้สำหรับออกแบบ GUI มีคุณสมบัติพื้นฐานหลายประการที่สามารถใช้งานร่วมกันได้ เช่น ขนาด สี และฟอนต์ เป็นต้น ซึ่งมีรายละเอียดของคุณสมบัติต่างๆ ดังนี้ - selectborderwidth ความกว้างเส้นขอบเมื่อ Widget ถูกเลือก 2. Color (สี) การกำหนดสีให้กับตัวอักษรหรือ Widgets ได้ 2 รูปแบบคือ Color ถูกนำไปใช้กำหนดคุณสมบัติของ Widgets ดังต่อไปนี้ 3. Font (ฟอนต์) การกำหนดรูปแบบของฟอนต์ให้กับ Widgets สามารถกำหนดได้ 2 รูปแบบ คือ myFont = font.Font( option, ... ) สำหรับ option มีรายละเอียดดังนี้ 4. Anchors กำหนดจุดอ้างอิงที่ใช้สำหรับจัดวาง Widgets มีรูปแบบคือ NW: ทิศตะวันตกเฉียงเหนือ, N: ทิศเหนือ, NE: ทิศตะวันออกเฉียงเหนือ, W: ทิศตะวันตก, CENTER: จุดกลางของแผนที่, E: ทิศตะวันออก, SW: ทิศตะวันตกเฉียงใต้, S: ทิศใต้, SE: ทิศตะวันออกเฉียงใต้ 5. Relief styles กำหนดลักษณะภาพในรูปแบบ 3 มิติ (3D) รอบๆ บริเวณ Widgets มีรูปแบบคือ ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม 6. Bitmaps (บิตแมป) Bitmap คือภาพที่เกิดจากจุดสีที่เรียกว่า Pixel (พิกเซล) ประกอบกันเป็นรูปร่างบนพื้นที่ที่มีลักษณะเป็นเส้นตาราง (กริด) แต่ละพิกเซลจะมีค่าของตำแหน่ง และค่าสีของตัวเอง ภาพหนึ่งภาพ จะประกอบด้วยพิกเซลหลายๆ พิกเซลผสมกัน ไฟล์ภาพเหล่านี้มีหลายรูปแบบ อาทิ เช่น BMP, TIF, JPG, PCT เป็นต้น ไพธอนมีภาพบิตแมปให้เลือกใช้งานดังรูป ตัวอย่างการใช้งาน Bitmaps ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม 7. Cursors เคอร์เซอร์หรือตัวชี้เมาส์ คือ สัญลักษณ์แสดงตำแหน่งของเมาส์บนจอภาพ ไพธอนเตรียมสัญลักษณ์สำหรับใช้เป็นเคอร์เซอร์ให้เลือกใช้งานดังรูป ตัวอย่างการใช้งานเคอร์เซอร์ ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม ในหัวข้อนี้จะกล่าวถึงวิธีการสร้าง Widgets พื้นฐานที่สำคัญๆ สำหรับใช้ในการสร้าง GUI เช่น frames, labels, buttons, checkbuttons, radiobuttons, entries และ comboboxes เป็นต้น เฟรมเป็น Widget ที่มีลักษณะเป็นรูปสี่เหลี่ยม โดยปกติเฟรมจะถูกใช้สำหรับจัดกลุ่มหรือบรรจุ Widgets อื่นๆ ที่เกี่ยวข้องหรือสัมพันธ์กันเข้าไว้ด้วยกัน Frame(root, bd = 5, height = 50, width = 100, relief = GROOVE)bgกำหนดสีพื้นด้านหลังของเฟรม เช่น Frame(root, bd = 5, height = 50, width = 100, relief = GROOVE, bg = "green")cursorกำหนดรูปแบบของเคอร์เซอร์ เคอร์เซอร์จะเปลี่ยนรูปเมื่อเคลื่อนเมาส์ทับบนเฟรม เช่น Frame(root, bd = 3, height = 50, width = 100, relief = GROOVE, cursor = "hand1")heightกำหนดความสูงของเฟรม มีหน่วยเป็นพิกเซล เช่น Frame(root, bd = 3, height = 50, width = 100, relief = GROOVE)widthกำหนดความกว้างของเฟรม ถ้าไม่กำหนดไพธอนจะกำหนดขนาดเท่ากับความกว้างของฟอนต์แทน เช่น Frame(root, bd = 3, height = 50, width = 100)highlightbackgroundกำหนดแถบสีพื้นหลังเมื่อเฟรมได้รับความสนใจ (Focus) เช่น Frame(root, bd = 3, height = 50, width = 100, highlightbackground = "green")highlightcolorกำหนดแถบสีเมื่อเฟรมได้รับความสนใจ เช่น Frame(root, bd = 3, height = 50, width = 100, highlightcolor = "green")highlightthicknessกำหนดความกว้างจากขอบของเฟรม เช่น Frame(root, bd = 3, height = 50, width = 100, highlightthickness = 2)reliefกำหนดลักษณะเฟรมในรูปแบบ 3 มิติ เช่น Frame(root, bd = 5, height = 50, width = 100, relief = GROOVE) ตัวอย่างการใช้งานเฟรม (ตัวอย่างที่ 1) ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างเฟรมเพื่อรอบรับการวาง Widget ชนิดปุ่มลงในเฟรมดังกล่าว บรรทัดที่ 4 เป็นการสร้างเฟรมชื่อ frame ให้มีขนาดสูงเท่ากับ 300 และกว้างเท่ากับ 500 โดยมีความหนาของขอบเฟรมเท่ากับ 3 (bd = 3) กรอบของเฟรมเป็นแบบร่องลึก (relief = GROOVE) มีขนาดความกว้างจากขอบเฟรมเท่ากับ 20 (highlightthickness = 20) เมื่อเลื่อนเมาส์เข้าใกล้เฟรมดังกล่าว เคอร์เซอร์จะเปลี่ยนเป็นรูปมือ (cursor = "hand1") และเฟรมที่สร้างขึ้นจะเขียนลงบนหน้าต่างหลักของโปรแกรม (root) บรรทัดที่ 5 เป็นการกำหนดให้เฟรมดังกล่าววางลงตรงกลางหน้าต่างหลักด้วยเมธอด frame.pack(expand=True) บรรทัดถัดไปโปรแกรมทำการสร้างปุ่ม มีข้อความสีแดง น้ำตาล และน้ำเงินลงบนเฟรมดังกล่าวตามลำดับ สังเกตว่าขนาดของเฟรมจะเท่ากับขนาดของปุ่ม เนื่องจากเมธอด pack() จะบีบอัดให้เฟรมมีขนาดเท่ากับผลรวมความกว้างและความยาวของ Widgets ที่อยู่ในเฟรมนั่นเอง (โปรแกรมจะไม่สนใจความสูงและความกว้างที่กำหนดในเฟรม) ตัวอย่างการใช้งานเฟรม (ตัวอย่างที่ 2) ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม Button คือ Widget ที่มีลักษณะเป็นรูปสี่เหลี่ยมผืนผ้า มีหน้าที่ตอบสนองกับผู้ใช้งานโดยวิธีการกดลงและปล่อย การแสดงผลบนปุ่มจะเป็นได้ทั้งข้อความหรือรูปภาพก็ได้ เมื่อกดปุ่มและปล่อย (เกิด event) จะส่งผลให้เกิดการเรียกใช้งานฟังก์ชันหรือเมธอดที่ฝังอยู่กับปุ่มได้ เพื่อทำหน้าที่อย่างใดอย่างหนึ่ง เช่น กดปุ่ม Cancel จะทำให้โปรแกรมยกเลิกคำสั่งที่เพิ่งกระทำเสร็จ เป็นต้น Button(root, text = "Hello", activebackground = "yellow")activeforegroundกำหนดสีข้อความบนปุ่มเมื่อผู้ใช้คลิกบนปุ่ม เช่น Button(root, text = "Hello", activebackground = "yellow", activeforeground = "red")bdกำหนดขนาดความกว้างขอบปุ่มมีหน่วยเป็นพิกเซล ค่าเริ่มต้นเท่ากับ 2 พิกเซล เช่น Button(root, text = "Hello", bd = 5)bgกำหนดสีพื้นหลังของปุ่ม เช่น Button(root, text = "Hello", bg = "red")commandฟังชันหรือเมธอดที่จะถูกเรียกใช้เมื่อปุ่มถูกกดหรือคลิก เช่น Button(root, text = "Hello", bg = "red", command = myFunc)fgกำหนดสีของฟอนต์ เช่น Button(root, text = "Hello", bg = "red", fg = "blue")fontกำหนดรูปแบบฟอนต์ของปุ่ม เช่น Button(root, text = "Hello", bg = "red", font = "Times 10 bold") หรือ font = ("Helvetica", 16)heightกำหนดความสูงของปุ่ม (กรณีปุ่มที่ถูกสร้างด้วยรูปภาพ จะมีหน่วยเป็นพิกเซล) เช่น Button(root, text = "Hello", height = 5)highlightcolorกำหนดแถบสีเมื่อเฟรมได้รับความสนใจ เช่น Button(root, text = "Hello", highlightcolor = "green")imageกำหนดรูปภาพให้กับปุ่มแทนการใช้ข้อความ เช่น image = PhotoImage(file = 'printer.png') B = Button(root, text ="Hello", image=image)justifyกำหนดตำแหน่งการแสดงผลข้อความบนปุ่ม โดย LEFT = วางข้อความชิดด้านซ้ายของปุ่ม, RIGHT = ชิดด้านขวา, CENTER = วางตรงกลางปุ่ม เช่น Button(root, text = "Hello\nPython\nLanguage", justify=LEFT)padxเติมข้อความว่าง (Padding) ด้านซ้ายและขวาของข้อความในปุ่ม เช่น Button(root, text = "Hello", padx = 5)padyเติมข้อความว่าง (Padding) ด้านบนและล่างของข้อความในปุ่ม เช่น Button(root, text = "Hello", pady = 5)reliefกำหนดลักษณะขอบของปุ่มในแบบ 3D เช่น Button(root, text = "Hello", relief = GROOVE)stateกำหนดให้ปุ่มทำงานหรือไม่ทำงาน ถ้ากำหนดเป็น DISABLED ปุ่มจะไม่สามารถกดได้ แต่ถ้ากำหนดเป็น ACTIVE จะสามารถกดปุ่มได้ เช่น Button(root, text = "Hello", state = DISABLED)underlineตัวอักษรของปุ่มจะถูกขีดเส้นใต้ โดยค่า -1 คือปุ่มจะไม่ถูกขีดเส้น แต่ตัวเลขอื่นๆ ที่เป็นค่าบวกจะทำให้ตัวอักษรบนปุ่มถูกขีดเส้น (0 คืออักษรตัวแรก) เช่น Button(root, text = "Hello", underline = 1)widthกำหนดความกว้างของปุ่ม (กรณีปุ่มที่ถูกสร้างด้วยรูปภาพ จะมีหน่วยเป็นพิกเซล) เช่น Button(root, text = "Hello", width = 5)wraplengthเมื่อค่าดังกล่าวถูกกำหนดเป็นจำนวนเต็มบวก ข้อความบนปุ่มจะถูกจำกัดพื้นที่ โดยจะแสดงผลอยู่ในขอบเขตที่กำหนดใน wraplength เท่านั้น เช่น ข้อความ "Hello" จะใช้พื้นที่ในการแสดงผลเท่ากับ 28 พิกเซล เมื่อกำหนด wraplength = 10 จะทำให้ข้อความแสดงในแนวตั้ง ตัวอย่างเช่น Button(root, text = "Hello", wraplength = 10) 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(root, bd = 5, relief = GROOVE, height = 250, width = 300, confine = False)cursorกำหนดรูปแบบของเคอร์เซอร์ เคอร์เซอร์จะเปลี่ยนรูปเมื่อเคลื่อนเมาส์ทับบน Canvas เช่น Canvas(root, bd = 5, relief = GROOVE, height = 250, width = 300, cursor = "hand1")bdกำหนดขนาดความกว้างขอบ Canvas มีหน่วยเป็นพิกเซล ค่าเริ่มต้นเท่ากับ 2 พิกเซล เช่น Canvas(root, bd = 3, relief = GROOVE, height = 250, width = 300)bgกำหนดสีพื้นหลังของ Canvas เช่น Canvas(root, bd = 3, relief = GROOVE, bg = "blue", height = 250, width = 300)scrollregionกำหนดพื้นที่ที่ Canvas สามารถขยายได้สูงสุดเท่าใด โดยขอบเขตพื้นที่กำหนดในตัวแปรชนิด Tuple ซึ่งมีรูปแบบ tuple(w, e, n, s) โดย w คือขอบด้านซ้าย, e คือขอบด้านขวา, n คือด้านบน และ s คือด้านล่าง เช่น Canvas(root, bd = 5, relief = GROOVE, scrollregion = (0, 0, 500, 500))xscrollincrementกำหนดขนาดการเพิ่มขึ้นของจำนวนคอลัมน์ เมื่อ Canvas ใช้ Scrollbar ในแนวนอน ใช้ในกรณีที่ Canvas ต้องการแสดงผลมากกว่าขอบเขตที่ Canvas กำหนดไว้ เช่น Canvas(frame, xscrollcommand = xscrollbar.set, yscrollcommand = yscrollbar.set, xscrollincrement = 10, yscrollincrement=10)heightกำหนดความสูงของ Canvas เช่น Canvas(root, bd = 3, relief = GROOVE, height = 250, width = 300)highlightcolorกำหนดแถบสีเมื่อ Canvas ได้รับความสนใจ (Focus) เช่น Canvas(root, bd = 5, relief = GROOVE, height = 250, width = 300, highlightcolor = "green")xscrollcommandกำหนดให้ Canvas สามารถใช้งาน Scrollbar ในแนวนอนได้ เช่น Canvas(frame, xscrollcommand = xscrollbar.set, yscrollcommand = yscrollbar.set)yscrollincrementเหมือนกับ xscrollincrement แต่เปลี่ยนเป็นแนวตั้งแทน เช่น Canvas(frame, xscrollcommand = xscrollbar.set, yscrollcommand = yscrollbar.set, xscrollincrement = 10, yscrollincrement = 10)yscrollcommandกำหนดให้ Canvas สามารถใช้งาน Scrollbar ในแนวตั้งได้ เช่น Canvas(frame, xscrollcommand = xscrollbar.set, yscrollcommand = yscrollbar.set)reliefกำหนดลักษณะขอบของ Canvas ในแบบ 3D เช่น Canvas(root, bd = 5, relief = GROOVE, height = 250, width = 300)widthกำหนดความกว้างของ Canvas เช่น Canvas(root, bd = 3, relief = GROOVE, height = 250, width = 300) Canvas สามารถวาดรูปต่างๆ ลงบน Canvas ได้ ดังนั้นเมธอดต่อไปนี้ จึงใช้งานร่วมกับ Canvas ได้เป็นอย่างดี ตัวอย่างการสร้างและใช้งาน Canvas ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งาน Canvas โดยบรรทัดที่ 4 โปรแกรมสร้าง Canvas ที่มีสีพื้นหลังเป็นสีน้ำเงิน (bg = "blue") มีความกว้างเท่ากับ 300 และสูงเท่ากับ 250 บรรทัดที่ 5 กำหนดตำแหน่งของ coord ซึ่งเป็นตัวแปรชนิด Tuple เท่ากับ 10, 50, 240, 210 ตามลำดับ บรรทัดที่ 6 โปรแกรมทำการวาดวงกลมเสี้ยวสีแดงลงบน Canvas ดังรูปด้านบน Checkbutton คือ Widget ที่มีลักษณะเป็นรูปสี่เหลี่ยมเล็กๆ เพื่อให้ผู้ใช้สามารถเลือกได้โดยการคลิกบน Checkbutton ดังกล่าว ผู้ใช้สามารถเลือกได้มากกว่า 1 ตัวเลือก Checkbutton(root, text = "Music", activebackground = "gray")activeforegroundกำหนดสีข้อความบน Checkbutton เมื่อผู้ใช้คลิกบนปุ่ม เช่น Checkbutton(root, text = "Music", activebackground = "gray", activeforeground = "white")bdกำหนดขนาดความกว้างขอบ Checkbutton มีหน่วยเป็นพิกเซล ค่าเริ่มต้นเท่ากับ 2 พิกเซล เช่น Checkbutton(root, text = "Music", bg = "yellow", bd = 5, relief = GROOVE)bgกำหนดสีพื้นหลังของ Checkbutton เช่น Checkbutton(root, text = "Music", bg = "yellow")bitmapแสดงภาพแบบ monochrome บน Checkbuttoncommandฟังชันหรือเมธอดที่จะถูกเรียกใช้เมื่อ Checkbutton ถูกกดหรือคลิก เช่น Checkbutton(root, text = "Music", command = myFunc)fgกำหนดสีของฟอนต์ เช่น Checkbutton(root, text = "Music", fg = "red")cursorกำหนดรูปแบบของเคอร์เซอร์ เคอร์เซอร์จะเปลี่ยนรูปเมื่อเคลื่อนเมาส์ทับบน Checkbutton เช่น Checkbutton(root, text = "Music", fg = "red", cursor = "hand1")fontกำหนดรูปแบบของฟอนต์ของ Checkbutton เช่น Checkbutton(root, text = "Music", fg = "red", font = "Times 10 bold")heightกำหนดความสูงของ Checkbutton เช่น Checkbutton(root, text = "Music", height = 5, width = 10, bg = "pink")widthกำหนดความกว้างของ Checkbutton เช่น Checkbutton(root, text = "Music", height = 5, width = 10, bg = "pink")highlightcolorกำหนดแถบสีเมื่อ Checkbutton ได้รับความสนใจ เช่น Checkbutton(root, text = "Music", height = 5, width = 10, highlightcolor = "green")imageกำหนดรูปภาพให้กับปุ่มแทนการใช้ข้อความ เช่น image = PhotoImage(file = 'printer.png') Checkbutton(root, text = "Music", height = 5, width = 10, image = image)justifyกำหนดตำแหน่งการแสดงผลข้อความบนปุ่ม โดย LEFT = วางข้อความชิดด้านซ้ายของปุ่ม, RIGHT = ชิดด้านขวา, CENTER = วางตรงกลางปุ่ม เช่น Checkbutton(root, text = "Music\nVideo", justify = LEFT)padxเติมข้อความว่าง (Padding) ด้านซ้ายและขวาของข้อความใน Checkbutton เช่น Checkbutton(root, text = "Music", padx = 5)padyเติมข้อความว่าง (Padding) ด้านบนและล่างของข้อความใน Checkbutton เช่น Checkbutton(root, text = "Music", pady = 5)reliefกำหนดลักษณะขอบของ Checkbutton ในแบบ 3D เช่น Checkbutton(root, text = "Music", relief = GROOVE)stateกำหนดให้ Checkbutton ทำงานหรือไม่ทำงาน ถ้ากำหนดเป็น DISABLED Checkbutton จะไม่ทำงาน เช่น Checkbutton(root, text = "Music", state = DISABLED)underlineตัวอักษรของ Checkbutton จะถูกขีดเส้นใต้ (0 คืออักษรตัวแรก, -1 = ไม่ขีดเส้นใต้) เช่น Checkbutton(root, text = "Music", underline = 1)wraplengthข้อความบนปุ่มจะถูกจำกัดพื้นที่ โดยจะแสดงผลอยู่ในขอบเขตที่กำหนดใน wraplength เท่านั้น เช่น Checkbutton(root, text = "Music", wraplength = 20)onvalueกำหนดค่าเริ่มต้นให้กับ Checkbutton เมื่อ Checkbutton ถูกคลิกเลือกโปรแกรมจะดึงค่าใน onvalue ไปใช้งาน เช่น Checkbutton(root, text = "Music", onvalue = 1) หน้าที่ของ onvalue คือ จัดเตรียมค่าข้อมูลเพื่อให้เมธอดอื่นๆ นำไปใช้งานนั่นเอง (onvalue ในรูปแบบสตริงคือ "on" )offvalueกำหนดค่าเริ่มต้นให้กับ Checkbutton เมื่อ Checkbutton ถูกคลิกยกเลิกโปรแกรมจะดึงค่าใน offvalue ไปใช้งาน เช่น Checkbutton(root, text = "Music", offvalue = 0) หน้าที่ของ offvalue คือ จัดเตรียมค่าข้อมูลเพื่อให้เมธอดอื่นๆ นำไปใช้งานเช่นเดียวกับ onvalue (offvalue ในรูปแบบสตริงคือ "off" )selectcolorกำหนดสีของช่องว่างใน Checkbutton เช่น Checkbutton(root, text = "Music", selectcolor = "red")selectimageกำหนดรูปภาพของช่องว่างใน checkbutton เช่น image = PhotoImage(file = 'printer.png') Checkbutton(root, text = "Music", selectimage = image)textกำหนดข้อความให้กับ Checkbutton ถ้าต้องการกำหนดข้อความมากกว่า 1 บรรทัดให้ใช้ \n เช่น "Music \n Audio \n Guitar"variableใช้สำหรับดึงข้อมูลจาก Widgets หรือดึงข้อมูลจาก onvalue และ offvalue นั่นเอง โดยจะทำงานร่วมกับเมธอด IntVar() เมื่อข้อมูลใน onvalue/offvalue เป็นตัวเลข และทำงานร่วมกับเมธอด StringVar() เมื่อข้อมูลใน onvalue/offvalue เป็นสตริง เช่น Checkbutton(root, text = "Music", variable = IntVar(), onvalue = 1, offvalue = 0) 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 ที่มีลักษณะเป็นกล่องข้อความ เพื่อใช้รับข้อมูลจากผู้ใช้เข้ามาประมวลผลในโปรแกรม เช่น การป้อนชื่อ-สกุล รหัสผ่าน เป็นต้น Entry(root, bd = 5, exportselection = 0)selectbackgroundกำหนดสีพื้นหลังของข้อความเมื่อข้อความดังกล่าวถูกเลือก (highlight) เช่น Entry(root, bd = 5, selectbackground = "red")selectborderwidthกำหนดขนาดความกว้างของขอบรอบๆ ข้อความที่ถูกเลือก (ค่าดีฟอลต์คือ 1 พิกเซล) เช่น Entry(root, bd = 3, width = 10, selectborderwidth = 10)selectforegroundกำหนดสีของข้อความใน Entry เมื่อข้อความดังกล่าวถูกเลือก เช่น Entry(root, bd = 3, width = 10, selectforeground = "red")showข้อความที่ป้อนเข้าไปใน Entry จะมีลักษณะเป็น Clear text (ไม่มีการเข้ารหัส) แต่บางครั้ง ผู้ใช้งานจำเป็นต้องซ่อนข้อความดังกล่าว เช่น รหัสผ่าน เป็นต้น สามารถกำหนดโดย show="*" เช่น Entry(root, bd = 3,width = 10, show = "*")textvariableกำหนดตัวแปรสำหรับใช้เก็บค่าที่เกิดขึ้นจากการป้อนข้อมูลลงใน Entry โดยทำงานร่วมกับคลาส StringVar() เช่น entryVar = StringVar() Entry(root, bd = 3, width = 10, show = "*", textvariable = entryVar)widthกำหนดขนาดความกว้างของ Entry ที่แสดงผล เช่น Entry(root, bd = 3, width = 5)xscrollcommandเมื่อคาดว่าผู้ใช้งานจะป้อนข้อมูลเกินความกว้าง (Width) ของ Entry ที่กำหนดไว้ สามารถใช้ xscrollcommand (แท็บสไลด์ในแนวนอน) ทำงานร่วมกับ Entry ได้ เช่น scrollbar = Scrollbar(root, orient = HORIZONTAL) Entry(root, bd = 3, width = 5, show = "*", xscrollcommand = scrollbar.set) 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) เป็นต้น Label(root, anchor = NW, text = "User Name:")textกำหนดข้อความให้แสดงบน Label เช่น Label(root, text = 'User Name:', font = ("Helvetica", 9), fg = "red")bitmapกำหนดรูปภาพบิตแม็พที่ต้องการแสดงบน Label เช่น Label(root, bitmap = "error", fg = "red")textvariableกำหนดตัวแปรสำหรับใช้เก็บข้อความของ Label โดยทำงานร่วมกับคลาส StringVar() เช่น labelVar = StringVar() Label(root, textvariable = labelVar, text = 'User Name:') คลาส 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 ตัวเลือก โดยผู้ใช้งานสามารถเลือกสมาชิกจากรายการดังกล่าวได้เพียงตัวเดียวเท่านั้น เช่น ประเทศ คำนำหน้าชื่อ เป็นต้น - BROWSE เลือกสมาชิกได้เพียงตัวเดียว เมื่อลากเมาส์ (drag) แท็บสี (highlight) จะวิ่งไปพร้อมๆ กับเมาส์ - SINGLE เลือกสมาชิกได้เพียงตัวเดียว และไม่สามารถลากเมาส์ได้ - MULTIPLE เลือกสมาชิกได้มากกว่า 1 ตัว โดยการคลิกเลือกสมาชิกแต่ละตัว ไม่สามารถลากเมาส์เพื่อเลือกสมาชิกหลายๆ ตัว พร้อมกันได้ - EXTENDED เลือกสมาชิกได้มากกว่า 1 ตัว โดยการลากเมาส์เพื่อเลือกสมาชิกหลายๆ ตัว พร้อมกันได้ เช่น Listbox(root, selectmode = EXTENDED)xscrollcommandสร้างแท็บสไลด์แนวนอน (HORIZONTAL) ให้กับ Listbox เช่น xscrollbar = Scrollbar(root, orient = VERTICAL) xscrollbar.pack(side = BOTTOM, fill = X) Listbox(root, selectmode = EXTENDED, xscrollcommand = xscrollbar.set)yscrollcommandสร้างแท็บสไลด์แนวตั้งให้กับ Listbox (VERTICAL) เช่น yscrollbar = Scrollbar(root, orient = VERTICAL) yscrollbar.pack(side = RIGHT, fill = Y) Listbox(root, selectmode = EXTENDED, yscrollcommand = yscrollbar.set) - เมธอด 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(root, text = "Colors", relief = RAISED, direction = RIGHT)disabledforegroundสีของตัวอักษรใน Menubutton จะไม่ถูกใช้งาน เช่น Menubutton(root, text = "Colors", disabledforeground = "black")menuกำหนดเมนูย่อยที่สัมพันธ์กับ Menubutton เช่น mb = Menubutton(root, text = "Colors", relief = RAISED) mb.menu.add_checkbutton(label = "Red") mb.menu.add_checkbutton(label = "Green") ตัวอย่างการสร้างและใช้งาน 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, ... ) Menu(root, activeborderwidth = 5)postcommandกำหนดให้เมนูเรียกใช้เมธอดหรือฟังชัน เมื่อมีผู้ใช้คลิกเลือกเมนูดังกล่าว เช่น Menu(root, postcommand = donothing)selectcolorกำหนดสีของปุ่ม checkbutton หรือ radiobutton เมื่อปุ่มเหล่านี้ถูกเลือก เช่น Menu(root, selectcolor = "red")tearoffโดยปกติเมื่อเพิ่มรายการของเมนูย่อยเข้าไปในเมนูหลักจะเพิ่มในตำแหน่งที่ 1 แต่เมื่อกำหนดให้ tearoff = 0 จะสามารถเพิ่มเมนูย่อยในตำแหน่งที่ 0 ได้ และเมนูย่อยนั่น ๆ จะสามารถแสดงผลเป็นอิสระจากเมนูหลักได้ เช่น Menu(menubar, tearoff = 1)titleกำหนดข้อความ title ให้กับ Menu Widget Widget ชนิด Menu มีเมธอดที่ช่วยสนับสนุนการทางาน คือ ตัวอย่างการสร้างและใช้งาน Menu ผลลัพธ์ที่ได้เมื่อสั่งรันโปรแกรม จากตัวอย่างโปรแกรม แสดงการสร้างและใช้งานเมนู บรรทัดที่ 3 สร้างฟังชันชื่อว่า donothing() ทำ หน้าที่สร้างหน้าต่างวินโดวส์ใหม่ที่เป็นอิสระจากวินโดวส์หลัก โดยฟังชันดังกล่าวสร้างปุ่มและพิมพ์ข้อความบนปุ่มว่า "Do nothing button" บรรทัดที่ 8 สร้างวินโดวส์หลักพร้อมกับเมนูหลักชื่อว่า menubar เพื่อใช้สำหรับรองรับเมนูย่อยที่จะสร้างขึ้นในคำสั่งลำดับถัดไป Radiobutton คือ Widget ที่มีลักษณะเป็นปุ่มกลมมีช่องว่างอยู่ภายใน เมื่อถูกเลือกจะเปลี่ยนสถานะเป็นสีที่ทึบขึ้น Radiobutton ส่วนใหญ่จะถูกสร้างเป็นกลุ่มของตัวเลือก เพื่อให้ผู้ใช้งานสามารถเลือกรายการใดรายการหนึ่งเพียงรายการเดียวเท่านั้น เช่น เลือกคำนำหน้าชื่อ ชาย, นางสาว, นาง เป็นต้น var = IntVar(), str = StringVar() Radiobutton(root, text = "Mr.", variable = var, value = 1) Radiobutton(root, text = "Mr.", variable = str, value = "Mr")variableกำหนดตัวแปรที่ใช้สาหรับเก็บข้อมูลที่เกิดขึ้นจากการทำงานของ Radiobutton (ใช้ได้ทั้งสตริงและจำนวนเต็ม) สำหรับตัวอย่างเหมือนกับ value 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, ... ) Scale(root, digits = 4, orient = HORIZONTAL)from_เป็นเลขจำนวนเต็มหรือจำนวนจริงที่ใช้กำหนดขอบเขตเริ่มต้นของสเกล เช่น Scale(root, from_ = 0, to = 200, orient = HORIZONTAL)labelแสดงข้อความกำกับสเกล ข้อความจะปรากฏที่มุมด้านซ้ายบนเมื่อสเกลเป็นชนิดแนวนอน, ข้อความจะปรากฏมุมด้านขวาบนเมื่อสเกลเป็นชนิดแนวตั้ง ค่าดีฟอลต์จะไม่แสดงข้อความ เช่น Scale(root, label = "Scale", orient = HORIZONTAL)orientกำหนด orient = HORIZONTAL เมื่อต้องการให้สเกลวางอยู่ในแนวนอน (แนวแกน x) และ orient = VERTICAL เมื่อต้องการสร้างสเกลในแนวตั้ง (แกน y) ค่าดีฟอลต์เป็นสเกลในแนวนอน (HORIZONTAL) เช่น Scale(root, orient = HORIZONTAL)repeatdelayใช้กำหนดเวลาเพื่อหน่วงการเคลื่อนที่ของปุ่มในสเกล (เคลื่อนที่ขึ้น-ลง) ในกรณีที่ผู้ใช้คลิกในช่องของสเกลค้างไว้ (ดีฟอลต์ = 300) เช่น Scale(root, repeatdelay = 5, orient = HORIZONTAL)resolutionกำหนดช่วงของสเกลเมื่อเพิ่มขึ้นหรือลดลง เช่น เมื่อกำหนดช่วงของสเกลเท่ากับ from_ = -1.0 ถึง to = 1.0 และกำหนด resolution = 0.5 สเกลจะเพิ่มขึ้นและลดลงดังนี้คือ -1.0, -0.5, 0.0, +0.5, และ +1.0 เช่น Scale(root, from_ = -1.0, to = 1.0, resolution = 0.5, orient = HORIZONTAL)showvalueโดยปกติค่าของสเกลจะแสดงผลร่วมกับแท็บสเกลเสมอ เมื่อไม่ต้องการแสดงค่าของสเกลให้กำหนด showvalue = 0 เช่น Scale(root, from_ = -1.0, to = 1.0, resolution = 0.5, showvalue = 0, orient = HORIZONTAL)sliderlengthกำหนดขนาดของแท็บสไลด์ของสเกล (โดยปกติแท็บจะมีขนาดเท่ากับ 30 พิกเซล) เช่น Scale(root, sliderlength = 10, orient = HORIZONTAL)takefocusโดยปกติสเกลจะโฟกัสเป็นแบบวงรอบ เมื่อไม่ต้องการพฤติกรรมดังกล่าวให้กำหนด takefocus = 0 เช่น Scale(root, from_ =1, to = 10, resolution = 1, takefocus = 0)tickintervalกำหนดการแสดงตัวเลขช่วงของสเกล เมื่อเป็นสเกลแนวนอนจะแสดงช่วงสเกลด้านล่าง แต่ถ้าเป็นสเกลแนวตั้งจะแสดงด้านซ้าย เช่น Scale(root, from_ = 1, to = 10, tickinterval = 1, orient = HORIZONTAL)toเป็นเลขจำนวนเต็มหรือจำนวนจริงที่ใช้กำหนดขอบเขตสิ้นสุดของสเกล เช่น Scale(root, from_ = 0, to = 200, orient = HORIZONTAL)troughcolorกำหนดสีของร่องหรือรางของสเกล เช่น Scale(root, from_ = 1, to = 10, troughcolor = "red", orient = HORIZONTAL) 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, ... ) Scrollbar(root, jump = 0, command = jumpCall)repeatintervalกำหนดระยะเวลาเมื่อผู้ใช้กดค้างที่รางของ Scrollbar ก่อนที่แท็บของ Scrollbar จะเคลื่อนที่ไปยังทิศทางที่ผู้ใช้ต้องการ ค่าดีฟอลต์เท่ากับ 300 มิลลิวินาที เช่น Scrollbar(root, repeatdelay = 100) 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 มีความสามารถหลายอย่าง เช่น เปลี่ยนสีพื้นข้อความ สีตัวอักษร รูปแบบฟอนต์ ขนาด และอื่นๆ Text(root, exportselection = 0)highlightthicknessกำหนดขนาดของ Highlight Focus ของ Text ค่าดีฟอลต์เท่ากับ 1 แต่ถ้าไม่ต้องการให้ออฟชันดังกล่าวทำงานให้กำหนดเป็น 0 เช่น Text(root, highlightthickness = 0)insertbackgroundกำหนดสีของของเคอร์เซอร์ ณ ตำแหน่งปัจจุบัน เช่น Text(root, insertbackground = "red")insertborderwidthขนาดของกรอบแบบ 3D รอบๆ เคอร์เซอร์ ค่าดีฟอลต์คือ 0insertofftimeกำหนดเวลาให้เคอร์เซอร์หยุดทำงาน มีหน่วยเป็นมิลลิวินาที ค่าดีฟอลต์เท่ากับ 300 มิลลิวินาที ถ้าไม่ต้องการให้เคอร์เซอร์กระพริบ กำหนดให้ insertofftime = 0 เช่น Text(root, insertbackground = "red", insertofftime = 100)insertontimeกำหนดเวลาให้เคอร์เซอร์ทำงาน (กระพริบ) มีหน่วยเป็นมิลลิวินาที ค่าดีฟอลต์เท่ากับ 600 มิลลิวินาที ถ้าไม่ต้องการให้เคอร์เซอร์ปรากฏ กำหนดให้ insertofftime = 0 เช่น Text(root, insertbackground = "red", insertofftime = 0)insertwidthกำหนดขนาดของเคอร์เซอร์ ค่าดีฟอลต์เท่ากับ 2 พิกเซล เช่น Text(root, insertbackground = "red", insertwidth = 10)selectbackgroundกำหนดสีพื้นหลังเมื่อผู้ใช้เลือกข้อความ เช่น Text(root, insertbackground = "red", selectbackground = "black")selectborderwidthกำหนดความกว้างของกรอบรอบๆ Textspacing1กำหนดขนาดความกว้างด้านบนของข้อความในแต่ละบรรทัด ค่าดีฟอลต์เท่ากับ 0 เช่น Text(root, spacing1 = 10)spacing2กำหนดระยะห่างระหว่างบรรทัดของข้อความใน Text ค่าดีฟอลต์เท่ากับ 0 เช่น Text(root, spacing2 = 10)spacing3กำหนดขนาดความกว้างด้านล่างของข้อความในแต่ละบรรทัด ค่าดีฟอลต์เท่ากับ 0 เช่น Text(root, spacing3 = 10)tabsกำหนดขนาดของแท็บในข้อความ หน่วยเป็นพิกเซล เช่น Text(root, tabs=100) (ให้ผู้ใช้คลิกที่ข้อความแล้วทดสอบกดที่ปุ่ม TAB)wrapกำหนดขนาดของข้อความที่จะถูกครอบ (Focus) ถ้ากำหนด wrap = WORD โปรแกรมครอบทีละคำ (แยกด้วยข้อความว่าง) แต่ถ้ากำหนดเป็น wrap = CHAR จะเป็นการครอบทีละตัวอักษรแทน เช่น Text(root, wrap = WORD)xscrollcommandกำหนด Scrollbar ให้กับ Text ในแนวนอน ใช้ในกรณีที่ข้อความมีขนาดความยาวมากๆ เช่น Text(root, xscrollcommand = xscrollbar.set, yscrollcommand = yscrollbar.set)yscrollcommandกำหนด Scrollbar ให้กับ Text ในแนวตั้ง เช่น Text(root, xscrollcommand = xscrollbar.set, yscrollcommand = yscrollbar.set) 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(root, text = "Group", labelanchor="n", padx = 5, pady = 5) ตัวอย่างการสร้างและใช้งาน 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 ต่างๆ ที่อธิบายมาแล้วในตอนต้น ประกอบเข้าเป็นแอพพลิเคชันที่มีความซับซ้อนมากขึ้น เพื่อเป็นแนวทางในการพัฒนาโปรแกรมต่อไปในอนาคตได้ ซึ่งจะยกตัวอย่างโปรแกรมเครื่องคิดเลข ดังนี้คือ |