QML 에서 CustomModule 을 import 하여 사용하기 > QT 강좌/팁

이글은 제가 podovat.com의 blog에 올린글인 (http://www.podovat.com/?p=457) 에서 가져온 것입니다.

QML 을 작성하다 보면 import 구문을 자주 보게 됩니다.
C 의 #include 구문과 같은 역할을 하는 구문인데요

보통 직접 작성한 qml 파일을 import 하게 된다면 다음과 같이 쓰고 있으실 겁니다.

import "." 또는
import "Button.qml"

해당 문제에 대해서 조금 더 간결하고, 알기쉬운 import QtQuick 1.1 과 같은 방식을 원하였기 때문에 해당 이슈에 대해 접근하였고 좀 더 간결한 코드를 얻어낼 수 있었습니다.

디렉토리 선언

[code]
$work : project 디렉토리
$qt : qt 가 설치된 디렉토리
[/code]


1. Module 디렉토리 생성

$work/CustomModule 디렉토리를 생성 합니다.



2. qmldir 파일 생성

$work/CustomModule 디렉토리 내에 qmldir 파일을 생성합니다 (확장자 없음)



3. CustomModuel 의 CustomRectangle 생성

필요한 qml 파일들을 CustomModule 디렉토리 내에 생성
여기서는 예제를 위하여 다음과 같은 QML 파일을 생성합니다.

CustomRectangle.qml

[code]
import QtQuick 1.0

Rectangle {
width: 100
height: 100
color: "red"
}
[/code]


4. qmldir 파일에서 선언하기

2 번에서 만들어놓았던 qmldir 파일내부에서 다음과 같이 선언합니다.
다시 한번 말씀드리지만 qmldir 파일은 확장자가 없어야합니다.

qmldir

[code]
module CustomModule
CustomRectangle 1.0 CustomRectangle.qml
[/code]


5. import 디렉토리 추가

기본적인 imports 폴더는 $qt/importrs 폴더입니다.
해당 폴더에 위에서 작성한 CustomModule 을 가져다놓으면 import CustomModule 1.0 과 같은 방식으로 사용할 수 있으나, 자기 자신만 적용되는 문제가 있기때문에 ini 파일을 생성하여 수행하도록 하였습니다.

ini 파일의 이름은 qmlpath.ini 로 지정하고 qmlpath.ini 의 세부내용은 $work 디렉토리가 d:/work/testCustomModule 일 경우 다음과 같습니다.

qmlpath.ini 파일이 위치하게 될 곳은 실행파일의 디렉토리 입니다

[code]
path = d:/work/testCustomModule/CustomModule
[/code]
위에 생성한 qml 파일의 내용을 가지고 qml 의 importpath 를 추가해줍니다.

[code]
QString qmlPathFilename = QApplication::applicationDirPath() + "/qmlpath.ini";
qDebug() << "main qmlPathFilename:" << qmlPathFilename;
QSettings qmlPathSettings(qmlPathFilename, QSettings::IniFormat);

QString importPath = qmlPathSettings.value("path", "").toString();

if (!importPath.isEmpty())
{
qDebug() << "main addImportPath path:" << importPath;
viewer.engine()->addImportPath(qPrintable(importPath)); // imports path 추가
}
[/code]


6. CustomModule 사용하기

5단계까지 완료하셨으면. 실제로 사용을 하기위한 코드는 다음과 같습니다.
(해당 예제를 수행하기 위해서 프로젝트 생성을 하였으면 main.qml 파일내에 다음과 같이 선언합니다.)

main.qml 내용

[code]
import QtQuick 1.1
import CustomModule 1.0

Rectangle {
width: 800
height: 480

CustomRectangle {
x: 50
y: 50
}
}
[/code]

추천0