Python GUI - PySide

class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11023050/a3c1acf8-86a0-11e5-8ca5-af186dc41b1b.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# 
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Python Desktop GUI - PySide

### [Eueung Mulyana](https://github.com/eueung)
### http://eueung.github.io/python/pyside
#### Python CodeLabs | [Attribution-ShareAlike CC BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)
#### 
]]
]]

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11023050/a3c1acf8-86a0-11e5-8ca5-af186dc41b1b.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# 
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Basics
#### 
]]
]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

.figstyle1[
![](images/fig01.jpg)
]

]]
.column_t1[.vmiddle[
### Example #1

```
from PySide.QtGui import QApplication, QLabel
#--------------------------------------
*app = QApplication([])
#--------------------------------------
window = QLabel('Window from label')
*window.show()
#--------------------------------------
*app.exec_()
```

### Example #2

```
*from PySide.QtGui import QApplication, QPushButton
#--------------------------------------
app = QApplication([])
#--------------------------------------
*button = QPushButton('Exit')
*button.clicked.connect(app.exit)
button.show()
#--------------------------------------
app.exec_()
```

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[

### Example #3

```
import sys
#--------------------------------------
from PySide.QtGui import QApplication, QLabel
#--------------------------------------
app = QApplication(sys.argv)
*label = QLabel("Hello World")
label.show()
#--------------------------------------
app.exec_()
sys.exit()
```

### Example #4

```
import sys
import PySide
from PySide.QtGui import QApplication, QMessageBox
#--------------------------------------
app = QApplication(sys.argv)
#--------------------------------------
*msgBox = QMessageBox()
*msgBox.setText("Hello World - using PySide version " + PySide.__version__)
*msgBox.exec_()
```

]]
.column_t2[.vmiddle[

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
## Example #5
####

.figstyle1[
![](images/fig02.jpg)
]

]]
.column_t2[.vmiddle[

```
from PySide.QtGui import QApplication, QPushButton, QColorDialog, QMessageBox, QPixmap
#--------------------------------------
*def choose_color():
    color  = QColorDialog().getColor()
    
    msgbox = QMessageBox()
*   if color.isValid():
        pixmap = QPixmap(50, 50)
        pixmap.fill(color)
        msgbox.setWindowTitle(u'Selected Color')
        msgbox.setIconPixmap(pixmap)
*   else:
        msgbox.setWindowTitle(u'No Color was Selected')
*   msgbox.exec_()
#--------------------------------------
app = QApplication([])
#--------------------------------------    
button = QPushButton('Choose Color')
*button.clicked.connect(choose_color)
button.show()
#--------------------------------------
app.exec_()
```

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

.figstyle1[
![](images/fig03.jpg)
]

]]
.column_t1[.vmiddle[
## Example #6

```
from PySide.QtGui import QApplication, QPushButton, QColorDialog, QMessageBox
#--------------------------------------
*class ButtonPainter(object):
  def __init__(self, button):
    self.button = button

* def choose_color(self):
    color  = QColorDialog().getColor()
    
*   if color.isValid():
*       self.button.setStyleSheet(u'background-color:' + color.name())
*   else:
        msgbox = QMessageBox()
        msgbox.setWindowTitle(u'No Color was Selected')
        msgbox.exec_()
#--------------------------------------
app = QApplication([])
#--------------------------------------  
button = QPushButton('Choose Color')
button_painter = ButtonPainter(button)
*button.clicked.connect(button_painter.choose_color)
button.show()
#--------------------------------------
app.exec_()
```

]]

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11023050/a3c1acf8-86a0-11e5-8ca5-af186dc41b1b.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# 
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# [PySideSimplicissimus](https://wiki.qt.io/PySide-Newbie-Tutorials)
### @[OldAl](https://github.com/OldAl)
#### 
]]
]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #1

```
*pyside-uic quitter.ui -o ui_quitter.py
```

.figstyle1[
![](images/fig04.jpg)
]

]]
.column_t2[.vmiddle[

```
import sys
from PySide.QtGui import QMainWindow, QPushButton, QApplication
*from ui_quitter import Ui_MainWindow
#----------------------------------
*class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)
#----------------------------------
if __name__ == '__main__':
    app = QApplication(sys.argv)
*   frame = MainWindow()
*   frame.show()
    app.exec_()
```

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig05.jpg)
]
### Qt4 Designer - .bluelight[quitter.ui]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #2

```
*pyside-uic about.ui > ui_about.py
```

