Bismillah.

Pada tutorial sebelumnya, kita sudah bermain-main dengan QMainWindow. Kita juga sudah mencoba QTextEdit, juga menampilkan QCalendar. Sekarang kita buka kembali project yang kemarin. Kita akan menambahkan menu, toolbar, dan juga status bar.

Screenshot from 2017-09-26 12-40-55.png

Berikut kode program project yang kemarin:

import sys
from PySide import QtGui, QtCore

"""
Jago Ngoding tutorial PySide bahasa Indonesia

author: Ibnu Jakaria
"""

app = QtGui.QApplication(sys.argv)

mainWindow = QtGui.QMainWindow()
mainWindow.resize(800, 600)
mainWindow.setWindowTitle('Tutorial PySide')

# menjadikan calendar widget sebagai central widget
calendar = QtGui.QCalendarWidget()
mainWindow.setCentralWidget(calendar)

mainWindow.show()

sys.exit(app.exec_())

Membuat Menu

PySide.QtGui.QMenu adalah kelas yang digunakan untuk mendefinisikan menu. Menu item-nya apa saja, aksinya apa saja, juga shortcut-shortcut-nya apa saja. Instance dari kelas PySide.QtGui.QMenu bisa ditempatkan pada menu bar, context menu, atau pun menu popup [1].

Screenshot from 2017-09-26 12-50-48.png

Menu Bar yaitu ditampilkan di bagian atas, context menu yaitu berdiri sendiri sebagai menu, atau pun popup menu yang muncul sebagai popup (biasanya ketika kita mengklik kanan ke sebuah widget). Untuk menambahkan menu ke menu bar, kita bisa memanggil fungsi PySide.QtGui.QMenuBar.addMenu(). Sedangkan untuk context menu dan popup menu, kita bisa menampilkan menu tergantung dengan event, dengan memanggil fungsi PySide.QtGui.QMenu.popup() atau juga dengan memanggil fungsi exec().

Menu di Menu Bar

Tulis kode program di bawah untuk membuat menu baru.

topMenuHome = QtGui.QMenu('&Home')
exitAction = topMenuHome.addAction('Exit')
exitAction.setShortcut('Ctrl+q')

Tambahkan action pada tombol Exit.

# KARENA INI PROSEDURAL, MAKA SAYA MEMBUAT FUNGSI PYTHON BIASA SEBAGAI
# EVENT LISTENERNYA. ANDA BISA MELIHAT IMPLEMENTASI DALAM BENTUK OOP
# DIAKHIR TUTORIAL INI

def exit():
    print ('Tombol exit ditrigger')

# jadi ketika tombol exit diklik/ditrigger, maka fungsi exit di atas akan dipanggil.
exitAction.triggered.connect(exit)

Tambahkan menu yang sudah dibuat ke menu bar yang terdapat pada Main Window Kita.

mainWindow.menuBar().addMenu(topMenuHome)

Screenshot from 2017-09-26 13-32-04.png

Menu Popup Saat Diklik Kanan

Buat instance dari QMenu seperti berikut:

popupMenu = QtGui.QMenu('Popup')
popupMenu.addAction('Help')
popupMenu.addAction('About')
popupMenu.addAction('Exit')

Set mainWindow sebagi parent dari popupMenu.

popupMenu.setParent(mainWindow)

Lalu sembunyikan popup menu agar tidak langsung muncul ketika aplikasi dijalankan.

popupMenu.hide()

Untuk sementara, QCalendar dari project sebelumnya jangan ditampilkan dulu agar popup menu tidak terganggu.

# mainWindow.setCentralWidget(calendar)

Buat fungsi untuk menhandle ketika tombol mouse dilepaskan.

# INGAT, DISINI SAYA MENGGUNAKAN PROSEDURAL. ANDA HARUS MENG-OVERRIDE
# FUNGSI mouseReleaseEvent() JIKA MENGGUNAKAN OOP

def onMouseRealease (event):
    if event.button() == QtCore.Qt.MouseButton.RightButton:
        popupMenu.popup(event.pos())
    else:
        popupMenu.hide()

Bound fungsi di atas ke mainWindow kita.

# ANDA TIDAK PERLU MENGGUNAKAN CARA INI JIKA MENGGUNAKAN KONSEP OOP [LIHAT CONTOHNYA
# DI AKHIR TUTORIAL]
mainWindow.mouseReleaseEvent = onMouseRealease

Berikut hasil programnya:

Screenshot from 2017-09-26 13-59-43.png

Membuat Toolbar

Toolbar diimplementasikan dengan membuat instance dari kelas PySide.QtGui.QToolbar. Kita bisa menambahkan toolbar ke main window kita dengan memanggil fungsi addToolbar().

Ukuran dari toolbar sendiri ditentukan dari ukuran icon-nya. Ukuran icon bersifat platform-dependent, tergantung dengan platform. Tetapi kita bisa mendefinisikannya dengan angka tetap dengan memanggil fungsi setIconSize(). [2]

Tulis kode program berikut untuk membuat toolbar.

toolbar = QtGui.QToolBar('Tes')
toolbar.addAction('Aksi 1')
toolbar.addAction('Aksi 2')
toolbar.addAction('Aksi 3')

Lalu tambahkan toolbar yang sudah dibuat di atas ke main window.

mainWindow.addToolBar(toolbar)

Berikut hasilnya.

Screenshot from 2017-09-26 14-14-00.png

Anda bisa memindahkan toolbar ke tempat yang lainnya dengan menggeser toolbar tersebut dengan kursor.

Geser ke sebelah kiri.

Screenshot from 2017-09-26 14-14-12.png

Geser ke tempat bebas.

Screenshot from 2017-09-26 14-14-29.png

Untuk membuat toolbar tidak bisa dipindah, panggil fungsi: toolbar.setMovable(False)

Membuat Status Bar

PySide.QtGui.QToolBar menyediakan bar horizontal di bagian bawah main window untuk menampilkan status informasi aplikasi [3]. Setiap status toolbar, kembali ke tiga kategori:

  • temporary - yaitu bersifat sementara
  • normal - yaitu tampil terus-menerus, akan tetapi bisa direplace dengan status yang lain.
  • permanent - yaitu tampil terus-menerus tanpa intervensi.

Anda bisa menampilkan pesan ke status bar yang ada pada main window dengan perintah berikut:

mainWindow.statusBar().showMessage('Halo~ pesan ini akan tampil selama 2 detik', 2000)

Screenshot from 2017-09-26 14-31-41.png

Kode Program Lengkap

Versi Prosedural

import sys
from PySide import QtGui, QtCore

"""
Jago Ngoding tutorial PySide bahasa Indonesia

author: Ibnu Jakaria
"""

app = QtGui.QApplication(sys.argv)

mainWindow = QtGui.QMainWindow()
mainWindow.resize(800, 600)
mainWindow.setWindowTitle('Tutorial PySide')

# menjadikan calendar widget sebagai central widget
calendar = QtGui.QCalendarWidget()
mainWindow.setCentralWidget(calendar)

def exit():
    print ('Tombol exit ditrigger')

topMenuHome = QtGui.QMenu('&Home')
exitAction = topMenuHome.addAction('Exit')
exitAction.setShortcut('Ctrl+q')
exitAction.triggered.connect(exit)

mainWindow.menuBar().addMenu(topMenuHome)

popupMenu = QtGui.QMenu('Popup')
popupMenu.addAction('Help')
popupMenu.addAction('About')
popupMenu.addAction('Exit')
popupMenu.setParent(mainWindow)
popupMenu.hide()

def onMouseRealease (event):
    if event.button() == QtCore.Qt.MouseButton.RightButton:
        popupMenu.popup(event.pos())
    else:
        popupMenu.hide()
mainWindow.mouseReleaseEvent = onMouseRealease

toolbar = QtGui.QToolBar('Tes')
toolbar.addAction('Aksi 1')
toolbar.addAction('Aksi 2')
toolbar.addAction('Aksi 3')
toolbar.setMovable(False)
mainWindow.addToolBar(toolbar)

mainWindow.statusBar().showMessage('Halo~ pesan ini akan tampil selama 2 detik', 2000)

mainWindow.show()

sys.exit(app.exec_())

Versi OOP

import sys
from PySide import QtGui, QtCore

"""
Jago Ngoding tutorial PySide berbahasa Indonesia

author: Ibnu Jakaria
"""

class JendelaUtama(QtGui.QMainWindow):
    def __init__(self):
        super(JendelaUtama, self).__init__()
        self.siapkanUI()
        self.show()

    def siapkanUI(self):
        self.resize(800, 600)
        self.setWindowTitle('Tutorial PySide')
        self.siapkanMenu()
        self.siapkanToolbar()
        self.siapkanPopupMenu()
        self.siapkanBagianTengah()
        self.statusBar().showMessage('Halo~ pesan ini akan tampil selama 2 detik', 2000)

    def siapkanBagianTengah(self):
        # menjadikan calendar widget sebagai central widget
        self.calendar = QtGui.QCalendarWidget()
        self.setCentralWidget(self.calendar)

    def siapkanMenu(self):
        topMenuHome = QtGui.QMenu('&Home')
        exitAction = topMenuHome.addAction('Exit')
        exitAction.setShortcut('Ctrl+q')
        exitAction.triggered.connect(QtCore.QCoreApplication.instance().quit)
        self.menuBar().addMenu(topMenuHome)

    def siapkanPopupMenu(self):
        self.popupMenu = QtGui.QMenu('Popup')
        self.popupMenu.addAction('Help')
        self.popupMenu.addAction('About')
        self.popupMenu.addAction('Exit')
        self.popupMenu.setParent(self)
        self.popupMenu.hide()

    def siapkanToolbar(self):
        toolbar = self.addToolBar('tes')
        toolbar.addAction('Aksi 1')
        toolbar.addAction('Aksi 2')
        toolbar.addAction('Aksi 3')
        toolbar.setMovable(False)

    def mouseReleaseEvent(self, event):
        if event.button() == QtCore.Qt.MouseButton.RightButton:
            self.popupMenu.popup(event.pos())
        else:
            self.popupMenu.hide()

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

Semoga bermanfaat! Sampai jumpa di tutorial pyside selanjutnya!

Catatan kaki:

[1] https://srinikom.github.io/pyside-docs/PySide/QtGui/QMenu.html
[2] https://srinikom.github.io/pyside-docs/PySide/QtGui/QToolBar.html
[3] https://srinikom.github.io/pyside-docs/PySide/QtGui/QStatusBar.html