Open Source im professionellen Einsatz
Linux-Magazin 04/2011
448

Die Grenze beider Welten

Die Zeile 24 von Listing 4 ist in dreifacher Hinsicht interessant, denn sie schafft den Übergang zwischen den Welten von C++ und QML. Der Anfang »var stamp« instanziert eine Javascript-Variable. Er initialisiert sie mit der eingangs in Listing 1 implementierten Methode »addTimestamp()«. Das Objekt »labeler« stammt aber aus der in Zeile 5 instanzierten Hilfsklasse »PictureLabeler«. Der Parameter »capturedImagePath« ist eine Eigenschaft der Klasse »Camera« aus Zeile 9. Sie ist für QML erreichbar, weil die Headerdatei »QDeclarativeCamera« sie als »Q_PROPERTY« deklariert.

Die Fortführung der »TimePic«-App in Listing 5 beginnt mit dem Quit-Button (Zeilen 1 bis 4). Er ist das erste sichtbare Element innerhalb des obersten QML-Elements »timePicMain«, weil das folgende Rechteck-Element »mainArea« (Zeilen 6 bis 40) seine Unterkante an der Oberkante des Quit-Buttons ausrichten soll (Zeile 9). Die »mainArea« nutzen zwei weitere Rechtecke, »commandView« (Zeilen 11 bis 21) und »imageView« (Zeilen 23 bis 39). Sie erscheinen nie gleichzeitig: Sie würden sich gegenseitig verdecken.

Listing 5: Wechsel der
Programmzustände

01 Rectangle {
02   id: quitButton
03   [...]
04 }
05 
06 Rectangle {
07   id: mainArea
08   [...]
09   anchors.bottom: quitButton.top
10 
11   Rectangle {
12     id: commandView
13     [...]
14     MouseArea {
15       [...]
16       onClicked: {
17        console.log("Capturing a photo with ISO " + cameraObject.iso )
18        cameraObject.captureImage()
19       }
20     }
21   }
22 
23   Rectangle {
24     id: imageView
25     [...]
26     Image {
27       [...]
28       source: cameraObject.capturedImagePath
29     }
30     MouseArea {
31       anchors.fill: parent
32       hoverEnabled: true
33       acceptedButtons: Qt.LeftButton
35       onClicked: {
36         pageMode = pageModeCommandView;
37       }
38     }
39   }
40 }
41 
42 states: [
43   State {
44     name: "StateCommandView";
45     when: timePicMain.pageMode == pageModeCommandView;
46     PropertyChanges { target: commandView; opacity:1 }
47     PropertyChanges { target: imageView; opacity:0 }
48   },
49   State {
50     name: "StateImageView"
51     when: timePicMain.pageMode == pageModeImageView;
52     PropertyChanges { target: commandView; opacity:0 }
53     PropertyChanges { target: imageView; opacity:1 }
54   }
55 ]
56 
57 transitions:  [
58   Transition {
59     from: "StateCommandView"
60     to: "StateImageView"
61     reversible: false
62     SequentialAnimation {
63         NumberAnimation {
64           duration: 100
65           properties: "detailsOpacity,height"
66       }
67     [...]
68     }
69   },
70   Transition {
71     from: "StateImageView"
72     to: "StateCommandView"
73     reversible: false
74     [...]
75   }
76 ]

Wechselnde Zustände

Dieses Muster ist in QML häufig anzutreffen: ein Wechsel zwischen zwei Programmzuständen. Bei aktivem Zustand »StateCommandView« (Zeilen 43 bis 48), schießt die App über die Kamera das Foto, schreibt den Timestamp in die von der Klasse »Camera« gespeicherte Bilddatei und setzt bei Erfolg die Toplevel-Eigenschaft »pageMode« auf »pageModeImageView«.

Der Zustand »StateImageView« hingegen (Zeilen 49 bis 54) lädt über ein Image-Element das gespeicherte Bild in das Rechteck »imageView« (Zeilen 23 bis 40), dessen Name aus der Property »cameraObject.capturedImagePath« stammt. Die »onClicked()«-Methode (Zeilen 35 bis 37) des Mausbereichs dieses Rechtecks setzt den »pageMode« wieder auf »pageModeCommandView« zurück. Dann übernimmt statt des Rechtecks »imageView« wieder das Rechteck »commandView« das Ruder.

Der »States«-Abschnitt der Zeilen 42 bis 55 deklariert beide Zustände. Die »when«-Bedingungen legen fest, wann die QML State Machine den betreffenden Zustand aktiviert. Die Anweisungen »PropertyChanges« ändern die Sichtbarkeit der beiden Rechtecke über die Eigenschaft »opacity«. Genau so, wie der »States«-Abschnitt das Was und Wann der Elemente festlegt, deklariert der Abschnitt »Transitions« das Wie: Er blendet von einer Ansicht zur anderen über. Für weitere Spiele mit animierten Übergängen empfiehlt sich die Animations-Dokumentation [7].

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

comments powered by Disqus

Ausgabe 11/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Stellenmarkt

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.