Icon dan Tooltip Pada PySide

Pada tutorial PySide sebelumnya, kita telah menampilkan window sederhana beserta sedikit penjelasan. Sekarang, kita akan menambahkan icon pada window kita dan juga akan sedikit mempelajari tentang tooltip. Seperti biasa, bagian pertama dari tutorial PySide ini akan saya sajikan kode program dalam bentuk prosedural, dan kemudian dalam bentuk OOP pada bagian akhirnya.

Muat Kembali Kode Program Sebelumnya

Buat file baru lalu masukkan kode program dari tutorial sebelumnya. Atau kalau mau tidak ribet, anda bisa langsung edit file pada tutorial sebelumnya.

import sys
from PySide import QtGui

"""
Jago Ngoding tutorial PySide bahasa Indonesia

author: Ibnu Jakaria
"""

# mendeklrasikan QtGui applikasi
app = QtGui.QApplication(sys.argv)

# mendeklarasikan window dari kelas QWidget
window = QtGui.QWidget()
window.resize(800, 600)
window.setWindowTitle('Jago Ngoding')
window.show()

sys.exit(app.exec_())

Download Gambar PNG/JPG di Internet untuk Icon

Pada tutorial ini saya memakai gambar emoticon senyum, yang saya sadur dari internet. Lalu saya taruh filenya satu folder dengan file kode program. Saya beri nama dengan smile.png.

Buat Instance Variable dari QtGui.QIcon

PySide.QtGui.QIcon adalah kelas yang bisa menyediakan scalable icon dalam mode dan ukuran yang berbeda-beda [1]. Kita bisa men-generate ukuran small, large, mengaktifkan atau men-disable pixmaps yang diberikan. Seperti pixmaps (gambar) yang digunakan QWidget untuk menampilkan tombol-tombol dengan icon tertentu, atau sebagai icon pada window itu sendiri.

icon = QtGui.QIcon('smile.png')
window.setWindowIcon(icon)

Berikut hasil program ketika dirunning:

Buat Tombol dengan QtGui.QPushButton

Anda juga bisa membuat tombol dengan QtGui.QPushButton(label, widget) lalu memberinya icon.

button = QtGui.QPushButton('Halo!', window)
button.resize(button.sizeHint())
button.move(10, 10)
button.setIcon(icon)

Penjelasan:
Pada kode program button = QtGui.QPushButton('Halo!', window), kita memberi parameter yang kedua adalah QWidget alias yang kita beri nama window. Hal ini berfungsi untuk menempatkan button yang baru kita buat, di atas jendela window. Anda bisa menempatkan masing-masing komponen di atas komponen lainnya.

Berikut penampilan setelah kita tambahkan tombol:

Setiap komponen user interface pada QtGui adalah kelas turunan dari PySide.QtGui.QWidget, dan tentu saja memiliki fungsi setToolTip. Termasuk PySide.QtGui.QPushButton. Jadi kita bisa memberikan teks tooltip hampir ke semua komponen.

Tambahkan tooltip ke pada window utama.

window.setToolTip('Belajar <strong>PySide</strong> yuk!')

Dan tambahkan tooltip ke pada tombol.

button.setToolTip('Ini tombol dengan icon :)')

Ketika program dieksekusi, tooltip akan keluar jika anda meletakkan kursor di atas button, atau di atas layar utama.

Kode Program Secara Menyeluruh (Prosedural)

import sys
from PySide import QtGui

# mendeklrasikan QtGui applikasi
app = QtGui.QApplication(sys.argv)

window = QtGui.QWidget()
icon = QtGui.QIcon('smile.png')

button = QtGui.QPushButton('Halo!', window)
button.resize(button.sizeHint())
button.move(10, 10)
button.setIcon(icon)
button.setToolTip('Ini tombol dengan icon :)')

window.resize(800, 600)
window.setWindowTitle('Jago Ngoding')
window.setWindowIcon(icon)
window.setToolTip('Belajar <strong>PySide</strong> yuk!')
window.show()

sys.exit(app.exec_())

Kode Program Secara Menyeluruh (OOP)

import sys
from PySide import QtGui

"""
Jago Ngoding tutorial PySide berbahasa Indonesia

author: Ibnu Jakaria
"""

class Jendela(QtGui.QWidget):

  def __init__(self):
    super(Jendela, self).__init__()

    self.icon = QtGui.QIcon('smile.png')
    self.siapkanUI()

  def siapkanUI(self):
    self.resize(800, 600)
    self.setWindowTitle('Jago Ngoding')
    self.setWindowIcon(self.icon)
    self.setToolTip('Belajar <strong>PySide</strong> yuk!')
    self.siapkanTombol()

  def siapkanTombol(self):
    self.button = QtGui.QPushButton('Halo!', self)
    self.button.resize(self.button.sizeHint())
    self.button.move(10, 10)
    self.button.setIcon(self.icon)
    self.button.setToolTip('Ini tombol dengan icon :)')

app = QtGui.QApplication(sys.argv)
jendela = Jendela()
jendela.show()
sys.exit(app.exec_())

Referensi:
[1] https://srinikom.github.io/pyside-docs/PySide/QtGui/QIcon.html