QML 문서의 JavaScript 표현식

QML에서 제공하는 JavaScript 호스트 환경은 조건부 연산자, 배열, 변수 설정 및 루프와 같은 유효한 표준 JavaScript 구문을 실행할 수 있습니다. 표준 JavaScript 속성 외에도 QML 글로벌 객체에는 UI 구축과 QML 환경과의 상호 작용을 간소화하는 여러 도우미 메서드가 포함되어 있습니다.

QML에서 제공하는 JavaScript 환경은 웹 브라우저의 환경보다 더 엄격합니다. 예를 들어, QML에서는 JavaScript 전역 객체의 멤버를 추가하거나 수정할 수 없습니다. 일반 자바스크립트에서는 변수를 선언하지 않고 사용하면 실수로 이 작업을 수행할 수 있습니다. QML에서는 예외가 발생하므로 모든 로컬 변수를 명시적으로 선언해야 합니다. QML에서 실행되는 JavaScript 코드에 대한 제한 사항에 대한 자세한 설명은 JavaScript 환경 제한 사항을 참조하세요.

QML 문서의 다양한 부분에 JavaScript 코드가 포함될 수 있습니다:

1. 속성 바인딩 본문. 이러한 JavaScript 표현식은 QML 객체 속성 간의 관계를 설명합니다. 프로퍼티의 종속성이 변경되면 지정된 관계에 따라 프로퍼티도 자동으로 업데이트됩니다.
2. 시그널 핸들러의 본문. 이러한 JavaScript 문은 QML 객체가 관련 시그널을 방출할 때마다 자동으로 평가됩니다.
3. 사용자 정의 메서드의 정의. QML 객체의 본문 내에 정의된 JavaScript 함수는 해당 객체의 메서드가 됩니다.
4. 독립형 JavaScript 리소스(.js) 파일. 이러한 파일은 실제로는 QML 문서와는 별개이지만 QML 문서로 가져올 수 있습니다. 가져온 파일 내에 정의된 함수와 변수는 속성 바인딩, 시그널 핸들러 및 사용자 지정 메서드에서 사용할 수 있습니다.

프로퍼티 바인딩의 자바스크립트

다음 예제에서 Rectangle 의 color 속성은 pressed 의 TapHandler 속성에 종속됩니다. 이 관계는 조건 표현식을 사용하여 설명됩니다:

import QtQuick 2.12

Rectangle {
    id: colorbutton
    width: 200; height: 80;

    color: inputHandler.pressed ? "steelblue" : "lightsteelblue"

    TapHandler {
        id: inputHandler
    }
}

실제로 표현식의 결과가 프로퍼티에 유형을 할당할 수 있는 값인 한, 아무리 복잡한 자바스크립트 표현식이라도 프로퍼티 바인딩 정의에 사용할 수 있습니다. 여기에는 부작용도 포함됩니다. 그러나 복잡한 바인딩과 부작용은 코드의 성능, 가독성 및 유지 관리성을 저하시킬 수 있으므로 권장하지 않습니다.

프로퍼티 바인딩을 정의하는 방법에는 두 가지가 있는데, 가장 일반적인 방법은 앞의 예제에서 프로퍼티 초기화에서 볼 수 있습니다. 두 번째(그리고 훨씬 드문) 방법은 아래와 같이 명령형 JavaScript 코드 내에서 Qt.binding() 함수에서 반환된 함수를 프로퍼티에 할당하는 것입니다:

import QtQuick 2.12

Rectangle {
    id: colorbutton
    width: 200; height: 80;

    color: "red"

    TapHandler {
        id: inputHandler
    }

    Component.onCompleted: {
        color = Qt.binding(function() { return inputHandler.pressed ? "steelblue" : "lightsteelblue" });
    }
}

속성 바인딩을 정의하는 방법에 대한 자세한 내용은 속성 바인딩 문서를 참조하고, 바인딩이 값 할당과 어떻게 다른지 알아보려면 속성 할당과 속성 바인딩에 대한 문서를 참조하세요.

시그널 핸들러의 자바스크립트

QML 객체 유형은 특정 이벤트 발생에 대한 반응으로 신호를 방출할 수 있습니다. 이러한 신호는 시그널 핸들러 함수에 의해 처리될 수 있으며, 클라이언트가 사용자 정의 프로그램 로직을 구현하기 위해 정의할 수 있습니다.

직사각형 유형으로 표시되는 버튼에 TapHandler 및 텍스트 레이블이 있다고 가정해 보겠습니다. TapHandler 는 사용자가 버튼을 누르면 tapped 신호를 방출합니다. 클라이언트는 JavaScript 표현식을 사용하여 onTapped 핸들러에서 신호에 반응할 수 있습니다. QML 엔진은 필요에 따라 핸들러에 정의된 이러한 자바스크립트 표현식을 실행합니다. 일반적으로 신호 핸들러는 다른 이벤트를 시작하거나 속성 값을 할당하기 위해 JavaScript 표현식에 바인딩됩니다.

import QtQuick 2.12

Rectangle {
    id: button
    width: 200; height: 80; color: "lightsteelblue"

    TapHandler {
        id: inputHandler
        onTapped: {
            // arbitrary JavaScript expression
            console.log("Tapped!")
        }
    }

    Text {
        id: label
        anchors.centerIn: parent
        text: inputHandler.pressed ? "Pressed!" : "Press here!"
    }
}

