はじめてのPySideとQtQuick/QMLアプリケーション
QMLは、プログラムのユーザーインターフェイスの見た目と動作の両方を記述するために設計された宣言型言語です。QMLでは、プロパティを持つオブジェクトのツリーでユーザーインターフェイスを定義します。このチュートリアルでは、PySideとQMLを使った簡単なHello Worldアプリケーションの作り方を紹介します。
PySide/QMLアプリケーションは、最低2つのファイルから構成されます。一つはユーザーインターフェースのＱＭＬ定義ファイル、そしてそのqmlファイルを読み込むpythonファイルです。当面、問題を避けるため、両方のファイルを同じフォルダに保存するようにします。
以下は簡単なQMLファイルの例です。 view.qml とします。
- import Qt 4.7
- Rectangle {
- width: 200
- height: 200
- color: "red"
- Text {
- text: "Hello World"
- anchors.centerIn: parent
- }
- }
まずQt 4.7のインポートから開始します。QtQuickはQt/PySideと異なるビルドスケジュールで進行しているので、近い将来、インポート文を import QtQuick 1.0 に変更しなければならないでしょう。今のところはこのままで動作します。
残りのコードは、HTMLやXMLファイルに慣れている人にとってはかなり易しいでしょう。基本的にはサイズ200 * 200の赤い四角形を作成し、その長方形の中で Hello World を表示するテキスト要素を追加します。コード anchors.centerIn：parent は、テキストをその直近の親の、相対的な中心に表示します。
では、このコードがPySide上でどうなるのか見てみましょう。 main.py とします。
- #!/usr/bin/python
- # -*- coding: utf-8 -*-
- import sys
- from PySide.QtCore import *
- from PySide.QtGui import *
- from PySide.QtDeclarative import QDeclarativeView
- # Create Qt application and the QDeclarative view
- view = QDeclarativeView()
- # Create an URL to the QML file
- # Set the QML file and show
- view.setSource(url)
- view.show()
- # Enter Qt main loop
- sys.exit(app.exec_())
PySideを理解していて、これまでのチュートリアルを辿ってきた方なら、以上のコードのほとんどはもうご存知でしょう。ここで唯一目新しいのは、QDeclarativeViewをインポートして、QDeclarativeViewオブジェクトのソースにQMLファイルのURLを設定することです。その後、Qtウィジェットと同じように、 QDeclarativeView.show() をコールします 。
ヒント： デスクトップ向けのプログラミングをしているなら、viewの表示の前に、 view.setResizeMode(QDeclarativeView.SizeRootObjectToView) の追加を検討する必要があるでしょう。このコードは、外側のQML長方形のサイズを、外側のウィンドウと一緒に変更するように強制します。
この例をじっくりと調べてみましょう。色やテキストの変更、要素へのプロパティの設定、長方形の色の半径の設定など、基本的なことを試してみてください。要素とそのプロパティは QML Elements [doc.qt.nokia.com]. で確認できます 。
