QML에서 자바스크립트 리소스 가져오기

자바스크립트리소스는 QML 문서 및 기타 자바스크립트 리소스를 통해 가져올 수 있습니다. JavaScript 리소스는 상대 URL 또는 절대 URL을 통해 가져올 수 있습니다. 상대 URL의 경우 가져오기를 포함하는 QML 문서 또는 JavaScript 리소스의 위치를 기준으로 위치가 확인됩니다. 스크립트 파일에 액세스할 수 없는 경우 오류가 발생합니다. 네트워크 리소스에서 JavaScript를 가져와야 하는 경우 스크립트가 다운로드될 때까지 컴포넌트의 status 이 "로드 중"으로 설정됩니다.

자바스크립트 리소스는 QML 모듈 및 기타 자바스크립트 리소스를 가져올 수도 있습니다. JavaScript 리소스 내의 가져오기 문 구문은 아래에 자세히 설명되어 있는 QML 문서 내의 가져오기 문과 약간 다릅니다.

QML 문서에서 자바스크립트 리소스 가져오기

QML 문서는 다음 구문을 사용하여 JavaScript 리소스를 가져올 수 있습니다:

import "ResourceURL" as Qualifier

예를 들어

import "jsfile.js" as Logic

가져온 JavaScript 리소스는 항상 "as" 키워드를 사용하여 한정합니다. JavaScript 리소스의 한정자는 대문자로 시작해야 하며 고유해야 하므로 한정자와 JavaScript 파일 간에는 항상 일대일 매핑이 이루어집니다. (또한 한정자는 Date 및 Math 과 같은 기본 제공 JavaScript 객체와 동일한 이름을 지정할 수 없습니다.)

가져온 JavaScript 파일에 정의된 함수는 "Qualifier.functionName(params)" 구문을 통해 가져오는 QML 문서에 정의된 객체에서 사용할 수 있습니다. JavaScript 리소스의 함수는 일반 JavaScript 유형뿐만 아니라 모든 QML 값 유형 또는 객체 유형이 될 수 있는 매개변수를 사용할 수 있습니다. QML에서 이러한 함수를 호출할 때 일반 데이터 유형 변환 규칙이 매개변수와 반환값에 적용됩니다.

자바스크립트 리소스 내 임포트

QtQuick 2.0 에서 JavaScript 리소스가 표준 QML 가져오기 구문의 변형(앞서 설명한 모든 규칙 및 자격이 적용되는 경우)을 사용하여 다른 JavaScript 리소스와 QML 유형 네임스페이스를 가져올 수 있도록 지원이 추가되었습니다.

JavaScript 리소스가 QtQuick 2.0 에서 이러한 방식으로 다른 스크립트 또는 QML 모듈을 가져올 수 있기 때문에 몇 가지 추가 의미가 정의되어 있습니다:

• 임포트가 있는 스크립트는 임포트를 가져온 QML 문서에서 임포트를 상속하지 않습니다(예를 들어 Component.errorString에 대한 액세스가 실패합니다).
• 임포트가 없는 스크립트는 임포트를 임포트한 QML 문서에서 임포트를 상속합니다(예를 들어 Component.errorString에 대한 액세스는 성공합니다).
• 공유 스크립트(.pragma 라이브러리로 정의됨)는 다른 스크립트나 모듈을 임포트하지 않더라도 QML 문서에서 임포트를 상속하지 않습니다.

첫 번째 의미는 특정 스크립트를 여러 개의 QML 파일에서 가져올 수 있다는 점에서 개념적으로 정확합니다. 두 번째 시맨틱은 이전 버전과의 호환성을 위해 유지됩니다. 세 번째 시맨틱은 공유 스크립트에 대한 현재 시맨틱에서 변경되지 않지만, 여기서는 새롭게 가능한 경우(스크립트가 다른 스크립트나 모듈을 가져오는 경우)를 고려하여 명확히 설명합니다.

다른 자바스크립트 리소스에서 자바스크립트 리소스 가져오기

JavaScript 리소스는 다음과 같은 방식으로 다른 리소스를 가져올 수 있습니다:

import * as MathFunctions from "factorial.mjs";

또는:

.import "filename.js" as Qualifier

전자는 ECMAScript 모듈을 가져오기 위한 표준 ECMAScript 구문으로, mjs 파일 확장자로 표시된 대로 ECMAScript 모듈 내에서만 작동합니다. 후자는 QML 엔진에서 제공하는 JavaScript의 확장으로 모듈이 아닌 경우에도 작동합니다. ECMAScript 표준에 의해 대체된 확장자이므로 사용을 권장하지 않습니다.

이 방법으로 JavaScript 파일을 가져오면 한정자와 함께 파일을 가져옵니다. 그러면 가져오기 스크립트에서 한정자를 통해 해당 파일의 함수에 액세스할 수 있습니다(예: Qualifier.functionName(params)).

때로는 한정자를 지정할 필요 없이 가져오기 컨텍스트에서 함수를 사용할 수 있도록 하는 것이 바람직할 때가 있습니다. 이 경우 ECMAScript 모듈과 JavaScript import 문은 as 한정자 없이 사용해야 합니다.

예를 들어, 아래 왼쪽의 QML 코드는 script.mjs 에서 showCalculations() 을 호출하고, import 을 사용하여 factorial.mjs 을 포함했으므로 factorial.mjs 에서 factorial() 을 호출할 수 있습니다.

import QtQuick
import "script.mjs" as MyScript

Item {
    width: 100; height: 100

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

// script.mjs
import { factorial } from "factorial.mjs"
export { factorial }

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

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

Qt.include() 함수는 ECMAScript 모듈을 사용하지 않고 가져오기 한정자 없이 다른 JavaScript 파일을 포함합니다. 이 함수는 현재 파일의 네임스페이스에서 다른 파일의 모든 함수와 변수를 사용할 수 있게 하지만 해당 파일에 정의된 모든 프래그마와 임포트를 무시합니다. 함수 호출은 호출자의 컨텍스트를 수정해서는 안 되므로 이는 좋은 생각이 아닙니다.

Qt.include()는 더 이상 사용되지 않으므로 피해야 합니다. 이 함수는 향후 Qt 버전에서 제거될 예정입니다.

자바스크립트 리소스에서 QML 모듈 임포트하기

자바스크립트 리소스는 다음과 같은 방식으로 QML 모듈을 임포트할 수 있습니다:

.import TypeNamespace MajorVersion.MinorVersion as Qualifier

아래에서 자바스크립트로 가져온 모듈에서 QML 유형을 사용하는 방법을 보여주는 예제를 볼 수 있습니다:

.import Qt.test 1.0 as JsQtTest

var importedEnumValue = JsQtTest.MyQmlObject.EnumValue3

특히 싱글톤 유형을 통해 제공되는 기능에 액세스하는 데 유용할 수 있습니다(자세한 내용은 QML_SINGLETON 참조).

JavaScript 리소스는 기본적으로 리소스를 임포트하는 컴포넌트의 모든 임포트에 액세스할 수 있습니다. 컴포넌트가 상태 비저장 라이브러리로 선언( .pragma library 사용)되거나 명시적인 .import 문이 포함된 경우에는 해당 컴포넌트의 가져오기에 액세스할 수 없습니다.