시그널과 시그널 핸들러에 대한 자세한 내용은 다음 항목을 참조하세요:

• 신호 및 핸들러 이벤트 시스템
• QML 객체 속성

독립형 함수의 자바스크립트

프로그램 로직은 JavaScript 함수로도 정의할 수 있습니다. 이러한 함수는 QML 문서에서 인라인으로 정의하거나(사용자 정의 메서드로), 가져온 JavaScript 파일에서 외부적으로 정의할 수 있습니다.

사용자 정의 메서드의 JavaScript

사용자 정의 메서드는 QML 문서에서 정의할 수 있으며 신호 처리기, 속성 바인딩 또는 다른 QML 객체의 함수에서 호출할 수 있습니다. 이러한 메서드는 구현이 외부 JavaScript 파일이 아닌 QML 객체 유형 정의(QML 문서)에 포함되어 있기 때문에 인라인 JavaScript 함수라고도 합니다.

인라인 사용자 정의 메서드의 예는 다음과 같습니다:

import QtQuick 2.12

Item {
    function fibonacci(n){
        var arr = [0, 1];
        for (var i = 2; i < n + 1; i++)
            arr.push(arr[i - 2] + arr[i -1]);

        return arr;
    }
    TapHandler {
        onTapped: console.log(fibonacci(10))
    }
}

피보나치 함수는 TapHandler 에서 tapped 신호를 보낼 때마다 실행됩니다.

JavaScript를 사용하여 QML에서 사용자 정의 메서드를 정의하는 방법에 대한 자세한 내용은 QML 객체 속성 설명서를 참조하세요.

JavaScript 파일에 정의된 함수

사소하지 않은 프로그램 로직은 별도의 JavaScript 파일로 분리하는 것이 가장 좋습니다. 이 파일은 QML 모듈과 마찬가지로 import 문을 사용하여 QML로 가져올 수 있습니다.

예를 들어, 이전 예제의 fibonacci() 메서드는 fib.js 이라는 외부 파일로 이동하여 다음과 같이 액세스할 수 있습니다:

import QtQuick 2.12
import "fib.js" as MathFunctions

Item {
    TapHandler {
        onTapped: console.log(MathFunctions.fibonacci(10))
    }
}

외부 JavaScript 파일을 QML로 로드하는 방법에 대한 자세한 내용은 QML에서 JavaScript 리소스 가져오기 섹션을 참조하세요.

자바스크립트 함수에 신호 연결하기

신호를 방출하는 QML 객체 유형은 이전 섹션에서 설명한 대로 해당 신호에 대한 기본 신호 핸들러도 제공합니다. 그러나 클라이언트가 다른 QML 객체가 신호를 방출할 때 QML 객체에 정의된 함수를 트리거하고자 하는 경우가 있습니다. 이러한 시나리오는 신호 연결을 통해 처리할 수 있습니다.

신호의 connect() 메서드를 호출하고 자바스크립트 함수를 인수로 전달하여 QML 객체에서 방출되는 신호를 자바스크립트 함수에 연결할 수 있습니다. 예를 들어, 다음 코드는 TapHandler 의 tapped 신호를 script.js 의 jsFunction() 에 연결합니다:

import QtQuick
import "script.js" as MyScript

Item {
    id: item
    width: 200; height: 200

    TapHandler {
        id: inputHandler
    }

    Component.onCompleted: {
        inputHandler.tapped.connect(MyScript.jsFunction)
    }
}

// script.js

function jsFunction() {
    console.log("Called JavaScript function!")
}

TapHandler 의 tapped 신호가 전송될 때마다 jsFunction() 가 호출됩니다.

자세한 내용은 메서드 및 신호에 신호 연결하기를 참조하세요.

애플리케이션 시작 코드의 자바스크립트

애플리케이션(또는 컴포넌트 인스턴스) 시작 시 일부 필수 코드를 실행해야 할 때가 있습니다. 시작 스크립트를 외부 스크립트 파일에 전역 코드로 포함시키고 싶을 수도 있지만, QML 환경이 완전히 구축되지 않았을 수 있으므로 심각한 제한이 있을 수 있습니다. 예를 들어 일부 개체가 생성되지 않았거나 일부 속성 바인딩이 설정되지 않았을 수 있습니다. 전역 스크립트 코드의 정확한 제한 사항은 JavaScript 환경 제한 사항을 참조하세요.

QML 객체는 인스턴스화가 완료되면 Component.completed 첨부 신호를 방출합니다. 해당 Component.onCompleted 핸들러의 JavaScript 코드는 객체가 인스턴스화된 후에 실행됩니다. 따라서 애플리케이션 시작 코드를 작성하기에 가장 좋은 위치는 최상위 개체의 Component.onCompleted 핸들러입니다. 이 개체는 QML 환경이 완전히 설정되면 Component.completed 을 방출하기 때문입니다.

예를 들어

import QtQuick 2.0

Rectangle {
    function startupFunction() {
        // ... startup code
    }

    Component.onCompleted: startupFunction();
}

중첩된 객체 및 중첩된 QML 컴포넌트 인스턴스를 포함하여 QML 파일의 모든 객체는 이 첨부된 속성을 사용할 수 있습니다. 시작 시 실행할 onCompleted() 핸들러가 두 개 이상 있는 경우, 정의되지 않은 순서로 순차적으로 실행됩니다.

마찬가지로 모든 Component 는 소멸되기 직전에 destruction() 신호를 보냅니다.