CITi - PySide

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

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

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

Qt Python Aula 09 4

Qt Python Aula 09 5

Qt Python Aula 09 6

Qt – Quem usa? Python Aula 09 7

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

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

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

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

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

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

Hello Qtimport sysfrom PySide import QtGuidef 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

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

Signals e Slotsfrom PySide.QtCore import Qobject, Slot, Signalclass 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

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

Signals e Slotsclass 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

QWidgetclass 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)

QWidget Exercicio: Python Aula 09 20

Fluid Interfaces•  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 Aula 09 Python 21

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.htmlhttp://doc.qt.nokia.com/latest/qdeclarativeelements.htmlhttp://doc.qt.nokia.com/latest/qtdeclarative.html Python Aula 09 22

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

QML - DeclarativeViewimport sysfrom PySide.QtCore import QUrlfrom PySide.QtGui import QApplication, QSizePolicyfrom PySide.QtDeclarative import QDeclarativeViewapp = QApplication(sys.argv)view = QDeclarativeView()view.setSource(QUrl(‘minhaUI.qml)) # carregaarquivo QMLview.show()sys.exit(app.exec_()) Python Aula 09 24

QML - Recursosimport QtQuick 1.0Item { width: 1000 height: 500 Image { x: 0; y: 0 width: 500; height: 500 source: "monera.png" // No mesmo diretórioque 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}

QML - Âncorasimport QtQuick 1.0Item { 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

QML – Property BindingRectangle { 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

QML - Eventosimport QtQuick 1.0Image { 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

QML – Comportamentoimport QtQuick 1.0Image { 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 }

QML – Componentes QMLMonera.qml Ocean.qmlimport QtQuick 1.0 import QtQuick 1.0Image { 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

QML – Python Valuesmonera.pycontext = view.rootContext()context.setContextProperty(‘moneraCount’,20)context.setContextProperty(‘moneraSize’,120)Ocean.qmlRepeater { model: moneraCount Monera { size: moneraSize ; ... }} Python Aula 09 31

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

QML - ListViewimport QtQuick 1.0ListView { 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

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

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-modelview-programming_22.html Python Aula 09 35

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

http://codecereal.blogspot.com	576
http://codecereal.blogspot.com.br	126
http://www.python.rk.edu.pl	21
http://codecereal.blogspot.de	9
http://codecereal.blogspot.com.es	8
http://codecereal.blogspot.in	7
http://codecereal.blogspot.fr	6
http://codecereal.blogspot.it	5
http://codecereal.blogspot.pt	5
http://codecereal.blogspot.ca	5
http://codecereal.blogspot.se	3
http://codecereal.blogspot.co.uk	3
http://codecereal.blogspot.com.au	2
http://codecereal.blogspot.com.ar	2
http://localhost	2
http://translate.googleusercontent.com	1
http://codecereal.blogspot.co.nz	1

CITi - PySide

by Daker Fernandes on Jul 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

17 Embeds 782

Statistics

CITi - PySide — Presentation Transcript