QML中のJavaScriptの使い方の詳細

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.onComppleted付加信号を使用します.

// 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;
}

Worket Scriptという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);
}