qt-quick-for-designers-1:qt_quick_and_javascript
This is an old revision of the document!
Qt Quick and Javascript
- Qt Quick lists elements with properties, and JavaScript allows you to express more complex behavior than static values.
Item { id: label1 x: 80 width: 100 height: 100 Image { source: { if(pressed) { return "img2.png"; } else { return "img1.png"; } } } }
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.
- 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"; } }
- We haven't covered
properties
orComponent.onCompleted
yet.
qt-quick-for-designers-1/qt_quick_and_javascript.1371872093.txt.gz · Last modified: 2013/06/22 03:34 by mithat