QtQuick : Helmo's rewrite - part 2

parse error

In the first chapter, we've seen how to make a very very basic application written in Python and QtQuick. In this second part, we'll go one step further and see how to share data between the application and the GUI.

We are going to add a _foo attribute to our HelloWorld class. To keep things simple, this attribute will be a simple unicode string.

The great thing with QML is that the internal engine can be automatically notified when the value of an attribute changes. To see the magic happen, we will need to create a specific Signal and make QML aware of it. To do so, we will declare foo as a Qt Property and thus, write a getter and a setter. The code for our HelloWorld class becomes :

from PyQt4.QtCore import pyqtSignal, pyqtProperty

class HelloWorld(QObject):

    fooModified = pyqtSignal()

    def __init__(self):
        QObject.__init__(self)
        self._foo = u'Hello'

    def getFoo(self):
        return self._foo

    def setFoo(self, newValue):
        if self._foo != newValue:
            self._foo = s
            self.fooModified.emit()

    foo = pyqtProperty(unicode, fget=getFoo, fset=setFoo, notify=fooModified)

See ? We tell QML that foo is a property with a getter (getFoo) and setter (setFoo). And also that the fooModified signal will be emitted whenever the value of _foo changes. The cool thing is that the view will be updated automatically with the new value ! Well, we still need to tell QML that the HelloWorld class exists. This is done via Contexts. Qt provides a QDeclarativeContext class to do so. Our Python file now looks like this :

# -*- coding: utf-8 -*-

import sys

from PyQt4.QtCore import QObject, QUrl, pyqtSignal, pyqtProperty
from PyQt4.QtGui import QApplication
from PyQt4.QtDeclarative import QDeclarativeView


class HelloWorld(QObject):

    fooModified = pyqtSignal()

    def __init__(self):
        QObject.__init__(self)
        self._foo = u"Hello"

    def getFoo(self):
        return self._foo

    def setFoo(self, newValue):
        if self._foo != newValue:
            self._foo = s
            self.fooModified.emit()

    foo = pyqtProperty(unicode, fget=getFoo, fset=setFoo, notify=fooModified)


app = QApplication(sys.argv)
h = HelloWorld()
v = QDeclarativeView()

context = v.rootContext()
context.setContextProperty('hello', h)

v.setSource(QUrl(__file__.replace('.py', '.qml')))
v.setResizeMode(QDeclarativeView.SizeRootObjectToView)
v.show()

app.exec_()

Okay, it's time to add some stuff to our QML file. We'll add a simple Text element to show the value of _foo. This value is available through the hello property (defined with context.setContextProperty('hello', h) :

import QtQuick 1.0

Rectangle {
    id: appWindow

    color: "#111"
    width: 1360
    height: 768
    Text {
        anchors.centerIn: parent
        font.pointSize: 32
        color: "white"
        text: hello.foo
    }
}

If everything's ok, you should see a darkgrey rectangle with a white centered label stating "Hello". That's it !

In the next part, we'll play a bit with a ListView, stay tuned !