====== Qt Quick and Javascript ======
  * Qt Quick lists elements with properties, and JavaScript allows you to express more complex behavior than static values.
<code javascript>
Item {
  id: label1
  x: 80
  width: 100
  height: 100

  Image {
    source: {
      if(pressed) {
        return "img2.png";
      } else {
        return "img1.png";
      }
    }
  }
}</code>

===== Javascript functions =====
  * You can add a Javascript function anywhere in your Qt Quick file.
  * The following defines and uses a function that picks a number and references it in an array of states.
    * 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 randomNumber;
    do {
    	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]].