Tuesday, March 29, 2011

PySide and QML

It has been out there for a while but I haven't had time to try it out, PySide 1.0 with QML support!

This really gives you a über rapid app development environment. The power of Python combined with the awesomeness of the declarative language QML from the Qt framework.

Take a look and feel free to play with the example below:
from PySide import QtCore
from PySide import QtGui
from PySide import QtDeclarative

class Message(QtDeclarative.QDeclarativeItem):

    messageChanged = QtCore.Signal()

    def __init__(self, parent = None):
        QtDeclarative.QDeclarativeItem.__init__(self, parent)
        self._msg = u''

    def getMessage(self):
        return self._msg

    def setMessage(self, value):
        if self._msg != value:
            print "Setting message property to", value
            self._msg = value
            self.messageChanged.emit()
        else:
            print "Message property already set to", value

    message = QtCore.Property(unicode, getMessage, setMessage, notify=messageChanged)


def main():
    app = QtGui.QApplication([])

    QtDeclarative.qmlRegisterType(Message, "utils", 1, 0, "Message")

    win = QtDeclarative.QDeclarativeView()
    win.setSource("main.qml")
    win.setWindowTitle("Hello World")
    win.setResizeMode(QtDeclarative.QDeclarativeView.SizeRootObjectToView)

    win.show()
    app.exec_()

if __name__ == "__main__":
    main()
import Qt 4.7 // or QtQuick 1.0 if applicable

import utils 1.0

Rectangle {
    id: main

    signal clicked

    color: "black"
    width: 360; height: 360

    Message {
        id: msg

        message: "Click Me!"
        onMessageChanged: label.font.pixelSize = 40
    }

    Text {
        id: label

        anchors.centerIn: parent

        text: msg.message
        color: "white"
        font.pixelSize: 25

 Behavior on font.pixelSize {
            NumberAnimation { duration: 800; easing.type: Easing.OutBounce }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: msg.message = "Hello World"
        }
    }

}
For more information point your browser to http://www.pyside.org and download the package for your OS.

You'll also find useful information at http://developer.qt.nokia.com/wiki/Category:LanguageBindings::PySide

Happy hacking!

5 comments:

  1. You should use properties instead of getter and setter.

    ReplyDelete
  2. Well, I actually use properties, the Qt-way.

    message = QtCore.Property(unicode, getMessage, setMessage, notify=messageChanged)

    I need to specify the signal which will be emitted when the prop value changed. This is done with 'notify' as you can see above.

    ReplyDelete
  3. This code dont work here. Show the message:
    message = QtCore.Property(unicode, getMessage, setMessage, notify=messageChanged) AttributeError: 'module' object has no attribute 'Property'

    ReplyDelete
  4. This can be due to that you're using an old version of PySide, I got the same message when running with 'python-pyside-0.4.1-0ubuntu1'

    ReplyDelete
  5. hum, thanks. Now it works fine =].

    ReplyDelete