QML에서 JavaScript 리소스 정의

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

QML에서는 코드-비하인드(code-behind) 구현 파일과 공유(라이브러리) 파일, 이 두 가지 유형의 자바스크립트 리소스를 지원합니다. 두 유형의 자바스크립트 리소스 모두 다른 자바스크립트 리소스에 의해 임포트되거나 QML 모듈에 포함될 수 있습니다.

코드-비하인드 구현 리소스

QML 문서로 임포트되는 대부분의 자바스크립트 파일은 해당 QML 문서를 위한 상태 기반 구현체입니다. 이러한 경우, 문서에 정의된 QML 객체 유형의 각 인스턴스가 올바르게 동작하려면 자바스크립트 객체와 상태에 대한 별도의 복사본이 필요합니다.

자바스크립트 파일을 가져올 때의 기본 동작은 각 QML 컴포넌트 인스턴스에 대해 고유하고 격리된 사본을 제공하는 것입니다. 해당 자바스크립트 파일이 ` .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 파일 내에 인라인으로 정의해야 하지만, 더 복잡한 로직은 유지 관리성과 가독성을 위해 코드 비하인드 구현 리소스로 분리해야 합니다.

공유 자바스크립트 리소스(라이브러리)

기본적으로 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;
}

프래그마 선언은 주석을 제외한 모든 자바스크립트 코드보다 앞에 와야 합니다.

여러 QML 문서가 ` "factorial.js" `를 임포트하고, 이 문서가 제공하는 `factorial` 및 `factorialCallCount` 함수를 호출할 수 있다는 점에 유의하십시오. JavaScript 임포트의 상태는 이를 임포트한 QML 문서들 간에 공유되므로, `factorial` 함수를 한 번도 호출하지 않은 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 값은 함수 매개변수로 전달될 수 있습니다.