Quick Start QML Programming/de

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

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 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 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 das grundlegende visuelle Element. Das Rectangle Element hat Eigenschaften zu Kontrolle des Aussehens und Position. import Qt 4.7

Rectangle{

id:simplebutton
color: "grey"
width: 150
height: 80
Text{
id: buttonLabel
text: "button label"
anchors.centerIn: parent;
anchors.verticalCenterOffset: –1
}

} Zunächst erlaubt import Qt 4.7 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, simplebutton, der an die id Eigentschaft gebunden ist. Rectangles 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 width und Höhe height des Rechteckes.

Das Textelement ist ein nichteditierbares Textfeld. Wir benennen dieses Textelement mit buttonLabel. Um den Textinhalt des Textfeldes zu setzen binden wir die text-Eigenschaft an einen Wert. Die Beschriftung ist im Rechteck Element enthalten und wird innerhalb des Elternelements zentriert in dem wir die Anker (anchors) Eigenschaft des Textelementes dem Elternelement zuweisen — simplebutton. Anker können auch an Anker anderer Elemente gebunden werden, um Layoutzuweisungen zu erleichtern.

Wir werden diesen Code als SimpleButton.qml 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 Mechanismus sehr ähnlich. Signale werden ausgelöst und damit verbundene Slots werden aufgerufen. Rectangle{

id:simplebutton
…

MouseArea{

id: buttonMouseArea

anchors.fill: parent //anchor all sides of the mouse area to the rectangle's anchors

//onClicked handles valid mouse button clicks
onClicked: console.log(buttonLabel.text + " clicked" )
}

} Wir fügen ein MouseArea Element in unseren simplebutton ein. MouseArea Elemente beschreiben den interaktiven Bereich in dem Mausbewegungen registriert werden. Bei unserem Knopf verankern wir den gesamten MouseArea Bereich an das Elternelement — simplebutton. Die anchors.fill Syntax ist ein Weg um an die fill Eigenschaft innerhalb einer Gruppe von Ankereigenschaften zu kommen. QML benutzt Ankerbasierte Layouts an Stellen wo Elemente an andere Elemente ankern können um robuste Layouts zu ermöglichen.

Die MouseArea hat viele Signalbehandlungsroutinen, die während einer Mausbewegung aufgerufen werden, die innerhalb der angegebenen MouseArea auftreten. Eine davon ist onClicked. Diese wird immer dann aufgerufen, wenn akzeptierter Mausknopf gedrückt wird; Linksklick ist dabei der Standard. Wir können mit der onClicked Routine Aktionen verbinden. In unserem Beispiel gibt console.log() einen Text aus bei jedem Klick in die MouseArea. Die Funktion console.log() ist eine nützliche Funktion um Funktionalitäten auszutesten oder einen Text auszugeben.

Der Code in SimpleButton.qml genügt um einen Knopf anzuzeigen und einen Text für jeden getätigten Klick auszugeben. Rectangle {

id:Button
…

property color buttonColor: "lightblue"

property color onHoverColor: "gold"
property color borderColor: "white"

signal buttonClick()

onButtonClick: {
console.log(buttonLabel.text + " clicked" )
}

MouseArea {

onClicked: buttonClick()
hoverEnabled: true
onEntered: parent.border.color = onHoverColor
onExited: parent.border.color = borderColor
}

// determines the color of the button by using the conditional operator

color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor

} Ein voll funktioneller Knopf ist in Button.qml. Der Codeschnipsel in diesem Artikel läßt Codestücke, die bereits erklärt wurden, weg.

Benutzereigene Eigenschaften werden durch die property typ name Syntax definiert. Im code wird die Eigenschaft buttonColor mit dem typ color deklariert und an den Wert "lightblue" gebunden. Die Eigenschaft buttonColor 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 Rectangle Geltungsbereich erreichbar zu machen. Es gibt grundlegende QML Typen wie int, string, real, so wie variant genannten Typ.

Durch die Anbindung der onEntered und onExited 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 buttonClicked() Signal wird in Button.qml durch das Platzieren des signal Schlüsselwortes vor dem Signalnamen deklariert. Alle Signale bekommen ihre Signalroutine automatisch, ihren Namen mit on beginnend, generiert. Als Ergebnis ist onButtonClick buttonClicks Signalroutine. onButtonClick wird dann eine auszuführende Aktion zugewiesen. In unserem Knopf Beispiel ruft die onClicked Signalroutine einfach onButtonClick auf, die einen Text anzeigt. Die onButtonClick Routine ermöglicht externen Objekten einfachen Zugrif auf den Mausbereich. Zum Beispiel können Gegenstände mehrere MouseArea Deklarationen besitzen und ein buttonClick Signal macht die Unterscheidung zwischen den verschiedenen MouseArea 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 Rectangle 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 FileMenu.qml. import Qt 4.7 import the main Qt QML module import "folderName" import the contents of the folder import "script.js" as Script import a Javascript file and name it as Script Die oben gezeigte Syntax zeigt, wie das import Schlüsselwort zu benutzen ist. Dieses ist nötig um JavaScript Dateien verwenden zu können, oder QML Dateien, die nicht im gleichen Verzeichnis liegen. Da Button.qml im selben Verzeichnis liegt wie FileMenu.qml, brauchen wir Button.qml nicht zu importieren um es verwenden zu können. Wir können direkt ein Button Element erstellen durch die Deklaration Button{}, ähnlich der Rectangle{} Deklaration. In FileMenu.qml:

Row{

anchors.centerIn: parent
spacing: parent.width/6

Button{

id: loadButton
buttonColor: "lightgrey"
label: "Load"
}
Button{
buttonColor: "grey"
id: saveButton
label: "Save"
}
Button{
id: exitButton
label: "Exit"
buttonColor: "darkgrey"

onButtonClick: Qt.quit()

}
}

In FileMenu.qml deklarieren wir drei Button Elemente. Sie werden innerhalb eines Row Elementes deklariert, einem Stellungregler, der seine Kinder vertikal ausrichtet. Die Button 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 exitButton genannte Knopf beendet und schließt das Anwendungsfenster beim Klicken. Beachten Sie, daß die Signalroutine onButtonClick in Button.qml zusätzlich zu onButtonClick Routine im exitButton aufgerufen wird.

p=. Menü

Die Row Deklaration wird in einem Rectangle 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: Copy, Paste und Select All.

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, 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 VisualItemModel deklariert. Das VisualItemModel Element beinhaltet Elemente, die bereits Ansichten besitzen, wie die Rectangle Elemente und importierte UI Elemente. Andere Modelltypen wie das ListModel Element brauchen einen Delegierer um ihre Daten anzuzeigen.

Wir deklarieren zwei visuelle Dinge in menuListModel, das FileMenu und das EditMenu. Wir passen die zwei Menüs an und zeigen sie an unter Verwendung von einem ListView. Die MenuBar.qml Datei beinhaltet die QML Deklarationen und ein einfaches edit Menü ist in der EditMenu.qml definiert. VisualItemModel {

id: menuListModel
FileMenu{
width: menuListView.width
height: menuBar.height
color: fileColor
}
EditMenu{
color: editColor
width: menuListView.width
height: menuBar.height
}

} Das ListView 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 menuListModel hat bereits sichtbare Dinge, deshalb brauchen wir keinen Delegierer zu deklarieren. ListView {

id: menuListView

//Anchors are set to react to window anchors

anchors.fill:parent
anchors.bottom: parent.bottom
width:parent.width
height: parent.height

//the model contains the data

model: menuListModel

//control the movement of the menu switching

snapMode: ListView.SnapOneItem
orientation: ListView.Horizontal
boundsBehavior: Flickable.StopAtBounds
flickDeceleration: 5000
highlightFollowsCurrentItem: true
highlightMoveDuration:240
highlightRangeMode: ListView.StrictlyEnforceRange

} Zusätzlich erbt ListView von Flickable, was die Liste auf Mausverschiebungen und andere Gesten reagieren lässt. Der letzte Teil des oberen Codes setzt Flickable Eigenschaften um das gewünschte schnellende Bewegen in unserer Ansicht zu bewirken. Speziell die Eigenschaft highlightMoveDuration verändert die Dauer des schnellenden Übergangs. Ein größerer highlightMoveDuration Wert resultiert in langsamerer Menü Umschaltung.

Die ListView 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 currentIndex ändert praktisch das hervorgehobene Element in der ListView. 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 fileButton Knopf ändert das aktuelle Menü zu Dateimenü, der index ist hier 0, da FileMenu als Erstes in der menuListModel deklariert ist. Ähnlich ändert der editButton das aktuelle Menü zu EditMenu wenn er geklickt wird.

Das labelList 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{

id: labelList
…
z: 1
Row{
anchors.centerIn: parent
spacing:40
Button{
label: "File"
id: fileButton
…
onButtonClick: menuListView.currentIndex = 0
}
Button{
id: editButton
label: "Edit"
…
onButtonClick: menuListView.currentIndex = 1
}
}

} 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