Upload
daker-fernandes
View
5.380
Download
0
Embed Size (px)
DESCRIPTION
PySide presentation from Python course on CITi.
Citation preview
1
PySide + QtQuick
Daker Fernandes / Marcel Caraciolo Python Aula 09
2
O que é PySide?
PySide = Python + Qt Framework
Python Aula 09
3
Qt • Biblioteca C++
• Cross-Platform
• Licença dual (LGPL ou Comercial)
• Extensa:
Python Aula 09
4
Qt
Python Aula 09
5
Qt
Python Aula 09
6
Qt
Python Aula 09
7
Qt – Quem usa?
Python Aula 09
8
>>>PySide == PyQT�. . . False
Python Aula 09
PySide – LGPL PyQT – GPL
9
Como Instalar - Qt
http://qt.nokia.com/downloads
Python Aula 09
10
Documentação - Qt
http://doc.qt.nokia.com/4.7/index.html Python Aula 09
11
Como Instalar - PySide
http://developer.qt.nokia.com/wiki/PySideDownloads/
Python Aula 09
12
Documentação - PySide
http://developer.qt.nokia.com/wiki/PySideDocumentation/
Python Aula 09
13
Hello Qt
Python Aula 09
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_())
14
Hello Qt
Python Aula 09
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_())
15
Signals e Slots
Python Aula 09
readButton.clicked.connect(increment)
# helloButton = QObject # clicked = Signal # increment = Slot
16
Signals e Slots
Python Aula 09
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)
17
Signals e Slots
Python Aula 09
@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()
18
Signals e Slots
Python Aula 09
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)
19
QWidget
Python Aula 09
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) layout.addWidget(self.button) self.setLayout(layout)
20
QWidget
Python Aula 09
Exercicio:
21
Fluid Interfaces
Python Aula 09
• http://www.youtube.com/watch?v=tSBQ63bL0_Y • http://www.youtube.com/watch?
v=P37PaOZJzEs&feature=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=RTJKzJWOsbU&NR=1 • http://www.youtube.com/watch?v=U7IgwNrcln8 • http://www.youtube.com/watch?
v=P37PaOZJzEs&feature=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
22
QtQuick
Python Aula 09
• 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
23
QML – Hello World
Python Aula 09
import QtQuick 1.0
Text { width: 200 height: 60 text: "Hello World!" font.pixelSize: 32
}
24
QML - DeclarativeView
Python Aula 09
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_())
25
QML - Recursos
Python Aula 09
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 }
}
26
QML - Âncoras
Python Aula 09
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 }
}
27
QML – Property Binding
Python Aula 09
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 }
}
28
QML - Eventos
Python Aula 09
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 } } }
}
29
QML – Comportamento
Python Aula 09
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() * 500 ; monera.y = Math.random() * 500 } } }
}
30
QML – Componentes QML
Python Aula 09
Monera.qml import QtQuick 1.0
Image { id: monera source: "monera.png“
property int size: 150
width: size height: size
...
MouseArea { anchors.fill: parent hoverEnabled: true onEntered: { ... } }
}
Ocean.qml import QtQuick 1.0
Image { width: sourceSize.width / 2 height: sourceSize.height / 2
source: "ocean.jpg"
Repeater { model: 10 Monera {
size: 180 x: Math.random() * 500 y: Math.random() *
500 } } }
31
QML – Python Values
Python Aula 09
monera.py context = view.rootContext() context.setContextProperty(‘moneraCount’, 20) context.setContextProperty(‘moneraSize’, 120)
Ocean.qml Repeater {
model: moneraCount Monera { size: moneraSize ; ... }
}
32
QML - Model
Python Aula 09
// Model ListModel {
id: todoList ListElement { task: ‘Aula de Python’ } ListElement { task: ‘Aula de QML’ } ListElement { task: ‘Happy Hour’ }
}
33
QML - ListView
Python Aula 09
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) } } }
}
34
QML – Modelo Python
Python Aula 09
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; ... } }
}
35
Mais sobre model View:
Python Aula 09
• 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
36
PySide + QtQuick
Daker Fernandes / Marcel Caraciolo Python Aula 09