28 สิงหาคม 2557

Published 8/28/2557 by with 0 comment

สร้าง GUI ด้วย PySide ตอนที่ 8 : สร้าง UI ด้วย QML

สวัสดีผู้อ่านทุกท่านครับ บทความชุด สร้าง GUI ด้วย PySide ได้เดินทางออกจากฝั่งมาถึงตอนที่ 8 แล้วครับ บทความนี้เราจะไปสร้าง UI ด้วยภาษา QML ครับ เราจะเรียนรู้การนำ QML มาใช้งานกับ Python แบบเริ่มต้นง่าย ๆ ครับ ด้วยโปรแกรมในตำนาน Hello World ;)

QML คืออะไร

QML ย่อมาจาก Qt Meta-Object Language เป็นภาษาหนึ่งที่เป็น declarative language มีลักษณะคล้ายกับภาษา  JavaScript ช่วยให้การสร้างออกแบบ  GUI มีความสะดวกยืดหยุ่นมากขึ้น โดยโปรแกรมที่เขียนด้วยภาษา QML จะทำงานอยู่บน QML Viewer อีกทอดหนึ่ง  ลักษณะแบบเดียวกับภาษา ActionScript ที่ทำงานอยู่บน Flash Player ครับ

ก่อนเริ่มต้น ผู้อ่านไปโหลดชุดพัฒนา Qt มาแล้วติดตั้ง เพื่อใช้งานโปรแกรม Qt Creator ครับ จากเว็บ http://qt-project.org/downloads ครับ ที่ผมโหลดมาคือ Qt 5.3.1 ครับ
เมื่อติดตั้งแล้ว ให้ผู้อ่านเปิดโปรแกรม Qt Creator แล้วไปที่แถบเมนู File > New File or Project...

เลือก Qt แล้วดับเบิ้ลคลิกที่ QML File (Qt Quick 1) แล้วกำหนดชื่อ ผมกำหนดเป็น view ครับ ตามมาด้วยด้วย Path ที่เก็บไฟล์งานครับ
เสร็จแล้วกด Next หน้าต่อมาผมไม่ได้ตั้งค่าอะไร กด Finish ครับ
เสร็จแล้วเราจะได้หน้านี้ครับ
ให้ผู้อ่านกรอกโค้ดตัวอย่างต่อไปลงในโปรแกรมครับ
import QtQuick 1.1

Rectangle {
    width: 200
    height: 200
    color: "red"
 
    Text {
        text: "Hello World"
        anchors.centerIn: parent
    }
}
แล้วกด Save ครับ ต่อไปให้ผู้อ่านเปิดเครื่องมือเขียนโค้ด Python ตามที่ผู้อ่านถนัดครับ โดยตามโค้ดตัวอย่างดังต่อไปนี้ครับ
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import sys
from PySide.QtCore import *
from PySide.QtGui import *
from PySide.QtDeclarative import QDeclarativeView
     
# สร้างโปรแกรม  Qt แล้วใช้  QDeclarative แสดง
app = QApplication(sys.argv)
view = QDeclarativeView()
# โยงไฟล์ QML เข้ามาใช้งาน
url = QUrl('view.qml')
# กำหนดค่า view แล้วแสดง
view.setSource(url)
view.show()

sys.exit(app.exec_())


แล้วบันทึกไว้ในโฟลเดอร์เดียวกันที่เก็บไฟล์ view.qml  ไว้ครับ
ผลลัพธ์

เพิ่มเติม ผู้อ่านสามารถใช้หน้า Design ที่อยู่ใน Qt Creator ในการออกแบบง่าย ๆ ได้ครับ โดยให้ผู้อ่านคลิกไปที่แถบด้านขวามือ ตรงคำว่า "Design" ครับ ลองเล่น ๆ กันดูนะครับ ;)

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

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

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

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