.figstyle1[
![](images/fig06.jpg)
]

]]
.column_t2[.vmiddle[

```
import sys
import platform
#----------------------------------
import PySide
from PySide.QtGui import QApplication, QMainWindow, QTextEdit, QPushButton, QMessageBox
#----------------------------------
*from ui_about import Ui_MainWindow
#----------------------------------
__version__ = '0.0.1'
#----------------------------------
class MainWindow(QMainWindow, Ui_MainWindow):
 def __init__(self, parent=None):
 super(MainWindow, self).__init__(parent)
 self.setupUi(self)
* self.aboutButton.clicked.connect(self.about)
 #----------------------------------
* def about(self):
 QMessageBox.about(self, "About PySide, Platform and the like",
 """Platform Details v {}
 Copyright © 2010 Joe Bloggs. All rights reserved in accordance with GPL v2 or later - NO WARRANTIES!
 This application can be used for displaying platform details.
 Python {} - PySide version {} - Qt version {} on {}""".format(__version__,
 platform.python_version(), PySide.__version__, PySide.QtCore.__version__, platform.system()))
#----------------------------------
if __name__ == '__main__':
 app = QApplication(sys.argv)
 frame = MainWindow()
 frame.show()
 app.exec_()
```

]]

---
class: middle center

.figstyle1[
![](images/fig07.jpg)
]
### Qt4 Designer - .blue[about.ui]

---
class: split-50 nopadding

.column_t2[.vmiddle[

# Example #3

```
*pyside-uic licence.ui > ui_licence.py
```

.figstyle1[
![](images/fig08.jpg)
]

]]
.column_t1[.vmiddle[

```
import sys
from PySide.QtGui import QApplication, QMainWindow, QTextEdit, QPushButton
*from ui_licence import Ui_MainWindow
#----------------------------------
__version__ = '3.3.0'
#----------------------------------
class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        '''Mandatory initialisation of a class.'''
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)
*       self.showButton.clicked.connect(self.fileRead)
        
*   def fileRead(self):
        '''Read and display licence.'''
        with open('CCPL.txt') as nonamefile:
*           self.textEdit.setText(nonamefile.read())
#----------------------------------
if __name__ == '__main__':
    app = QApplication(sys.argv)
    frame = MainWindow()
    frame.show()
    app.exec_()
```

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig09.jpg)
]
### Qt4 Designer - .bluelight[licence.ui]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #4

```
*pyside-uic combine.ui > ui_combine.py
```

.figstyle1[
![](images/fig10.jpg)
]

]]
.column_t2[.vmiddle[

```
import sys
import platform
#---------------------------------------------
import PySide
from PySide.QtGui import QApplication, QMainWindow, QMessageBox
#---------------------------------------------
__version__ = '3.0.3'
*from ui_combine import Ui_MainWindow
#---------------------------------------------
class MainWindow(QMainWindow, Ui_MainWindow):
 def __init__(self, parent=None):
 super(MainWindow, self).__init__(parent)
 self.setupUi(self)
* self.actionShow_CCPL.triggered.connect(self.showCCPL)
* self.action_About.triggered.connect(self.about) 
* def showCCPL(self):
 with open('CCPL.txt') as fi:
 self.textEdit.setText(fi.read())
* def about(self):
 QMessageBox.about(self, "About PySide, Platform and version.",
 """ about.py version %s 
 Copyright © 2013 by Algis Kabaila. This work is made available under the terms of Creative Commons Attribution-ShareAlike 3.0 license, http://creativecommons.org/licenses/by-sa/3.0/.
 This application is useful for displaying Qt version and other details.
 Python %s - PySide version %s - Qt version %s on %s""" % (__version__, 
 platform.python_version(), PySide.__version__, PySide.QtCore.__version__, platform.system()))
#---------------------------------------------
if __name__ == '__main__':
 app = QApplication(sys.argv)
 frame = MainWindow()
 frame.show()
 sys.exit(app.exec_())
```

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig11.jpg)
]
### Qt4 Designer - .bluelight[combine.ui]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #5

```
*pyside-rcc combine.qrc -o qrc_combine.py
```

