22 สิงหาคม 2557

Published สิงหาคม 22, 2557 by with 0 comment

สร้าง GUI ด้วย PySide ตอนที่ 5: Widgets ภาค 1

สวัสดีทุกท่านครับ หลังจากบทความที่แล้ว สร้าง GUI ด้วย PySide ตอนที่ 6 ผมลืมข้ามเลข 5 ไปครับ ต้องขออภัยมา ณ ที่นี้ครับ  ในบทความที่ 5 นี้จะพูดถึงเรื่อง Widgets ภาค 1 ครับ
บทความนี้ผมจะพูดถึง Widgets 4 อย่าง ได้แก่
  • QLineEdit ใช้สำหรับรับค่าข้อมูล 
  • QCheckBox ใช้ติ๊กเลือกครับ 
  • QComboBox เป็นเมนูย่อยที่ใช้เลือกเช่นกันครับ
  • QCalendarWidget ใช้แสดงปฏิทิน

QLineEdit

เป็นเครื่องมือที่ใช้สำหรับรับค่าข้อมูลเช่น ข้อความ ตัวเลข เป็นต้นครับ ดูลักษณะการใช้งานได้ตามตัวอย่างต่อไปนี้ครับ
ตัวอย่างที่ 11
import sys
from PySide.QtCore import *
from PySide.QtGui import *

app = QApplication(sys.argv)
widget = QWidget()  #กำหนดให้ตัวแปร widget แทน QWidget()

widget.setGeometry(200, 100, 400, 300)
widget.setWindowTitle('รับค่าข้อมูลด้วย QLineEdit')

save = QPushButton('Save', widget)
name = QLineEdit(widget)
show = QLabel(widget)

name.setGeometry(10, 10, 200, 20)
save.setGeometry(10, 40, 80, 20)
show.setGeometry(100, 100, 200, 20)

def showText():
    show.setText(name.text())
widget.connect(save,SIGNAL('clicked()'), showText) #เชื่อมต่อ widget กับคลาส showText ในหน้าต่างโปรแกรมเดียวกัน

widget.show()
sys.exit(app.exec_())

ผลลัพธ์
เมื่อเรากรอกข้อมูลในช่องว่างแล้ว ตัวอย่างเช่น "สวัสดี" แล้วผมกดปุ่ม Save ก็จะปรากฎข้อความครับ

QCheckBox

เป็นเครื่องมือที่ใช้ติ๊กเลือกการทำงานครับ แต่มีแค่ Box เดียวนะครับ ดูลักษณะการใช้งานได้ตามตัวอย่างต่อไปนี้ครับ
ตัวอย่างที่ 12
import sys
from PySide.QtCore import *
from PySide.QtGui import *

app = QApplication(sys.argv)
widget = QWidget()

widget.setGeometry(200, 100, 400, 300)
widget.setWindowTitle('QCheckBox')


show = QCheckBox('สวัสดี Python',widget) #QCheckBox สามารถเงื่อนไขที่จะเลือก
show.move(10, 10)

def con():
    if show.isChecked(): #ตรวจสอบเมื่อมีการคลิกถูกที่ show
        widget.setWindowTitle('ดีจ้า :D ฉันคือ Python') #เปลี่ยนชื่อหัวข้อโปรแกรม
    else:
        widget.setWindowTitle('')

widget.connect(show,SIGNAL('stateChanged(int)'), con) #เชื่อมต่อ show กับคลาส con ในหน้าต่างโปรแกรมเดียวกัน

widget.show()
sys.exit(app.exec_()) 

ผลลัพธ์
ก่อนเลือก Box
หลังติ๊กเลือกที่ช่องหน้าข้อความ สวัสดี Python
 แล้วติ๊กเลือกที่ช่องหน้าข้อความ สวัสดี Python อีกครั้ง

QComboBox

เป็นแถบเมนูที่เมื่อเราคลิก V แล้วจะมีเมนูเลื่อนลงมาให้เลือกครับ ดูลักษณะการใช้งานได้ตามตัวอย่างต่อไปนี้ครับ
ตัวอย่างที่ 13
import sys
from PySide.QtCore import *
from PySide.QtGui import *

app = QApplication(sys.argv)
widget = QWidget()

widget.setGeometry(200, 100, 400, 300)
widget.setWindowTitle('QComboBox')

cb = QComboBox(widget) #กำหนดให้ตัวแปร cb แทน QComboBox(widget)
label = QLabel(widget) #กำหนดให้ตัวแปร label แทน QLabel(widget

lang = ['Python','Java','Javascript','PHP','C','C++','Ruby'] #กำหนดลิสต์ (List) ของข้อมูล
for i in lang:
    cb.addItem(i)

cb.setGeometry(10, 10, 150, 20)
label.setGeometry(170, 10, 100, 20)

def hello(text):
    label.setText(text) #กำหนดค่าใน label ใหม่เป็นList ข้อมูลที่เลือก

widget.connect(cb, SIGNAL('activated(QString)'), hello) #เชื่อมต่อ cb กับคลาส hello ในหน้าต่างโปรแกรมเดียวกัน

widget.show()
sys.exit(app.exec_())

ผลลัพธ์
ก่อนเลือกเมนู
 หลังเลือกเมนูโดยคลิกที่ V ครับ

QCalendarWidget

เป็น Widgets ที่ใช้แสดงปฏิทินครับ โดยทาง Qt ได้เตรียมมาให้แล้วครับ ดูลักษณะการใช้งานได้ตามตัวอย่างต่อไปนี้ครับ
ตัวอย่างที่ 14
import sys
from PySide.QtCore import *
from PySide.QtGui import *

app = QApplication([])

win = QWidget()
win.setWindowTitle('QCalendarWidget')

layout = QVBoxLayout()
win.setLayout(layout)

# เรียกใช้ QCalendarWidget()
view = QCalendarWidget()

# เพิ่ม view เข้าไปในหน้าต่างโปรแกรม
layout.addWidget(view)

# แสดงหน้าต่าง
win.show()
app.exec_()

ผลลัพธ์

ข้อควรรู้
setGeometry เป็นการกำหนดตำแหน่งของวัตถุ โดยมีรูปแบบการใช้งานดังนี้ครับ setGeometry(x, y, w, h)

ลองนำไปประยุกต์ใช้กับการเขียนโปรแกรมดูนะครับ
ติดตามบทความต่อไปนะครับ :)
ขอบคุณครับ

0 ความคิดเห็น:

แสดงความคิดเห็น

แสดงความคิดเห็นได้ครับ :)