Differences

This shows you the differences between two versions of the page.

--- qt-quick-for-designers-1:qt_quick_and_javascript [2013/06/22 03:27] – created mithat
+++ qt-quick-for-designers-1:qt_quick_and_javascript [2013/07/06 22:53] (current) – [Importing a Javascript file] mithat
@@ Line 18: / Line 18: @@
   }
 }</code>
+===== Javascript functions =====
   * You can add a Javascript function anywhere in your Qt Quick file.
-  * This is a simple function that picks a number and references it in an array of states.
+  * The following defines and uses a function that picks a number and references it in an array of states.
-<code javascript>
+    * FIXME ''Component.onCompleted'' hasn't been covered yet.
+{{youtube>04iD3JiZhkA?small}}
+<file javascript javascript-example.qml>
+import QtQuick 1.0
+Item {
+    id: myItem
+    width: 400
+    height: 400
+    property int currentStateNumber: 0
+    function randomState()
+    {
+          var statesArray = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
+          var randomNumber;
+          do {
+              randomNumber = Math.floor(Math.random()*statesArray.length);
+          } while (randomNumber == currentStateNumber);
+          currentStateNumber = randomNumber;
+          return statesArray[randomNumber];
+    }
+    Image {
+        source: "images/background.png"
+    }
+    Image {
+        id: spaceship
+        x: -200
+        y: 50
+        source: "images/spaceship.png"
+    }
+    Image {
+        id: button
+        source: "images/button.png"
+        anchors.horizontalCenter: myItem.horizontalCenter
+        anchors.bottom: myItem.bottom
+        anchors.bottomMargin: 20
+        Text {
+            id: label
+            text: "PRESS"
+            color: "white"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 6
+        }
+        MouseArea {
+           anchors.fill: parent
+           onClicked: {
+               myItem.state = randomState();
+           }
+       }
+    }
+   states: [
+         State {
+             name: "bottomRight"
+             PropertyChanges {
+                 target: spaceship
+                 x: 250
+                 y: 200
+             }
+         },
+         State {
+             name: "bottomLeft"
+             PropertyChanges {
+                 target: spaceship
+                 x: 100
+                 y: 200
+             }
+         },
+         State {
+             name: "topLeft"
+             PropertyChanges {
+                 target: spaceship
+                 x: 10
+                 y: 50
+             }
+         },
+         State {
+             name: "topRight"
+             PropertyChanges {
+                 target: spaceship
+                 x: 100
+                 y: 50
+             }
+         }
+    ]
+    transitions: [
+         Transition {
+             NumberAnimation {
+                 properties: "x,y"
+                 duration: 500
+                 easing.type: Easing.OutExpo
+             }
+         },
+         Transition {
+             from: ""
+             to: "topLeft"
+             SequentialAnimation{
+                PauseAnimation {
+                     duration: 1000
+                }
+                NumberAnimation {
+                    properties: "x,y"
+                    duration: 500
+                    easing.type: Easing.OutExpo
+                }
+             }
+         }
+    ]
+    Component.onCompleted:{
+        myItem.state = "topLeft";
+    }
+}</file>
+===== Importing a Javascript file =====
+* If you want to organize your code, you can import a js file to Qt Quick:
+<file javascript randomFile.js>
 function randomState()
 {
-  var statesArray = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+	var statesArray = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
-  var randomNumber = Math.floor(Math.random()*statesArray.length);
+    var randomNumber;
-  return statesArray[randomNumber];
+    do {
-}</code>
+    	randomNumber = Math.floor(Math.random()*statesArray.length);
+    } while (randomNumber == currentStateNumber);
+    currentStateNumber = randomNumber;
+    return statesArray[randomNumber];
+}
+</file>
+<file javascript importing-javascript.qml>
+import QtQuick 1.0
+import "randomFile.js" as RandomFunction
+Item {
+    id: myItem
+    width: 400
+    height: 400
+    property int currentStateNumber: 0
+    Image {
+        source: "images/background.png"
+    }
+    Image {
+        id: spaceship
+        x: -200
+        y: 50
+        source: "images/spaceship.png"
+    }
+    Image {
+        id: button
+        source: "images/button.png"
+        anchors.horizontalCenter: myItem.horizontalCenter
+        anchors.bottom: myItem.bottom
+        anchors.bottomMargin: 20
+        Text {
+            id: label
+            text: "PRESS"
+            color: "white"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 6
+        }
+        MouseArea {
+           anchors.fill: parent
+           onClicked: {
+               myItem.state = RandomFunction.randomState();
+           }
+       }
+    }
+   states: [
+         State {
+             name: "bottomRight"
+             PropertyChanges {
+                 target: spaceship
+                 x: 250
+                 y: 200
+             }
+         },
+         State {
+             name: "bottomLeft"
+             PropertyChanges {
+                 target: spaceship
+                 x: 100
+                 y: 200
+             }
+         },
+         State {
+             name: "topLeft"
+             PropertyChanges {
+                 target: spaceship
+                 x: 10
+                 y: 50
+             }
+         },
+         State {
+             name: "topRight"
+             PropertyChanges {
+                 target: spaceship
+                 x: 100
+                 y: 50
+             }
+         }
+    ]
+    transitions: [
+         Transition {
+             NumberAnimation {
+                 properties: "x,y"
+                 duration: 500
+                 easing.type: Easing.OutExpo
+             }
+         },
+         Transition {
+             from: ""
+             to: "topLeft"
+             SequentialAnimation{
+                PauseAnimation {
+                     duration: 1000
+                }
+                NumberAnimation {
+                    properties: "x,y"
+                    duration: 500
+                    easing.type: Easing.OutExpo
+                }
+             }
+         }
+    ]
+    Component.onCompleted:{
+        myItem.state = "topLeft";
+    }
+}</file>
+--------------------------------------------------------------
+====== Resources ======
+  * {{:qt-quick-for-designers-1:images.zip|}}
+  * All source code is subject to this [[copyright header|copyright]].