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:                                       P...
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...
Documentação - PySide  http://developer.qt.nokia.com/wiki/          PySideDocumentation/                             Pytho...
Hello Qtimport sysfrom PySide import QtGui # GUI moduleapp = QtGui.QApplication(sys.argv)
hello = QtGui.QPushButton(Hello ...
Hello Qtimport sysfrom PySide import QtGuidef hello():   print “Hello!”app = QtGui.QApplication(sys.argv)
helloButton = Qt...
Signals e SlotsreadButton.clicked.connect(increment)# helloButton = QObject# clicked = Signal# increment = Slot           ...
Signals e Slotsfrom PySide.QtCore import Qobject, Slot, Signalclass Counter(QObject):   def __init__(self, count=0):      ...
Signals e Slots@Slot(int)def console_print(number):   print ‘counter value is %d’ % numbercounter = Counter()counter.count...
Signals e Slotsclass Counter(QObject):    def __init__(self, parent=None):        QObject.__init__(self, parent)        se...
QWidgetclass WidgetContador(QWidget):       def __init__(self, counter = Counter()):            self._counter = counter   ...
QWidget           Exercicio:                         Python Aula 09                20
Fluid Interfaces•  http://www.youtube.com/watch?v=tSBQ63bL0_Y•  http://www.youtube.com/watch?   v=P37PaOZJzEsfeature=relat...
QtQuick•  Módulo QDeclarative•  QML   •  Linguagem Javascript based   •  Árvore de Elementos (Semelhante ao HTML)   •  Int...
QML – Hello Worldimport QtQuick 1.0Text {   width: 200   height: 60   text: Hello World!   font.pixelSize: 32}            ...
QML - DeclarativeViewimport sysfrom PySide.QtCore import QUrlfrom PySide.QtGui import QApplication, QSizePolicyfrom PySide...
QML - Recursosimport QtQuick 1.0Item {   width: 1000   height: 500   Image {       x: 0; y: 0       width: 500; height: 50...
QML - Âncorasimport QtQuick 1.0Item {   Image {       id: image1 // identificado do objeto       anchors { left: parent.le...
QML – Property BindingRectangle {   width: 200   height: 200   color: tomato // Nome da cor   Text {       anchors.centerI...
QML - Eventosimport QtQuick 1.0Image {    width: sourceSize.width / 2    height: sourceSize.height / 2     source: ocean.j...
QML – Comportamentoimport QtQuick 1.0Image {     width: sourceSize.width / 2     height: sourceSize.height / 2    source: ...
QML – Componentes QMLMonera.qml                              Ocean.qmlimport QtQuick 1.0                              impo...
QML – Python Valuesmonera.pycontext = view.rootContext()context.setContextProperty(‘moneraCount’,20)context.setContextProp...
QML - Model// ModelListModel {   id: todoList   ListElement {    task: ‘Aula de Python’   }   ListElement {    task: ‘Aula...
QML - ListViewimport QtQuick 1.0ListView {    id: notes    width: 600; height: 800    model: todoList    delegate: Compone...
QML – Modelo Pythontodo.pyview = QDeclarativeView()context = view.rootContext()pymodel = [{task:Aula Python},    {task:Aul...
Mais sobre model View:•  ModelView:•  http://doc.qt.nokia.com/latest/qdeclarativemodels.html•  http://developer.qt.nokia.c...
PySide + QtQuick   Daker Fernandes / Marcel Caraciolo                     Python Aula 09        36
Upcoming SlideShare
Loading in …5
×

CITi - PySide

6,005 views

Published on

PySide presentation from Python course on CITi.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,005
On SlideShare
0
From Embeds
0
Number of Embeds
3,522
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CITi - PySide

  1. 1. PySide + QtQuick Daker Fernandes / Marcel Caraciolo Python Aula 09 1
  2. 2. O que é PySide? PySide = Python + Qt Framework Python Aula 09 2
  3. 3. Qt•  Biblioteca C++•  Cross-Platform•  Licença dual (LGPL ou Comercial)•  Extensa: Python Aula 09 3
  4. 4. Qt Python Aula 09 4
  5. 5. Qt Python Aula 09 5
  6. 6. Qt Python Aula 09 6
  7. 7. Qt – Quem usa? Python Aula 09 7
  8. 8. >>>PySide == PyQT. . . False PySide – LGPL PyQT – GPL Python Aula 09 8
  9. 9. Como Instalar - Qt http://qt.nokia.com/downloads Python Aula 09 9
  10. 10. Documentação - Qt http://doc.qt.nokia.com/4.7/index.html Python Aula 09 10
  11. 11. Como Instalar - PySide http://developer.qt.nokia.com/wiki/ PySideDownloads/ Python Aula 09 11
  12. 12. Documentação - PySide http://developer.qt.nokia.com/wiki/ PySideDocumentation/ Python Aula 09 12
  13. 13. 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
  14. 14. 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
  15. 15. Signals e SlotsreadButton.clicked.connect(increment)# helloButton = QObject# clicked = Signal# increment = Slot Python Aula 09 15
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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)
  20. 20. QWidget Exercicio: Python Aula 09 20
  21. 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. 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.htmlhttp://doc.qt.nokia.com/latest/qdeclarativeelements.htmlhttp://doc.qt.nokia.com/latest/qtdeclarative.html Python Aula 09 22
  23. 23. QML – Hello Worldimport QtQuick 1.0Text { width: 200 height: 60 text: Hello World! font.pixelSize: 32} Python Aula 09 23
  24. 24. 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
  25. 25. 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}
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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 }
  30. 30. 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
  31. 31. 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
  32. 32. QML - Model// ModelListModel { id: todoList ListElement { task: ‘Aula de Python’ } ListElement { task: ‘Aula de QML’ } ListElement { task: ‘Happy Hour’ }} Python Aula 09 32
  33. 33. 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
  34. 34. 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
  35. 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. 36. PySide + QtQuick Daker Fernandes / Marcel Caraciolo Python Aula 09 36

×