한국어 English 日本語

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

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

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

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

  1. import Qt 4.7
  2.  
  3. Rectangle {
  4.     width: 200
  5.     height: 200
  6.     color: "red"
  7.  
  8.     Text {
  9.         text: "Hello World"
  10.         anchors.centerIn: parent
  11.     }
  12. }

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

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

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

  1. #!/usr/bin/python
  2. # -*- coding: utf-8 -*-
  3.  
  4. import sys
  5. from PySide.QtCore import *
  6. from PySide.QtGui import *
  7. from PySide.QtDeclarative import QDeclarativeView
  8.  
  9. # Create Qt application and the QDeclarative view
  10. app = QApplication(sys.argv)
  11. view = QDeclarativeView()
  12. # Create an URL to the QML file
  13. url = QUrl('view.qml')
  14. # Set the QML file and show
  15. view.setSource(url)
  16. view.show()
  17. # Enter Qt main loop
  18. sys.exit(app.exec_())

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

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

위의 예제 코드에 자기만의 코드를 넣어 여러가지 기능을 직접 체험해 보시기 바랍니다. 색상, 텍스트 내용 등을 바꿔 보거나, 사각형에 그라데이션을 넣는 것도 가능합니다. 보다 자세한 내용은 QML Elements [doc.qt.nokia.com] 페이지를 참조하시기 바랍니다.

Categories: