QML에서 자바스크립트 리소스 정의하기

QML 애플리케이션의 프로그램 로직은 JavaScript로 정의할 수 있습니다. JavaScript 코드는 QML 문서에서 인라인으로 정의하거나 JavaScript 파일(QML에서는 JavaScript Resources )로 분리하여 정의할 수 있습니다.

QML에서 지원되는 JavaScript 리소스에는 코드 비하인드 구현 파일과 공유(라이브러리) 파일이라는 두 가지 종류가 있습니다. 두 종류의 JavaScript 리소스 모두 다른 JavaScript 리소스에서 가져오거나 QML 모듈에 포함될 수 있습니다.

코드 비하인드 구현 리소스

QML 문서로 가져오는 대부분의 JavaScript 파일은 해당 파일을 가져오는 QML 문서의 상태 저장 구현입니다. 이러한 경우 문서에 정의된 QML 객체 유형의 각 인스턴스가 올바르게 작동하려면 JavaScript 객체 및 상태의 별도 복사본이 필요합니다.

JavaScript 파일을 가져올 때의 기본 동작은 각 QML 컴포넌트 인스턴스에 대해 고유하고 격리된 복사본을 제공하는 것입니다. 해당 JavaScript 파일이 .import 문을 사용하여 리소스나 모듈을 가져오지 않는 경우 해당 코드는 QML 컴포넌트 인스턴스와 동일한 범위에서 실행되므로 해당 QML 컴포넌트에 선언된 개체 및 속성에 액세스하고 조작할 수 있습니다. 그렇지 않으면 고유한 범위를 가지며, 필요한 경우 QML 컴포넌트의 객체와 속성을 자바스크립트 파일의 함수에 매개변수로 전달해야 합니다.

코드 비하인드 구현 리소스의 예는 다음과 같습니다:

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

일반적으로 간단한 로직은 QML 파일에 인라인으로 정의해야 하지만, 보다 복잡한 로직은 유지 관리 및 가독성을 위해 코드 비하인드 구현 리소스로 분리해야 합니다.

공유 JavaScript 리소스(라이브러리)

기본적으로 QML에서 가져온 JavaScript 파일은 QML 컴포넌트와 컨텍스트를 공유합니다. 즉, JavaScript 파일은 동일한 QML 객체에 액세스하고 이를 수정할 수 있습니다. 따라서 각 가져오기에는 이러한 파일의 고유한 복사본이 있어야 합니다.

이전 섹션에서는 JavaScript 파일의 상태 저장 임포트를 다루었습니다. 그러나 일부 JavaScript 파일은 상태 비저장형이며 재사용 가능한 라이브러리처럼 동작하는데, 이는 파일을 가져온 곳에서 아무것도 필요하지 않은 일련의 헬퍼 함수를 제공한다는 의미에서 그렇습니다. 다음 예시와 같이 이러한 라이브러리를 특수 프라그마로 표시하면 상당한 양의 메모리를 절약하고 QML 컴포넌트의 인스턴스화 속도를 높일 수 있습니다.

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

프라그마 선언은 주석을 제외한 모든 JavaScript 코드 앞에 표시되어야 합니다.

여러 QML 문서에서 "factorial.js" 을 가져와서 이 문서가 제공하는 팩토리얼 및 팩토리얼CallCount 함수를 호출할 수 있다는 점에 유의하세요. 자바스크립트 임포트의 상태는 임포트하는 QML 문서 전체에서 공유되므로 계승 함수를 호출하지 않는 QML 문서 내에서 호출하면 factorialCallCount 함수의 반환값이 0이 아닐 수 있습니다.

예를 들어

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

.pragma 라이브러리 파일은 공유되므로 QML 값을 함수 매개변수로 전달할 수는 있지만 QML 컴포넌트 인스턴스 객체나 속성에 직접 액세스할 수 없습니다.