PySide-and-QML-Playground: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
[[Category:LanguageBindings::PySide]]
[[Category:LanguageBindings::PySide]]


[toc align_right="yes" depth="2"]
[toc align_right="yes" depth="2"]


= PySide and Qt Quick/QML Playground =
= PySide and Qt Quick/QML Playground =
Line 9: Line 9:
First, we will start with a basic PySide stub file which will be updated as needed. Let's name it '''main.py''':
First, we will start with a basic PySide stub file which will be updated as needed. Let's name it '''main.py''':


<code><br />#!/usr/bin/env python<br /># <s>'''- coding: utf-8 -'''</s>
<code>
#!/usr/bin/env python
# -'''- coding: utf-8 -'''-


import sys<br />from PySide.QtCore import *<br />from PySide.QtGui import *<br />from PySide.QtDeclarative import *
import sys
from PySide.QtCore import *
from PySide.QtGui import *
from PySide.QtDeclarative import *


# Our main window<br />class MainWindow(QDeclarativeView):
# Our main window
class MainWindow(QDeclarativeView):


def ''init''(self, parent=None):<br /> super(MainWindow, self).''init''(parent)<br /> self.setWindowTitle(&quot;Main Window&amp;quot;)<br /> # Renders 'view.qml'<br /> self.setSource(QUrl.fromLocalFile&amp;amp;#40;'view.qml'&amp;#41;)<br /> # QML resizes to main window<br /> self.setResizeMode(QDeclarativeView.SizeRootObjectToView)
def ''init''(self, parent=None):
super(MainWindow, self).''init''(parent)
self.setWindowTitle("Main Window")
# Renders 'view.qml'
self.setSource(QUrl.fromLocalFile('view.qml'))
# QML resizes to main window
self.setResizeMode(QDeclarativeView.SizeRootObjectToView)


if ''name'' == '''main''':<br /> # Create the Qt Application<br /> app = QApplication(sys.argv)<br /> # Create and show the main window<br /> window = MainWindow()<br /> window.show()<br /> # Run the main Qt loop<br /> sys.exit(app.exec_())<br /></code>
if ''name'' == '''main''':
# Create the Qt Application
app = QApplication(sys.argv)
# Create and show the main window
window = MainWindow()
window.show()
# Run the main Qt loop
sys.exit(app.exec_())
</code>


If you know already PySide, we are just subclassing QDeclarativeView (which handles QML files), and setting the source to a file called '''view.qml''' which is in the same folder as our '''main.py''' file. Also, the QML root element of our '''view.qml''' will resize to the size of the outer window because we are using '''self.setResizeMode(QDeclarativeView.SizeRootObjectToView)'''. In the main function, we are just creating a Qt Application, and creating/showing our main window.
If you know already PySide, we are just subclassing QDeclarativeView (which handles QML files), and setting the source to a file called '''view.qml''' which is in the same folder as our '''main.py''' file. Also, the QML root element of our '''view.qml''' will resize to the size of the outer window because we are using '''self.setResizeMode(QDeclarativeView.SizeRootObjectToView)'''. In the main function, we are just creating a Qt Application, and creating/showing our main window.
Line 27: Line 47:
Let's start with a simple example, like the one we gave on [[Hello World in PySide and QtQuick]]. So set your '''view.qml''' like the following:
Let's start with a simple example, like the one we gave on [[Hello World in PySide and QtQuick]]. So set your '''view.qml''' like the following:


<code><br />import QtQuick 1.0
<code>
import QtQuick 1.0


Rectangle {<br /> width: 200<br /> height: 200<br /> color: &quot;red&amp;quot;
Rectangle {
width: 200
height: 200
color: "red"


Text {<br /> text: &quot;Hello World&amp;quot;<br /> anchors.centerIn: parent<br /> }<br />}<br /></code>
Text {
text: "Hello World"
anchors.centerIn: parent
}
}
</code>


Simple example, which shows a red rectangle with &quot;Hello World&amp;quot; in the center. If you try to resize the main window, you can see that the rectangle also resizes and that the text keeps centered.
Simple example, which shows a red rectangle with "Hello World" in the center. If you try to resize the main window, you can see that the rectangle also resizes and that the text keeps centered.


== Catch Mouse clicks and change colors ==
== Catch Mouse clicks and change colors ==
Line 39: Line 68:
In this next example, we are changing the previous one in order to listen to mouse clicks over the Hello World text, and toggle the color from black to blue and vice-versa. Here is the code, just name it the same '''view.qml''' and try it with the same PySide code:
In this next example, we are changing the previous one in order to listen to mouse clicks over the Hello World text, and toggle the color from black to blue and vice-versa. Here is the code, just name it the same '''view.qml''' and try it with the same PySide code:


<code><br />import QtQuick 1.0
<code>
import QtQuick 1.0


Rectangle {<br /> width: 200<br /> height: 200<br /> color: &quot;white&amp;quot;
Rectangle {
width: 200
height: 200
color: "white"


Text {<br /> text: &quot;Hello World&amp;quot;<br /> anchors.centerIn: parent<br /> font.pixelSize: 24<br /> color: 'black'
Text {
text: "Hello World"
anchors.centerIn: parent
font.pixelSize: 24
color: 'black'


MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> console.log(&quot;Mouse clicked!&quot;, parent.color)<br /> if (parent.color == &quot;#000000&amp;quot;)<br /> parent.color = 'blue';<br /> else<br /> parent.color = 'black';<br /> }<br /> }<br /> }<br />}<br /></code>
MouseArea {
anchors.fill: parent
onClicked: {
console.log("Mouse clicked!", parent.color)
if (parent.color == "#000000")
parent.color = 'blue';
else
parent.color = 'black';
}
}
}
}
</code>


The main differences from the Hello World example are in '''lines 11 to 23'''. Considering the Text element, we are justing setting a black color to it and changing the size of the text to 24 pixels (lines 11 and 12). The other difference is the new element '''MouseArea'''. Basically, a MouseArea is an element which responds to mouse interactions. So, in line 15, with '''anchors.fill: parent''' we are just saying that the area for the mouse has the same size as its parent, the '''Text'''. So, the bigger the Text, the bigger the mouse area. You can think of a MouseArea like a transparent area on front of the Text.
The main differences from the Hello World example are in '''lines 11 to 23'''. Considering the Text element, we are justing setting a black color to it and changing the size of the text to 24 pixels (lines 11 and 12). The other difference is the new element '''MouseArea'''. Basically, a MouseArea is an element which responds to mouse interactions. So, in line 15, with '''anchors.fill: parent''' we are just saying that the area for the mouse has the same size as its parent, the '''Text'''. So, the bigger the Text, the bigger the mouse area. You can think of a MouseArea like a transparent area on front of the Text.


Finally, the toggle is implemented in the '''onClicked''' signal handling. In this function we just ouput something to the console and test if the parent color is black. If so, we change it to blue, else, we change it to black. We have to use <code>if (parent.color  &amp;quot;#000000&amp;quot;)&lt;code&gt; because if we used &lt;code&gt;if (parent.color  'black')<code> as it would be intuitive, we would be comparing a color to a regular string, which does not work.
Finally, the toggle is implemented in the '''onClicked''' signal handling. In this function we just ouput something to the console and test if the parent color is black. If so, we change it to blue, else, we change it to black. We have to use <code>if (parent.color  "#000000")<code> because if we used <code>if (parent.color  'black')<code> as it would be intuitive, we would be comparing a color to a regular string, which does not work.


== Custom components ==
== Custom components ==
Line 55: Line 104:
In Qt Quick it is possible to reuse standard components to create custom and more complex components. In this section we are going to create a custom component which we will call '''String''' and we will use it to draw a line of text of a certain color. The next piece of code, represents our custom element, call it '''String.qml''':
In Qt Quick it is possible to reuse standard components to create custom and more complex components. In this section we are going to create a custom component which we will call '''String''' and we will use it to draw a line of text of a certain color. The next piece of code, represents our custom element, call it '''String.qml''':


</code><br />import QtQuick 1.0
</code>
import QtQuick 1.0


Item {<br /> id: my_container<br /> width: 30<br /> height: 10<br /> property alias text: my_text.text<br /> property alias color: my_text.color
Item {
id: my_container
width: 30
height: 10
property alias text: my_text.text
property alias color: my_text.color


Text {<br /> id: my_text<br /> anchors.fill: parent<br /> }<br />}<br /><code>
Text {
id: my_text
anchors.fill: parent
}
}
<code>


Make sure you use the name '''String.qml''' for the file, because if we want to use this element in other QML files, we must call it by the filename. Also, you are advised to respect the uppercase in the first letter, to distinguish standard python modules or other files from QML Elements.
Make sure you use the name '''String.qml''' for the file, because if we want to use this element in other QML files, we must call it by the filename. Also, you are advised to respect the uppercase in the first letter, to distinguish standard python modules or other files from QML Elements.
Line 67: Line 127:
In the next two lines,
In the next two lines,


</code><br />property alias text: my_text.text<br />property alias color: my_text.color<br /><code>
</code>
property alias text: my_text.text
property alias color: my_text.color
<code>


we are declaring two new properties called &quot;text&amp;quot; and &quot;color&amp;quot;. Both properties are just alias to access the respective properties in the Text element. So when we are changing the String element color, we are in fact changing the color of the Text element.
we are declaring two new properties called "text" and "color". Both properties are just alias to access the respective properties in the Text element. So when we are changing the String element color, we are in fact changing the color of the Text element.


Lets change our '''view.qml''' file, which is called by our PySide code to the following:
Lets change our '''view.qml''' file, which is called by our PySide code to the following:


</code><br />import QtQuick 1.0
</code>
import QtQuick 1.0


Rectangle {<br /> id: main_window<br /> width: 200<br /> height: 200
Rectangle {
id: main_window
width: 200
height: 200


Grid {<br /> columns: 3<br /> spacing: 2
Grid {
columns: 3
spacing: 2


String {text: &quot;One&amp;quot;; color: &quot;red&amp;quot;}<br /> String {text: &quot;Two&amp;quot;; color: &quot;green&amp;quot;}<br /> String {text: &quot;Three&amp;quot;; color: &quot;blue&amp;quot;}<br /> String {text: &quot;Four&amp;quot;; color: &quot;black&amp;quot;}<br /> String {text: &quot;Five&amp;quot;; color: &quot;yellow&amp;quot;}<br /> String {text: &quot;Six&amp;quot;; color: &quot;pink&amp;quot;}<br /> }<br />}<br /><code>
String {text: "One"; color: "red"}
String {text: "Two"; color: "green"}
String {text: "Three"; color: "blue"}
String {text: "Four"; color: "black"}
String {text: "Five"; color: "yellow"}
String {text: "Six"; color: "pink"}
}
}
<code>

Revision as of 08:57, 25 February 2015


[toc align_right="yes" depth="2"]

PySide and Qt Quick/QML Playground

If you have followed Hello World in PySide and QtQuick, you should now know how to create a PySide application which opens and renders a QML file. In this tutorial we will show you some simple examples just to get you more acquainted with this new technology.

First, we will start with a basic PySide stub file which will be updated as needed. Let's name it main.py:

#!/usr/bin/env python
# -'''- coding: utf-8 -'''-

import sys
from PySide.QtCore import *
from PySide.QtGui import *
from PySide.QtDeclarative import *

# Our main window
class MainWindow(QDeclarativeView):

def ''init''(self, parent=None):
 super(MainWindow, self).''init''(parent)
 self.setWindowTitle("Main Window")
 # Renders 'view.qml'
 self.setSource(QUrl.fromLocalFile('view.qml'))
 # QML resizes to main window
 self.setResizeMode(QDeclarativeView.SizeRootObjectToView)

if ''name'' == '''main''':
 # Create the Qt Application
 app = QApplication(sys.argv)
 # Create and show the main window
 window = MainWindow()
 window.show()
 # Run the main Qt loop
 sys.exit(app.exec_())

If you know already PySide, we are just subclassing QDeclarativeView (which handles QML files), and setting the source to a file called view.qml which is in the same folder as our main.py file. Also, the QML root element of our view.qml will resize to the size of the outer window because we are using self.setResizeMode(QDeclarativeView.SizeRootObjectToView). In the main function, we are just creating a Qt Application, and creating/showing our main window.

So, whatever we declare in view.qml will appear as the content of our MainWindow, so let's try some things!

Hello World

Let's start with a simple example, like the one we gave on Hello World in PySide and QtQuick. So set your view.qml like the following:

import QtQuick 1.0

Rectangle {
 width: 200
 height: 200
 color: "red"

Text {
 text: "Hello World"
 anchors.centerIn: parent
 }
}

Simple example, which shows a red rectangle with "Hello World" in the center. If you try to resize the main window, you can see that the rectangle also resizes and that the text keeps centered.

Catch Mouse clicks and change colors

In this next example, we are changing the previous one in order to listen to mouse clicks over the Hello World text, and toggle the color from black to blue and vice-versa. Here is the code, just name it the same view.qml and try it with the same PySide code:

import QtQuick 1.0

Rectangle {
 width: 200
 height: 200
 color: "white"

Text {
 text: "Hello World"
 anchors.centerIn: parent
 font.pixelSize: 24
 color: 'black'

MouseArea {
 anchors.fill: parent
 onClicked: {
 console.log("Mouse clicked!", parent.color)
 if (parent.color == "#000000")
 parent.color = 'blue';
 else
 parent.color = 'black';
 }
 }
 }
}

The main differences from the Hello World example are in lines 11 to 23. Considering the Text element, we are justing setting a black color to it and changing the size of the text to 24 pixels (lines 11 and 12). The other difference is the new element MouseArea. Basically, a MouseArea is an element which responds to mouse interactions. So, in line 15, with anchors.fill: parent we are just saying that the area for the mouse has the same size as its parent, the Text. So, the bigger the Text, the bigger the mouse area. You can think of a MouseArea like a transparent area on front of the Text.

Finally, the toggle is implemented in the onClicked signal handling. In this function we just ouput something to the console and test if the parent color is black. If so, we change it to blue, else, we change it to black. We have to use

if (parent.color  "#000000")<code> because if we used <code>if (parent.color  'black')<code> as it would be intuitive, we would be comparing a color to a regular string, which does not work.

== Custom components ==

In Qt Quick it is possible to reuse standard components to create custom and more complex components. In this section we are going to create a custom component which we will call '''String''' and we will use it to draw a line of text of a certain color. The next piece of code, represents our custom element, call it '''String.qml''':

import QtQuick 1.0

Item {

id: my_container
width: 30
height: 10
property alias text: my_text.text
property alias color: my_text.color

Text {

id: my_text
anchors.fill: parent
}

}

Make sure you use the name '''String.qml''' for the file, because if we want to use this element in other QML files, we must call it by the filename. Also, you are advised to respect the uppercase in the first letter, to distinguish standard python modules or other files from QML Elements.

Out String.qml starts with an element '''Item''', which is the most basic UI element of QML. We name it '''my_container''' by using the id property. We also set some values for the size. If you have followed the previous QML examples, you will also recognize the '''Text''' element, which we have added the id '''my_text'''.

In the next two lines,

property alias text: my_text.text property alias color: my_text.color

we are declaring two new properties called "text" and "color". Both properties are just alias to access the respective properties in the Text element. So when we are changing the String element color, we are in fact changing the color of the Text element.

Lets change our '''view.qml''' file, which is called by our PySide code to the following:

import QtQuick 1.0

Rectangle {

id: main_window
width: 200
height: 200

Grid {

columns: 3
spacing: 2

String {text: "One"; color: "red"}

String {text: "Two"; color: "green"}
String {text: "Three"; color: "blue"}
String {text: "Four"; color: "black"}
String {text: "Five"; color: "yellow"}
String {text: "Six"; color: "pink"}
}

}