CITi - PySide
1 like•2,283 views
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.
![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](https://image.slidesharecdn.com/aulapyside-110715130719-phpapp01/85/CITi-PySide-34-320.jpg)
CITi - PySide
- 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