Quick Start QML Programming/de
[toc align_right="yes" depth="2"]
Schnelleinstieg in die Programmierung mit QML
Willkommen in der Welt von QML, der deklarativen UI Sprache. In diesem Schnelleinstieg werden wir eine einfache Texteditor-Anwendung erstellen unter benutzung von QML. Nach dem Sie diese Anleitung durch haben, sollten Sie in der Lage sein eigene QML und Qt C++ Anwendungen zu erstellen.
QML um Benutzerschnittstellen zu erstellen
Die Anwendung, die wir erstellen, ist ein einfacher Texteditor der Text laden, speichern und ändern können wird. Diese Anleitung besteht aus zwei Teilen. Der erste Teil wird erklären wie das Design der Anwendung sowie ihr Verhalten mit Hilfe deklarativer Sprache in QML erstellt wird. Im zweiten Teil wird das Laden und Speichern von Dateien in Qt C++ implementiert. Mittels "Qts Meta-Object System":http://doc.qt.nokia.com/4.7/metaobjects.html können wir C++ Funktionen als Eigenschaften für QML Elemente zur Verfügung stellen. Unter Anwendung von QML und Qt C++ können wir effektiv die Benutzerschnittstelle von der Buisnesslogik trennen.
p=. Texteditor
Um das QML Beispiel auszuführen reicht es dem "qmlviewer":http://doc.qt.nokia.com/4.7/qmlviewer.html die QML Datei als Argument zu übergeben. Der C++ Teil dieser Anleitung setzt grundlegendes Wissen um den Qts Kompilierungsprozess voraus.
Knopf und Menü definieren
Grundelement - ein Knopf
Wir beginnen unseren Texteditor mit dem Erschaffen eines Knopfes. Funktionstechnisch hat ein Knopf einen Maussensitiven Bereich und eine Beschriftung. Knöpfe führen eine Aktion aus nach dem der Benutzer drauf geklickt hat.
In QML ist das "Rechteck":http://doc.qt.nokia.com/4.7/qml-rectangle.html das grundlegende visuelle Element. Das <code>Rectangle</code> Element hat Eigenschaften zu Kontrolle des Aussehens und Position.
import Qt 4.7
Rectangle{<br /> id:simplebutton<br /> color: "grey&quot;<br /> width: 150<br /> height: 80<br /> Text{<br /> id: buttonLabel<br /> text: "button label&quot;<br /> anchors.centerIn: parent;<br /> anchors.verticalCenterOffset: –1<br /> }<br />}
Zunächst erlaubt <code>import Qt 4.7</code> dem qmlviewer QML Elemente zu importieren, die wir später verwenden werden. Diese Zeile muß in jeder QML Datei vorhanden sein. Beachten Sie die Version der Qt Module, die im import mit angegeben wird.
Dieses einfache Rechteck hat einen eindeutigen Bezeichner, <code>simplebutton</code>, der an die <code>id</code> Eigentschaft gebunden ist. <code>Rectangle</code>s Elementeigenschaften werden an Werte gebunden, in dem die Eigenschaft gefolgt von Doppelpunkt und dem Wert notiert werden. Im Codeausschnitt wird die Farbe grau an die Farbeigenschaft des Rechteckes gebunden. Ähnlich verbinden wir die Breite <code>width</code> und Höhe <code>height</code> des Rechteckes.
Das "Textelement":http://doc.qt.nokia.com/4.7/qml-text.html ist ein nichteditierbares Textfeld. Wir benennen dieses Textelement mit <code>buttonLabel</code>. Um den Textinhalt des Textfeldes zu setzen binden wir die <code>text</code>-Eigenschaft an einen Wert. Die Beschriftung ist im Rechteck Element enthalten und wird innerhalb des Elternelements zentriert in dem wir die Anker (<code>anchors</code>) Eigenschaft des Textelementes dem Elternelement zuweisen — <code>simplebutton</code>. Anker können auch an Anker anderer Elemente gebunden werden, um Layoutzuweisungen zu erleichtern.
Wir werden diesen Code als <code>SimpleButton.qml</code> abspeichern. Das Ausführen von qmlviewer mit dieser Datei als Argument zeigt uns das graue Rechteck mit einer Textuellen Bezeichnung.
p=. Einfacher Knopf
Um die Klickfunktionalität des Knopfes zu implementieren, greifen wir auf QMLs Ereignisbehandlung zurück. QMLs Ereignisbehandlung ist dem "Qt's signal and slot":http://doc.qt.nokia.com/4.7/signalsandslots.html Mechanismus sehr ähnlich. Signale werden ausgelöst und damit verbundene Slots werden aufgerufen.
Rectangle{<br /> id:simplebutton<br /> …
MouseArea{<br /> id: buttonMouseArea
anchors.fill: parent //anchor all sides of the mouse area to the rectangle's anchors<br /> //onClicked handles valid mouse button clicks<br /> onClicked: console.log(buttonLabel.text + " clicked&quot; )<br /> }<br />}
Wir fügen ein "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html Element in unseren <code>simplebutton</code> ein. <code>MouseArea</code> Elemente beschreiben den interaktiven Bereich in dem Mausbewegungen registriert werden. Bei unserem Knopf verankern wir den gesamten "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html Bereich an das Elternelement — <code>simplebutton</code>. Die <code>anchors.fill</code> Syntax ist ein Weg um an die <code>fill</code> Eigenschaft innerhalb einer Gruppe von Ankereigenschaften zu kommen. QML benutzt "Ankerbasierte Layouts":http://doc.qt.nokia.com/4.7/qml-anchor-layout.html an Stellen wo Elemente an andere Elemente ankern können um robuste Layouts zu ermöglichen.
Die <code>MouseArea</code> hat viele Signalbehandlungsroutinen, die während einer Mausbewegung aufgerufen werden, die innerhalb der angegebenen <code>MouseArea</code> auftreten. Eine davon ist <code>onClicked</code>. Diese wird immer dann aufgerufen, wenn akzeptierter Mausknopf gedrückt wird; Linksklick ist dabei der Standard. Wir können mit der <code>onClicked</code> Routine Aktionen verbinden. In unserem Beispiel gibt <code>console.log()</code> einen Text aus bei jedem Klick in die MouseArea. Die Funktion <code>console.log()</code> ist eine nützliche Funktion um Funktionalitäten auszutesten oder einen Text auszugeben.
Der Code in <code>SimpleButton.qml</code> genügt um einen Knopf anzuzeigen und einen Text für jeden getätigten Klick auszugeben.
Rectangle {<br /> id:Button<br /> …
property color buttonColor: "lightblue&quot;<br /> property color onHoverColor: "gold&quot;<br /> property color borderColor: "white&quot;
signal buttonClick()<br /> onButtonClick: {<br /> console.log(buttonLabel.text + " clicked&quot; )<br /> }
MouseArea {<br /> onClicked: buttonClick()<br /> hoverEnabled: true<br /> onEntered: parent.border.color = onHoverColor<br /> onExited: parent.border.color = borderColor<br /> }
// determines the color of the button by using the conditional operator<br /> color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor<br />}
Ein voll funktioneller Knopf ist in <code>Button.qml</code>. Der Codeschnipsel in diesem Artikel läßt Codestücke, die bereits erklärt wurden, weg.
Benutzereigene Eigenschaften werden durch die <code>property typ name</code> Syntax definiert. Im code wird die Eigenschaft <code>buttonColor</code> mit dem typ <code>color</code> deklariert und an den Wert <code>"lightblue"</code> gebunden. Die Eigenschaft <code>buttonColor</code> wird später für eine bedingte Operation verwendet um die Füllfarbe des Knopfes zu bestimmen. Beachten Sie, daß eine Wert Zuweisung durch den = Operator möglich ist, zusätzlich zu der Wertbindung durch den : Operator. Benutzereigene Eigenschaften erlauben es interne Sachen von außerhalb des <code>Rectangle</code> Geltungsbereich erreichbar zu machen. Es gibt grundlegende "QML Typen":http://doc.qt.nokia.com/4.7/qdeclarativebasictypes.html wie <code>int</code>, <code>string</code>, <code>real</code>, so wie <code>variant</code> genannten Typ.
Durch die Anbindung der <code>onEntered</code> und <code>onExited</code> Signalroutinen an Farben, wird der Knopfrand gelb solange die Maus sich über dem Knopf befindet, und ändert sich wieder zurück sobald die Maus den Knopf verläßt.
Ein <code>buttonClicked()</code> Signal wird in <code>Button.qml</code> durch das Platzieren des <code>signal</code> Schlüsselwortes vor dem Signalnamen deklariert. Alle Signale bekommen ihre Signalroutine automatisch, ihren Namen mit <code>on</code> beginnend, generiert. Als Ergebnis ist <code>onButtonClick</code> <code>buttonClick</code>s Signalroutine. <code>onButtonClick</code> wird dann eine auszuführende Aktion zugewiesen. In unserem Knopf Beispiel ruft die <code>onClicked</code> Signalroutine einfach <code>onButtonClick</code> auf, die einen Text anzeigt. Die <code>onButtonClick</code> Routine ermöglicht externen Objekten einfachen Zugrif auf den Mausbereich. Zum Beispiel können Gegenstände mehrere <code>MouseArea</code> Deklarationen besitzen und ein <code>buttonClick</code> Signal macht die Unterscheidung zwischen den verschiedenen <code>MouseArea</code> Signalroutinen einfacher.
Wir haben nun das Basiswissen um Gegenstände in QML zu implementieren, die in der Lage sind Mausbewegungen zu behandeln. Wir haben eine Beschriftung innerhalb eines <code>Rectangle</code> Objektes erstellt, dessen Eigenschaften verändert und Verhalten implementiert, das auf Mausbewegungen reagiert. Die Idee Elemente innerhalb anderer Elemente zu erstellen wird in der Texteditor Anwendung durchgehend wiederholt.
Dieser Knopf ist unbrauchbar, es sei denn er wird als eine Komponente verwendet um eine Aktion auszuführen. Im nächsten Abschnitt werden wir bald ein Menü erstellen, das einige dieser Knöpfe enthält.
p=. Knopf
Eine Menüseite erstellen
Bisher haben wir das Erstellen von Elementen und das Zuweisen des Verhaltens in einer QML Datei besprochen. In diesem Abschnitt werden wir den Import anderer QML Elemente besprechen, und wie man bereits erstellte Komponenten wiederverwendet um andere Komponenten zu erstellen.
Menüs zeigen den Inhalt einer Liste. Jedes Element hat die Fähigkeit eine Aktion auszuführen. In QML können wir auf unterschiedliche Weisen ein Menü erstellen. Zunächst werden wir ein Menü erstellen, das Knöpfe enthält, die letztendlich unterschiedliche Aktionen durchführen. Der Menücode befindet sich in <code>FileMenu.qml</code>.
<br />import Qt 4.7 import the main Qt QML module<br />import "folderName&quot; import the contents of the folder<br />import "script.js&quot; as Script import a Javascript file and name it as Script<br />
Die oben gezeigte Syntax zeigt, wie das <code>import</code> Schlüsselwort zu benutzen ist. Dieses ist nötig um "JavaScript":https://developer.mozilla.org/de/JavaScript Dateien verwenden zu können, oder QML Dateien, die nicht im gleichen Verzeichnis liegen. Da <code>Button.qml</code> im selben Verzeichnis liegt wie <code>FileMenu.qml</code>, brauchen wir <code>Button.qml</code> nicht zu importieren um es verwenden zu können. Wir können direkt ein <code>Button</code> Element erstellen durch die Deklaration <code>Button{}</code>, ähnlich der <code>Rectangle{}</code> Deklaration.
<br />In FileMenu.qml:
Row{<br /> anchors.centerIn: parent<br /> spacing: parent.width/6
Button{<br /> id: loadButton<br /> buttonColor: "lightgrey&quot;<br /> label: "Load&quot;<br /> }<br /> Button{<br /> buttonColor: "grey&quot;<br /> id: saveButton<br /> label: "Save&quot;<br /> }<br /> Button{<br /> id: exitButton<br /> label: "Exit&quot;<br /> buttonColor: "darkgrey&quot;
onButtonClick: Qt.quit()<br /> }<br /> }<br />
In <code>FileMenu.qml</code> deklarieren wir drei <code>Button</code> Elemente. Sie werden innerhalb eines "Row":http://doc.qt.nokia.com/4.7/qml-row.html Elementes deklariert, einem Stellungregler, der seine Kinder vertikal ausrichtet. Die <code>Button</code> Deklaration ist in Button.qml abgelegt, was die gleiche Datei ist, die wir in vorherigem Abschnitt verwendet haben. Neue Eigenschaftbindungen können innerhalb der neu erstellten Knöpfe deklariert werden, was die bereits in der Button.qml gesetzte Eigenschaften überschreibt. Der <code>exitButton</code> genannte Knopf beendet und schließt das Anwendungsfenster beim Klicken. Beachten Sie, daß die Signalroutine <code>onButtonClick</code> in <code>Button.qml</code> zusätzlich zu <code>onButtonClick</code> Routine im <code>exitButton</code> aufgerufen wird.
p=. Menü
Die <code>Row</code> Deklaration wird in einem <code>Rectangle</code> vorgenommen, um einen rechteckigen Container für die Knopfzeile zu erstellen. Dieses zusätzliche Rechteck stellt eine indirekte Möglichkeit die Knopfzeile in einem Menü zu organisieren.
Die Deklaration des Bearbeitungsmenü ist zu diesem Zeitpunkt sehr ähnlich. Das Menü besitzt Knöpfe mit Beschriftungen: <code>Copy</code>, <code>Paste</code> und <code>Select All</code>.
p=. Bearbeitungsmenü
Mit unserem Wissen über das Importieren und Anpassen früher erstellter Komponenten ausgerüstet können wir nun diese Menüseiten kombinieren um eine Menüleiste zu erstellen, bestehend aus Knöpfen um das Menü auszuwählen, und schauen wie wir die Daten unter Verwendung von QML strukturieren können.
Menüleiste implementieren
Unsere Texteditor Anwendung wird einen Weg benötigen um Menüs in einer Menüzeile anzuzeigen. Die Menüleiste wird zwischen den verschiedenen Menüs umschalten und der Benutzer kann entscheiden welches Menü angezeigt werden soll. Das Menü Umschalten deutet darauf hin, daß wir mehr Struktur benötigen als simples anzeigen in einer Zeile. QML verwendet Modele und Ansichten um Daten zu strukturieren und sie anzuzeigen.
Datenmodelle und Ansichten benutzen
QML hat unterschiedliche "Datenansichten":http://doc.qt.nokia.com/4.7/qdeclarativemodels.html, die Datenmodelle anzeigen. Unsere Menüleiste wird Menüs in einer Liste anzeigen; mit Menünamen in der Kopfzeile. Die Liste der Menüs sind innerhalb von <code>VisualItemModel</code> deklariert. Das "VisualItemModel":http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html Element beinhaltet Elemente, die bereits Ansichten besitzen, wie die <code>Rectangle</code> Elemente und importierte UI Elemente. Andere Modelltypen wie das "ListModel":http://doc.qt.nokia.com/4.7/qml-listmodel.html Element brauchen einen Delegierer um ihre Daten anzuzeigen.
Wir deklarieren zwei visuelle Dinge in <code>menuListModel</code>, das <code>FileMenu</code> und das <code>EditMenu</code>. Wir passen die zwei Menüs an und zeigen sie an unter Verwendung von einem "ListView":http://doc.qt.nokia.com/4.7/qml-listview.html. Die <code>MenuBar.qml</code> Datei beinhaltet die QML Deklarationen und ein einfaches <code>edit</code> Menü ist in der <code>EditMenu.qml</code> definiert.
VisualItemModel {<br /> id: menuListModel<br /> FileMenu{<br /> width: menuListView.width<br /> height: menuBar.height<br /> color: fileColor<br /> }<br /> EditMenu{<br /> color: editColor<br /> width: menuListView.width<br /> height: menuBar.height<br /> }<br />}<br />
Das "ListView":http://doc.qt.nokia.com/4.7/qml-listview.html Element wird ein Model anzeigen, das vom Delegierer bereitgestellt wird. Der Delegierer kann die Modeldaten so deklarieren, daß sie in einem Zeilenelement angezeigt werden, oder in einem Gitternetz. Unser <code>menuListModel</code> hat bereits sichtbare Dinge, deshalb brauchen wir keinen Delegierer zu deklarieren.
ListView {<br /> id: menuListView
//Anchors are set to react to window anchors<br /> anchors.fill:parent<br /> anchors.bottom: parent.bottom<br /> width:parent.width<br /> height: parent.height
//the model contains the data<br /> model: menuListModel
//control the movement of the menu switching<br /> snapMode: ListView.SnapOneItem<br /> orientation: ListView.Horizontal<br /> boundsBehavior: Flickable.StopAtBounds<br /> flickDeceleration: 5000<br /> highlightFollowsCurrentItem: true<br /> highlightMoveDuration:240<br /> highlightRangeMode: ListView.StrictlyEnforceRange<br />}<br />
Zusätzlich erbt <code>ListView</code> von "Flickable":http://doc.qt.nokia.com/4.7/qml-flickable.html, was die Liste auf Mausverschiebungen und andere Gesten reagieren lässt. Der letzte Teil des oberen Codes setzt <code>Flickable</code> Eigenschaften um das gewünschte schnellende Bewegen in unserer Ansicht zu bewirken. Speziell die Eigenschaft <code>highlightMoveDuration</code> verändert die Dauer des schnellenden Übergangs. Ein größerer <code>highlightMoveDuration</code> Wert resultiert in langsamerer Menü Umschaltung.
Die <code>ListView</code> behält die Modeleinträge durch einen index und alle visuellen Elemente im Model sind durch diesen Index zugänglich, in der Reihenfolge ihrer Deklarierung. Das Ändern des <code>currentIndex</code> ändert praktisch das hervorgehobene Element in der <code>ListView</code>. Die Kopfzeile unseres Menüs führt diesen Effekt beispielhaft vor. Es gibt zwei Knöpfe in der Zeile, beide ändern durch Betätigen das aktuelle Menü. Der <code>fileButton</code> Knopf ändert das aktuelle Menü zu Dateimenü, der index ist hier 0, da <code>FileMenu</code> als Erstes in der <code>menuListModel</code> deklariert ist. Ähnlich ändert der <code>editButton</code> das aktuelle Menü zu <code>EditMenu</code> wenn er geklickt wird.
Das <code>labelList</code> Rechteck hat einen z-Wert von 1, kennzeichnend, daß es im Vordergrund der Menuleiste angezeigt wird. Elemente mit einem höheren z-Wert werden vor Elementen mit einem niedrigeren z-Wert angezeigt. Der Standard z-Wert ist 0.
Rectangle{<br /> id: labelList<br /> …<br /> z: 1<br /> Row{<br /> anchors.centerIn: parent<br /> spacing:40<br /> Button{<br /> label: "File&quot;<br /> id: fileButton<br /> …<br /> onButtonClick: menuListView.currentIndex = 0<br /> }<br /> Button{<br /> id: editButton<br /> label: "Edit&quot;<br /> …<br /> onButtonClick: menuListView.currentIndex = 1<br /> }<br /> }<br />}<br />
Die Menüleiste, die wir gerade erstellt haben, kann benutzt werden um Menüs zu erreichen oder durch das Klicken auf die oberen Menünamen. Umschalten der Menümasken ist intuitiv und schnell.
p=. Menüleiste
