25 สิงหาคม 2557

Published สิงหาคม 25, 2557 by with 2 comments

สร้าง GUI ด้วย PySide ตอนที่ 7 : สร้างด้วยเครื่องมือ Qt Designer

สวัสดีครับทุกท่าน บทความชุด สร้าง GUI ด้วย PySide ได้เดินมาถึงตอนที่ 7 แล้ว ตอนที่ 7 เราจะไปGUI ด้วย PySide โดยใช้เครื่องมือ Qt Designer ครับ  ซึ่งเป็นเครื่องมือที่ PySide ได้แถมมาด้วยครับ  Qt Designer เป็นเครื่องมือสำหรับใช้ออกแบบ GUI ใน Qt ครับ พัฒนาโดยผู้พัฒนา Qt เองนั้นคือ Digia
Qt Designer
Qt Designer
Qt Designer ใน PySide ได้ถูกติดตั้ง แต่หากค้นในแถบเมนูจะไม่เห็นครับ บน Windows จะแอบซ่อนอยู่ในที่ C:\Python**\Lib\site-packages\PySide ชื่อไฟล์ว่า designer.exe ครับ ** คือเวชั่นของ Python เมื่อคุณพบแล้ว ให้คุณคลิกเข้าไปเลยครับ เราจะมาสร้าง Hello World ด้วย Qt Designer กันครับ สำหรับบน Linux ให้ค้นในเมนูครับ ถ้าไม่เจอให้ติดตั้ง Qt Designer ด้วยนะครับ ที่ผมใช้เป็นเวชั่น 4.8.5 ครับ
 เมื่อเปิดขึ้นมาจะพบกับหน้าต่าง New Form ขึ้นมา ในช่อง templates\forms ให้เลือก Widget แล้วการตั้งค่าอื่น ๆ เช่น Screen Size แล้วแต่ครับ แต่ผมไม่ตั้งค่าครับ เสร็จแล้วกด Create ครับ
จะพบการหน้าต่างในการออกแบบ Qt Designer ครับ ในช่องด้านซ้ายมือ Widget Box ให้ผู้อ่านเลื่อนลงมาเลือก Label แล้วลากดึงด้วยเมาส์ไปใส่ในช่อง Form - untitled ที่อยู่ตรงกลางหน้าจอครับ ผู้อ่านสามารถปรับขนาดของ Form ได้โดยลากไปทางทิศที่ต้องการครับ
ให้ผู้อ่านปรับลากตามที่ต้องการครับ โดยผมปรับขนาดตัวอักษร ไปที่ช่องด้านขวามือ Property Editor ที่ช่องย่อย label : QLabel ผมเลื่อนมาหา font  แล้วผมก็คลิกที่ ... ที่ Size ผมกำหนดที่ 26 แล้วกด OK
แล้วผมก็ดับเบิ้ลคลิกที่ TextLabel เปลี่ยนข้อความเป็น Hello World เสร็จแล้วผมบันทึกไฟล์เป็น u.ui โดยนามสกุลที่ได้จาก Qt Designer จะเป็น .ui ครับ
โค้ดตัวอย่างไฟล์ ui.ui ที่ผมสร้างครับ
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <widget class="QLabel" name="label">
   <property name="geometry">
    <rect>
     <x>80</x>
     <y>60</y>
     <width>231</width>
     <height>141</height>
    </rect>
   </property>
   <property name="font">
    <font>
     <pointsize>22</pointsize>
    </font>
   </property>
   <property name="text">
    <string>Hello World</string>
   </property>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>
 การที่เราจะนำไปใช้งานเราต้องแปลง  .ui เป็น .py ก่อนครับ โดยเราสามารถใช้ pyside-uic เป็นเครื่องมือในการแปลงครับ มีวิธีการแปลงดังนี้ครับ เปิด cmd  แล้วไปยังโฟลเดอร์ที่เก็บไฟล์ ผมใช้คำสั่ง pyside-uic u.ui > u.py แค่นี้เราก็จะได้ .py แล้วครับ แต่ยังไม่สามารถนำไปใช้งานได้ โดยโค้ดที่ถูกแปลง ของผมมีดังนี้ครับ โค้ดตัวอย่าง u.py ก่อนแก้ไข
