Examples: Use QML states for trafficlights

This allows checking the traffic ui states in the designer
and makes the redGoingGreen explicit also in the ui.

While this is more code for the states I think this is
nice pattern to improve maintainabilty.

The button.source property shows that QML states are not required and
that properties can directly use the state machine.

Change-Id: I38d74f8320e27bf1bc5e8125395d907fafa44723
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>

2 files changed, 53 insertions, 3 deletions

diff --git a/examples/scxml/trafficlight-common/Lights.ui.qml b/examples/scxml/trafficlight-common/Lights.ui.qml
index 31f1e3e..7fbadcc 100644
--- a/examples/scxml/trafficlight-common/Lights.ui.qml
+++ b/examples/scxml/trafficlight-common/Lights.ui.qml
@@ -75,16 +75,19 @@ Image {
 
         Image {
             id: redLight
+            opacity: 0.2
             source: "red.png"
         }
 
         Image {
             id: yellowLight
+            opacity: 0.2
             source: "yellow.png"
         }
 
         Image {
             id: greenLight
+            opacity: 0.2
             source: "green.png"
         }
     }
@@ -97,4 +100,42 @@ Image {
         anchors.margins: 20
         source: "pause.png"
     }
+    states: [
+        State {
+            name: "Red"
+
+            PropertyChanges {
+                target: redLight
+                opacity: 1
+            }
+        },
+        State {
+            name: "RedGoingGreen"
+            PropertyChanges {
+                target: redLight
+                opacity: 1
+            }
+
+            PropertyChanges {
+                target: yellowLight
+                opacity: 1
+            }
+        },
+        State {
+            name: "Yellow"
+
+            PropertyChanges {
+                target: yellowLight
+                opacity: 1
+            }
+        },
+        State {
+            name: "Green"
+
+            PropertyChanges {
+                target: greenLight
+                opacity: 1
+            }
+        }
+    ]
 }
diff --git a/examples/scxml/trafficlight-common/TrafficLight.qml b/examples/scxml/trafficlight-common/TrafficLight.qml
index 6d7c45c..d39e163 100644
--- a/examples/scxml/trafficlight-common/TrafficLight.qml
+++ b/examples/scxml/trafficlight-common/TrafficLight.qml
@@ -77,8 +77,17 @@ Window {
 
         button.source: stateMachine.working ? "pause.png" : "play.png"
 
-        redLight.opacity: stateMachine.red || stateMachine.redGoingGreen ? 1 : 0.2
-        yellowLight.opacity: stateMachine.yellow || stateMachine.blinking ? 1 : 0.2
-        greenLight.opacity: stateMachine.green ? 1 : 0.2
+        state: {
+            if (stateMachine.red)
+                return "Red"
+            if (stateMachine.redGoingGreen)
+                return "RedGoingGreen"
+            if (stateMachine.green)
+                return "Green"
+            if (stateMachine.yellow || stateMachine.blinking)
+                return "Yellow"
+            return ""
+        }
+
     }
 }