[C++,QT/Qml]41.Qml프로그래밍 qml에서 함수를 js파일에서 선언하는 방법(함수를 한곳에서 선언하는 방법)

 

 

 

[C++,QT/Qml] 41.Qml프로그래밍 qml에서 함수를 js파일에 선언하는 방법(함수를 한곳에서 선언하는 방법)

 

 

 

 

 

안녕하세요 고급 개발자가 꿈인 코린이 입니다

 

오늘은 qml에서 함수를 js파일에 선언하고 이 선언한 함수를 각 qml에서 호출하는 방법에 대해서 설명드리겠습니다.

 

프로그래밍을 하다보면 같은 함수를 여러군데에서 사용해야하는 경우가 많습니다. C++에서는 특정한 클래스의 객체를

 

만들거나 그 객체의 인스턴스를 사용해서 함수를 호출하는 방법이 있다면 qml에서는 js파일을 만들어서

 

이 js파일안에 함수를 선언하는 방법이 있습니다.

 

qml에서 js파일을 사용할수 있는 이유는 qml에서 javascript 엔진을 갖추고 있기때문이죠 그래서 qml프로그래밍을

 

하다보면 javascript문법을 많이 보게 됩니다.

 

아래 코드를 보면서 qml에서 javascript파일을 사용하는 방법과 이 파일은 가져와서 함수를 호출하는 방법을 

 

설명 드리겠습니다.

 

main.qml

 

import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import "./"
import "./style" 1.0
import "CommonFunction.js" as COMMON //js파일을 import시켜주고 이 파일을 객체 처럼 접근할수 있도록 이름을 지정함// 이름을 COMMON 으로 지정
 
Window {
    property bool mbImageClicked : true
    property int mCount : 0
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Component.onCompleted: {//main Window가 만들어지면 처음 호출해줌
        console.log("main.qml Component.onCompleted");
        var num1 = 100;//매개변수를 설정해 준다.
        var num2 = 300;//매개변수를 설정해 준다.
        COMMON.sumFunction(num1,num2);//js파일에서 선언해준 매개변수가 있는 함수를 호출해 준다.
 
        var returnValue = COMMON.sumReturnFunction(num1,num2);
        console.log("main.qml Component.onCompleted returnValue:" + returnValue);
    }
 
    CustomTwoButtonPopup
    {
        id:customPopup
 
        onButton1Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button1Onclicked)
        {
            stackView.push(Qt.resolvedUrl("qrc:/screen2.qml"))
        }
        onButton2Onclicked: //custom type에서 설정한 signal이 발생되었을때 동작하는 함수(button2Onclicked)
        {
            stackView.pop();
        }
    }
 
    StackView
    {
        id:stackView
        width:parent.width//윈도우의 넓이 만큼
        height:480//stackview 높이를 윈도우보다 작게 설정 윈도우의 높이는 480
        initialItem: Item  //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
        {
            Rectangle//배경 색을 지정하는 부분
            {
                id:background
                anchors.fill: parent
                color:"red"
            }
            Text
            {
                id:testData
                anchors.horizontalCenter: parent.horizontalCenter
                text:"main screen testData"
                font.pixelSize: 30
                font.bold: true
            }
 
            Text
            {
                id:testText
                anchors.centerIn: parent
                text:"main screen"
                font.pixelSize: 50
                font.bold: true
            }
            Button
            {
                anchors.top:testText.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                text:"go screen1"
                onClicked:
                {                     
                    //stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))
                    COMMON.stackPushFunction();//js파일에 있는 함수를 호출 js파일안에서 stackview객체를 id로 접근후 screen1화면으로 이동하도록 구현
                }
            }
        }
    }    
}
 
 
 

 

CommonFunction.js

 

function sumFunction(i, j) {
    console.log("sumFunction");
    var sumValue = 0;
    sumValue = i + j;//매개변수들을 받아서 서로 더한다.
    console.log("sumFunction sumValue:" + sumValue);
}
 
function stackPushFunction() {//메인 qml에 있는 stackview에 화면이동을 하는 stackview push함수를 사용하는 함수
    console.log("stackPushFunction");
    stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))
}
 
function sumReturnFunction(value1,value2)//매개변수들을 더하고 더한 값을 리턴해주는 함수
{
    console.log("sumReturnFunction");
    var sumValue = 0;
    sumValue = value1 + value2;
    console.log("sumReturnFunction sumValue:" + sumValue);
    return sumValue;
}
 
 
 
 

