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

CITi - PySide

Embed Size (px)

DESCRIPTION

PySide presentation from Python course on CITi.

Citation preview

Page 1: CITi - PySide

1

PySide + QtQuick

Daker Fernandes / Marcel Caraciolo Python Aula 09

Page 2: CITi - PySide

2

O que é PySide?

PySide = Python + Qt Framework

Python Aula 09

Page 3: CITi - PySide

3

Qt •  Biblioteca C++

•  Cross-Platform

•  Licença dual (LGPL ou Comercial)

•  Extensa:

Python Aula 09

Page 4: CITi - PySide

4

Qt

Python Aula 09

Page 5: CITi - PySide

5

Qt

Python Aula 09

Page 6: CITi - PySide

6

Qt

Python Aula 09

Page 7: CITi - PySide

7

Qt – Quem usa?

Python Aula 09

Page 8: CITi - PySide

8

>>>PySide == PyQT�. . . False

Python Aula 09

PySide – LGPL PyQT – GPL

Page 9: CITi - PySide

9

Como Instalar - Qt

http://qt.nokia.com/downloads

Python Aula 09

Page 10: CITi - PySide

10

Documentação - Qt

http://doc.qt.nokia.com/4.7/index.html Python Aula 09

Page 11: CITi - PySide

11

Como Instalar - PySide

http://developer.qt.nokia.com/wiki/PySideDownloads/

Python Aula 09

Page 12: CITi - PySide

12

Documentação - PySide

http://developer.qt.nokia.com/wiki/PySideDocumentation/

Python Aula 09

Page 13: CITi - PySide

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_())

Page 14: CITi - PySide

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_())

Page 15: CITi - PySide

15

Signals e Slots

Python Aula 09

readButton.clicked.connect(increment)

# helloButton = QObject # clicked = Signal # increment = Slot

Page 16: CITi - PySide

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)

Page 17: CITi - PySide

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

Page 18: CITi - PySide

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)

Page 19: CITi - PySide

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)

Page 20: CITi - PySide

20

QWidget

Python Aula 09

Exercicio:

Page 21: CITi - PySide

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

Page 22: CITi - PySide

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

Page 23: CITi - PySide

23

QML – Hello World

Python Aula 09

import QtQuick 1.0

Text { width: 200 height: 60 text: "Hello World!" font.pixelSize: 32

}

Page 24: CITi - PySide

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_())

Page 25: CITi - PySide

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 }

}

Page 26: CITi - PySide

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 }

}

Page 27: CITi - PySide

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 }

}

Page 28: CITi - PySide

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 } } }

}

Page 29: CITi - PySide

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 } } }

}

Page 30: CITi - PySide

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 } } }

Page 31: CITi - PySide

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 ; ... }

}

Page 32: CITi - PySide

32

QML - Model

Python Aula 09

// Model ListModel {

id: todoList ListElement { task: ‘Aula de Python’ } ListElement { task: ‘Aula de QML’ } ListElement { task: ‘Happy Hour’ }

}

Page 33: CITi - PySide

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

}

Page 34: CITi - PySide

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; ... } }

}

Page 35: CITi - PySide

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

Page 36: CITi - PySide

36

PySide + QtQuick

Daker Fernandes / Marcel Caraciolo Python Aula 09