Qt for Python Tutorial HelloQML: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:LanguageBindings::PySide]] | |||
'''English''' [[Hello-World-in-PySide-and-QtQuick-Korean|한국어]] [[Hello-World-in-PySide-and-QtQuick-Japanese|日本語]] | '''English''' [[Hello-World-in-PySide-and-QtQuick-Korean|한국어]] [[Hello-World-in-PySide-and-QtQuick-Japanese|日本語]] | ||
=Your first application using PySide and QtQuick/QML= | = Your first application using PySide and QtQuick/QML = | ||
QML is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. In QML, a user interface is specified as a tree of objects with properties. In this tutorial we will show how you can make a simple '''Hello World''' application with PySide and QML. | |||
A PySide/QML application consists, at least, of two different files - a file with the QML description of the user interface, and a python file which loads the qml file. To avoid problems for now, don't forget to save both files in the same folder. | |||
Here is a simple QML file, called '''view.qml''': | |||
< | <code><br />import QtQuick 1.0 | ||
Rectangle {<br /> width: 200<br /> height: 200<br /> color: "red&quot; | |||
Text {<br /> text: "Hello World&quot;<br /> anchors.centerIn: parent<br /> }<br />}<br /></code> | |||
We start by importing QtQuick 1.0, since in theory, QtQuick has a different release schedule than Qt/PySide. | We start by importing QtQuick 1.0, since in theory, QtQuick has a different release schedule than Qt/PySide. | ||
The rest of the | The rest of the QML code is pretty straightforward for those who have previously used HTML or XML files. Basically, we are creating a red rectangle with the size 200*200 and, inside that rectangle, we are adding a Text element which says '''Hello World'''. The code '''anchors.centerIn: parent''' just makes the text appear centered in relation to its immediate parent. | ||
Now, | Now, let's see how the code looks on the PySide. Let's call it '''main.py''': | ||
<code><br />#!/usr/bin/env python<br /># <s>'''- coding: utf-8 -'''</s> | |||
import sys<br />from PySide.QtCore import *<br />from PySide.QtGui import *<br />from PySide.QtDeclarative import QDeclarativeView | |||
# Create Qt application and the QDeclarative view<br />app = QApplication(sys.argv)<br />view = QDeclarativeView() | |||
# Create an URL to the QML file<br />url = QUrl('view.qml') | |||
# Set the QML file and show<br />view.setSource(url)<br />view.show() | |||
# Enter Qt main loop<br />sys.exit(app.exec_())<br /></code> | |||
If you are already familiar with PySide and have followed our tutorials, much of this code is already familiar. The only novelties are that you must import QDeclarativeView and set the source of the QDeclarativeView object to the URL of your QML file. Then, as any Qt widget, you call '''QDeclarativeView.show()'''. | |||
'''Hint:''' If you are programming for desktop, you should consider adding '''view.setResizeMode(QDeclarativeView.SizeRootObjectToView)''' before showing the view. This will force the outer QML rectangle to resize along with the outer window. | |||
Revision as of 14:15, 23 February 2015
Your first application using PySide and QtQuick/QML
QML is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. In QML, a user interface is specified as a tree of objects with properties. In this tutorial we will show how you can make a simple Hello World application with PySide and QML.
A PySide/QML application consists, at least, of two different files - a file with the QML description of the user interface, and a python file which loads the qml file. To avoid problems for now, don't forget to save both files in the same folder.
Here is a simple QML file, called view.qml:
<br />import QtQuick 1.0
Rectangle {<br /> width: 200<br /> height: 200<br /> color: "red&quot;
Text {<br /> text: "Hello World&quot;<br /> anchors.centerIn: parent<br /> }<br />}<br />
We start by importing QtQuick 1.0, since in theory, QtQuick has a different release schedule than Qt/PySide.
The rest of the QML code is pretty straightforward for those who have previously used HTML or XML files. Basically, we are creating a red rectangle with the size 200*200 and, inside that rectangle, we are adding a Text element which says Hello World. The code anchors.centerIn: parent just makes the text appear centered in relation to its immediate parent.
Now, let's see how the code looks on the PySide. Let's call it main.py:
<br />#!/usr/bin/env python<br /># <s>'''- coding: utf-8 -'''</s>
import sys<br />from PySide.QtCore import *<br />from PySide.QtGui import *<br />from PySide.QtDeclarative import QDeclarativeView
# Create Qt application and the QDeclarative view<br />app = QApplication(sys.argv)<br />view = QDeclarativeView()
# Create an URL to the QML file<br />url = QUrl('view.qml')
# Set the QML file and show<br />view.setSource(url)<br />view.show()
# Enter Qt main loop<br />sys.exit(app.exec_())<br />
If you are already familiar with PySide and have followed our tutorials, much of this code is already familiar. The only novelties are that you must import QDeclarativeView and set the source of the QDeclarativeView object to the URL of your QML file. Then, as any Qt widget, you call QDeclarativeView.show().
Hint: If you are programming for desktop, you should consider adding view.setResizeMode(QDeclarativeView.SizeRootObjectToView) before showing the view. This will force the outer QML rectangle to resize along with the outer window.