User Tools

Site Tools


qt-quick-for-designers-1:qt_quick_and_javascript

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
qt-quick-for-designers-1:qt_quick_and_javascript [2013/06/22 03:42] – [Javascript functions] mithatqt-quick-for-designers-1:qt_quick_and_javascript [2013/07/06 22:53] (current) – [Importing a Javascript file] mithat
Line 22: Line 22:
   * You can add a Javascript function anywhere in your Qt Quick file.   * 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.   * The following defines and uses a function that picks a number and references it in an array of states.
-    * FIXME Neither ''properties'' nor ''Component.onCompleted'' have been covered yet.+    * FIXME ''Component.onCompleted'' hasn'been covered yet. 
 +{{youtube>04iD3JiZhkA?small}}
 <file javascript javascript-example.qml> <file javascript javascript-example.qml>
 import QtQuick 1.0 import QtQuick 1.0
Line 146: Line 147:
 }</file> }</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]].
  
qt-quick-for-designers-1/qt_quick_and_javascript.1371872520.txt.gz · Last modified: 2013/06/22 03:42 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki