This document provides an overview of PySide and QtQuick. It discusses that PySide allows using Qt from Python and Qt is a cross-platform C++ library for building graphical user interfaces. It then covers topics like installing Qt and PySide, basic QtQuick examples like Hello World, using images and anchors, property binding, events, and behaviors. It also discusses integrating Python values into QML and using models and views with ListView.

1. PySide + QtQuick
Daker Fernandes / Marcel Caraciolo
Python Aula 09
1

2. O que é PySide?
PySide = Python + Qt Framework
Python Aula 09
2

3. Qt
• Biblioteca C++
• Cross-Platform
• Licença dual (LGPL ou Comercial)
• Extensa:
Python Aula 09
3

4. Qt
Python Aula 09
4

5. Qt
Python Aula 09
5

6. Qt
Python Aula 09
6

7. Qt – Quem usa?
Python Aula 09
7

8. >>>PySide == PyQT
. . . False
PySide – LGPL
PyQT – GPL
Python Aula 09
8

9. Como Instalar - Qt
http://qt.nokia.com/downloads
Python Aula 09
9

10. Documentação - Qt
http://doc.qt.nokia.com/4.7/index.html
Python Aula 09
10

11. Como Instalar - PySide
http://developer.qt.nokia.com/wiki/
PySideDownloads/
Python Aula 09
11

12. Documentação - PySide
http://developer.qt.nokia.com/wiki/
PySideDocumentation/
Python Aula 09
12

13. Hello Qt
import sys
from PySide import QtGui # GUI module
app = QtGui.QApplication(sys.argv)
hello = QtGui.QPushButton(Hello world!)
hello.resize(100, 30)
hello.show()
sys.exit(app.exec_())
Python Aula 09
13

14. Hello Qt
import sys
from PySide import QtGui
def hello():
print “Hello!”
app = QtGui.QApplication(sys.argv)
helloButton = QtGui.QPushButton(“Hello!)
helloButton.clicked.connect(hello)
helloButton.show()
sys.exit(app.exec_())
Python Aula 09
14

15. Signals e Slots
readButton.clicked.connect(increment)
# helloButton = QObject
# clicked = Signal
# increment = Slot
Python Aula 09
15

16. Signals e Slots
from PySide.QtCore import Qobject, Slot, Signal
class Counter(QObject):
def __init__(self, count=0):
QObject.__init__(self) # super
self.count = count
# criando sinal
countChanged = Signal(int)
@Slot()
def increment(self):
self.count += 1
self.countChanged.emit(self.count)
Python Aula 09
16

17. Signals e Slots
@Slot(int)
def console_print(number):
print ‘counter value is %d’ % number
counter = Counter()
counter.counterChanged.connect(console_print)
counter.increment()
counter.increment()
counter.increment()
Python Aula 09
17

18. Signals e Slots
class Counter(QObject):
def __init__(self, parent=None):
QObject.__init__(self, parent)
self._count = 0
def getCount(self):
return self._count
def setCount(self, count):
if count != self._count:
self._count = count
self.countChanged.emit(count)
…
countChanged = Signal(int)
count = Property(int, getCount, setCount,
notify=countChanged)
Python Aula 09
18

19. QWidget
class WidgetContador(QWidget):
def __init__(self, counter = Counter()):
self._counter = counter
self.label = QLabel(“”)
self.button = QPushButton(“Incremento”)
self.button.clicked.connect(lambda:
self._counter.increment())
self._counter.countChanged.connect(lambda:
self.label.setText(str(self._counter.count)))
layout = QVBoxLayout()
layout.addWidget(self.label)
Python Aula 09
layout.addWidget(self.button)
19
self.setLayout(layout)

20. QWidget
Exercicio:
Python Aula 09
20

21. Fluid Interfaces
• http://www.youtube.com/watch?v=tSBQ63bL0_Y
• http://www.youtube.com/watch?
v=P37PaOZJzEsfeature=related
• http://www.youtube.com/watch?v=2x_bS4M3jhY
• http://www.youtube.com/watch?v=GYlyDKqzNC0
• http://www.youtube.com/watch?v=6J3QV115cSU
• http://www.youtube.com/watch?v=RTJKzJWOsbUNR=1
• http://www.youtube.com/watch?v=U7IgwNrcln8
• http://www.youtube.com/watch?
v=P37PaOZJzEsfeature=related
• http://www.youtube.com/watch?v=n3W5O2biSPU
• http://www.youtube.com/watch?v=Wq-XJMJEAnE
• http://www.youtube.com/watch?v=9NjLVTIi_ZY
• http://www.youtube.com/watch?v=g_cf-7uoK5o
Aula 09
Python
21

22. QtQuick
• Módulo QDeclarative
• QML
• Linguagem Javascript based
• Árvore de Elementos (Semelhante ao HTML)
• Integração com Qt
• Aprenda:
http://doc.qt.nokia.com/latest/qtquick.html
• Referências:
http://doc.qt.nokia.com/latest/qml-groups.html
http://doc.qt.nokia.com/latest/qdeclarativeelements.html
http://doc.qt.nokia.com/latest/qtdeclarative.html
Python Aula 09
22

23. QML – Hello World
import QtQuick 1.0
Text {
width: 200
height: 60
text: Hello World!
font.pixelSize: 32
}
Python Aula 09
23

24. QML - DeclarativeView
import sys
from PySide.QtCore import QUrl
from PySide.QtGui import QApplication, QSizePolicy
from PySide.QtDeclarative import QDeclarativeView
app = QApplication(sys.argv)
view = QDeclarativeView()
view.setSource(QUrl(‘minhaUI.qml')) # carrega
arquivo QML
view.show()
sys.exit(app.exec_())
Python Aula 09
24

25. QML - Recursos
import QtQuick 1.0
Item {
width: 1000
height: 500
Image {
x: 0; y: 0
width: 500; height: 500
source: monera.png // No mesmo diretório
que o .qml
}
Image {
x: 500; y: 0
width: 500; height: 500
// Imagem na web
source: http://imgs.xkcd.com/comics/na.png
fillMode: Image.PreserveAspectFit
09
Python Aula
}
25
}

26. QML - Âncoras
import QtQuick 1.0
Item {
Image {
id: image1 // identificado do objeto
anchors { left: parent.left; top: parent.top
bottom: parent.bottom }
source: monera.png“
}
Image {
anchors { top: parent.top; bottom:
parent.bottom
right: parent.right; left: image1.right }
source: http://imgs.xkcd.com/comics/na.png
fillMode: Image.PreserveAspectFit
}
}
Python Aula 09
26

27. QML – Property Binding
Rectangle {
width: 200
height: 200
color: 'tomato' // Nome da cor
Text {
anchors.centerIn: parent
rotation: x // Property Binding
opacity: y / 300 // Expression Binding
text: 'Rotated'
color: '#990099' // Código hexadecimal
font {
family: Helvetica
pixelSize: 90
}
smooth: true
}
}
Python Aula 09
27

28. QML - Eventos
import QtQuick 1.0
Image {
width: sourceSize.width / 2
height: sourceSize.height / 2
source: ocean.jpg
Image {
id: monera
source: monera.png
width: 150
height: 150
MouseArea {
anchors.fill: parent
onClicked: { monera.x = 300; monera.y = 300 }
}
}
Python Aula 09
}
28

29. QML – Comportamento
import QtQuick 1.0
Image {
width: sourceSize.width / 2
height: sourceSize.height / 2
source: ocean.jpg
Image {
id: monera
source: monera.png
width: 150
height: 150
Behavior on x { NumberAnimation { duration: 2000 ; easing.type:
Easing.OutElastic }}
Behavior on y { NumberAnimation { duration: 2000 ; easing.type:
Easing.OutElastic }}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: { monera.x = Math.random() Python Aula 09
;
* 500
monera.y = Math.random() * 500 }
}
29
}

30. QML – Componentes QML
Monera.qml
Ocean.qml
import QtQuick 1.0
import QtQuick 1.0
Image {
Image {
id: monera
width:
source: monera.png“
sourceSize.width / 2
height:
property int size: 150
sourceSize.height / 2
width: size
source: ocean.jpg
height: size
Repeater {
...
model: 10
Monera {
MouseArea {
size: 180
anchors.fill:
parent
x: Math.random() * 500
hoverEnabled: true
y: Math.random() *
onEntered: { ... }
500
}
}
}
}
}
Python Aula 09
30

31. QML – Python Values
monera.py
context = view.rootContext()
context.setContextProperty(‘moneraCount’,
20)
context.setContextProperty(‘moneraSize’,
120)
Ocean.qml
Repeater {
model: moneraCount
Monera { size: moneraSize ; ... }
}
Python Aula 09
31

32. QML - Model
// Model
ListModel {
id: todoList
ListElement {
task: ‘Aula de Python’
}
ListElement {
task: ‘Aula de QML’
}
ListElement {
task: ‘Happy Hour’
}
}
Python Aula 09
32

33. QML - ListView
import QtQuick 1.0
ListView {
id: notes
width: 600; height: 800
model: todoList
delegate: Component {
Text {
height: 60; width: 600
text: task
font.pixelSize: 32
MouseArea {
anchors.fill: parent
onClicked: console.log(modelData.task)
}
}
}
}
Python Aula 09
33

34. QML – Modelo Python
todo.py
view = QDeclarativeView()
context = view.rootContext()
pymodel = [{'task':'Aula Python'},
{'task':'Aula QML'},
{'task':'Happy Hour'}]
context.setContextProperty('pymodel', pymodel)
TodoList.qml
import QtQuick 1.0
ListView {
id: notes
width: 600; height: 800
model: pymodel
delegate: Component {
TodoElement { text: modelData.task; ... }
}
Python Aula 09
}
34

35. Mais sobre model View:
• ModelView:
• http://doc.qt.nokia.com/latest/qdeclarativemodels.html
• http://developer.qt.nokia.com/wiki/
Selectable_list_of_Python_objects_in_QML
• http://developer.qt.nokia.com/wiki/
Updating_QML_content_from_Python_threads
• http://blog.rburchell.com/2010/02/pyside-tutorial-model-
view-programming_22.html
Python Aula 09
35

36. PySide + QtQuick
Daker Fernandes / Marcel Caraciolo
Python Aula 09
36