.figstyle1[
![](images/fig12.jpg)
]

]]
.column_t2[.vmiddle[

```xml
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file alias="quit.png">select_tango/32x32/actions/system-log-out.png</file>
<file alias="about.png">select_tango/32x32/apps/preferences-system-session.png</file>
<file alias="showgpl.png">select_tango/32x32/apps/help-browser.png</file>
</qresource>
</RCC>
```
.center[combine.qrc]

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```
import sys
import platform
import PySide
from PySide.QtGui import (QApplication, QMainWindow, QMessageBox,  QIcon)
#-----------------------------
__version__ = '3.1.5'
from ui_combine import Ui_MainWindow
*import qrc_combine
#-----------------------------
class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)
        self.setWindowTitle('Combine Code Blocks.')
        self.actionShow_CCPL.triggered.connect(self.showCCPL)
        self.action_About.triggered.connect(self.about)                
*       iconToolBar = self.addToolBar('') 
#------------------------------------------------------
# Add icons to appear in tool bar - step 1
*       self.actionShow_CCPL.setIcon(QIcon(":/showgpl.png"))
*       self.action_About.setIcon(QIcon(":/about.png"))
*       self.action_Close.setIcon(QIcon(":/quit.png"))
#------------------------------------------------------
# Show a tip on the Status Bar - step 2
*       self.actionShow_CCPL.setStatusTip("Show CCP Licence")
*       self.action_About.setStatusTip("Pop up the About dialog.")
*       self.action_Close.setStatusTip("Close the program.")
#------------------------------------------------------        
*       iconToolBar.addAction(self.actionShow_CCPL)
*       iconToolBar.addAction(self.action_About)
*       iconToolBar.addAction(self.action_Close)
```

]]
.column_t1[.vmiddle[
# Example #5

```
*   def showCCPL(self):
        # ...        
        
*   def about(self):
        # ...                       
#-----------------------------                
*if __name__ == '__main__':
    # ...
```

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```
import ...
from PySide.QtGui import (QApplication, QMainWindow, QMessageBox, QIcon)
#------------------------------------------------------
__version__ = '3.1.5'
*from ui_combine import Ui_MainWindow as Ui
import qrc_combine
#------------------------------------------------------   
*class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
*       # Store Ui() as class variable self.ui
*       self.ui = Ui()
        self.ui.setupUi(self)
        self.setWindowTitle('Combine Code Blocks.')        
        self.ui.actionShow_CCPL.triggered.connect(self.showCCPL)
        self.ui.action_About.triggered.connect(self.about)        
        iconToolBar = self.addToolBar("iconBar.png") 
#------------------------------------------------------
# Add icons to appear in tool bar - step 1
*       self.ui.actionShow_CCPL.setIcon(QIcon(":/showgpl.png"))
        self.ui.action_About.setIcon(QIcon(":/about.png"))
        self.ui.action_Close.setIcon(QIcon(":/quit.png"))
#------------------------------------------------------
# Show a tip on the Status Bar - step 2
*       self.ui.actionShow_CCPL.setStatusTip("Show CC Licence")
        self.ui.action_About.setStatusTip("Pop up the About dialog.")
        self.ui.action_Close.setStatusTip("Close the program.")
#------------------------------------------------------        
*       iconToolBar.addAction(self.ui.actionShow_CCPL)
        iconToolBar.addAction(self.ui.action_About)
        iconToolBar.addAction(self.ui.action_Close)
```

]]
.column_t1[.vmiddle[
### Example #5 - Alternative

```
 def showCCPL(self):
 with open('CCPL.txt') as fi: 
* self.ui.textEdit.setText(fi.read()) 
 
 def about(self):
 QMessageBox.about(self, "About PySide, Platform and the like",
 """ about.py version %s 
 Copyright © 2013 by Algis Kabaila. This work is made available under the terms of
 Creative Commons Attribution-ShareAlike 3.0 license, http://creativecommons.org/licenses/by-sa/3.0/.
 This application is useful for displaying Qt version and other details.
 Python %s - PySide version %s - Qt version %s on %s""" %
 (__version__, platform.python_version(), PySide.__version__, PySide.QtCore.__version__, platform.system())) 
#------------------------------------------------------
if __name__ == '__main__':
 app = QApplication(sys.argv)
 frame = MainWindow()
 frame.show()
 sys.exit(app.exec_())
```

]]

---

# References

1. [PySide-Newbie-Tutorials](https://wiki.qt.io/PySide-Newbie-Tutorials)
1. [OldAl/tuts4pyside](https://github.com/OldAl/tuts4pyside)
1. [techtonik/pyside](https://bitbucket.org/techtonik/pyside-copy-paste/src/5f8c1f8cf12d?at=default)

# Other Readings
1. [PySide - Qt Wiki](https://wiki.qt.io/PySide)
1. [PySide Tutorials - Qt Wiki](https://wiki.qt.io/PySide_Tutorials)
1. [PySide Example Applications](https://wiki.qt.io/PySide_Example_Applications)
1. [PySide/Examples](https://github.com/PySide/Examples)
1. [shuge/Qt-Python-Binding-Examples](https://github.com/shuge/Qt-Python-Binding-Examples)
1. [Friz-zy/basis](https://github.com/Friz-zy/basis)

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11023050/a3c1acf8-86a0-11e5-8ca5-af186dc41b1b.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# 
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# END