QtQuick : Helmo's rewrite - part 1

parse error

Qt logo

GUI is very important for a mediacenter. It has to be pleasant, easy to understand, easy to use and customizable. When I started Helmo a few monthes ago, QML was already promising but maybe not mature enough. So I decided to stick with QWidget, and to give customization capabilities through Qt StyleSheets (which is still better than nothing). The results are great, but it lacks transitions effects, capability to change the layout of items, etc.

So, I decided to take a look at QML again, and to actually give it a try. See where it could lead me. I started on monday, and I decided to write a few blog posts about it. So, here it is : the first one of a (hopefully) long season.

In this first chapter, I'll just explain some basic stuff. I need a starting point, right ?

Following the QtQuick doc, I started with a new Python file (HelloWorld.py) which is very simple :

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

import sys

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


class HelloWorld(QObject):
    def __init__(self):
        QObject.__init__(self)


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

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

app.exec_()

As you can see, we first need to import some stuff : the sys module and the QObject, QUrl, QApplication and QDeclarative classes. This last one is a view that is able to display a Qt Declarative user interface. This is THE widget !

We then create a new HelloWorld class. It's empty for now, but it will get some stuff later.

The interesting stuff comes just after : we build a new QApplication, a new HelloWorld class instance and a QDeclarativeView instance. The view gets a new source, which is a QML file (HelloWorld.qml). This view will automatically resize its root item.

Finally, we display the view and run the app.

That's it. The Python file is ready to go. Let's head to the funny thing : the QML file.

A QML file has to start with this line :

import QtQuick 1.0

which is pretty easy to understand : we want to do some QtQuick stuff in here.

QtQuick provides a great collection of technologies to build user interface and much more. Among them is a very basic (but powerful) element : Rectangle. As you may have guess, the Rectangle element provides a simple rectangle that can be filled and that can have a border. We are going to draw one. Here is the HelloWorld.qml file :

import QtQuick 1.0

Rectangle {
    id: appWindow

    color: "#111111"
    height: 600
    width: 800        
}

Now, if you run your Python file (python HelloWorld.py), you should get a 800x600 darkgrey rectangle in a window. That's all. Try to resize the window : the Rectangle also resizes, thanks to the view's resizeMode property.

See ? Pretty easy, isn't it ? Well, the next parts will be much more interesting, I promise !