QML中的JavaScript用法详解

http://www.2cto.com/kf/201412/364184.html

熟悉JavaScript的应该都了解Netscape公司，一代骄子虽然倒下了，却给后人留下了最为珍贵的产品和经验，在互联网发展史上享有举足轻重的地位，这里就不讲故事了，虽然很精彩，从未被磨灭。QML是对JavaScript的扩展，提供了JS主机环境，用法相似，但有些地方与浏览器/服务器端提供的JS主机环境（如Node.js）是不同的，用起来又有一些限制，下面列举一些常用的方法。

1、QML文件中的JS表达式

初始化时属性绑定——

// Property.qml

import QtQuick 2.0

Rectangle {
    id: colorButton
    width: 360 ; height: 360
    color: mouseArea.pressed ? "steelblue" : "lightsteelblue"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
}

使用Qt.binding()完成属性绑定——

// Property2.qml

import QtQuick 2.0

Rectangle {
    id: colorbutton
    width: 360 ; height: 360
    color: "yellow"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    Component.onCompleted: {
        color = Qt.binding(function() { return mouseArea.pressed ? "red" : "green" })
    }
}

信号处理中的JS表达式——

// Handler.qml

import QtQuick 2.0

Rectangle {
    id: button
    width: 200 ; height: 100 ; color: "lightblue"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onPressed: label.text = "I am Pressed!"
        onReleased: label.text = "Click Me!"
    }

    Text {
        id: label
        anchors.centerIn: parent
        text: "Press Me!"
    }
}

QML文件中函数的JS表达式——

// InlineFunction.qml

import QtQuick 2.0

Item {
    function factorial(a) {
        a = parseInt(a);
        if (a <= 0 )
            return 1 ;
        else
            return a * factorial(a - 1 );
    }

    MouseArea {
        anchors.fill: parent
        onClicked: console.log(factorial( 5 ))
    }
}

JS文件中函数的JS表达式——

// factorial.js

function factorial(a) {
    a = parseInt(a);
    if (a <= 0 )
        return 1 ;
    else
        return a * factorial(a - 1 );
}

// ExternalFunction.qml

import QtQuick 2.0
import "factorial.js" as MathFunctions

Item {
    MouseArea {
        anchors.fill: parent
        onClicked: console.log(MathFunctions.factorial( 10 ))
    }
}

使用connect()处理信号——

// Connecting.qml

import QtQuick 2.0
import "script.js" as MyScript

Item {
    id: item
    width: 360 ; height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    Component.onCompleted: {
        mouseArea.clicked.connect(MyScript.jsFunction)
    }
}

// script.js

function jsFunction() {
    console.log( "Called JavaScript function!" )
}

使用Component.onCompleted附加信号

// Startup.qml

import QtQuick 2.0

Rectangle {
    function startupFunction() {
        console.log( "startFunction called" )
    }

    Component.onCompleted: startupFunction()
}

2、QML文件中的JS资源

用独立的JS文件实现QML逻辑部分——

// MyButton.qml

import QtQuick 2.0
import "my_button_impl.js" as Logic

Rectangle {
    id: rect
    width: 360
    height: 360
    color: "red"

    MouseArea {
        id: mousearea
        anchors.fill: parent
        onClicked: Logic.onClicked(rect)
    }
}

// my_button_impl.js

var clickCount = 0 ;

function onClicked(btn) {
    clickCount += 1 ;
    if ((clickCount % 5 ) == 0 ) {
        btn.color = Qt.rgba( 1 , 0 , 0 , 1 );
    } else {
        btn.color = Qt.rgba( 0 , 1 , 0 , 1 );
    }
}

JS文件定义为共享库——

// Calculator.qml

import QtQuick 2.0
import "factorial.js" as FactorialCalculator

Text {
    width: 500
    height: 100
    property int input: 10
    text: "The factorial of " + input + " is: " + FactorialCalculator.factorial(input)
}

// factorial.js

.pragma library

var factorialCount = 0 ;

function factorial(a) {
    a = parseInt(a);
    if (a > 0 )
        return a * factorial(a - 1 );
    factorialCount += 1 ;
    return 1 ;
}

function factorialCallCount() {
    return factorialCount;
}

使用WorkerScript这个QML类型——

// MyWorkerScript.qml

import QtQuick 2.0

Rectangle {
    width: 300 ; height: 300

    Text {
        id: myText
        text: 'Click anywhere'
    }

    WorkerScript {
        id: myWorker
        source: "worker_script.js"
        onMessage: myText.text = messageObject.reply
    }

    MouseArea {
        anchors.fill: parent
        onClicked: myWorker.sendMessage({ 'x' : mouse.x, 'y' : mouse.y })
    }
}

// worker_script.js

WorkerScript.onMessage = function(message) {
    WorkerScript.sendMessage({ 'reply' : 'Mouse is at ' + message.x + ',' + message.y })
}

3、导入JS文件

在JS文件中导入另一个JS文件——

. import “filename.js” as Qualifier

在JS文件中导入QML模块——

. import TypeNamespace MajorVersion.MinorVersion as Qualifier

在JS文件中使用Qt.include()来导入另一个JS文件——

// Including.qml

import QtQuick 2.0
import "script2.js" as MyScript

Item {
    width: 360 ; height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            MyScript.showCalculations( 10 )
            console.log( "Call factorial() from QML:" , MyScript.factorial( 10 ))
        }
    }
}

// script2.js

Qt.include( "factorial2.js" )

function showCalculations(value) {
    console.log( "Call factorial() from script2.js:" , factorial(value));
}

// factorial2.js

function factorial(a) {
    a = parseInt(a);
    if (a <= 0 )
        return 1 ;
    else
        return a * factorial(a - 1 );
}