Definition von JavaScript-Ressourcen in QML

Die Programmlogik einer QML-Anwendung kann in JavaScript definiert werden. Der JavaScript-Code kann entweder inline in QML-Dokumenten definiert oder in separate JavaScript-Dateien (in QML als „ JavaScript Resources “ bezeichnet) ausgelagert werden.

In QML werden zwei verschiedene Arten von JavaScript-Ressourcen unterstützt: „Code-Behind“-Implementierungsdateien und gemeinsam genutzte (Bibliotheks-)Dateien. Beide Arten von JavaScript-Ressourcen können von anderen JavaScript-Ressourcen importiert oder in QML-Module eingebunden werden.

„Code-Behind“-Implementierungsressource

Die meisten in ein QML-Dokument importierten JavaScript-Dateien sind zustandsbehaftete Implementierungen für das QML-Dokument, das sie importiert. In diesen Fällen benötigt jede Instanz des im Dokument definierten QML-Objekttyps eine separate Kopie der JavaScript-Objekte und des Zustands, um sich korrekt zu verhalten.

Das Standardverhalten beim Importieren von JavaScript-Dateien besteht darin, für jede Instanz einer QML-Komponente eine eindeutige, isolierte Kopie bereitzustellen. Wenn diese JavaScript-Datei keine Ressourcen oder Module mit einer ` .import `-Anweisung importiert, wird ihr Code im selben Gültigkeitsbereich wie die Instanz der QML-Komponente ausgeführt und kann folglich auf die in dieser QML-Komponente deklarierten Objekte und Eigenschaften zugreifen und diese bearbeiten. Andernfalls verfügt sie über einen eigenen, eindeutigen Gültigkeitsbereich, und Objekte sowie Eigenschaften der QML-Komponente sollten bei Bedarf als Parameter an die Funktionen der JavaScript-Datei übergeben werden.

Es folgt ein Beispiel für eine „Code-behind“-Implementierungsressource:

// MyButton.qml
import QtQuick 2.0
import "my_button_impl.js" as Logic // A new instance of this JavaScript resource
                                    // is loaded for each instance of Button.qml.

Rectangle {
    id: rect
    width: 200
    height: 100
    color: "red"

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

// my_button_impl.js
var clickCount = 0;   // this state is separate for each instance of MyButton
function onClicked(button) {
    clickCount += 1;
    if ((clickCount % 5) == 0) {
        button.color = Qt.rgba(1,0,0,1);
    } else {
        button.color = Qt.rgba(0,1,0,1);
    }
}

Im Allgemeinen sollte einfache Logik inline in der QML-Datei definiert werden, komplexere Logik sollte jedoch aus Gründen der Wartbarkeit und Lesbarkeit in „Code-behind“-Implementierungsressourcen ausgelagert werden.

Gemeinsam genutzte JavaScript-Ressourcen (Bibliotheken)

Standardmäßig teilen sich aus QML importierte JavaScript-Dateien ihren Kontext mit der QML-Komponente. Das bedeutet, dass die JavaScript-Dateien Zugriff auf dieselben QML-Objekte haben und diese ändern können. Folglich muss jeder Import über eine eigene Kopie dieser Dateien verfügen.

Der vorherige Abschnitt behandelt zustandsbehaftete Importe von JavaScript-Dateien. Einige JavaScript-Dateien sind jedoch zustandslos und verhalten sich eher wie wiederverwendbare Bibliotheken, da sie eine Reihe von Hilfsfunktionen bereitstellen, die keine Abhängigkeiten von der Stelle benötigen, von der aus sie importiert wurden. Sie können erhebliche Mengen an Speicherplatz einsparen und die Instanziierung von QML-Komponenten beschleunigen, wenn Sie solche Bibliotheken mit einem speziellen Pragma kennzeichnen, wie im folgenden Beispiel gezeigt.

// factorial.js
.pragma library

var factorialCount = 0;

function factorial(a) {
    a = parseInt(a);

    // factorial recursion
    if (a > 0)
        return a * factorial(a - 1);

    // shared state
    factorialCount += 1;

    // recursion base-case.
    return 1;
}

function factorialCallCount() {
    return factorialCount;
}

Die Pragma-Deklaration muss vor jeglichem JavaScript-Code (mit Ausnahme von Kommentaren) stehen.

Beachten Sie, dass mehrere QML-Dokumente „ "factorial.js" “ importieren und die darin bereitgestellten Funktionen „factorial“ und „factorialCallCount“ aufrufen können. Der Zustand des JavaScript-Imports wird von allen QML-Dokumenten geteilt, die ihn importieren; daher kann der Rückgabewert der Funktion „factorialCallCount“ ungleich Null sein, wenn sie in einem QML-Dokument aufgerufen wird, das die Funktion „factorial“ nie aufruft.

Beispiel:

// Calculator.qml
import QtQuick 2.0
import "factorial.js" as FactorialCalculator // This JavaScript resource is only
                                             // ever loaded once by the engine,
                                             // even if multiple instances of
                                             // Calculator.qml are created.

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

Da sie gemeinsam genutzt werden, können .pragma-Bibliotheksdateien nicht direkt auf Instanzen oder Eigenschaften von QML-Komponenten zugreifen, obwohl QML-Werte als Funktionsparameter übergeben werden können.