# -*- coding: utf-8 -*-



# Form implementation generated from reading ui file 'u.ui'

#
# Created: Mon Aug 25 21:48:20 2014
#      by: pyside-uic 0.2.15 running on PySide 1.2.2
#
# WARNING! All changes made in this file will be lost!

from PySide import QtCore, QtGui

class Ui_Form(object): #คลาส  Ui_Form เก็บรายละอียดที่เราสร้าง
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 300)
        self.label = QtGui.QLabel(Form)
        self.label.setGeometry(QtCore.QRect(80, 60, 231, 141))
        font = QtGui.QFont()
        font.setPointSize(22)
        self.label.setFont(font)
        self.label.setObjectName("label")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)


    def retranslateUi(self, Form):
        Form.setWindowTitle(QtGui.QApplication.translate("Form", "Form", None, QtGui.QApplication.UnicodeUTF8))
        self.label.setText(QtGui.QApplication.translate("Form", "Hello World", None, QtGui.QApplication.UnicodeUTF8))
เมื่อเรารันแล้ว ไม่มีหน้าต่างอะไรขึ้นมาเลยครับ เราต้องเพิ่มคำสั่งเข้าไป โค้ดตัวอย่าง u.py หลังแก้ไข
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'u.ui'
#
# Created: Mon Aug 25 21:48:20 2014
#      by: pyside-uic 0.2.15 running on PySide 1.2.2
#
# WARNING! All changes made in this file will be lost!

import sys #เพิ่ม import sys
from PySide import QtCore, QtGui

class Ui_Form(object): #คลาส  Ui_Form เก็บรายละอียดที่เราสร้าง
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 300)
        self.label = QtGui.QLabel(Form)
        self.label.setGeometry(QtCore.QRect(80, 60, 231, 141))
        font = QtGui.QFont()
        font.setPointSize(22)
        self.label.setFont(font)
        self.label.setObjectName("label")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        Form.setWindowTitle(QtGui.QApplication.translate("Form", "Form", None, QtGui.QApplication.UnicodeUTF8))
        self.label.setText(QtGui.QApplication.translate("Form", "Hello World", None, QtGui.QApplication.UnicodeUTF8))
class ControlMainWindow(QtGui.QMainWindow): #เพิ่มคลาสมาอีก

  def __init__(self, parent=None):
    super(ControlMainWindow, self).__init__(parent)
    self.ui =  Ui_Form() #ดึงคลาส  Ui_Form ที่เก็บรายละอียด ui มาใช้
    self.ui.setupUi(self)
   
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    mySW = ControlMainWindow() 
    mySW.show()  #แสดง
    sys.exit(app.exec_())
def main():
 app = QtGui.QApplication(sys.argv)
 mySW = ControlMainWindow()  #ดึงคลาส ControlMainWindow มาใช้
        mySW.show()
 sys.exit(app.exec_())
if __name__ == "__main__":
  a = main() 
ผลลัพธ์
ในการใช้เครื่องมือ Qt Designer ผมแนะนำให้ผู้อ่านไปศึกษา CSS มาให้ดี ๆ นะครับ บทความต่อไปมีสนุกกันอีกแน่นอนครับ

ติดตามบทความต่อไปนะครับ :)
ขอบคุณครับ

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

  1. แก้ตอนท้ายเล็กน้อยครับ
    def main():
    app = QtGui.QApplication(sys.argv)
    mySW = ControlMainWindow()
    mySW.show()
    sys.exit(app.exec_())


    if __name__ == "__main__":
    main()

    ตอบลบ

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