Hello World in PySide and Qt Quick/ko

From Qt Wiki
Jump to: navigation, search
This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

한국어 English 日本語

PySide와 QtQuick/QML을 이용하여 어플리케이션을 작성해 보기

QML은 프로그램 상에서 유저 인터페이스를 기술하기 위해 만들어진 선언형 언어입니다. (선언형 언어에 대한 설명은 http://ko.wikipedia.org/wiki/선언형_프로그래밍 를 참조하세요) 즉 무엇을 표시할 지, 어떻게 동작할 지에 대해 선언형으로 프로그래밍을 합니다. QML상에서 유저 인터페이스는 속성(Property)를 갖는 오브젝트가 하나의 트리 구조를 갖도록 규정됩니다. 이 튜토리얼에서는 PySide와 QML을 이용하여 Hello World 어플리케이션을 작성하는 방법에 대해 설명합니다.

PySide/QML 어플리케이션을 생성하기 위해서는 최소한 두 개의 파일을 작성해야 합니다. 하나는 유저 인터페이스를 기술하는 QML 파일이고 다른 하나는 qml 파일을 로드하기 위한 파이썬 파일입니다. 지금 여기서는 이 두 파일을 같은 폴더에 저장하도록 하여 괜한 문제가 일어나지 않도록 합시다.

아래와 같이 QML 코드를 작성하여 view.qml 라는 이름으로 저장합니다 :

import Qt 4.7
 
Rectangle {
 width: 200
 height: 200
 color: "red"
 
Text {
 text: "Hello World"
 anchors.centerIn: parent
 }
}

첫 문장에서 Qt 4.7을 임포트합니다. QtQuick이 Qt/PySide와 빌드 스케쥴이 분리됨에 따라, 머지 않아 import QtQuick 1.0 로 표기법이 바뀔 예정입니다. 하지만 당분간은 위와 같이 임포트합니다.

그 아래부터는 코드가 HTML이나 XML 파일과 상당히 유사한 형식으로 되어 있는 것을 알 수 있습니다. 간단히, 200*200의 크기를 갖는 빨간색 사각형을 만들어 보도록 하겠습니다. 사각형 안에는 Hello World 텍스트를 추가합니다. 텍스트가 사각형의 정중앙에 위치하도록, anchors.centerIn: parent 코드를 추가합니다.

다음엔, main.py 라는 이름으로 PySide 코드를 작성합니다 :

#!/usr/bin/python
# -'''- coding: utf-8 -'''-
 
import sys
from PySide.QtCore import *
from PySide.QtGui import *
from PySide.QtDeclarative import QDeclarativeView
 
# Create Qt application and the QDeclarative view
app = QApplication(sys.argv)
view = QDeclarativeView()
# Create an URL to the QML file
url = QUrl('view.qml')
# Set the QML file and show
view.setSource(url)
view.show()
# Enter Qt main loop
sys.exit(app.exec_())

PySide 튜터리얼 등을 통해서 이미 PySide에 익숙한 사람이라면, 위의 코드 역시 큰 지장 없이 이해할 수 있을 것입니다. 다른 것이 있다면, QDeclarativeView를 임포트하고 위에서 만든 QML 파일의 URL을 QDeclarativeView의 소스로 설정하는 부분입니다. 그 후에는 다른 Qt 위젯과 마찬가지로 QDeclarativeView.show() 를 호출합니다.

참고: 만약 모바일환경이 아닌 데스크탑에서 프로그램을 작성하려면 뷰를 표시하기 전에 view.setResizeMode(QDeclarativeView.SizeRootObjectToView) 를 호출하여, 윈도우 크기가 변경됨에 따라 QML 표시 영역도 따라서 변경되도록 설정합니다.