Qt Quick & QML - Hello World

2011-01-09 18:44

Mit QML gibt es ja eine neue Oberflächentechnik von Nokia, mit der sich einfach und unkompliziert Oberflächen für Programme herstellen lassen sollen. Im Oktober letzten Jahres hatte ich ja schon kurz über QML geschrieben. QML zielt nicht nur auf Programmierer, sondern soll die Zusammenarbeit zwischen Designer und Programmierer verbessern. In diesem Blogbeitrag möchte ich nun eine kleine Anleitung geben, wie man QML als HelloWorld zum laufen bringt, um damit selber etwas rum spielen zu können. Hierfür habe ich den Qt Creator 2.0.1 verwendet, wie er mit 4.7.0 kam. Erst mit der 2.1 Version wird es wohl auch eine noch bessere RAD/Designer Unterstützung für QML geben, solange kann man rein textbasiert arbeiten. Aber zum Lernen von QML ist das imho sowieso besser, wer möchte kann aber auch in der aktuellen Version von QtCreator den QML Designer unter Plugins aktivieren. Allerdings ist dieses Feature zurzeit noch experimentell und kann die Stabilität des QtCreator beeinflussen...

Nach dem man ein neues Qt GUI-Projekt angelegt hat, muss man noch ein paar Änderungen vornehmen. Reine QML Projekte findet man unter Andere Projekte,  aber ich finde die Kombination mit C++ sowieso die größte Stärke von QML. Daher ein QT Projekt. Über Neu - Qt - QML Datei erhalten wir unsere helloworld.qml Datei:

import Qt 4.7
Rectangle {
    width: 640
    height: 480
}

Jetzt gilt es noch in der .pro Datei declarative bei den Qt Modulen hinzuzufügen. Und man muss für die QML Datei eine qmldir Datei anlegen, welche die Zeile "helloworld 1.0 helloworld.qml" enthält. Welches Modulname, Version und Datei ist. Als letztes wird der Oberfläche ein QDeclarativeView hinzugefügt, welcher mittels declarativeView.setSource( QUrl( "../qmlhelloworld/helloworld.qml")); noch die QML Datei läd. Als HelloWorld möchte ich einen Lichtschalter implementieren, welcher ein "Licht" an und ausschaltet:

tl_files/codenode/qt/qmlhelloworld.png

Dafür kombiniere ich mehrere Rectangle Elemente, so dass es eine Schaltfläche und ein Rechteck gibt, welches die Farbe verändert:

Rectangle {
    width: 200
    height: 400
    color: "grey"
    Rectangle{
        id:licht
        x: 10; y: 10
        width: 180
        height: 150
        color:"black"
    }
    Rectangle{
        id:schalter
        Text {
            x: 10; y: 3
            id: label
            text: "press for on"
        }
        x: 10; y: 170
        width: 180
        height: 20
        radius:10
    }
}

Elemente lassen sich in QML über ihre id direkt ansprechen. Das 2. Rectangle Element enthält hier noch ein Unterelement Text, zur Ausgabe eines Textes. Dieser ist das Label der Schaltfläche. Eine ausführliche Dokumentation vieler QML Elemente findet sich hier.

Zustände und Übergänge in QML


Logik lässt sich in QML mittels States und Transition Elementen abbilden, welches im wesentlichen einer Statemachine entspricht. Für das Beispiel werden nun die Zustände on und off benötigt, welche im Property states von "schalter" abgelegt werden:

states: [
        State {
            name: "on"
            PropertyChanges { target: label; text: "press for off" }
            PropertyChanges { target: licht; color:"white" }
        },
        State {
        name: "off"
        PropertyChanges { target: label; text: "press for on" }
        PropertyChanges { target: licht; color:"black" }
    } ]

Mit dem Element PropertyChanges lassen sich jeweils verschiedene Properties verändern. So kann man die Properties an den jeweiligen Zustand anpassen. Fehlen noch die Übergänge zwischen den Zuständen, es soll ja sich bei jedem Klick auf die Schaltfläche ändern:

transitions: [
            Transition {
                from: "on"; to: "off"
                ColorAnimation {  to: "black"; duration: 200 }
            },
            Transition {
                from: "off"; to: "on"
                ColorAnimation { from:"grey"; to: "white"; duration: 2000 }
            }
        ]

Die ColorAnimation bewirkt das die Farbe entsprechend wechselt, bei "on" wird aus schwarz erst ein grau welches dann ins weiss übergeht. Duration gibt die Zeitdauer der Animation in ms an. QML kennt viele verschiedene Animationen, und man kann diese mit einander kombinieren, sowie sie sequentiell oder parallel ablaufen lassen. So gibt es das Element NumberAnimation, mit dem sich jedes Property eines Elementes welches eine Zahl ist verändern bzw. animieren lässt. Zum Beispiel Position oder Größe.

Fehlt nur noch eine kleine Ergänzung, um den Schalter auch anklicken zu können, benötigt dieser eine MouseArea:

MouseArea{
            anchors.fill: parent
            onClicked:{schalter.state == 'on'? schalter.state='off':schalter.state = 'on'}
}

So, damit ist das kleine HelloWorld in QML fertig. Man kann das "Licht" nun ein- und ausschalten.

Hier kann man das HelloWorld für QML herunterladen.

Zurück