Neues in Qt 4.7: Qt Quick & QML

2010-09-08 14:58


Mit Qt 4.7 kommt wieder einiges neues auf uns Qt Programmierer zu. Die größte Neuerung in Qt 4.7 ist wohl QtQuick, welches der Name für die neuen UI Fähigkeiten von Qt mit QML ist. QML ist eine deklarative, an Javascript angelehnte Sprache für das erstellen und animieren von Oberflächen. Weitere neue Dinge in Qt 4.7 sind einige neue Klassen für Qt Network und Multimedia und einige Erweiterungen für bestehende Klassen. Im Vergleich zu Qt 4.6 bringt 4.7 also weniger neue Klassen mit sich, dafür aber die komplett neuen Eigenschaften von Qt Quick. Einen genauen Überblick über die Neuerungen zu Qt 4.7 kann man sich auch hier verschaffen, ich werde mich hier nun auf QtQuick/QML beschränken.

Qt Quick + QML


Man hört häufig sehr viel positives über Qt Quick und QML, aber viele die ich getroffen habe, wussten ähnlich wie ich, relativ wenig über QML. Man kannte diverse Beispiele, aber ich habe lange zum Beispiel kein gutes Tutorial finden können, um zu verstehen, was Qt Quick und QML denn nun genau ist. In der Dokumentation von Qt Quick und QML bei Nokia ist aber genau dies vorhanden, man muss nur ein wenig neugierig klicken, schon ist man da. Nokia hat QML vorallem dafür entwickelt, um die Oberflächengestaltung aus der eigentlichen Programmierung zu lösen, und somit Qt auch besser für Designer zugänglich zu machen. Zwar lässt sich QML ganz ohne C++/Qt auch nutzen, aber eine Anbindung an ein C++/Qt Backend über das QtDeclarative Modul ist ebenso leicht umgesetzt. Mit QtQuick kommt ebenfalls eine Integration in den QtCreator, so das man QML Frontends auch im Designer erstellen kann.

QML Basics


QML ist als Erweiterung von JavaScript zu sehen, und wird ähnlich wie CSS in Text dateien abgelegt.
Ein einfaches Beispiel könnte so aussehen:

import Qt 4.7

Rectangle {
width: 200
height: 200
color: "blue"
}

Wobei Rectangle ein QML Object wäre, mit den Attributen width, height und color. Das Newline trennt in QML die Properties, es kann auch ein Semikolon dafür verwendet werden. Jedem der schon mal CSS oder ähnliche Datenformate als Entwickler bearbeitet hat, dürfte es also leicht fallen, QML zu lesen und zu verstehen.
QML lässt sich damit auch in 4 Bereiche aufteilen:
  • Basic Types
  • Komponenten
  • Zustände/States
  • Übergänge/Transitions
Mit Basic Types ist nichts anderes als die oben schon gezeigten einfachen Objekte gemeint. Also im Grunde einfache Datenstrukturen. Hier lassen sich übrigens auch Signals einbinden, und wenn man diese Objekte wieder verwenden will, dann kann man sie als Komponente betrachten. So ist eine Komponente im QML HelloWorld Tutorial ein Rechteck, welches als Colorpicker dient. Etwas verwirrend finde ich das der Komponentenname hierbei durch die QML Datei festgelegt wird, man muss eine QML Komponente also in eine andere QML Datei auslagern.
Eine Komponente oder QML Objekt kann verschiedene Zustände haben, zwischen diesen kann man wiederum verschiedene Übergänge definieren.  Dies wird in QML innerhalb des Objektes definiert, als state bzw. transition Property. QML Oberflächen lassen sich also aus verschiedenen Komponenten und QML Typen zusammenbauen, und mit Hilfe von Transitions animieren.

QML und C++


Innerhalb von QML kann man schon komplette Applikationen erstellen, welche dann in JavaScript ablaufen. Eine Verknüpfung der Oberfläche mit einem Qt Backend ist über das Modul QtDeclarative möglich. Dafür muss man einfach nur eine Instanz der QtDeclarativeEngine erzeugen, welches auch durch das Erzeugen eines QDeclarativeViews übernommen werden kann. Dieser kann QML Dateien laden und anzeigen. QDeclarativeView ist zu QGraphicsView kompatibel, so das hier schon vorhandene Programme auch über QML erweiterbar sind.
Ebenso ist es möglich, von QML aus, C++ Methoden aufzurufen, diese müssen aber mit Q_INVOCABLE gekennzeichnet werden. Als Rückgabetypen für Q_INCOBALE Methoden sind bool, (unsigned) int, float, double, qreal und einige Qt Datentypen erlaubt. Auch können aus C++ Javascript Funktionen in QML aufgerufen werden.
Auch lassen sich zum Teil QWidgets oder QGraphicsItem Klassen in QML einbinden, und ebenso QML mit C++ erweitern.

Fazit


Mit Qt 4.7 passiert etwas sehr spannendes in Qt: es gibt nun eine völlig neue Möglichkeit, UIs zu gestalten. Mit QML steht ein sehr mächtiges Framework zur Verfügung. Mit der neuen QtCreator Version wird man auch QML sehr einfach ausprobieren können, und die Designerintegration macht es sehr leicht zugänglich.  Hinzu kommt die einfache Erweiterbarkeit mit C++, und die Möglichkeit bestehende Qt Applikationen mit QML zu bereichern. Als Qt Entwickler sollte man sich QML auf jedenfall ansehen. Nokia hat wohl in Zukunft noch mit QML noch viel vor, was möglich ist zeigen auch diese QML Beispiele.


Zurück