root = Tk() #Create root window content = ttk.Frame(root) #Create content frame button = ttk.Button(content) #Create button in fram Widget แต่ละประเภทมหี น้าทก่ี ารทางานทต่ี ่างกนั ดงั นนั้ เมอ่ื สรา้ ง Widget ขน้ึ มาแลว้ จาเป็นท่ี ตอ้ งการทาการปรบั แต่งคณุ สมบตั ขิ อง Widgets (Configuration option) แต่ละตวั ใหเ้ หมาะสมกบั งานท่ี จะทา ตวั อยา่ งเช่น Label และ Button สามารถกาหนดขอ้ ความทแ่ี สดงผลดว้ ยออฟชนั text = \"Text name\" ในขณะท่ี scrollbar ไมจ่ าเป็นตอ้ งใชอ้ อฟชนั ดงั กล่าว และถา้ มกี ารกดป่มุ Button จะตอ้ งเรยี กใช้ ฟังชนั หรอื เมธอดทเ่ี หมาะกบั งานดงั กล่าวโดยใชค้ าสงั่ command แต่สาหรบั Label ไมจ่ ะเป็นตอ้ งใช้ คาสงั่ command ในการทางาน เป็นตน้ Note: ในไพธอนเวอรช์ นั ต่ากวา่ 3.0 ไพธอนจะใชโ้ มดลู ชอ่ื Tkinter สาหรบั สรา้ ง GUI แต่ไพ ธอนเวอรช์ นั 3 ขน้ึ ไปจะเปลย่ี นช่อื เป็น tkinter และเพมิ่ คลาสช่อื tkk เขา้ มาเสรมิ ในการสรา้ ง GUI ดงั นนั้ ผใู้ ชส้ ามารถเลอื กใชค้ ลาส Tk แบบเดมิ หรอื แบบใหมก่ ไ็ ด้ โดยถา้ ผใู้ ชเ้ รยี กใชค้ ลาส ทข่ี น้ึ ตน้ ดว้ ย tkk แสดงวา่ กาลงั เรยี กใชค้ ลาสใหมน่ นั่ เอง Configuration option จะถูกกาหนดในขณะทท่ี าการสรา้ ง Widget โดยการสง่ เป็นพารามเิ ตอรท์ ่ี เหมาะสมใหก้ บั แต่ละ Widget ทจ่ี ะถกู สรา้ งขน้ึ ตวั อยา่ งเช่น เมอ่ื ตอ้ งการสรา้ งป่มุ Button โดยป่มุ ดงั กลา่ วประกอบดว้ ยชอ่ื ของป่มุ และเหตุการณ์ทเ่ี กดิ ขน้ึ หลงั จากมกี ารกดป่มุ ดงั กลา่ ว ดงั น้ี นาเขา้ โมดลู tkinter และ ttk >>> from tkinter import * >>> from tkinter import ttk >>> root = Tk() #Create root window สรา้ งป่มุ Button โดยส่งพารามเิ ตอรใ์ ห้ 2 ค่าคอื ขอ้ ความทแ่ี สดงบนป่มุ (text=\"Hello\") และ วธิ กี ารตอบสนองเมอ่ื ป่มุ ดงั กล่าวถูกกด (command=\"buttonpressed\") พรอ้ มกบั กาหนดค่ากรดิ >>> button = ttk.Button(root, text=\"Hello\", command=\"buttonpressed\") >>> button.grid() แสดงขอ้ ความบนป่มุ ชอ่ื button ทก่ี าลงั ทางาน >>> button['text'] 'Hello' ทดสอบเปลย่ี นขอ้ ความทแ่ี สดงบนปุ่มจาก \"Hello\" เป็น \"Goodbye\" >>> button['text'] 'Hello' >>> button['text'] = 'Goodbye' ห น้ า 480
'Goodbye' >>> button['text'] 'Goodbye' หรอื ใชเ้ มธอด configure() เปลย่ี นขอ้ ความแทนกไ็ ด้ >>> button.configure(text='Goodbye') แสดงประวตั ขิ อ้ มลู ทถ่ี กู ปรบั ปรงุ แกไ้ ขใหก้ บั ออฟชนั 'text' ของป่มุ button >>> button.configure('text') ('text', 'text', 'Text', '', 'goodbye') ขอดรู ายละเอยี ดทงั้ หมดของ Widget ทช่ี ่อื ว่า Button >>> button.configure() {'textvariable': ('textvariable', 'textVariable', 'Variable', '', ''), 'text': ('text', 'text', 'Text', '', 'goodbye'), 'command': ('command', 'command', 'Command', '', 'buttonpressed'), 'default': ('default', 'default', 'Default', <index object: 'normal'>, <index object: 'normal'>), 'style': ('style', 'style', 'Style', '', ''), 'class': ('class', '', '', '', ''), 'state': ('state', 'state', 'State', <index object: 'normal'>, <index object: 'normal'>), 'compound': ('compound', 'compound', 'Compound', <index object: 'none'>, <index object: 'none'>), 'padding': ('padding', 'padding', 'Pad', '', ''), 'takefocus': ('takefocus', 'takeFocus', 'TakeFocus', 'ttk::takefocus', 'ttk::takefocus'), 'image': ('image', 'image', 'Image', '', ''), 'cursor': ('cursor', 'cursor', 'Cursor', '', ''), 'underline': ('underline', 'underline', 'Underline', -1, -1), 'width': ('width', 'width', 'Width', '', '')} 3. การจดั การรปู ทรงเลขาคณิตให้กบั Widgets (Geometry management) จากทก่ี ล่าวมาแลว้ ขา้ งตน้ ว่าการวาง Widgets ลงบนเฟรมนนั้ จะตอ้ งกาหนดตาแหน่งในการวาง โดยอาศยั ศาสตรท์ างดา้ นเลขาคณติ เขา้ ช่วย เพ่อื ให้ Widgets ทจ่ี ะวางอยใู่ นตาแหน่งทเ่ี หมาะสม ซง่ึ ไพ ธอนมี 3 เมธอดในการจดั การเกย่ี วกบั เลขาคณติ ของ Widgets ประกอบไปดว้ ยเมธอด pack(), grid() และ place() ซง่ึ จะกลา่ วในหวั ขอ้ การจดั วาง Widgets ดว้ ยเลขาคณติ สาหรบั ปัญการวาง Widgets ทเ่ี กดิ ขน้ึ เสมอคอื การปรบั ขนาดของเฟรมหรอื Widgets จะสง่ ผล กระทบซง่ึ กนั และกนั เช่น ถา้ ผใู้ ชง้ านยอ่ หรอื ขยายขนาดของหน้าต่างหลกั จะส่งผลใหก้ ระทบกบั อ๊อป เจก็ ตต์ ่างๆ ทอ่ี ยภู่ ายในหน้าต่างหลกั นนั้ ๆ ทนั ที ซง่ึ อาจจะทาใหป้ ่มุ ตวั อกั ษร เลเบล เกดิ ความผดิ เพย้ี น ไปจากเดมิ ปัญหาต่างๆ เหล่าน้จี ะถกู จดั การดว้ ย Geometry management ทอ่ี ยใู่ น Tk โดยใชเ้ ทคนคิ ท่ี ห น้ า 481
เรยี กว่า 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 ตวั อยา่ งเช่น def helloCallBack(): print(\"Hello World!\") Button(mainframe, text=\"Hello\", command=helloCallBack) ห น้ า 482
จากตวั อยา่ งโปรแกรมขา้ งบน เมอ่ื กดป่มุ ช่อื วา่ \"Hello\" โปรแกรมจะเรยี กใชฟ้ ังชนั ชอ่ื helloCallBack() เขา้ มาทางานทนั ที โดยฟังชนั ดงั กล่าวจะพมิ พข์ อ้ ความว่า =\"Hello World!\" 6. การผกู เหตกุ ารณ์ต่างๆ เข้ากบั ไพธอน Widgets มคี าสงั่ \"command\" ซง่ึ มาพรอ้ มกบั ขณะทม่ี กี ารสรา้ ง Widget อยแู่ ลว้ เพอ่ื ผกู เหตุกราณ์ต่างๆ เขา้ กบั การกระทาอยา่ งใดอยา่ งหน่งึ ในโปรแกรม แต่ผใู้ ชส้ ามารถเรยี กใชค้ าสงั่ bind เพอ่ื เป็นทางเลอื กในการดกั จบั เหตุกราณ์ต่างๆ เหมอื นกบั การใชค้ าสงั่ command ไดเ้ ช่นเดยี วกนั จาก โปรแกรมตวั อยา่ งท่ี 19.2 แสดงการจดั การกบั Widget ชนดิ Label ดว้ ยคาสงั่ bind ดงั น้ี Program Example 19.2: Event Bindings (bind) 1 from tkinter import * 2 from tkinter import ttk 3 root = Tk() 4 l = ttk.Label(root, text=\"Starting...\") 5 l.grid() 6 l.bind('<Enter>', lambda e: l.configure(text='Moved mouse inside')) 7 l.bind('<Leave>', lambda e: l.configure(text='Moved mouse outside')) 8 l.bind('<1>', lambda e: l.configure(text='Clicked left mouse button')) 9 l.bind('<Double-1>', lambda e: l.configure(text='Double clicked')) 10 l.bind('<B3-Motion>', lambda e: l.configure(text='right button drag to %d,%d' % (e.x, e.y))) 11 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมคอื เรมิ่ โปรแกรม เคล่อื นเมาสไ์ ปใน เคล่อื นเมาสอ์ อก ดบั เบลิ คลกิ เมาส์ คลกิ ขวาและลาก วนิ โดวส์ จากวนิ โดวส์ ในวนิ โดวส์ เมาส์ จากภาพดา้ นบนแสดงการทางานของโปรแกรมท่ี 19.2 โดยเรมิ่ จากบรรทดั ท่ี 3 โปรแกรมทาการ สรา้ งหน้าต่างหลกั (root) โดยเรยี กคลาส Tk() ขน้ึ มาทางาน จากนนั้ บรรทดั ท่ี 4 โปรแกรมทาการสรา้ ง Label ลงบนหน้าต่างหลกั ดงั กลา่ ว โดยมพี ารามเิ ตอร์ 2 ตวั คอื หน้าต่างหลกั ทจ่ี ะเพม่ิ Label ลงไป ในทน่ี ้ี คอื root และขอ้ ความทจ่ี ะใหป้ รากฎบน Label คอื text=\"Starting...\" บรรทดั ท่ี 5 โปรแกรมเรยี กใชเ้ มธ อดกรดิ (เมอ่ื ไมก่ าหนดคอมลมั พแ์ ละแถวจะมคี า่ เป็น 1 คอลมั น์ 1 แถว) บรรทดั ท่ี 6 ทาการผกู เหตุกราณ์เมอ่ื ผใู้ ชม้ กี ารกระทาใดๆ บน Lable ดงั กลา่ วดว้ ยคาสงั่ bind โดยคาสงั่ น้ีจะทางานกต็ ่อเมอ่ื ผใู้ ชเ้ คล่อื นเมาสเ์ ขา้ ไปในวนิ โดวส์ โดยจะพมิ พข์ อ้ ความว่า \"Move mouse inside\" บรรทดั ท่ี 7, 8, 9 และ 10 จะทางานกต็ ่อเมอ่ื ผใู้ ชเ้ คลอ่ื นเมาสอ์ อกจากวนิ โดวส์ คลกิ เมาสซ์ า้ ย ดบั เบลิ คลกิ และการคลกิ พร้อม ห น้ า 483
กบั ลากเมาส์ ตามลาดบั ผลลพั ธแ์ สดงดงั รปู ดา้ นบน บรรทดั ท่ี 11 โปรแกรมจะทาการวนลปู เพอ่ื รอรบั เหตุกราณ์ต่างๆ ของผใู้ ชง้ านไปเรอ่ื ยๆ จนกว่าจะปิดโปรแกรม Tips: <Enter> = เมาสอ์ ยใู่ นขอบเขตของวนิ โดวส์, <Leave> = นอกขอบเขตของวนิ โดวส,์ <1> = คลกิ ซา้ ย, <Double-1> = ดบั เบลิ คลกิ , <B3-Motion> = คลกิ ขวา + ลากเมาส์ Note: lambda คอื ฟังชนั ชนิดหน่งึ ทไ่ี มจ่ าเป็นตอ้ งประกาศชอ่ื ฟังชนั แต่ใชค้ าว่า lambda แทน เพอ่ื ทางานเฉพาะกจิ อยา่ งใดอยา่ งหน่ึง (สามารถอ่านเพม่ิ เตมิ ไดใ้ นบทท่ี 7) Note: สาหรบั รหสั ทใ่ี ชก้ บั เหตุการณ์ต่างๆ เมอ่ื เกดิ ขน้ึ กบั Widgets สามารถอ่านเพม่ิ เตมิ ได้ จากเวบ็ ไซตข์ อง Tk ไดท้ ่ี http://www.tcl.tk/man/tcl8.5/TkCmd/bind.htm 7. สรปุ ขนั้ ตอนการสร้าง GUI ด้วย tkinter และ tkk มขี นั้ ตอนดงั น้ี 1. นาเขา้ โมดลู Tkinter (import tkinter, ttk) 2. สรา้ งหน้าต่าง GUI หลกั (Root window) 3. เพมิ่ เครอ่ื งมอื (Widgets) หรอื อ๊อปเจก็ ต์ทต่ี อ้ งการลงในหน้าต่างหลกั เชน่ Button, Canvas หรอื Label เป็นตน้ ตามหลกั การของเลขาคณิต 4. เขยี นโปรแกรมสาหรบั ตรวจสอบเหตุการณ์ต่างๆ (Events) ทเ่ี กดิ ขน้ึ จากผใู้ ชง้ าน กระทากบั อ๊อปเจก็ ตใ์ ดๆ เช่น การคลกิ การลาก การปล่อย เป็นตน้ 5. สงั่ ใหโ้ ปรแกรมวนลปู รบั คาสงั่ จากผใู้ ชง้ านไปเรอ่ื ยๆ จนกวา่ โปรแกรมจะยตุ กิ าร ทางาน ตวั อยา่ งโปรแกรมท่ี 19.3 แสดงตวั อยา่ งลาดบั การสรา้ งหน้าต่าง GUI ดว้ ย Tk Program Example 19.3: Step of creating GUI by Tk 1 import tkinter 2 root = tkinter.Tk() 3 # Code to add widgets will go here... 4 root.mainloop() ผลลพั ธแ์ สดงดงั รปู ท่ี 19.9 ห น้ า 484
รปู ท่ี 19.9 แสดงหน้าต่างหลกั (root window) จากตวั อยา่ งโปรแกรมท่ี 19.3 บรรทดั ท่ี 1 เป็นการนาเขา้ โมดลู tkinter เพ่อื ใชส้ าหรบั สรา้ งกราฟฟิก บรรทดั ท่ี 2 เรยี กใชง้ านคลาส Tk() เพ่อื สรา้ งอ๊อกเจก็ ตข์ องหน้าต่าง GUI หลกั คา่ อ๊อปเจกตข์ องหน้าต่าง หลกั ทไ่ี ดจ้ ะถกู ไวใ้ นตวั แปรช่อื root ในบรรทดั ท่ี 3 เป็นตาแหน่งของโปรแกรมทใ่ี ชส้ าหรบั เพม่ิ Widgets ต่างๆ ทผ่ี เู้ ขยี นโปรแกรมตอ้ งการ (ในตวั อยา่ งน้ยี งั ไมม่ กี ารเพม่ิ Widgets ใดๆ) บรรทดั สุดทา้ ยเรยี กใช้ เมธอด mainloop() เพอ่ื ใชส้ าหรบั ควบคุมและดกั จบั เหตุการณ์ต่างๆ ทผ่ี ใู้ ชก้ ระทาบนหน้าต่าง GUI หลกั 3. การจดั วาง Widgets ด้วยเลขาคณิต (Geometry management) จากทก่ี ล่าวมาแลว้ ขา้ งตน้ ว่าทกุ ๆ Widgets จะตอ้ งอาศยั เลขาคณติ ช่วยในการจดั วาง (Geometry management) ซง่ึ ไพธอนไดจ้ ดั เตรยี มไว้ 3 เมธอดคอื pack(), grid() และ place() ดงั น้ี 1. เมธอด pack() ทาหน้าทจ่ี ดั วาง Widgets ใหอ้ ยใู่ นกลุ่ม (block) ก่อนวางลงใน Widget แม่ ซง่ึ มรี ปู แบบคาสงั่ ดงั น้ี widget.pack( pack_options ) pack_options มี 3 รปู แบบคอื expand, fill และ side expand: เมอ่ื กาหนดใหเ้ ป็น True หรอื YES โปรแกรมจะขยายขนาด Widget โดยการเพม่ิ ช่องว่างเขา้ ไปแทน และอยตู่ รงกลางหน้าต่างหลกั เช่น widget.pack(expand=True) fill: กาหนดใหข้ ยายขนาดของ Widget ตามขนาดจรงิ ทน่ี ้อยทส่ี ดุ หรอื สามารถกาหนดเป็น Y (vertically: ขยายทางแนวตงั้ ) หรอื กาหนดเป็น X (horizontally: ขยายทางแนวนอน) หรอื ทงั้ ค่กู ไ็ ด้ แต่ค่าดฟี อลต์ (default) เป็น NONE เชน่ fill = X, fill = Y หรอื fill = BOTH เชน่ widget.pack(fill=BOTH) side: กาหนดตาแหน่งในการวาง Widget คอื TOP (ดฟี อลต)์ ดา้ นบน, BOTTOM ดา้ นลา่ ง, LEFT ดา้ นซา้ ย และ RIGHT ดา้ นขวา เช่น side = BOTTOM เชน่ widget.pack(side=BOTTOM) ห น้ า 485
สาหรบั ตวั อยา่ งการใชง้ านเมธอด pack() ดงั น้ี Program Example 19.4: pack() method 1 from tkinter import * 2 3 root = Tk() 4 frame = Frame(root, bd=\"3\", relief=GROOVE, padx=10, pady=10) 5 frame.pack() 6 redbutton = Button(frame, text=\"Red\", fg=\"red\") 7 redbutton.pack(side = LEFT) 8 greenbutton = Button(frame, text=\"Brown\", fg=\"brown\") 9 greenbutton.pack(side = RIGHT) 10 bluebutton = Button(frame, text=\"Blue\", fg=\"blue\") 11 bluebutton.pack(side = BOTTOM) 12 13 bottomframe = Frame(root, bd=\"3\", relief=GROOVE, padx=10, pady=10) 14 bottomframe.pack(side = BOTTOM) 15 blackbutton = Button(bottomframe, text=\"Black\", fg=\"black\") 16 blackbutton.pack(side = BOTTOM) 17 18 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู จากตวั อยา่ งโปรแกรมท่ี 19.4 แสดงการใชเ้ มธอด pack() ในการจดั วาง Widgets โดยโปรแกรม สรา้ งเฟรม (บรรทดั ท่ี 4) ดว้ ยเมธอด Frame(root) อ๊อปเจก็ ตท์ ส่ี รา้ งขน้ึ จะเกบ็ ไวใ้ นตวั แปรชอ่ื frame จากนนั้ บรรทดั ท่ี 5 โปรแกรมเรยี กเมธอด pack() โดยไมม่ พี ารามเิ ตอร์ ซง่ึ ส่งผลใหเ้ ฟรมดงั กล่าวจะวาง อยใู่ นตาแหน่งบนสุดของหน้าต่างหลกั (root window) บรรทดั ท่ี 6 – 11 โปรแกรมสรา้ งป่มุ สแี ดง น้าเงนิ และน้าตาลลงบนเฟรมดงั กล่าว บรรทดั ท่ี 13 และ 14 โปรแกรมสรา้ งเฟรมชอ่ื bottomframe โดยวางอยใู่ นตาแหน่งดา้ นล่างของ หน้าต่างหลกั บรรทดั ท่ี 15 และ 16 โปรแกรมสรา้ งป่มุ สดี าและวางลงในเฟรมช่อื bottomframe ห น้ า 486
2. เมธอด grid() ทาหน้าทจ่ี ดั วาง Widgets ลงในหน้าต่างหลกั (root window) โดยอย่ใู น รปู แบบของตาราง ซง่ึ มรี ปู แบบคาสงั่ ดงั น้ี widget.grid( grid_options ) grid_options มรี ปู แบบดงั น้ีคอื column: ตาแหน่งคอลมั น์ทต่ี อ้ งการวาง Widget คา่ ดฟี อลตค์ อื 0 (คอลมั น์ซา้ ยสุด) columnspan: จานวนคอลมั น์ทต่ี อ้ งการใช้ คา่ ดฟี อลตค์ อื 1 บรรทดั ipadx, ipady: ขนาดภายในขอบของ Widget ในแนวตงั้ และแนวนอน มหี น่วยเป็นพกิ เซล padx, pady: ขนาดภายนอกขอบของ Widget ในแนวตงั้ และแนวนอน มหี น่วยเป็นพกิ เซล row: ตาแหน่งแถวทต่ี อ้ งการวาง Widget rowspan: จานวนแถวทต่ี อ้ งการใช้ ค่าดฟี อลตค์ อื 1 บรรทดั sticky: ใชเ้ มอ่ื ตอ้ งการวาง Widget ในตาแหน่งทต่ี อ้ งการ โดยค่าดฟี อลตจ์ ะอยตู่ รงกลาง แต่ สามารถกาหนดตาแหน่งดว้ ยการบอกทศิ ทาง โดยใชอ้ กั ษรต่างๆ ดงั น้ี N (ทศิ เหนือ), E (ตะวนั ออก), S (ใต)้ , W (ตะวนั ตก), NE (ทศิ ตะวนั ออกเฉียงเหนอื ), NW (ทศิ ตะวนั ตกเฉียง เหนอื ), SE (ทศิ ตะวนั ออกเฉยี งใต)้ และ SW (ทศิ ตะวนั ตกเฉียงใต)้ เป็นตน้ สาหรบั ตวั อยา่ งการใชง้ านเมธอด grid() ดงั น้ี Program Example 19.5: grid() method 1 import tkinter 2 root = tkinter.Tk( ) 3 for r in range(4): 4 for c in range(4): 5 tkinter.Label(root, text='Row[%s]/Cow[%s]'%(r,c), borderwidth=5).grid(row=r,column=c) 6 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ห น้ า 487
จากตวั อยา่ งโปรแกรมท่ี 19.5 แสดงการใชเ้ มธอด grid() ในการจดั วาง Widgets โดยบรรทดั ท่ี 5 โปรแกรมสรา้ งเลเบลทท่ี าการพมิ พต์ าแหน่งแถวและคอลมั น์ลงบนวนิ โดสวห์ ลกั โดยใชเ้ มธอดกรดิ ในการ กาหนดตาแหน่งของเลเบล ผลลพั ธท์ ไ่ี ดแ้ สดงดงั รปู ดา้ นบน 3. เมธอด place() ทาหน้าทจ่ี ดั วาง Widgets ลงในหน้าต่างหลกั (root window) โดยการ ระบตุ าแหน่ง ซง่ึ มรี ปู แบบคาสงั่ ดงั น้ี widget.place( place_options ) place_options มรี ปู แบบดงั น้คี อื anchor: กาหนดตาแหน่งการวาง Widget โดยอาศยั ทศิ เชน่ N (ทศิ เหนือ), E (ตะวนั ออก), S, W, NE, NW, SE หรอื SW เป็นตน้ bordermode: กาหนดตาแหน่งการวาง Widget โดยอาศยั ขอบดา้ นใน (INSIDE) และขอบ ดา้ นนอก (OUTSIDE) ค่าดฟี อลตค์ อื INSIDE height, width: กาหนดขนาดความกวา้ งและความยาว มหี น่วยเป็นพกิ เซล relheight, relwidth: กาหนดขนาดความกวา้ งและความยาว โดยใชเ้ ลขจานวนจรงิ ระหว่าง 0.0 – 1.0 relx, rely: ขนาดแนวตงั้ และแนวนอนของ offset โดยใชเ้ ลขจานวนจรงิ ระหวา่ ง 0.0 – 1.0 x, y: ขนาดแนวตงั้ และแนวนอนของ offset มหี น่วยเป็นพกิ เซล สาหรบั ตวั อยา่ งการใชง้ านเมธอด place() ดงั น้ี Program Example 19.6: place() method 1 from tkinter import * 2 import tkinter 3 4 root = tkinter.Tk() 5 6 def helloCallBack(): 7 tkinter.messagebox.showinfo(\"Hello Python\", \"Hello World\") 8 9 B = tkinter.Button(root, text =\"Hello\", command = helloCallBack) 10 B.pack() 11 B.place(bordermode=OUTSIDE, height=100, width=100) 12 13 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง ห น้ า 488
จากตวั อยา่ งโปรแกรมท่ี 19.6 แสดงการใชเ้ มธอด place() ในการจดั วาง Widgets โดยบรรทดั ท่ี 4 โปรแกรมสรา้ งหน้าต่างหลกั โดยอา้ งชอ่ื โมดลู และตามดว้ ยคลาส Tk (tkinter.Tk()) ซง่ึ เป็นวธิ กี ารสรา้ ง หน้าต่างหลกั อกี รปู แบบหน่ึง บรรทดั ท่ี 6 โปรแกรมสรา้ งเมธอดช่อื วา่ helloCallBack() ทาหน้าทแ่ี สดง กลอ่ งขอ้ ความ (messagebox) โดยพมิ พข์ อ้ ความว่า \"Hello World\" เมธอดดงั กลา่ วน้จี ะถกู เรยี กใชเ้ มอ่ื มี การกดป่มุ บรรทดั ท่ี 9 โปรแกรมสรา้ งป่มุ ซง่ึ มขี อ้ ความบนป่มุ คอื \"Hello\" โดยมพี ารามเิ ตอร์ 3 ตวั คอื อ๊ อปเจก็ ตข์ องหน้าต่างหลกั (root), ขอ้ ความทต่ี อ้ งการแสดงบนปุ่ม (\"Hello\") และการกระทา (action) เมอ่ื ป่มุ ถกู กด ในทน่ี ้โี ปรแกรมจะเรยี กเมธอด helloCallBack() มาทางาน บรรทดั ท่ี 11 โปรแกรมจะวางป่มุ ดงั กลา่ วนอกขอบ (border=OUTSIDE) ทเ่ี มธอด pack() ไดก้ าหนดไว้ โดยป่มุ มขี นาดความกวา้ งและ ความยาวเท่ากบั 100 พกิ เซล 4. คณุ สมบตั ิพืน้ ฐานของ Widgets 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 ห น้ า 489
Pad Y Pad X Widget Pad X Pad Y selectborderwidth: ความกวา้ งเสน้ ขอบเมอ่ื Widget ถูกเลอื ก wraplength: ความยาวสงู สุดทเ่ี กดิ จากการครอบคาหรอื ขอ้ ความ height: กาหนดความสงู ของ Widget width: ความกวา้ งของ Widget underline: ขดี เสน้ ใตต้ วั อกั ษรทต่ี อ้ งการ (0 คอื อกั ษรตวั แรกของขอ้ ความ) 2. Color (สี): การกาหนดสใี หก้ บั ตวั อกั ษรหรอื Widgets ได้ 2 รปู แบบคอื กาหนดค่าของสโี ดยใชเ้ ลขฐาน 16 ตวั อยา่ งเชน่ #ffff คอื สขี าว, #0000 คอื สดี า หรอื #00ffff คอื สฟี ้า เป็นตน้ กาหนดค่าของสโี ดยใชข้ อ้ ความ เชน่ \"red\" = สแี ดง, \"green\" = สเี ขยี ว หรอื \"white\" = สขี าว เป็นต้น ดงั รปู ดา้ นลา่ ง อา้ งองิ จาก: http://wiki.tcl.tk/37701 Color ถูกนาไปใชก้ าหนดคุณสมบตั ขิ อง Widgets ดงั ต่อไปน้ี ห น้ า 490
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, ... ) ตวั อยา่ งเช่น from tkinter import * from tkinter import font root = Tk() myFont = font.Font(family='Helvetica', size=12, weight='bold') สาหรบั option มรี ายละเอยี ดดงั น้ี o family: ชอ่ื ของฟอนต์ เชน่ 'Helvetica', 'Verdana', 'Times' ตวั อยา่ ง family = 'Helvetica' o size: ขนาดของฟอนต์ เช่น size = 15 o weight: ขนาดความหนาของฟอนต์ เช่น bold คอื ฟอนตต์ วั หนา, normal คอื ความหนาปกติ ตวั อยา่ ง weight = 'bold' o slant: ตวั อกั ษรเอยี ง เชน่ italic คอื ตวั อกั ษรเอยี ง, roman คอื ตวั อกั ษรปกติ o underline: ขดี เสน้ ใต้ เชน่ underline = 1 คอื การขดี เสน้ ตวั อกั ษร, 0 คอื ตวั อกั ษรปกติ ห น้ า 491
o overstrike: ขดี เสน้ ทบั ตวั อกั ษร เช่น overstrike=1 คอื ขดี เสน้ ทบั ตวั อกั ษร, 0 คอื ไมข่ ดี เสน้ ทบั 4. Anchors (แองเคอ): กาหนดจดุ อา้ งองิ ทใ่ี ชส้ าหรบั จดั วาง Widgets มรี ปู แบบคอื NW: ทศิ ตะวนั ตกเฉียงเหนือ, N: ทศิ เหนือ, NE: ทศิ ตะวนั ออกเฉียงเหนือ, W: ทศิ ตะวนั ตก, CENTER: จดุ กลางของแผนท,่ี E: ทศิ ตะวนั ออก, SW: ทศิ ตะวนั ตกเฉียงใต้, S: ทศิ ใต้ , SE: ทศิ ตะวนั ออกเฉยี งใต้ ตวั อยา่ งเชน่ anchor = NE, anchor = SE สาหรบั ตวั อยา่ งตาแหน่งทศิ ต่างๆ แสดงดงั รปู ท่ี 19.10 รปู ท่ี 19.10 แสดงตาแหน่งทศิ ต่างๆ ทใ่ี ชก้ บั anchor 5. Relief styles: กาหนดลกั ษณะภาพในรปู แบบ 3 มติ ิ (3-D) รอบๆ บรเิ วณ Widgets มี รปู แบบคอื FLAT: แสดงภาพในลกั ษณะแบนราบ (ไมเ่ ป็นภาพนูน) RAISED: แสดงภาพในลกั ษณะยกขน้ึ หรอื นูนขน้ึ SUNKEN: แสดงภาพในลกั ษณะจมลงไป GROOVE: แสดงภาพในลกั ษณะกรอบเป็นรอ่ งลกึ RIDGE: แสดงภาพในลกั ษณะกรอบนูนขน้ึ สาหรบั ตวั อยา่ งการใชง้ าน Relief แสดงในโปรแกรมตวั อยา่ งท่ี 19.7 ดงั น้ี Program Example 19.7: Relief styles 1 from tkinter import * 2 import tkinter 3 4 root = tkinter.Tk() 5 6 B1 = tkinter.Button(root, text =\"FLAT\", relief=FLAT) 7 B2 = tkinter.Button(root, text =\"RAISED\", relief=RAISED) 8 B3 = tkinter.Button(root, text =\"SUNKEN\", relief=SUNKEN) 9 B4 = tkinter.Button(root, text =\"GROOVE\", relief=GROOVE) 10 B5 = tkinter.Button(root, text =\"RIDGE\", relief=RIDGE) ห น้ า 492
11 12 B1.pack() 13 B2.pack() 14 B3.pack() 15 B4.pack() 16 B5.pack() 17 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง 6. Bitmaps (บิตแมป) Bitmap คอื ภาพทเ่ี กดิ จากจุดสที เ่ี รยี กว่า Pixel (พกิ เซล) ประกอบกนั เป็นรปู รา่ งบนพน้ื ทท่ี ม่ี ี ลกั ษณะเป็นเสน้ ตาราง (กรดิ ) แต่ละพกิ เซลจะมคี ่าของตาแหน่ง และคา่ สขี องตวั เอง ภาพหน่ึงภาพ จะประกอบดว้ ยพกิ เซลหลายๆ พกิ เซลผสมกนั ไฟลภ์ าพเหลา่ น้มี หี ลายรปู แบบ อาทิ เช่น BMP, TIF, JPG, PCT เป็นตน้ ไพธอนมภี าพบติ แมปใหเ้ ลอื กใชง้ านดงั รปู ท่ี 19.11 รปู ท่ี 19.11 แสดงภาพบติ แมปทใ่ี ชง้ านรว่ มกบั Widgets สาหรบั ตวั อยา่ งการใชง้ าน Bitmaps แสดงในโปรแกรมตวั อยา่ งท่ี 19.8 ดงั น้ี Program Example 19.8: Bitmaps 1 from tkinter import * 2 import tkinter 3 4 root = tkinter.Tk() 5 B1 = tkinter.Button(root, relief=RAISED, bitmap=\"error\") 6 B2 = tkinter.Button(root, relief=RAISED, bitmap=\"hourglass\") 7 B3 = tkinter.Button(root, relief=RAISED, bitmap=\"info\") ห น้ า 493
8 B4 = tkinter.Button(root, relief=RAISED, bitmap=\"question\") 9 B5 = tkinter.Button(root, relief=RAISED, bitmap=\"warning\") 10 B6 = tkinter.Button(root, relief=RAISED, bitmap=\"gray75\") 11 B7 = tkinter.Button(root, relief=RAISED, bitmap=\"questhead\") 12 B1.pack() 13 B2.pack() 14 B3.pack() 15 B4.pack() 16 B5.pack() 17 B6.pack() 18 B7.pack() 19 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง 7. Cursors (เคอรเ์ ซอร)์ : เคอรเ์ ซอรห์ รอื ตวั ชเ้ี มาส์ คอื สญั ลกั ษณ์แสดงตาแหน่งของเมาส์ บนจอภาพ ไพธอนเตรยี มสญั ลกั ษณ์สาหรบั ใชเ้ ป็นเคอรเ์ ซอรใ์ หเ้ ลอื กใชง้ านดงั รปู ท่ี 19.12 ห น้ า 494
รปู ท่ี 19.12 แสดงสญั ลกั ษณ์ต่างๆ ทใ่ี ชเ้ ป็นเคอรเ์ ซอร์ สาหรบั ตวั อยา่ งการใชง้ านเคอรเ์ ซอร์ แสดงในโปรแกรมตวั อยา่ งท่ี 19.9 ดงั น้ี Program Example 19.9: Cursors 1 from tkinter import * 2 import tkinter 3 4 root = tkinter.Tk() 5 6 B1 = tkinter.Button(root, relief=RAISED, cursor=\"hand1\") 7 B2 = tkinter.Button(root, relief=RAISED, cursor=\"heart\") 8 B1.pack() 9 B2.pack() 10 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง ใหท้ ดลองเลอ่ื เคอรเ์ ซอรไ์ ปทบั ทป่ี ่มุ ดงั กลา่ ว ห น้ า 495
5. การสร้างและใช้งาน Widgets พื้นฐาน ในหวั ขอ้ น้จี ะกลา่ วถงึ วธิ กี ารสรา้ ง Widgets พน้ื ฐานทส่ี าคญั ๆ สาหรบั ใชใ้ นการสรา้ ง GUI เช่น frames, labels, buttons, checkbuttons, radiobuttons, entries และ comboboxes เป็นตน้ ซง่ึ ผเู้ ขยี น แนะนาใหอ้ ่านไปตามลาดบั เพราะเน้อื หาทงั้ หมดจะมคี วามเกย่ี วเน่อื งกนั 1. Frame (เฟรม) เฟรมเป็น Widget ทม่ี ลี กั ษณะเป็นรปู สเ่ี หลย่ี ม โดยปกตเิ ฟรมจะถกู ใชส้ าหรบั จดั กลมุ่ หรอื บรรจุ Widgets อ่นื ๆ ทเ่ี กย่ี วขอ้ งหรอื สมั พนั ธก์ นั เขา้ ไวด้ ว้ ยกนั รปู รา่ งของเฟรมแสดงในรปู ท่ี 19.13 รปู ท่ี 19.13 แสดงรปู แบบของเฟรมบนระบบปฏบิ ตั กิ ารต่างๆ อา้ งองิ จาก http://www.tkdocs.com/ รปู แบบคำสงั่ สำหรบั กำรสรำ้ งเฟรมคอื f = Frame( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คุณสมบตั ติ ่างๆ ของเฟรม แสดงในตารางดา้ นล่าง Option คาอธิบาย bd กาหนดขนาดความกวา้ งของขอบเฟรมมหี น่วยเป็นพกิ เซล คา่ เรมิ่ ตน้ เท่ากบั 2 พกิ เซล เช่น Frame(root, bd=5, height=50, width=100, relief=GROOVE) ห น้ า 496
bg กาหนดสพี น้ื ดา้ นหลงั ของเฟรม เช่น Frame(root, bd=5, cursor height=50, width=100, relief=GROOVE, bg=\"green\") height กาหนดรปู แบบของเคอรเ์ ซอร์ เคอรเ์ ซอรจ์ ะเปลย่ี นรปู เมอ่ื width เคล่อื นเมาสท์ บั บนเฟรม เช่น Frame(root, bd=3, height=50, width=100, relief=GROOVE, cursor=\"hand1\") highlightbackground highlightcolor กาหนดความสงู ของเฟรมมหี น่วยเป็นพกิ เซล เชน่ Frame(root, highlightthickness bd=3, height=50, width=100, relief=GROOVE) relief กาหนดความกวา้ งของเฟรม ถา้ ไมก่ าหนดไพธอนจะกาหนด ขนาดเท่ากบั ความกวา้ งของฟอนต์แทน เชน่ Frame(root, bd=3, height=50, width=100) กาหนดแถบสพี น้ื หลงั เมอ่ื เฟรมไดร้ บั ความสนใจ (Focus) เชน่ Frame(root, bd=3, height=50, width=100, highlightbackground=\"green\") กาหนดแถบสเี มอ่ื เฟรมไดร้ บั ความสนใจ เชน่ Frame(root, bd=3, height=50, width=100, highlightcolor=\"green\") กาหนดความกวา้ งจากขอบของเฟรม เชน่ Frame(root, bd=3, height=50, width=100, highlightthickness =2) กาหนดลกั ษณะเฟรมในรปู แบบ 3 มติ ิ เชน่ Frame(root, bd=5, height=50, width=100, relief=GROOVE) สาหรบั ตวั อยา่ งการใชง้ านเฟรม แสดงในโปรแกรมตวั อยา่ งท่ี 19.10 ดงั น้ี Program Example 19.10: Frame and pack() 1 from tkinter import * 2 3 root = Tk() 4 frame = Frame(root, bd=3, height=300, width=500, relief=GROOVE, cursor=\"hand1\", highlightthickness=20) 5 frame.pack(expand=True) 6 redbutton = Button(frame, text=\"Red\", fg=\"red\") 7 redbutton.pack(side=LEFT) 8 greenbutton = Button(frame, text=\"Brown\", fg=\"brown\") 9 greenbutton.pack(side=LEFT) 10 bluebutton = Button(frame, text=\"Blue\", fg=\"blue\") 11 bluebutton.pack(side=LEFT) 12 13 bottomframe = Frame(root, bd=3, cursor=\"hand1\", relief=SUNKEN) 14 bottomframe.pack(side = BOTTOM) 15 blackbutton = Button(bottomframe, text=\"Black\", fg=\"black\") 16 blackbutton.pack(side = BOTTOM) 17 ห น้ า 497
18 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง จากตวั อยา่ งโปรแกรมท่ี 19.10 แสดงการสรา้ งเฟรมเพ่อื รอบรบั การวาง Widget ชนิดป่มุ ลงใน เฟรมดงั กล่าว บรรทดั ท่ี 4 เป็นการสรา้ งเฟรมชอ่ื frame ใหม้ ขี นาดสงู เทา่ กบั 300 และกวา้ งเทา่ กบั 500 โดยมคี วามหนาของขอบเฟรมเท่ากบั 3 (bd=3) กรอบของเฟรมเป็นแบบรอ่ งลกึ (relief=GROOVE) มี ขนาดความกวา้ งจากขอบเฟรมเท่ากบั 20 (highlightthickness=20) เมอ่ื เลอ่ื นเมาสเ์ ขา้ ใกลเ้ ฟรมดงั กล่าว เคอรเ์ ซอรจ์ ะเปลย่ี นเป็นรปู มอื (cursor=\"hand1\") และเฟรมทส่ี รา้ งขน้ึ จะเขยี นลงบนหน้าต่างหลกั ของ โปรแกรม (root) บรรทดั ท่ี 5 เป็นการกาหนดใหเ้ ฟรมดงั กลา่ ววางลงตรงกลางหน้าต่างหลกั ดว้ ยเมธอด frame.pack(expand=True) บรรทดั ท่ี 6 – 11 โปรแกรมทาการสรา้ งป่มุ (ซง่ึ จะกล่าวในหวั ขอ้ ถดั ไป) มี ขอ้ ความสแี ดง น้าตาล และน้าเงนิ ลงบนเฟรมดงั กล่าว ตามลาดบั สงั เกตวา่ ขนาดของเฟรมจะเท่ากบั ขนาดของป่มุ เน่อื งจากเมธอด pack() จะบบี อดั ใหเ้ ฟรมมขี นาดเท่ากบั ผลรวมความกวา้ งและความยาว ของ Widgets ทอ่ี ยใู่ นเฟรมนนั่ เอง (โปรแกรมจะไมส่ นใจความสงู และความกวา้ งทก่ี าหนดในเฟรม) บรรทดั ท1่ี 3 โปรแกรมทาการสรา้ งเฟรมอกี ครงั้ ช่อื bottomframe โดยเฟรมดงั กล่าวมลี กั ษณะ ของกรอบทจ่ี มลกึ ลงไป (relief=SUNKEN) และเฟรมดงั กลา่ วถูกจดั วางใหอ้ ยใู่ นตาแหน่งดา้ นลา่ งของ หน้าต่างหลกั ดว้ ยเมธอด bottomframe.pack(side = BOTTOM) แสดงในบรรทดั ท่ี 14 จากนนั้ โปรแกรม สรา้ งปุ่มทม่ี ขี อ้ ความสดี า ใส่ลงในเฟรม bottomfram โดยกาหนดใหว้ างในตาแหน่งดา้ นลา่ งของเฟรม (side = BOTTOM) ผลลพั ธท์ ไ่ี ดแ้ สดงในรปู ดา้ นบน ผเู้ ขยี นโปรแกรมสามารถเลอื กใชเ้ มธอด grid() แทน เมธอด pack() ในการจดั วาง Widgets กไ็ ด้ ดงั ตวั อยา่ งโปรแกรมท่ี 19.11 Program Example 19.11: Frame and Grid() 1 from tkinter import * 2 3 root = Tk() 4 frame = Frame(root, bd=3, height=300, width=500, relief=GROOVE, cursor=\"hand1\", highlightthickness=20) 5 frame.pack() 6 7 Button(frame, text=\"Red\", fg=\"red\").grid(column=2, row=3) 8 Label(frame, text=\" \", fg=\"red\").grid(column=3, row=3) 9 Button(frame, text=\"Brown\", fg=\"brown\").grid(column=4, row=3) 10 Label(frame, text=\" \", fg=\"red\").grid(column=5, row=3) 11 Button(frame, text=\"Blue\", fg=\"blue\").grid(column=6, row=3) ห น้ า 498
12 13 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง 2. Button (ป่ มุ ) Button คอื Widget ทม่ี ลี กั ษณะเป็นรปู สเ่ี หลย่ี มผนื ผา้ มหี น้าทต่ี อบสนองกบั ผใู้ ชง้ าน โดยวธิ กี ารกดลงและปล่อย การแสดงผลบนป่มุ จะเป็นไดท้ งั้ ขอ้ ความหรอื รปู ภาพกไ็ ด้ เมอ่ื กดป่มุ และปล่อย (เกดิ event) จะสง่ ผลใหเ้ กดิ การเรยี กใชง้ านฟังชนั หรอื เมธอดทฝ่ี ังอยกู่ บั ป่มุ ได้ เพ่อื ทาหน้าทอ่ี ยา่ งใดอยา่ งหน่งึ เช่น กดป่มุ Cancel จะทาใหโ้ ปรแกรมยกเลกิ คาสงั่ ทเ่ี พงิ่ กระทาเสรจ็ เป็นตน้ รปู ร่างของป่มุ แสดงในรปู ท่ี 19.14 รปู ท่ี 19.14 แสดงรปู แบบของป่มุ บนระบบปฏบิ ตั กิ ารต่างๆ รปู แบบคำสงั่ สำหรบั กำรสรำ้ งป่มุ คอื b = Button( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คณุ สมบตั ติ ่างๆ ของป่มุ แสดงในตารางดา้ นล่าง Option คาอธิบาย activebackground กาหนดสบี นพน้ื หลงั ของป่มุ เมอ่ื ผใู้ ชค้ ลกิ บนป่มุ เชน่ Button(root, text =\"Hello\", activebackground=\"yellow\") ห น้ า 499
activeforeground กาหนดสขี อ้ ความบนป่มุ เมอ่ื ผใู้ ชค้ ลกิ บนป่มุ เช่น Button(root, text bd =\"Hello\", activebackground=\"yellow\", activeforeground=\"red\") bg command กาหนดขนาดความกวา้ งขอบป่มุ มหี น่วยเป็นพกิ เซล ค่าเรมิ่ ตน้ เท่ากบั fg 2 พกิ เซล เช่น Button(root, text =\"Hello\", bd=5) font กาหนดสพี น้ื หลงั ของป่มุ เช่น Button(root, text =\"Hello\", bg=\"red\") height highlightcolor ฟังชนั หรอื เมธอดทจ่ี ะถูกเรยี กใชเ้ มอ่ื ป่มุ ถูกกดหรอื คลกิ เช่น Button(root, text image =\"Hello\", bg=\"red\", command=myFunc) justify กาหนดสขี องฟอนต์ เช่น Button(root, text =\"Hello\", bg=\"red\", fg=\"blue\") padx pady กาหนดรปู แบบฟอนตข์ องป่มุ เช่น Button(root, text =\"Hello\", relief bg=\"red\", font=\"Times 10 bold\") หรอื font=(\"Helvetica\", 16) state กาหนดความสงู ของป่มุ (กรณปี ่มุ ทถ่ี กู สรา้ งดว้ ยรปู ภาพจะมหี น่วยเป็น พกิ เซล) เชน่ Button(root, text =\"Hello\", height=5) กาหนดแถบสเี มอ่ื เฟรมไดร้ บั ความสนใจ เช่น Button(root, text =\"Hello\", highlightcolor=\"green\") กาหนดรปู ภาพใหก้ บั ป่มุ แทนการใชข้ อ้ ความ เชน่ image = PhotoImage(file='printer.png') B = Button(root, text =\"Hello\", image=image) กาหนดตาแหน่งการแสดงผลขอ้ ความบนป่มุ โดย LEFT=วาง ขอ้ ความชดิ ดา้ นซา้ ยของป่มุ , RIGHT=ชดิ ดา้ นขวา, CENTER=วาง ตรงกลางป่มุ เชน่ Button(root, text = \"Hello\\nPython\\nLanguage\", justify=LEFT) เตมิ ขอ้ ความวา่ ง (Padding) ดา้ นซา้ ยและขวาของขอ้ ความในป่มุ เชน่ Button(root, text = \"Hello\", padx=5) เตมิ ขอ้ ความวา่ ง (Padding) ดา้ นบนและล่างของขอ้ ความในป่มุ เช่น Button(root, text = \"Hello\", pady=5) กาหนดลกั ษณะขอบของป่มุ ในแบบ 3-D เช่น Button(root, text = \"Hello\", relief=GROOVE) กาหนดใหป้ ่มุ ทางานหรอื ไม่ทางาน ถา้ กาหนดเป็น DISABLED ป่มุ จะ ไมส่ ามารถกดได้ แต่ถา้ กาหนดเป็น ACTIVE จะสามารถกดป่มุ ได้ เชน่ Button(root, text = \"Hello\", state=DISABLED) ห น้ า 500
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 ชนิดป่มุ มเี มธอดทช่ี ่วยเสรมิ ในการทางานของป่มุ คอื เมธอด flash() ทาหน้าทว่ี าดป่มุ ใหม่ เชน่ B = Button(root, text = \"Hello\") B.flash() เมธอด invoke() บงั คบั ใหค้ าสงั่ ออฟชนั command ทก่ี าหนดไวใ้ นป่มุ ทางานทนั ที เชน่ B = Button(root, text = \"Hello\", command=callBack) B.invoke() เมอ่ื สงั่ รนั โปรแกรมจะสง่ ผลให้ ไพธอนเรยี กเมธอด callback() มาทางานทนั ทโี ดยไม่ตอ้ งคลกิ ท่ี ป่ มุ สาหรบั ตวั อยา่ งการสรา้ งและใชง้ านป่มุ แสดงในโปรแกรมตวั อยา่ งท่ี 19.12 ดงั น้ี Program Example 19.12: Button 1 from tkinter import * 2 import tkinter 3 4 root = tkinter.Tk() 5 6 def helloCallBack(): 7 messagebox.showinfo( \"Hello Python\", \"Hello World\") 8 9 def printCallBack(): 10 messagebox.showinfo( \"Print\", \"Hello Printer\") 11 12 image = PhotoImage(file='printer.png') 13 B1 = Button(root, text =\"Go!\", relief=GROOVE, underline=0, activebackground=\"yellow\", activeforeground=\"red\", command = helloCallBack) 14 B2 = Button(root, image=image, padx=30, pady=20, command=printCallBack) 15 B1.pack(expand=True) 16 B2.pack() 17 ห น้ า 501
18 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง ใหท้ ดลองคลกิ ทป่ี ่มุ Go! และป่มุ เครอ่ื งพมิ พ์ จากตวั อยา่ งโปรแกรมท่ี 19.12 แสดงการสรา้ งและใชง้ าน Button (ป่มุ ) โดยบรรทดั ท่ี 6 โปรแกรมสรา้ งเมธอดช่อื helloCallBack() มหี น้าทส่ี รา้ งกล่องขอ้ ความโดยพมิ พข์ อ้ ความวา่ \"Hello World\" ออกจอภาพ บรรทดั ท่ี 9 โปรแกรมสรา้ งเมธอดช่อื printCallBack() มหี น้าทส่ี รา้ งกลอ่ งขอ้ ความ โดยพมิ พข์ อ้ ความวา่ \"Hello Printer\" ออกจอภาพ บรรทดั ท่ี 12 สรา้ งอ๊อปเจก็ ต์ image ทเ่ี ช่อื มโยงไปยงั รปู ภาพชอ่ื วา่ \"printer.png\" เพอ่ื ใชส้ าหรบั แสดงบนป่มุ บรรทดั ท่ี 13 โปรแกรมสรา้ งป่มุ โดยมขี อ้ ความ บนป่มุ คอื \"Go!\" (text =\"Go!\"), ขดี เสน้ ใตท้ ต่ี วั อกั ษร \"G\" (underline=0), ขอบของป่มุ เป็นแบบรอ่ งลกึ (relief=GROOVE), เมอ่ื ป่มุ ถกู กด ป่มุ จะเป็นสเี หลอื ง (activebackground=\"yellow\"), เมอ่ื ป่มุ ถกู กด ขอ้ ความจะเป็นสแี ดง (activeforeground=\"red\") และเมอ่ื ป่มุ ดงั กล่าวถกู คลกิ โปรแกรมจะเรยี กใชเ้ มธอด helloCallBack() บรรทดั ท่ี 14 โปรแกรมสรา้ งป่มุ โดยมภี าพบนป่มุ คอื \"printer.png\" (image=image) เมอ่ื ป่มุ ดงั กล่าวถกู คลกิ โปรแกรมจะเรยี กใชเ้ มธอด printCallBack() ผลลพั ธท์ ไ่ี ดแ้ สดงดงั รปู ดา้ นบน 3. Canvas (ผนื ผา้ ใบ) Canvas คอื Widget ทม่ี ลี กั ษณะเป็นรปู สเ่ี หลย่ี ม มเี ป้าหมายเพอ่ื ใชส้ าหรบั จดั วาง รปู ภาพ เฟรม ขอ้ ความ หรอื วาดรปู ภาพ ทม่ี คี วามซบั ซอ้ นได้ รปู ร่างของ Canvas แสดงในรปู ท่ี 19.15 ห น้ า 502
รปู ท่ี 19.15 แสดง Canvas บนระบบปฏบิ ตั กิ ารต่างๆ รปู แบบคำสงั่ สำหรบั กำรสรำ้ ง Canvas คอื c = Canvas( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คณุ สมบตั ติ ่างๆ ของ Canvas แสดงในตารางดา้ นล่าง Option คาอธิบาย confine cursor กาหนดให้ Canvas สามารถเลอ่ื น Scroll ได้ (ดฟี อลตเ์ ท่ากบั True) เชน่ bd Canvas(root, bd=5, relief=GROOVE, height=250, width=300, bg confine=False) scrollregion กาหนดรปู แบบของเคอรเ์ ซอร์ เคอรเ์ ซอรจ์ ะเปลย่ี นรปู เมอ่ื เคลอ่ื นเมาสท์ บั บน xscrollincrement Canvas เชน่ Canvas(root, bd=5, relief=GROOVE, height=250, width=300, cursor=\"hand1\") height highlightcolor กาหนดขนาดความกวา้ งขอบ Canvas มหี น่วยเป็นพกิ เซล คา่ เรม่ิ ตน้ เท่ากบั 2 พกิ เซล เชน่ Canvas(root, bd=3, relief=GROOVE, height=250, width=300) กาหนดสพี น้ื หลงั ของ Canvas เช่น Canvas(root, bd=3, relief=GROOVE, bg=\"blue\", height=250, width=300) กาหนดพน้ื ทท่ี ่ี Canvas สามารถขยายไดส้ งู สดุ เทา่ ใด โดยขอบเขตพน้ื ทก่ี าหนด ในตวั แปรชนิดทพั เพลิ ซง่ึ มรี ปู แบบ tuple(w, e, n, s) โดย w คอื ขอบดา้ นซา้ ย, e คอื ขอบดา้ นขวา, n คอื ดา้ นบน และ s คอื ดา้ นล่าง เช่น Canvas(root, bd=5, relief=GROOVE, scrollregion=(0, 0, 500, 500)) กาหนดขนาดการเพมิ่ ขน้ึ ของจานวนคอลมั น์ เมอ่ื Canvas ใช้ Scrollbar ใน แนวนอน ใชใ้ นกรณที ่ี Canvas ตอ้ งการแสดงผลมากกว่าขอบเขตท่ี Canvas กาหนดไว้ เช่น Canvas(frame, xscrollcommand=xscrollbar.set, yscrollcommand=yscrollbar.set, xscrollincrement=10, yscrollincrement=10) กาหนดความสงู ของ Canvas เชน่ Canvas(root, bd=3, relief=GROOVE, height=250, width=300) กาหนดแถบสเี มอ่ื Canvas ไดร้ บั ความสนใจ (Focus) เชน่ Canvas(root, bd=5, relief=GROOVE, height=250, width=300, highlightcolor=\"green\") ห น้ า 503
xscrollcommand กาหนดให้ Canvas สามารถใชง้ าน Scrollbar ในแนวนอนได้ เชน่ yscrollincrement Canvas(frame, xscrollcommand=xscrollbar.set, yscrollcommand relief yscrollcommand=yscrollbar.set) width เหมอื นกบั xscrollincrement แต่เปลย่ี นเป็นแนวตงั้ แทน เช่น Canvas(frame, xscrollcommand=xscrollbar.set, yscrollcommand=yscrollbar.set, xscrollincrement=10, yscrollincrement=10) กาหนดให้ Canvas สามารถใชง้ าน Scrollbar ในแนวตงั้ ได้ เชน่ Canvas(frame, xscrollcommand=xscrollbar.set, yscrollcommand=yscrollbar.set) กาหนดลกั ษณะขอบของ Canvas ในแบบ 3-D เช่น Canvas(root, bd=5, relief=GROOVE, height=250, width=300) กาหนดความกวา้ งของ Canvas เช่น Canvas(root, bd=3, relief=GROOVE, height=250, width=300) จากทก่ี ล่าวมาแลว้ วา่ Canvas สามารถวาดรปู ต่างๆ ลงบน Canvas ได้ ดงั นนั้ เมธอดต่อไปน้จี งึ ใชง้ าน รว่ มกบั Canvas ไดเ้ ป็นอย่างดี การวาดเสน้ โคง้ บน Canvas ดว้ ยเมธอด create_arc() ตวั อยา่ งเชน่ coord = 10, 50, 240, 210 arc = canvas.create_arc(coord, start=0, extent=150, fill=\"blue\") การสรา้ งรปู ภาพบน Canvas ดว้ ยเมธอด create_image() ตวั อยา่ งเช่น filename = PhotoImage(file = \"sunshine.gif\") image = canvas.create_image(50, 50, anchor=NE, image=filename) การวาดเสน้ บน Canvas ดว้ ยเมธอด create_line() ตวั อยา่ งเช่น line = canvas.create_line(x0, y0, x1, y1,..., xn, yn, options) การวาดรปู วงรบี น Canvas ดว้ ยเมธอด create_oval() ตวั อยา่ งเชน่ oval = canvas.create_oval(x0, y0, x1, y1, options) การวาดรปู หลายเหลย่ี มบน Canvas ดว้ ยเมธอด create_ polygon() ตวั อยา่ งเช่น options) polygon = canvas.create_polygon(x0, y0, x1, y1,...xn, yn, ห น้ า 504
การวาดรปู สเ่ี หลย่ี มบน Canvas ดว้ ยเมธอด create_ rectangle() ตวั อยา่ งเช่น rect = canvas. create_rectangle(50, 25, 150, 75, fill=\"blue\") การวาดลบภาพวาดทงั้ หมดออกจาก Canvas ดว้ ยเมธอด create_ delete() ตวั อยา่ งเช่น rect = canvas. delect(oval) #remove oval from Canvas rect = canvas. delect(ALL) #remove ALL from Canvas การวาดรปู ต่างๆ บน Canvas สามารถอ่านขอ้ มลู เพม่ิ เตมิ ไดท้ เ่ี วบ็ ไซต์ http://www.java2s.com/Tutorial/Python/0360__Tkinker/0100__Canvas.htm สาหรบั ตวั อยา่ งการสรา้ งและใชง้ าน Canvas แสดงในโปรแกรมตวั อยา่ งท่ี 19.13 ดงั น้ี Program Example 19.13: Canvas 1 import tkinter 2 from tkinter import * 3 4 root = tkinter.Tk() 5 6 C = tkinter.Canvas(root, bg=\"blue\", height=250, width=300) 7 6 coord = 10, 50, 240, 210 9 arc = C.create_arc(coord, start=0, extent=150, fill=\"red\") 10 11 C.pack() 12 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง จากตวั อยา่ งโปรแกรมท่ี 19.13 แสดงการสรา้ งและใชง้ าน Canvas โดยบรรทดั ท่ี 6 โปรแกรมสรา้ ง Canvas ทม่ี สี พี น้ื หลงั เป็นสนี ้าเงนิ (bg=\"blue\") มคี วามกวา้ งเท่ากบั 300 และสงู เท่ากบั 250 บรรทดั ท่ี 6 กาหนดตาแหน่งของ coord ซง่ึ เป็นตวั แปรชนิดทพั เพลิ เท่ากบั 10, 50, 240, 210 ตามลาดบั บรรทดั ท่ี 9 โปรแกรมทาการวาดวงกลมเสย้ี วสแี ดงลงบน Canvas ดงั รปู ดา้ นบน ห น้ า 505
4. Checkbutton Checkbutton คอื Widget ทม่ี ลี กั ษณะเป็นรปู สเ่ี หลย่ี มเลก็ ๆ เพอ่ื ใหผ้ ใู้ ชส้ ามารถเลอื กได้ โดยการคลกิ บน Checkbutton ดงั กล่าว ผใู้ ชส้ ามารถเลอื กไดม้ ากกว่า 1 ตวั เลอื ก เชน่ การเลอื ก คาตอบทม่ี ี 4 ตวั เลอื ก ก, ข, ค และ ง เป็นตน้ รปู รา่ งของ Checkbutton แสดงในรปู ท่ี 19.16 รปู ท่ี 19.16 แสดงรปู ร่างของ Checkbutton บนระบบปฏบิ ตั กิ ารต่างๆ รปู แบบคำสงั่ สำหรบั กำรสรำ้ ง Checkbutton คอื cb = Checkbutton( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คณุ สมบตั ติ ่างๆ ของ Checkbutton แสดงในตารางดา้ นลา่ ง Option คาอธิบาย activebackground กาหนดสบี นพน้ื หลงั ของ Checkbutton เมอ่ื ผใู้ ชค้ ลกิ บนป่มุ เช่น 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 บน Checkbutton command ฟังชนั หรอื เมธอดทจ่ี ะถูกเรยี กใชเ้ มอ่ื Checkbutton ถูกกดหรอื คลกิ เชน่ Checkbutton(root, text = \"Music\", command=myFunc) ห น้ า 506
fg กาหนดสขี องฟอนต์ เชน่ Checkbutton(root, text = \"Music\", cursor fg=\"red\") font กาหนดรปู แบบของเคอรเ์ ซอร์ เคอรเ์ ซอรจ์ ะเปลย่ี นรปู เมอ่ื เคลอ่ื น height เมาสท์ บั บน Checkbutton เช่น Checkbutton(root, text = \"Music\", fg=\"red\", width cursor=\"hand1\") highlightcolor image กาหนดรปู แบบของฟอนตข์ อง Checkbutton เชน่ Checkbutton(root, text = \"Music\", fg=\"red\", font=\"Times 10 bold\") justify กาหนดความสงู ของ Checkbutton เช่น Checkbutton(root, text padx = \"Music\", height=5, width=10, bg=\"pink\") pady relief กาหนดความกวา้ งของ Checkbutton เชน่ Checkbutton(root, text = \"Music\", state height=5, width=10, bg=\"pink\") underline กาหนดแถบสเี มอ่ื Checkbutton ไดร้ บั ความสนใจ เชน่ Checkbutton(root, text wraplength = \"Music\", height=5, width=10, highlightcolor=\"green\") กาหนดรปู ภาพใหก้ บั ป่มุ แทนการใชข้ อ้ ความ เช่น image = PhotoImage(file='printer.png') Checkbutton(root, text = \"Music\", height=5, width=10, image=image) กาหนดตาแหน่งการแสดงผลขอ้ ความบนป่มุ โดย LEFT=วาง ขอ้ ความชดิ ดา้ นซา้ ยของป่มุ , RIGHT=ชดิ ดา้ นขวา, CENTER=วาง ตรงกลางป่มุ เช่น Checkbutton(root, text = \"Music\\nVideo\", justify=LEFT) เตมิ ขอ้ ความว่าง (Padding) ดา้ นซา้ ยและขวาของขอ้ ความใน Checkbutton เช่น Checkbutton(root, text = \"Music\", padx=5) เตมิ ขอ้ ความวา่ ง (Padding) ดา้ นบนและล่างของขอ้ ความใน Checkbutton เชน่ Checkbutton(root, text = \"Music\", pady=5) กาหนดลกั ษณะขอบของ Checkbutton ในแบบ 3-D เชน่ Checkbutton(root, text = \"Music\", relief=GROOVE) กาหนดให้ Checkbutton ทางานหรอื ไม่ทางาน ถา้ กาหนดเป็น DISABLED Checkbutton จะไมท่ างาน เช่น Checkbutton(root, text = \"Music\", state=DISABLED) ตวั อกั ษรของ Checkbutton จะถูกขดี เสน้ ใต้ (0 คอื อกั ษรตวั แรก, -1 = ไมข่ ดี เสน้ ใต)้ เช่น Checkbutton(root, text = \"Music\", underline=1) ขอ้ ความบนป่มุ จะถกู จากดั พน้ื ท่ี โดยจะแสดงผลอยใู่ นขอบเขตท่ี กาหนดใน wraplength เท่านนั้ เช่น Checkbutton(root, text = \"Music\", wraplength=20) ห น้ า 507
onvalue กาหนดค่าเรม่ิ ตน้ ใหก้ บั Checkbutton เมอ่ื Checkbutton ถูกคลกิ เลอื ก โปรแกรมจะดงึ ค่าใน onvalue ไปใชง้ าน เช่น Checkbutton(root, text = offvalue \"Music\", onvalue=1), หน้าทข่ี อง onvalue คอื จดั เตรยี มค่าขอ้ มลู เพ่อื ใหเ้ มธ selectcolor อดอ่นื ๆ นาไปใชง้ านนนั่ เอง (onvalue ในรปู แบบสตรงิ คอื \"on\" ) selectimage กาหนดค่าเรมิ่ ตน้ ใหก้ บั Checkbutton เมอ่ื Checkbutton ถกู คลกิ ยกเลกิ text โปรแกรมจะดงึ ค่าใน offvalue ไปใชง้ าน เชน่ Checkbutton(root, text = variable \"Music\", offvalue=0), หน้าทข่ี อง offvalue คอื จดั เตรยี มค่าขอ้ มลู เพ่อื ใหเ้ มธ อดอ่นื ๆ นาไปใชง้ านเช่นเดยี วกบั onvalue (offvalue ในรปู แบบสตรงิ คอื \"off\" ) กาหนดสขี องช่องวา่ งใน Checkbutton เชน่ Checkbutton(root, text = \"Music\", selectcolor=\"red\") กาหนดรปู ภาพของช่องวา่ งใน checkbutton เช่น image = PhotoImage(file='printer.png') Checkbutton(root, text = \"Music\", selectimage=image) กาหนดขอ้ ความใหก้ บั Checkbutton ถา้ ตอ้ งการกาหนดขอ้ ความมากกว่า 1 บรรทดั ใหใ้ ช้ \\n เชน่ \"Music \\n Audio \\n Guitar\" ใชส้ าหรบั ดงึ ขอ้ มลู จาก Widgets หรอื ดงึ ขอ้ มลู จาก onvalue และ offvalue นนั่ เอง โดยจะทางานรว่ มกบั เมธอด IntVar() เมอ่ื ขอ้ มลู ใน onvalue/offvalue เป็นตวั เลข และทางานรว่ มกบั เมธอด StringVar() เมอ่ื ขอ้ มลู ใน onvalue/offvalue เป็นสตรงิ เชน่ Checkbutton(root, text = \"Music\", variable=IntVar(), onvalue=1, offvalue=0) Widget ชนดิ Checkbutton มเี มธอดทช่ี ่วยสนบั สนุนการทางานคอื เมธอด deselect() ทาหน้าทเ่ี คลยี รค์ ่า Checkbutton ทเ่ี ลอื กไว้ (turn-off) เชน่ C = Checkbutton(root, text = \"Music\") C.deselect() เมธอด flash() ทาหน้าทว่ี าด Checkbutton ใหม่ เช่น C = Checkbutton(root, text = \"Music\") C.flash() เมธอด invoke() จะบงั คบั ใหท้ าคาสงั่ หลงั command ทนั ที เชน่ C = Checkbutton(root, text = \"Music\", command=callBack) C.invoke() เมธอด select() เซต็ (turn-on) คา่ ใหก้ บั Checkbutton เมอ่ื สถานะเดมิ ของ Checkbutton ไมถ่ ูก เลอื กจะทาใหส้ ถานะกลายเป็นถูกเลอื กแทน เชน่ C = Checkbutton(root, text = \"Music\") C.select() ห น้ า 508
เมธอด toggle() สลบั ระหว่าง turn-on และ turn-off เมอ่ื สถานะเดมิ ของ Checkbutton ถูก กาหนดเป็น on เมอ่ื เรยี กเมธอด toggle() จะทาให้ Checkbutton กลายเป็น off เชน่ C = Checkbutton(root, text = \"Music\") C.toggle() สาหรบั ตวั อยา่ งการสรา้ งและใชง้ านป่มุ แสดงในโปรแกรมตวั อยา่ งท่ี 19.14 ดงั น้ี Program Example 19.14: Checkbutton 1 from tkinter import * 2 import tkinter 3 4 root = tkinter.Tk() 5 CheckVar1 = StringVar() 6 CheckVar2 = IntVar() 7 8 def checkCallBack(): 9 C1.select() 10 C2.toggle() 11 print(CheckVar1.get()) 12 print(CheckVar2.get()) 13 14 C1 = Checkbutton(root, text = \"Music\", variable = CheckVar1, onvalue = \"on\", offvalue = \"off\", height=5, width = 20, command=checkCallBack) 15 C2 = Checkbutton(root, text = \"Video\", variable = CheckVar2, onvalue = 1, offvalue = 0, height=5, width = 20, command=checkCallBack) 16 C1.pack() 17 C2.pack() 18 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง ใหท้ ดลองคลกิ ท่ี Checkbutton และสงั เกตการ เปลย่ี นแปลง จากตวั อยา่ งโปรแกรมท่ี 19.14 แสดงการสรา้ งและใชง้ าน Checkbutton บรรทดั ท่ี 5 เป็นการสรา้ งตวั แปรช่อื CheckVar1 เพอ่ื ใชส้ าหรบั เกบ็ ค่าขอ้ มลู ชนิดสตรงิ ในทน่ี ้คี อื 'on' หรอื 'off' ทเ่ี กดิ ขน้ึ จากการคลกิ ท่ี Checkbutton (C1) โดยตวั แปรดงั กลา่ วสรา้ งขน้ึ จากคลาสชอ่ื StringVar() บรรทดั ท่ี 6 เป็นการสรา้ ง ตวั แปรชอ่ื CheckVar2 ซง่ึ เป็นชนดิ จานวนเตม็ ในทน่ี ้คี อื 0 หรอื 1 ทเ่ี กดิ จากการคลกิ Checkbutton ห น้ า 509
(C2) โดยสรา้ งมาจากคลาสช่อื IntVar() บรรทดั ท่ี 8 โปรแกรมสรา้ งฟังชนั ช่อื checkCallBack() เพอ่ื ทดสอบการทางานของ Checkbutton C1 และ C2 โดยฟังชนั ดงั กล่าวเรยี กใชง้ านเมธอด select() และ toggle() พรอ้ มกบั พมิ พค์ ่า CheckVar1 และ CheckVar2 ออกทางจะภาพเมอ่ื ผใู้ ชม้ กี ารคลกิ ท่ี Checkbutton บรรทดั ท่ี 14 สรา้ ง Widget Checkbutton ชอ่ื C1 ทม่ี ขี อ้ ความว่า 'Music' มคี วามสงู เทา่ กบั 5 ความกวา้ งเท่ากบั 20 เมอ่ื Checkbutton C1 ถูกคลกิ เลอื กจะนาค่าใน onvalue ('on') เกบ็ ไวใ้ นตวั แปร CheckVar1 ทนั ที แต่ถา้ C1 ไมถ่ ูกเลอื ก โปรแกรมจะนาค่า offvalue ('off') เกบ็ ไวใ้ นตวั แปร CheckVar1 แทน ใน Checkbutton C1 โปรแกรมฝังคาสงั่ เอาไว้ ถา้ มกี ารคลกิ ท่ี Checkbutton C1 โปรแกรมจะเรยี กใชเ้ มธอด checkCallBack() ทนั ที (command=checkCallBack) บรรทดั ท่ี 15 สรา้ ง Widget Checkbutton ชอ่ื C2 ทม่ี ขี อ้ ความว่า 'Video' มคี วามสงู เท่ากบั 5 ความกวา้ งเท่ากบั 20 เมอ่ื Checkbutton C2 ถูกคลกิ เลอื กจะนาค่าใน onvalue (1) เกบ็ ไวใ้ นตวั แปร CheckVar2 ทนั ที แต่ถา้ C2 ไมถ่ กู เลอื ก โปรแกรมจะนาคา่ offvalue (0) เกบ็ ไวใ้ นตวั แปร CheckVar2 แทน ใน Checkbutton C2 โปรแกรมฝังคาสงั่ เอาไว้ ถา้ มกี ารคลกิ ท่ี Checkbutton C2 โปรแกรมจะ เรยี กใชเ้ มธอด checkCallBack() ผลลพั ธท์ ไ่ี ดแ้ สดงดงั ในรปู ดา้ นบน 5. Entry (นาเข้าข้อมลู ) Entry คอื Widget ทม่ี ลี กั ษณะเป็นกลอ่ งขอ้ ความ เพ่อื ใชร้ บั ขอ้ มลู จากผใู้ ชเ้ ขา้ มา ประมวลผลในโปรแกรม เชน่ การป้อนช่อื -สกุล รหสั ผา่ น เป็นตน้ รปู ร่างของ Entry แสดงในรปู ท่ี 19.17 รปู ท่ี 19.17 แสดงรปู แบบของ Entry บนระบบปฏบิ ตั กิ ารต่างๆ รปู แบบคำสงั่ สำหรบั กำรสรำ้ ง Entry คอื e = Entry( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) ห น้ า 510
o option คอื คณุ สมบตั ติ ่างๆ ของ Entry Option ดงั ต่อไปน้มี คี ุณสมบตั กิ ารทางานทเ่ี หมอื นกบั Widgets ทไ่ี ดก้ ล่าวมาแลว้ ขา้ งตน้ คอื bg, bd, cursor, font, fg, highlightcolor, justify, relief และ state สาหรบั option ทแ่ี ตกต่างจาก Widgets ตวั อ่นื ๆ แสดงในตารางดา้ นลา่ ง Option คาอธิบาย exportselection โดยปกตเิ มอ่ื ผใู้ ชเ้ ลอื กขอ้ ความภายใน Entry ขอ้ มลู ทถ่ี กู เลอื กจะถูกสง่ ไปเกบ็ ไว้ ในคลปิ บอรด์ (Clipboard) โดยอตั โนมตั ิ เมอ่ื ไมต่ อ้ งการใหข้ อ้ มลู ดงั กลา่ วถกู สง่ ไปยงั คลปิ บอรด์ ใหก้ าหนด exportselection = 0 เชน่ 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) ห น้ า 511
Widget ชนิด Entry มเี มธอดทช่ี ่วยสนับสนุนการทางานคอื เมธอด delete(first, last=None) ทาหน้าทล่ี บตวั อกั ษรออกจาก Entry โดยกาหนดตาแหน่ง ตวั อกั ษรเรม่ิ ตน้ ทพ่ี ารามเิ ตอร์ first และตาแหน่งตวั อกั ษรตวั สุดทา้ ยในพารามเิ ตอร์ last ถา้ ไมไ่ ด้ กาหนดค่าใหก้ บั พารามเิ ตอร์ last ตวั อกั ษรตวั แรกจะถกู ลบเพยี วตวั เดยี วเทา่ นนั้ เช่น E = Entry(root, bd=3, width=5, show=\"*\") E.delete(0, END) เมธอด get() ทาหน้าดงึ ขอ้ มลู จาก Entry เป็นสตรงิ เชน่ E = Entry(root, bd=3, width=5, show=\"*\") E.get() เมธอด icursor(index) กาหนดตาแหน่งของเคอรเ์ ซอรใ์ นขอ้ ความของ Entry ผ่านพารามเิ ตอร์ index เช่น E = Entry(root, bd=3, width=5) E.icursor(3) เมธอด index(index) เลอ่ื นตวั ชไ้ี ปยงั ตาแหน่งทต่ี อ้ งการของขอ้ ความใน Entry เชน่ E = Entry(root, bd=3, width=5) E.index(3) เมธอด insert(index, s) เพม่ิ สตรงิ ในตาแหน่ง (index) ทก่ี าหนด เช่น E = Entry(root, bd=3, width=5) E.insert(3, \"Hello\") เมธอด select_adjust(index) เมธอดน้ถี ูกใชเ้ พ่อื ยนื ยนั วา่ ตวั อกั ษรทเ่ี ลอื กตรงตามทร่ี ะบุไวจ้ รงิ ๆ เชน่ E = Entry(root, bd=3, width=5) E.select_adjust(3) เมธอด select_clear() เคลยี รแ์ ทบ highlight บนขอ้ ความทถ่ี ูกเลอื กใน Entry เชน่ E = Entry(root, bd=3, width=5) E.select_clear() เมธอด select_from(index) กาหนดตาแหน่ง ANCHOR ดว้ ย index เชน่ E = Entry(root, bd=3, width=5) E.select_from(3) เมธอด select_present() เมอ่ื ขอ้ ความถกู เลอื ก (highlight) จะคนื คา่ เป็น True แต่ไมถ่ กู เลอื กจะ คนื ค่าเป็น False เชน่ E = Entry(root, bd=3, width=5) E.select_present() เมธอด select_range(start, end) เลอื กชว่ งของขอ้ ความทต่ี อ้ งการ โดยกาหนดตาแหน่งเรม่ิ ตน้ (start) และตาแหน่งสน้ิ สดุ (end) เช่น E = Entry(root, bd=3, width=5) E.select_range(2, 4) เมธอด select_to(index) เลอื กชว่ งของขอ้ ความตงั้ แต่ ANCHOR ไปถงึ ตวั อกั ษรตวั สดุ ทา้ ย เช่น ห น้ า 512
E = Entry(root, bd=3, width=5) E.select_to(5) สาหรบั ตวั อยา่ งการสรา้ งและใชง้ าน Entry แสดงในโปรแกรมตวั อยา่ งท่ี 19.15 ดงั น้ี Program Example 19.15: Entry 1 from tkinter import * 2 3 root = Tk() 4 entryVar = StringVar() 5 6 def deleteCallBack(): 7 E1.delete(2, 4) 8 9 def insertCallBack(): 10 E1.insert(3, \"Hello\") 11 12 def selectCallBack(): 13 E1.select_range(2, 4) 14 15 def clearCallBack(): 16 E1.select_clear() 17 18 def showCallBack(): 19 print(entryVar.get()) 20 21 L1 = Label(root, text=\"Password:\") 22 L1.pack(side = LEFT) 23 E1 = Entry(root, bd=3, width=10, textvariable=entryVar) 24 E1.pack(side = LEFT) 25 B1 = Button(root, text=\"delete\", width=10, command=deleteCallBack) 26 B1.pack() 27 B2 = Button(root, text=\"insert\", width=10, command=insertCallBack) 28 B2.pack() 29 B3 = Button(root, text=\"select\", width=10, command=selectCallBack) 30 B3.pack() 31 B4 = Button(root, text=\"clear\", width=10, command=clearCallBack) 32 B4.pack() 33 B5 = Button(root, text=\"show\", width=10, command=showCallBack) 34 B5.pack() 35 36 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง ใหท้ ดลองป้อนขอ้ มลู และคลกิ เลอื กป่มุ ต่างๆ พรอ้ มกบั สงั เกตการเปลย่ี นแปลง ห น้ า 513
จากตวั อยา่ งโปรแกรมท่ี 19.15 แสดงการสรา้ งและใชง้ าน Entry บรรทดั ท่ี 4 สรา้ งตวั แปรช่อื entryVar เพอ่ื ใชส้ าหรบั เกบ็ ค่าขอ้ มลู ชนดิ สตรงิ ทป่ี ้อนลงใน Entry โดยตวั แปรดงั กล่าวสรา้ งขน้ึ จากคลาสชอ่ื StringVar() บรรทดั ท่ี 6 สรา้ งฟังชนั ชอ่ื deleteCallBack() ทาหน้าทล่ี บขอ้ ความใน Entry โดยการระบุ ตาแหน่งเรมิ่ ตน้ (first) และสน้ิ สดุ (last) ของขอ้ ความดว้ ยเมธอด delete(first, last) บรรทดั ท่ี 9 สรา้ งฟัง ชนั ช่อื insertCallBack() ทาหน้าทแ่ี ทรกหรอื เพม่ิ ขอ้ ความลงใน Entry ดว้ ยเมธอด insert(index, s) โดย index คอื ตาแหน่งทต่ี อ้ งการเพม่ิ ขอ้ ความลงใน Entry และ s คอื ขอ้ ความ บรรทดั ท่ี 12 สรา้ งฟังชนั selectCallBack() ทาหน้าทเ่ี ลอื กช่วงของขอ้ ความ (highlight) ใน Entry โดยใชเ้ มธอด selectRange(start, end) บรรทดั ท่ี 18 สรา้ งฟังชนั ช่อื getCallBack() ทาหน้าทแ่ี สดงผลขอ้ มลู ทอ่ี ยใู่ น Entry ผ่านตวั แปรชนดิ สตรงิ ช่อื entryVar โดยใชเ้ มธอด get() บรรทดั ท่ี 21 โปรแกรมสรา้ ง Label เพ่อื พมิ พค์ าวา่ 'Password' ออกจอภาพ บรรทดั ท่ี 23 สรา้ ง Entry ทม่ี คี วามกวา้ งของเท่ากบั 10 เมอ่ื ผใู้ ชป้ ้อนขอ้ มลู ใดๆ ลงใน Entry ขอ้ ความเหลา่ จะถูกเกบ็ ไวใ้ น ตวั แปร entryVar (textvariable=entryVar) บรรทดั ท่ี 25 สรา้ งป่มุ มขี อ้ ความบนป่มุ คอื 'delete' เมอ่ื ป่มุ ดงั กล่าวถกู กด โปรแกรมจะเรยี กฟังชนั deleteCallBack() เขา้ มาทางานทนั ที บรรทดั ท่ี 27 สรา้ งป่มุ มี ขอ้ ความคอื 'insert' เมอ่ื ป่มุ ดงั กลา่ วถูกกด โปรแกรมจะเรยี กฟังชนั insertCallBack() บรรทดั ท่ี 29 สรา้ ง ป่มุ มขี อ้ ความคอื 'select' เมอ่ื ป่มุ ดงั กลา่ วถกู กด โปรแกรมจะเรยี กฟังชนั selectCallBack() บรรทดั ท่ี 31 สรา้ งป่มุ มขี อ้ ความคอื 'clear' เมอ่ื ป่มุ ดงั กลา่ วถกู กด โปรแกรมจะเรยี กฟังชนั clearCallBack() บรรทดั ท่ี 33 สรา้ งป่มุ มขี อ้ ความคอื 'show' เมอ่ื ป่มุ ดงั กล่าวถูกกด โปรแกรมจะเรยี กฟังชนั showCallBack() ผลลพั ธแ์ สดงดงั รปู ดา้ นบน 6. Label (เลเบลหรือป้ายช่ือ) Label คอื Widget ทม่ี ลี กั ษณะเป็นป้ายของขอ้ ความ เพ่อื ใชแ้ สดงขอ้ ความต่างๆ ผใู้ ชง้ านทราบ เชน่ ป้ายช่อื ผใู้ ชง้ าน (User label) ป้ายชอ่ื รหสั ผ่าน (Password label) เป็นตน้ รปู ร่างของ Label แสดงในรปู ท่ี 19.18 ห น้ า 514
รปู ท่ี 19.18 แสดงรปู แบบของเลเบลบนระบบปฏบิ ตั กิ ารต่างๆ รปู แบบคำสงั่ สำหรบั กำรสรำ้ ง Label คอื l = Label( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คุณสมบตั ติ ่างๆ ของ Label Option ดงั ต่อไปน้มี คี ุณสมบตั กิ ารทางานทเ่ี หมอื นกบั Widgets ทไ่ี ดก้ ลา่ วมาแลว้ ขา้ งตน้ คอื bg, bd, cursor, font, fg, heigh, width, image, tjustify, padx, pady, relief, underline และ wraplength สาหรบั option ทแ่ี ตกต่างจาก Widgets ตวั อ่นื ๆ แสดงในตารางดา้ นล่าง Option คาอธิบาย anchor กาหนดตาแหน่งการวาง Label โดยการกาหนดทศิ คอื N, W, S, E text เป็นตน้ (อ่านขอ้ มลู เพมิ่ ในหวั ขอ้ คุณสมบตั พิ น้ื ฐานของ Widgets) ค่าดฟี อลตค์ อื bitmap วางกลางวนิ โดวส์ เช่น Label(root, anchor=NW, text=\"User Name:\") textvariable กาหนดขอ้ ความใหแ้ สดงบน Label เช่น Label(root, text='User Name:', font=(\"Helvetica\", 9), fg=\"red\") กาหนดรปู ภาพบติ แมบ็ ทต่ี อ้ งการแสดงบน Label เช่น Label(root, bitmap=\"error\", fg=\"red\") กาหนดตวั แปรสาหรบั ใชเ้ กบ็ ขอ้ ความของ Label โดยทางานรว่ มกบั คลาส StringVar() เชน่ labelVar = StringVar() Label(root, textvariable=labelVar, text='User Name:') คลาส StringVar() และคลาส IntVar() มเี มธอดสาคญั ทช่ี ว่ ยสนบั สนุนการทางานของ Widgets คอื เมธอด get() ทาหน้าทด่ี งึ ขอ้ มลู ตากตวั แปรคลาส StringVar() และ IntVar() มาแสดงผล เชน่ stringVariable = StringVar() Label(root, text=\"User Name:\", textvariable=stringVariable) print(stringVariable.get()) # result = \"User Name:\" ห น้ า 515
เมธอด set() ทาหน้ากาหนดขอ้ ความใหมใ่ หก้ บั Label เชน่ stringVariable = StringVar() Label(root, text=\"User Name:\", textvariable=stringVariable) print(stringVariable.set(\"User:\")) # result = \"User\" สาหรบั ตวั อยา่ งการสรา้ งและใชง้ าน Label แสดงในโปรแกรมตวั อยา่ งท่ี 19.16 ดงั น้ี Program Example 19.16: Label 1 from tkinter import * 2 root = Tk() 3 4 userVar = StringVar() 5 passwdVar = StringVar() 6 7 def showLoginInfo(): 8 msg = userVar.get() + \":\" + passwdVar.get() 9 print(msg) 10 messagebox.showinfo(\"Login info\", msg) 11 12 def clearLogin(): 13 userVar.set(\"\") 14 passwdVar.set(\"\") 15 16 L1 = Label(root, text='User Name:') 17 L1.grid(column=0, row=0, sticky=(W, E)) 18 E1 = Entry(root, width=10, fg=\"red\", textvariable=userVar) 19 E1.grid(column=1, row=0, sticky=(W, E)) 20 L2 = Label(root, text='Password:') 21 L2.grid(column=0, row=1, sticky=(W, E)) 22 E2 = Entry(root, width=10, show=\"*\", fg=\"red\", textvariable=passwdVar) 23 E2.grid(column=1, row=1, sticky=(W, E)) 24 25 B1 = Button(root, text='Login', command=showLoginInfo) 26 B1.grid(column=0, row=2, sticky=(W, E)) 27 B2 = Button(root, text='Cancel', command=clearLogin) 28 B2.grid(column=1, row=2, sticky=(W, E)) 29 30 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง ใหท้ ดลองป้อนขอ้ มลู และคลกิ เลอื กป่มุ Login และ Cancel พรอ้ มกบั สงั เกตการเปลย่ี นแปลง ตาแหน่งการวาง Widgets ต่างๆ ลงบน grid(column, row) แสดงไดด้ งั น้ี คอลมั น์/แถว คอลมั น์ 0 คอลมั น์ 1 Widget E1 (ชอ่ งรบั ขอ้ มลู 1) แถว 0 Widget L1 (User Name:) Widget E2 (ชอ่ งรบั ขอ้ มลู 2) แถว 1 Widget L2 (Password:) ห น้ า 516
แถว 2 Widget B1 (ป่มุ Login) Widget B2 (ป่มุ Cancel) จากตวั อยา่ งโปรแกรมท่ี 19.16 แสดงการสรา้ งและใชง้ าน Label บรรทดั ท่ี 4 และ 5 สรา้ งตวั แปรชอ่ื userVar และ passwordVar เพ่อื ใชส้ าหรบั เกบ็ คา่ ขอ้ มลู ชนดิ สตรงิ ทป่ี ้อนลงใน Entry ของ User Name และ Password ตามลาดบั บรรทดั ท่ี 7 สรา้ งฟังชนั ชอ่ื showLoginInfo() ทาหน้าทแ่ี สดงชอ่ื ผใู้ ชง้ านและ รหสั ผ่านดว้ ยกลอ่ งขอ้ ความชอ่ื \"Login info\" และพมิ พข์ อ้ มลู ออกทาง Python shell ดว้ ย บรรทดั ท่ี 12 สรา้ งฟังชนั ชอ่ื clearLogin() ทาหน้าทล่ี บช่อื ผใู้ ชแ้ ละรหสั ผา่ นออกจาก Entry บรรทดั ท่ี 16 โปรแกรมสรา้ ง Label เพอ่ื พมิ พค์ าวา่ 'User Name:' ออกจอภาพ บรรทดั ท่ี 18 สรา้ ง Entry ทม่ี คี วามกวา้ งของเทา่ กบั 10, ตวั อกั ษรทป่ี ้อนจะถูกกาหนดใหเ้ ป็นสแี ดง และขอ้ มลู ทป่ี ้อนจะ เกบ็ ไวใ้ นตวั แปรช่อื userVar (textvariable=userVar) บรรทดั ท่ี 20 สรา้ ง Label เพอ่ื พมิ พค์ าว่า 'Password:' ออกจอภาพ บรรทดั ท่ี 22 สรา้ ง Entry ทม่ี คี วามกวา้ งของเท่ากบั 10 ขอ้ มลู ทป่ี ้อนจะถูก เขา้ รหสั ดว้ ยตวั อกั ษร '*' และเกบ็ ขอ้ มลู ไวใ้ นตวั แปรชอ่ื passwdVar บรรทดั ท่ี 25 สรา้ งป่มุ ทม่ี ขี อ้ ความ บนป่มุ คอื 'Login' เมอ่ื ป่มุ ดงั กลา่ วถกู กด โปรแกรมจะเรยี กฟังชนั showLoginInfor() เขา้ มาทางานทนั ที บรรทดั ท่ี 27 สรา้ งป่มุ มขี อ้ ความคอื 'Cancel' เมอ่ื ป่มุ ดงั กล่าวถกู กด โปรแกรมจะเรยี กฟังชนั clearLogin() ผลลพั ธแ์ สดงดงั รปู ดา้ นบน 7. Listbox Listbox คอื Widget ทม่ี ลี กั ษณะเป็นรายการของสมาชกิ ทส่ี ่วนใหญ่มตี วั เลอื กมากกวา่ 1 ตวั เลอื ก โดยผใู้ ชง้ านสามารถเลอื กสมาชกิ จากรายการดงั กล่าวไดเ้ พยี งตวั เดยี วเท่านนั้ เช่น ประเทศทอ่ี าศยั อยู่ คานาหน้าช่อื เป็นตน้ รปู รา่ งของ Listbox แสดงในรปู ท่ี 19.19 ห น้ า 517
รปู ท่ี 19.19 แสดงรปู แบบของ Listbox บนระบบปฏบิ ตั กิ ารต่างๆ รปู แบบคำสงั่ สำหรบั กำรสรำ้ ง Listbox คอื l = Listbox( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คณุ สมบตั ติ ่างๆ ของ Listbox Option ดงั ต่อไปน้มี คี ุณสมบตั กิ ารทางานทเ่ี หมอื นกบั Widgets ทไ่ี ดก้ ล่าวมาแลว้ ขา้ งตน้ คอื bg, bd, cursor, font, fg, highlightcolor, highlightthickness, justify, relief สาหรบั option ท่ี แตกต่างจาก Widgets ตวั อ่นื ๆ แสดงในตารางดา้ นลา่ ง Option คาอธิบาย selectbackground กาหนดสขี อ้ ความใน Listbox เมอ่ื สมาชกิ ถกู เลอื ก เช่น selectmode Listbox(root, selectbackground=\"red\") กาหนดคุณสมบตั วิ ่าจะเลอื กสมาชกิ จาก Listbox อยา่ งไร โดยมโี หมด ใหเ้ ลอื กดงั น้คี อื xscrollcommand BROWSE: เลอื กสมาชกิ ไดเ้ พยี งตวั เดยี ว เมอ่ื ลากเมาส์ (drag) แทบ็ สี (highlight) จะวง่ิ ไปพรอ้ มๆ กบั เมาส์ SINGLE: เลอื กสมาชกิ ไดเ้ พยี งตวั เดยี ว และไมส่ ามารถลากเมาสไ์ ด้ MULTIPLE: เลอื กสมาชกิ ไดม้ ากกว่า 1 ตวั โดยการคลกิ เลอื กสมาชกิ แต่ละตวั ไมส่ ามารถลากเมาสเ์ พอ่ื เลอื กสามาชกิ หลายๆ ตวั พรอ้ มกนั ได้ EXTENDED: เลอื กสมาชกิ ไดม้ ากกวา่ 1 ตวั โดยการลากเมาสเ์ พ่อื เลอื กสามาชกิ หลายๆ ตวั พรอ้ มกนั ได้ เช่น Listbox(root, selectmode=EXTENDED) สรา้ งแทบ็ สไลดแ์ นวนอน (HORIZONTAL) ใหก้ บั Listbox เช่น ห น้ า 518
yscrollcommand xscrollbar = Scrollbar(root, orient=VERTICAL) xscrollbar.pack(side=BOTTOM, fill=X) Listbox(root, selectmode=EXTENDED, xscrollcommand=xscrollbar.set) สรา้ งแทบ็ สไลดแ์ นวตงั้ ใหก้ บั Listbox (VERTICAL) เชน่ yscrollbar = Scrollbar(root, orient=VERTICAL) yscrollbar.pack(side=RIGHT, fill=Y) Listbox(root, selectmode=EXTENDED, yscrollcommand=yscrollbar.set) Widget ชนิด Listbox มเี มธอดทช่ี ว่ ยสนบั สนุนการทางานคอื เมธอด selection_set(first, last) ทาหน้าทเ่ี ลอื กช่วงสมาชกิ ทต่ี อ้ งการ โดยใชก้ าหนดตาแหน่ง สมาชกิ ตวั แรกในพารามเิ ตอร์ first และสมาชกิ ตวั สุดทา้ ยคอื last ถา้ ระบุเฉพาะ first แสดงว่า เลอื กสมาชกิ จาก Listbox เพยี วตวั เดยี วเท่านนั้ เช่น Lb1 = Listbox(root) Lb1.insert(1, \"Python\") Lb1.insert(2, \"Perl\") Lb1.pack() Lb1.selection_set(1) #Select only member form Listbox Lb1.selection_set(0, END) #Select all member เมธอด curselection() ทาหน้าทด่ี งึ ขอ้ มลู สมาชกิ ทถ่ี กู เลอื กใน Listbox คา่ ทส่ี ่งกลบั จะเป็นขอ้ มลู ชนิดทพั เพลิ แต่ถา้ สมาชกิ ใน Listbox ไมไ่ ดถ้ กู เลอื กไวจ้ ะส่งคา่ กลบั เป็นทพั เพลิ ทว่ี า่ งเปลา่ เชน่ Lb1 = Listbox(root) Lb1.insert(1, \"Python\") Lb1.insert(2, \"Perl\") Lb1.insert(3, \"C\") Lb1.pack() Lb1. selection_set(0, 1) print(Lb1.curselection()) ผลลพั ธท์ ไ่ี ดค้ อื (0, 1) เมธอด delete(first, last=None) ลบสมาชกิ ออกจาก Listbox ถา้ กาหนดตาแหน่ง first และ last แสดงวา่ เป็นการลบสมาชกิ แบบช่วง แต่ถา้ กาหนดเฉพาะ first จะเป็นการลบสมาชกิ จาก Listbox เพยี งตวั เดยี วเท่านนั้ เชน่ Lb1 = Listbox(root) Lb1.insert(1, \"Python\") Lb1.insert(2, \"Perl\") Lb1.insert(3, \"C\") Lb1.pack() Lb1. delete(1, 2) ห น้ า 519
เมธอด get(first, last=None) ดงึ สมาชกิ จาก Listbox ถา้ กาหนดตาแหน่ง first และ last แสดงว่า เป็นการดงึ สมาชกิ แบบชว่ ง แต่ถา้ กาหนดเฉพาะ first จะเป็นการดงึ สมาชกิ จาก Listbox เพยี ง ตวั เดยี วเทา่ นนั้ คา่ ทส่ี ่งคนื จากเมธอดดงั กล่าวเป็นชนิดทพั เพลิ เช่น Lb1 = Listbox(root) Lb1.insert(1, \"Python\") Lb1.insert(2, \"Perl\") Lb1.insert(3, \"C\") Lb1.pack() Lb1. get(1, 2) ผลลพั ธท์ ไ่ี ดค้ อื ('Perl', 'C') เมธอด index(i) กาหนดตาแหน่งตวั ชด้ี ว้ ย index เชน่ Lb1. index(1) เมธอด insert(index, *elements) เพม่ิ สมาชกิ ตงั้ แต่ 1 – n ตวั ลงใน Listbox โดยสามารถ กาหนดตาแหน่งทจ่ี ะเพมิ่ ดว้ ย index ถา้ ตอ้ งการเพม่ิ สมาชกิ ในตาแหน่งทา้ ยของ Listbox ใหท้ า การกาหนด index เป็น END เชน่ Lb1 = Listbox(root) Lb1.insert(1, \"Python\") Lb1.insert(2, \"Perl\") Lb1.insert(3, \"C\") Lb1.pack() elements = (\"C++\", \"Prolog\") for item in elements: Lb1.insert(END, item) เมธอด nearest(y) ดงึ ค่าตาแหน่งบนสุดของ Listbox เชน่ Lb1.nearest(1) เมธอด see(index) เปลย่ี นตาแหน่งของ Listbox โดยอา้ งองิ จาก index เชน่ Lb1.see(2) เมธอด size() คานวณจานวนสมาชกิ ทม่ี ที งั้ หมดใน Listbox เชน่ Lb1.size() สาหรบั ตวั อยา่ งการสรา้ งและใชง้ าน Listbox แสดงในโปรแกรมตวั อยา่ งท่ี 19.17, 19.18 ดงั น้ี Program Example 19.17: Listbox 1 from tkinter import * 2 import tkinter 3 4 root = Tk() 5 6 Lb1 = Listbox(root) 7 Lb1.insert(1, \"Python\") 8 Lb1.insert(2, \"Perl\") 9 Lb1.insert(3, \"C\") 10 Lb1.insert(4, \"PHP\") ห น้ า 520
11 Lb1.insert(5, \"JSP\") 12 Lb1.insert(6, \"Ruby\") 13 14 Lb1.pack() 15 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง ตวั อยา่ งโปรแกรมท่ี 19.17 แสดงการสรา้ งและใชง้ าน Listbox บรรทดั ท่ี 6 สรา้ ง Listbox ในหน้าต่าง หลกั บรรทดั ท่ี 7 – 12 เป็นการเพม่ิ สมาชกิ ใหก้ บั Listbox คอื 'Python', 'Perl', 'C', 'PHP', 'JSP' และ 'Ruby' ผลลพั ธท์ ไ่ี ดแ้ สดงดงั รปู ดา้ นบน ตวั อยา่ งโปรแกรมท่ี 19.18 เป็นการประยกุ ต์ Listbox เขา้ กบั scrollbar และ button ดงั น้ี Program Example 19.18: Applied Listbox, Scrollbar, Button 1 from tkinter import * 2 import tkinter 3 4 root = Tk() 5 6 def insertMember(): 7 elements = (\"C++\", \"Prolog\") 8 for item in elements: 9 Lb1.insert(END, item) 10 11 def deleteMember(): 12 Lb1.delete(0, END) 13 14 xscrollbar = Scrollbar(root, orient=HORIZONTAL) 15 yscrollbar = Scrollbar(root, orient=VERTICAL) 16 xscrollbar.pack(side=BOTTOM, fill=X) 17 yscrollbar.pack(side=RIGHT, fill=Y) 18 Lb1 = Listbox(root, selectmode=EXTENDED, xscrollcommand=xscrollbar.set) 19 Lb1.insert(1, \"Python\") 20 Lb1.insert(2, \"Perl\") 21 Lb1.insert(3, \"C\") 22 Lb1.insert(4, \"PHP\") 23 Lb1.insert(5, \"JSP\") 24 Lb1.insert(6, \"Ruby\") 25 Lb1.insert(7, \"ASP\") 26 Lb1.insert(8, \"JAVA\") 27 Lb1.insert(9, \"HTML\") 28 Lb1.pack() ห น้ า 521
29 B1 = Button(root, text=\"Insert\", command=insertMember) 30 B2 = Button(root, text=\"Delete\", command=deleteMember) 31 B1.pack(side=LEFT) 32 B2.pack(side=LEFT) 33 34 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง ใหท้ ดลองคลกิ เลอื กป่มุ ต่างๆ พรอ้ มกบั สงั เกตการ เปลย่ี นแปลง จากตวั อยา่ งโปรแกรมท่ี 19.18 บรรทดั ท่ี 6 สรา้ งเมธอดชอ่ื insertMember() เพอ่ื ทาหน้าทเ่ี พมิ่ สมาชกิ ใหก้ บั Listbox ทลี ะคา่ ตามลาดบั (เพมิ่ ขอ้ ความว่า \"C++\" และ \"Prolog\") โดยเพมิ่ ต่อทา้ ยรายการของ Listbox บรรทดั ท่ี 11 สรา้ งฟังชนั ช่อื deleteMember() ทาหน้าทล่ี บสมาชกิ ทงั้ หมดใน Listbox (delete(0, END)) บรรทดั ท่ี 14 สรา้ งแทบ็ สไลดใ์ นแนวนอน (HORIZONTAL Scrollbar) ชอ่ื วา่ xscrollbar บรรทดั ท่ี 15 สรา้ งแทบ็ สไลดใ์ นแนวตงั้ (VERTICAL) ชอ่ื ว่า yscrollbar บรรทดั ท่ี 18 โปรแกรมสรา้ ง Listbox ชอ่ื วา่ Lb1 โดยผใู้ ชส้ ามารถเลอื กสมาชกิ จาก Listbox ได้ มากกวา่ 1 รายการ (selectmode=EXTENDED) และ Listbox ดงั กล่าวมแี ทบ็ สไลดอ์ ยทู่ างดา้ นขวาของ Listbox จากนนั้ บรรทดั ท่ี 19 – 27 ทาการเพมิ่ สมาชกิ เขา้ ไปใน Listbox ทลี ะรายการ โดยเรมิ่ จาก \"Python\" และไปสน้ิ สุดท่ี \"HTML\" บรรทดั ท่ี 29 สรา้ งป่มุ ช่อื B1 มขี อ้ ความวา่ \"Insert\" เมอ่ื ผใู้ ชค้ ลกิ ป่มุ ดงั กลา่ วโปรแกรมจะเรยี กใชฟ้ ังชนั insertMember() เขา้ มาทางานทนั ที บรรทดั ท่ี 30 สรา้ งป่มุ ช่อื B2 มี ขอ้ ความว่า \"Delete\" เมอ่ื ผใู้ ชค้ ลกิ ป่มุ ดงั กล่าวโปรแกรมจะเรยี กใชฟ้ ังชนั deleteMember() เขา้ มาทางาน ผลการทางานแสดงดงั รปู ขา้ งบน 8. Menubutton Menubutton คอื Widget ทม่ี ลี กั ษณะเป็นเมนูแบบเลอ่ื นลงเมอ่ื ผใู้ ชค้ ลกิ เลอื ก เมนู ดงั กลา่ วจะคงอยตู่ ลอดไปจนกวา่ จะปิดโปรแกรม ผใู้ ชส้ ามารถเลอื กรายการใดรายการหน่งึ ใน Menubutton โดยการคลกิ ทร่ี ายการทต่ี อ้ งการ แสดงในรปู ท่ี 19.20 ห น้ า 522
รปู ท่ี 19.20 แสดงรปู แบบของ Menubutton รปู แบบคำสงั่ สำหรบั กำรสรำ้ ง Menubutton คอื me = Menubutton( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คณุ สมบตั ติ ่างๆ ของ Menubutton Option ดงั ต่อไปน้มี คี ณุ สมบตั กิ ารทางานทเ่ี หมอื นกบั Widgets ทไ่ี ดก้ ลา่ วมาแลว้ ขา้ งตน้ คอื activebackground, activeforeground, anchor, bg, bitmap, bd, cursor, font, fg, heigh, width, image, justify, padx, pady, relief, state, text, textvariable, underline และ wraplength สาหรบั option ทแ่ี ตกต่างจาก Widgets ตวั อ่นื ๆ แสดงในตารางดา้ นลา่ ง Option คาอธิบาย direction กาหนดตาแหน่งของเมนูทต่ี อ้ งการแสดงผล ถา้ กาหนดเป็น disabledforeground LEFT เมนูจะปรากฎทางดา้ นซา้ ยของป่มุ ทก่ี าลงั แสดงผล menu ถา้ กาหนดเป็น RIGHT เมนูจะปรากฎทางดา้ นขวาของป่มุ ถา้ กาหนดเป็น \"above\" เมนูจะแสดงดา้ นบนของป่มุ สาหรบั ค่าดฟี อลตค์ อื \"below\" เช่น Menubutton(root, text=\"Colors\", relief=RAISED, direction=RIGHT) สขี องตวั อกั ษรใน Menubutton จะไมถ่ ูกใชง้ าน เช่น Menubutton(root, text=\"Colors\", disabledforeground=\"black\") กาหนดเมนูยอ่ ยทส่ี มั พนั ธก์ บั Menubutton เชน่ mb = Menubutton(root, text=\"Colors\", relief=RAISED) mb.menu.add_checkbutton(label=\"Red\") mb.menu.add_checkbutton(label=\"Green\") สาหรบั ตวั อยา่ งการสรา้ งและใชง้ าน Menubutton แสดงในโปรแกรมตวั อยา่ งท่ี 19.19 ดงั น้ี Program Example 19.19: Menubutton 1 from tkinter import * 2 import tkinter 3 ห น้ า 523
4 root = Tk() 5 6 mb = Menubutton(root, text=\"Colors\", relief=RAISED, direction=RIGHT) 7 mb.grid() 8 mb.menu = Menu(mb, tearoff=0) 9 mb[\"menu\"] = mb.menu 10 11 mb.menu.add_checkbutton(label=\"Red\") 12 mb.menu.add_checkbutton(label=\"Green\") 13 14 mb.pack() 15 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง จากตวั อยา่ งโปรแกรมท่ี 19.19 แสดงการสรา้ งและใชง้ าน Menubutton บรรทดั ท่ี 6 สรา้ ง Menubutton ชอ่ื mb โดยเมนูดงั กลา่ วมขี อ้ ความคอื \"Colors\" และเมนูยอ่ ยจะปรากฎทางดา้ นขวาของเมนู \"Colors\" บรรทดั ท่ี 8 สรา้ งเมนูยอ่ ยภายใน Menubutton บรรทดั ท่ี 11 และ 12 เพม่ิ รายการในเมนูยอ่ ยช่อื \"Red\" และ \"Green\" ตามลาดบั 9. Message (ข้อความ) Message คอื Widget ทม่ี ลี กั ษณะเป็นขอ้ ความเพ่อื อธบิ ายบางสงิ่ บางอยา่ งในโปรแกรม (โดยแกไ้ ขไมไ่ ด)้ คลา้ ยกบั Label แต่แตกต่างกนั คอื Message จะถกู ปรบั ขนาดการแสดงผลให้ เหมาะสมโดยอตั โนมตั ิ แสดงในรปู ท่ี 19.21 รปู ท่ี 19.21 แสดงรปู แบบของ Message รปู แบบคำสงั่ สำหรบั กำรสรำ้ ง Message คอื me = Message( root, option=value, ... ) ห น้ า 524
พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คณุ สมบตั ติ ่างๆ ของ Message Option ดงั ต่อไปน้มี คี ุณสมบตั กิ ารทางานทเ่ี หมอื นกบั Widgets ทไ่ี ดก้ ลา่ วมาแลว้ ขา้ งตน้ คอื anchor, bg, bitmap, bd, cursor, font, fg, heigh, image, justify, padx, pady, relief, text, textvariable, underline, width และ wraplength สาหรบั ตวั อยา่ งการสรา้ งและใชง้ าน Message แสดงในโปรแกรมตวั อยา่ งท่ี 19.20 ดงั น้ี Program Example 19.20: Message 1 from tkinter import * 2 3 root = Tk() 4 5 var = StringVar() 6 me = Message(root, textvariable=var, relief=RAISED ) 7 8 var.set(\"Hello!! Welcome to Python Programming?\") 9 me.pack() 10 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง จากตวั อยา่ งโปรแกรมท่ี 19.20 แสดงการสรา้ งและใชง้ าน Message บรรทดั ท่ี 5 สรา้ งตวั แปรชอ่ื var เป็นชนิดสตรงิ ใชส้ าหรบั เกบ็ ขอ้ มลู ของ Message บรรทดั ท่ี 6 สรา้ ง Message ชอ่ื me โดยไมม่ ขี อ้ ความ ใดๆ แสดงออกจอภาพ การควบคมุ การแสดงผลจะขน้ึ อยกู่ บั ตวั แปรทถ่ี กู กาหนดใน textvariable นนั่ คอื ตวั แปรช่อื var นนั่ เอง บรรทดั ท่ี 8 กาหนดขอ้ ความใหมว่ ่า \" Hello!! Welcome to Python Programming?\" โดยใชเ้ มธอด set() ใหก้ บั ตวั แปร var สง่ ผลให้ Message เปลย่ี นเป็นขอ้ ความใหมท่ ่ี กาหนดขน้ึ ทนั ที 10. Menu ห น้ า 525
Menu คอื Widget ทม่ี ลี กั ษณะเป็นเมนูยอ่ ย แบง่ ออกเป็น 3 ประเภทคอื เมนูแบบ pop- up, toplevel และ pull-down ตวั อยา่ งเช่น เมนู File, Edit, Option, Windows และ Help เป็นตน้ ดงั แสดงในรปู ท่ี 19.22 รปู ท่ี 19.22 แสดงรปู แบบของ Menu รปู แบบคำสงั่ สำหรบั กำรสรำ้ ง Menu คอื me = Menu( root, option=value, ... ) พำรำมเิ ตอรค์ อื o root คอื วนิ โดวสห์ ลกั (root window) o option คอื คณุ สมบตั ติ ่างๆ ของ Menu Option ดงั ต่อไปน้มี คี ุณสมบตั กิ ารทางานทเ่ี หมอื นกบั Widgets ทไ่ี ดก้ ลา่ วมาแลว้ ขา้ งตน้ คอื activebackground, activeforeground, bg, bd, cursor, disabledforeground, font, fg, relief, image สาหรบั option ทแ่ี ตกต่างจาก Widgets ตวั อ่นื ๆ แสดงในตารางดา้ นลา่ ง Option คาอธิบาย activeborderwidth กาหนดขนาดความกวา้ งของกรอบเมนู เมอ่ื ผใู้ ชค้ ลกิ เลอื กเมนู (ดฟี อลตเ์ ทา่ กบั 1 พกิ เซล) เชน่ Menu(root, activeborderwidth=5) postcommand กาหนดใหเ้ มนูเรยี กใชเ้ มธอดหรอื ฟังชนั เมอ่ื มผี ใู้ ชค้ ลกิ เลอื กเมนูดงั กล่าว เชน่ Menu(root, postcommand=donothing) selectcolor กาหนดสขี องป่มุ checkbutton หรอื radiobutton เมอ่ื ป่มุ เหล่าน้ี ถูกเลอื ก เช่น Menu(root, selectcolor=\"red\") tearoff โดยปกติ เมอ่ื เพม่ิ รายการของเมนูยอ่ ยเขา้ ไปในเมนู หลกั จะเพมิ่ ในตาแหน่งท่ี 1 แต่เมอ่ื กาหนดให้ tearoff=0 จะสามารถเพม่ิ เมนูยอ่ ยในตาแหน่งท่ี 0 ได้ และเมนู ห น้ า 526
ยอ่ ยนนั่ ๆ จะสามารถแสดงผลเป็นอสิ ระจากเมนูหลกั ได้ เชน่ Menu(menubar, tearoff=1) title กาหนดขอ้ ความ title ใหก้ บั Menu Widget Widget ชนิด Menu มเี มธอดทช่ี ว่ ยสนบั สนุนการทางาน คอื เมธอด add_command(options) สรา้ งเมนูยอ่ ยในเมนูหลกั เช่น menubar = Menu(root) filemenu = Menu(menubar, tearoff=0) filemenu.add_command(label=\"New\", command=donothing) เมธอด add_radiobutton(options) สรา้ งเมนูชนดิ checkbutton ในเมนูหลกั เชน่ menubar = Menu(root) filemenu = Menu(menubar, tearoff=0) filemenu.add_radiobutton(label=\"Exit\", selectcolor=\"red\") เมธอด add_checkbutton(options) สรา้ งเมนูชนดิ checkbutton ในเมนูหลกั เชน่ menubar = Menu(root) filemenu = Menu(menubar, tearoff=0) filemenu.add_checkbutton(label=\"Exit\", selectcolor=\"red\") เมธอด add_cascade(options) เพมิ่ ชุดของเมนูยอ่ ยทเ่ี รยี งต่อเน่อื งกนั ในเมนูหลกั เชน่ menubar = Menu(root) filemenu = Menu(menubar, tearoff=0) filemenu.add_command(label=\"New\", command=donothing) filemenu.add_command(label=\"Open\", command=donothing) filemenu.add_command(label=\"Save\", command=donothing) menubar.add_cascade(label=\"File\", menu=filemenu) เมธอด add_separator() สรา้ งเสน้ เพอ่ื แยกเมนูยอ่ ยออกจากกนั เช่น filemenu.add_separator() เมธอด add(type, options) เพมิ่ เมนูยอ่ ยเขา้ ไปยงั เมนูหลกั แบบต่อทา้ ย (append) โดย type คอื ชนดิ ของเมนูต่างๆ เช่น cascade (submenu), checkbutton, radiobutton, หรอื separator และ options เชน่ font, foreground หรอื image เป็นตน้ เมธอด delete(startindex [,endindex]) ลบชว่ งรายการในเมนูยอ่ ย โดยระบุรายการแรกใน startindex และรายการตวั สุดทา้ ยใน endindex เช่น editmenu.delete(2, 4) เมธอด entryconfig(index, options) เมอ่ื เมนูยอ่ ยถกู สรา้ งขน้ึ แลว้ สามารถแกไ้ ขคุณสมบตั ขิ อง เมนูยอ่ ยเหลา่ นนั้ ผ่านเมธอด entryconfig() โดยอา้ งดว้ ย index เช่น filemenu.entryconfig(1, label=\"Test\") เมธอด index(item) ส่งค่ากลบั เป็นตาแหน่งของเมนูยอ่ ยทเ่ี ลอื ก เช่น ห น้ า 527
filemenu.index(2) เมธอด insert_separator(index) เพม่ิ เสน้ สาหรบั แบ่งเมนูยอ่ ย โดยการระบุตาแหน่งทต่ี อ้ งการ แทรกเสน้ ดงั กล่าว เช่น filemenu.insert_separator(2) เมธอด invoke(index) เรยี กใชค้ าสงั่ ทม่ี หี น้าทเ่ี กย่ี วขอ้ งกบั เมนูทเ่ี รยี กใชง้ าน ถา้ เป็นเมนูแบบ checkbutton เมธอดดงั กล่าวจะทาหน้าทส่ี ลบั ระหวา่ งป่มุ ถกู เลอื ก (set) หรอื ถกู ยกเลกิ (cleared) ถา้ เมนูเป็นแบบ radiobutton จะถูกเซค็ หรอื ยกเลกิ เชน่ filemenu.invoke(2) เมธอด type(index) สง่ ค่ากลบั เป็นชนิดของเมนูยอ่ ย เช่น ascade\", \"checkbutton\", \"command\", \"radiobutton\", \"separator\", or \"tearoff\" เป็นตน้ filemenu.type(2) สาหรบั ตวั อยา่ งการสรา้ งและใชง้ าน Menu แสดงในโปรแกรมตวั อยา่ งท่ี 19.21 ดงั น้ี Program Example 19.21: Menu 1 from tkinter import * 2 3 def donothing(): 4 filewin = Toplevel(root) 5 button = Button(filewin, text=\"Do nothing button\") 6 button.pack() 7 8 root = Tk() 9 menubar = Menu(root) 10 #To create File menu 11 filemenu = Menu(menubar, tearoff=0) 12 filemenu.add_command(label=\"New\", command=donothing) 13 filemenu.add_command(label=\"Open\", command=donothing) 14 filemenu.add_command(label=\"Save\", command=donothing) 15 filemenu.add_command(label=\"Save as...\", command=donothing) 16 filemenu.add_command(label=\"Close\", command=donothing) 17 filemenu.add_separator() 18 filemenu.add_command(label=\"Exit\", command=root.destroy) 19 20 menubar.add_cascade(label=\"File\", menu=filemenu) 21 22 #To create Edit menu 23 editmenu = Menu(menubar, tearoff=0) 24 editmenu.add_command(label=\"Undo\", command=donothing) 25 editmenu.add_separator() 26 editmenu.add_command(label=\"Cut\", command=donothing) 27 editmenu.add_command(label=\"Copy\", command=donothing) 28 editmenu.add_command(label=\"Paste\", command=donothing) 29 editmenu.add_command(label=\"Delete\", command=donothing) 30 editmenu.add_command(label=\"Select All\", command=donothing) 31 32 menubar.add_cascade(label=\"Edit\", menu=editmenu) 33 ห น้ า 528
34 #To create Help menu 35 helpmenu = Menu(menubar, tearoff=0) 36 helpmenu.add_command(label=\"Help Index\", command=donothing) 37 helpmenu.add_command(label=\"About...\", command=donothing) 38 39 menubar.add_cascade(label=\"Help\", menu=helpmenu) 40 41 root.config(menu=menubar) 42 root.mainloop() ผลลพั ธท์ ไ่ี ดเ้ มอ่ื สงั่ รนั โปรแกรมดงั รปู ดา้ นล่าง จากตวั อยา่ งโปรแกรมท่ี 19.21 แสดงการสรา้ งและใชง้ านเมนู บรรทดั ท่ี 5 สรา้ งฟังชนั ชอ่ื ว่า donoting() ทาหน้าทส่ี รา้ งหน้าต่างวนิ โดวสใ์ หม่ทเ่ี ป็นอสิ ระจากวนิ โดวสห์ ลกั โดยฟังชนั ดงั กล่าวสรา้ งป่มุ และพมิ พ์ ขอ้ ความบนป่มุ ว่า \"Do nothing button\" บรรทดั ท่ี 9 สรา้ งวนิ โดวสห์ ลกั พรอ้ มกบั เมนูหลกั ช่อื ว่า menubar เพ่อื ใชส้ าหรบั รองรบั เมนูยอ่ ยทจ่ี ะสรา้ งขน้ึ ในคาสงั่ ลาดบั ถดั ไป บรรทดั ท่ี 11 สรา้ งเมนูยอ่ ยชดุ แรกมชี ่อื วา่ filemenu บนเมนูหลกั (Menubar) โดยเมนูยอ่ ย ดงั กลา่ วจะถกู เพม่ิ ในตาแหน่งแรกของเมนูหลกั ได้ (tearoff=0) บรรทดั ท่ี 12 – 16 สรา้ งรายการของเมนู ยอ่ ยโดยเรมิ่ จาก \"New\", \"Open\", \"New\", \"Save\", …, \"Close\" ตามลาดบั บรรทดั ท่ี 17 สรา้ งเสน้ สาหรบั แบง่ หมวดหมขู่ องเมนูยอ่ ยออกจากกนั บรรทดั ท่ี 18 สรา้ งเมนูยอ่ ยช่อื ว่า \"Exit\" เมอ่ื ผใู้ ชง้ านกด ป่มุ ดงั กล่าว โปรแกรมจะยตุ กิ ารทางานทนั ที (command=root.destroy) บรรทดั ท่ี 20 เพม่ิ เมนูยอ่ ยท่ี สรา้ งขน้ึ ชอ่ื ว่า filemenu เขา้ ไปยงั เมนูหลกั ในลกั ษณะแบบลาดบั ชนั้ คลา้ ยน้าตก (Cascade) เมนูหลกั ดงั กลา่ วมชี ่อื วา่ \"File\" บรรทดั ท่ี 23 สรา้ งเมนูหลกั ชอ่ื วา่ \"Edit\" เพ่อื รองรบั เมนูยอ่ ยๆ ทท่ี าหน้าทเ่ี กย่ี วกบั การแกไ้ ข แฟ้ม เชน่ \"Cut\", \"Copy\", \"Paste\" และเสน้ แยก (separator) ตามลาดบั (บรรทดั ท่ี 24 - 30) ในบรรทดั ท่ี 32 เพม่ิ รายการเมนูยอ่ ยทส่ี รา้ งขน้ึ ในเมนูหลกั ชอ่ื \"Edit\" ดว้ ยเมธอด add_cascade(label=\"Edit\", menu=editmenu) บรรทดั ท่ี 35 – 39 สรา้ งเมนูยอ่ ยทท่ี าหน้าทเ่ี ก่ยี วกบั การชว่ ยเหลอื (Help) คาสงั่ ทใ่ี ช้ งานจะคลา้ ยกบั การสรา้ งเมนู File และ Edit บรรทดั ท่ี 41 เป็นการกระตุน้ ใหว้ นิ โดวสห์ ลกั อพั เดทเมนู ห น้ า 529
Search
Read the Text Version
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 1 - 50
- 51 - 100
- 101 - 150
- 151 - 200
- 201 - 250
- 251 - 300
- 301 - 350
- 351 - 400
- 401 - 450
- 451 - 500
- 501 - 550
- 551 - 600
- 601 - 650
- 651 - 661
Pages: