Gabriel

Tutorial: Qt, QML und App Entwicklung – Models und ListView

Seit unserem letzten Tutorial ist sehr viel mehr Zeit ins Land gegangen als ich ursprünglich geplant hatte. Auf der anderen Seite ist mir erst später klar geworden wie aufwendig die Übung war - zumindest wenn man wirklich beide Varianten implementieren wollte. Dabei habe ich mir auch überlegt den eigentlichen Plan zu kippen und heute die ListView einzuführen anstelle des optischen Tunings. Keine Angst, die Optik machen wir vielleicht auch noch ausführlich. Wie dem auch sei, heute geht es weiter und zunächst werden wir die Lösung für die "Hausaufgabe" angehen. Nach dem Klick gehts los. Wie ein Settings-Menü entsteht
Bevor wir richtig loslegen ein Hinweis: Der QtCreator, bzw. das gesamte SDK hat ein Update erfahren, welches es sich zu beziehen wirklich lohnt, vor allem in Hinblick auf Harmattan soll eine Menge verbessert worden sein. Auch wer sein Hausaufgabe nicht gemacht hat, sollte sich den Teil durchlesen - es gibt neues zu lernen. :D Wie oben schon geschrieben entpuppte sich die Hausaufgabe etwas aufwendiger als zunächst angenommen. Jedenfalls dürfte der Anfang noch völlig einfach gewesen sein. Zunächst brachen wir wie gewohnt einen Button, nämlich den der uns zum Einstellungs-Menü bringt. Hier kann man eigentlich wunderbar schnell mit copy&paste arbeiten, schnell den Reset-Button genommen, editiert und die Sache passt: Button { ... onButtonClicked: { container.state = "settings_dialog" } Wirklich Interessant ist eigentlich nur, was bei einem Klick auf einen Button (der übrigens wiedermal unser angefertigtes Element ist) passieren soll. Hier wird, wie wir dank der letzten Sitzung erkennen können, ein State aufgerufen, nämlich jener mit dem Namen "settings_dialog". Damit dieser Aufruf später auch ohne Probleme funktioniert, werden wir ihn jetzt erstmal erstellen. Dazu wechseln wir in den oberen Bereich unserer main.qml wo wir schon unser Reset-Menü als state beschrieben haben und ergänzen die states Eigentschaft in eckigen Klammern bis sie so aussieht: states: Auch hier reicht fast copy&paste aus. Einige Details müssen angepasst werden, außerdem braucht es nach der schließenden } Klammer des ersten State-Elements ein kleines Komma, damit der zweite State auch akzeptiert wird. Wer nicht selbst darauf gekommen ist, dem hat/hätte die QtCreator Hilfe mal wieder wunderbar helfen können. ;) Soweit so gut, was jetzt noch fehlt ist das Dialog-Fenster an und für sich. Dazu erstellen wir uns zunächst wie schon vorher (Rechtsklick-Hinzufügen) eine neue QML Datei und benennen sie - bei mir ist es ein "Dialog2" geworden - leider nicht sonderlich clever, später sollten eure Elemente möglichst Namen tragen mit denen ihr sie auch "wieder erkennt" bzw. die ihre Funktion ordentlich beschreiben. Die extra QML Datei erstellen wir, da wir es ja als QtComponent umsetzen wollten, wie bereits mehrfach erwähnt ist die Arbeitsweise für Harmattan ganz ähnlich. Den Dialog selbst können wir zunächst an unserem Reset-Dialog orientieren. Wichtig ist eigentlich nur den x-Wert so zu ändern, dass das Fenster wieder "am Rand anliegt". Die eigentlich Kür dürfte jetzt gekommen sein, wer Schwierigkeit 1 schaffen wollte musste einen Weg finden die Schritte 5 - 10 darzustellen. Die mit Sicherheit schnellste Variante ist folgende: 5 Buttons! Genau...ganz schlicht und einfach hab ich 5 Buttons nebeneinander angeordnet und mit den Schritten 10,20,30,40,50 beschriftet. Dabei bietet sich eine wunderbare Möglichkeit zum einen das Ankern zu üben, auf der anderen Seite kann ich euch so auch noch einen sehr schönen Kniff zeigen - selbsterstellte properties/Eigenschaften. Ihr habt in QML nämlich die Möglichkeit Eigenschaften selbst zu erstellen, egal welcher Typ und welcher Wert! Also lasst uns gleich zu Beginn des neuen Dialogs folgende Zeile schreiben: property int buttontopMargin: 275 Was die Macht? Ganz einfach: zunächst sagen wir QML es soll ein property erstellen, anschließend geben wir den Typen an, hier ein Integer - also ein runder Zahlenwert, gefolgt wird das Ganze von seinem Namen und nach dem Doppelpunkt folgt sein Wert. Im übrigen ist es nicht notwendig einen Wert zu vergeben - vielleicht soll eure Eigenschaft ja erst später einen annehmen. Bei den Typen habt ihr ebenfalls eine große Auswahl zur Hand, in der Hilfe könnt ihr euch unter "QML Basic Types" einen Überblick verschaffen. Wer sich nun fragt wozu wir dieses Property festgelegt haben - damit können wir ganz bequem die fünf Buttons positionieren. Denn wenn man als  Wert für deren topMargin den Wert buttontopMargin angibt landen alle Buttons auf einer Höhe von 275 Pixeln, der Vorteil besteht darin, dass wir zukünftig nur noch den Wert oben, also 1x ändern müssen, aber alle Buttons verrückt werden. Andere Lösungen sind auch denkbar, z.B. mit Ankern, oder zusammengefasst als Item, oder was euch sonst noch einfällt - hier geht es vor allem um das Beispiel. Der Rest ist keine große Zauberei mehr, erstellt einfach die fünf Buttons und bringt sie in Reih und Glied. Was nun noch fehlt ist, dass die Buttons auch wirklich die Zahl unseres Hauptfensters ändert. So sieht meine Lösung im onClicked Bereich dafür aus: onButtonClicked: {zahl.text = set50.text} Zur Erklärung, set50 ist der Name des Buttons - der Text des Buttons ist ja bekanntlich "50" und zahl.text ist als property alias umgesetzt. Wer sich daran nicht mehr erinnern kann sollte einfach nochmal die Lektion zu den QtComponents ansehen. Den gesamten Code findet ihr auch wie immer im Anhang, also könnt Ihr d