전체 파일 경로

 

실행 결과

 

 

소스코드를 보겠습니다.

 

main.qml파일의 제일 위쪽에 javascript파일을 import해주고 이 import해준 것을 객체로 만들어주기 위해서

 

이름을 지정해 줍니다. 이름은 COMMON  으로 설정해 주었습니다.

 

import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import "./"
import "./style" 1.0
import "CommonFunction.js" as COMMON //js파일을 import시켜주고 이 파일을 객체 처럼 접근할수 있도록 이름을 지정함// 이름을 COMMON 으로 지정

그리고 .js파일에 다음 화면으로 가는 함수를 선언해 줍니다.

 

이 함수를 사용해서 버튼을 눌렀을때 다음화면으로 가도록 할 예정입니다.

function stackPushFunction() {//메인 qml에 있는 stackview에 화면이동을 하는 stackview push함수를 사용하는 함수
    console.log("stackPushFunction");
    stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))
}
 

 

그리고 이렇게 선언한 함수를 사용하기 위해서 다음 화면으로 가도록 구현할 버튼의 onclick부분에 위의 함수를

 

호출해 줍니다.

 

호출하는 방법은 위에서 선언했던 js파일의 객체이름을 이용해서 함수를 호출합니다. 

 

호출하는 방법은 아래와 같이 호출해 주시면 됩니다.

 

Button
{
   anchors.top:testText.bottom
   anchors.horizontalCenter: parent.horizontalCenter
   text:"go screen1"
   onClicked:
   {                     
      //stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))
      COMMON.stackPushFunction();//js파일에 있는 함수를 호출 js파일안에서 stackview객체를 id로 접근후 screen1화면으로 이동하도록 구현
   }
}
 

이렇게 호출을 하게되면 아래와 같은 실행 결과가 나오게 됩니다.

 

 

 

그리고 실행결과 로그처럼 매개변수로 넣은 값들의 합을 출력하는 함수와 

 

매개변수로 넣은 값들의 합을 리턴해주어서 변수에 저장하는 함수를 보겠습니다.

 

아래의 함수중에 sunFunction은 매개변수로 넣은 값들의 합을 출력하는 함수이고

 

sumRetrunFunction함수는 매개변수로 넣은 값들의 합을 리턴해주는 함수 입니다.

 

function sumFunction(i, j) {
    console.log("sumFunction");
    var sumValue = 0;
    sumValue = i + j;//매개변수들을 받아서 서로 더한다.
    console.log("sumFunction sumValue:" + sumValue);
}
 
 
 
function sumReturnFunction(value1,value2)//매개변수들을 더하고 더한 값을 리턴해주는 함수
{
    console.log("sumReturnFunction");
    var sumValue = 0;
    sumValue = value1 + value2;
    console.log("sumReturnFunction sumValue:" + sumValue);
    return sumValue;
}
 
 

 

그리고 이 함수들을 main window가 생성이 되었을때 실행이 되도록 Component.onCompleted 함수

 

안에서 실행을 하면 아래의 실행 결과 처럼 로그가 출력이 되게 됩니다.

 

이 함수를 호출하는 방법은 위에서 stackview push를 호출했던 방법하고 동일합니다.

 

Component.onCompleted: {//main Window가 만들어지면 처음 호출해줌
        console.log("main.qml Component.onCompleted");
        var num1 = 100;//매개변수를 설정해 준다.
        var num2 = 300;//매개변수를 설정해 준다.
        COMMON.sumFunction(num1,num2);//js파일에서 선언해준 매개변수가 있는 함수를 호출해 준다.
 
        var returnValue = COMMON.sumReturnFunction(num1,num2);
        console.log("main.qml Component.onCompleted returnValue:" + returnValue);
    }
 

위의 함수 처럼 매개변수에 100값과 300값을 넣어주어서 아래의 로그처럼 리턴받은 값이 400이 되도록 하거나

 

함수안에서 호출된 값이 400이 되도록 구현을 하였습니다.

 

 

여기까지 qml에서 javascript파일을 만드는 방법과 이 javascript파일 안에서 함수를 선언하고 qml에서

 

이 함수들을 호출하는 방법에 대해서 알아보았는데요 

 

이 포스팅의 내용과 같이 하나의 파일안에서 함수를 관리해서 조금더 클린코드가 되도록 구현되었으면 

 

좋겠습니다.

 

여기까지 읽어주셔서 감사합니다.