Bismillah.
Pendahuluan
Pada tutorial PySide kali ini, insyaallah saya akan mendemonstrasikan contoh-contoh penggunaan widget-widget pada PySide yang berfungsi untuk menangkap input dari user.
Dan agar bisa mengikuti dengan baik, setidaknya anda sudah familiar dengan apa itu signal dan slot pada PySide, dan juga dengan penggunaan Form Layout pada PySide.
Buat Window Utama
Saya akan menggunakan FormLayout sebagai basisnya. Untuk kemudian satu-persatu widget yang berhubungan dengan user-input akan ditambahkan.
import sys
from PySide import QtGui
app = QtGui.QApplication(sys.argv)
window = QtGui.QWidget()
window.resize(300, 200)
window.setWindowTitle('Tutorial Belajar PySide')
layout = QtGui.QFormLayout(window)
# di sini nanti kita akan tambahkan widget-widgetnya
window.show()
sys.exit(app.exec_())
Check Box
Untuk menggunakan check box, kita harus membuat instance dari kelas PySide.QtGui.QCheckBox.
nasiGoreng = QtGui.QCheckBox('Nasi Goreng')
nasiPecel = QtGui.QCheckBox('Nasi Pecel')
nasiKuning = QtGui.QCheckBox('Nasi Kuning')
Lalu tambahkan tiga checkbox di atas ke dalam layout yang sudah kita buat sebelumnya.
layout.addRow(QtGui.QLabel('Menu:'))
layout.addRow(nasiGoreng)
layout.addRow(nasiPecel)
layout.addRow(nasiKuning)
Berikut penampilan programnya:
Pada kelas PySide.QtGui.QCheckBox, terdapat satu buah signal. Yaitu [1]
stateChanged(arg1)
Dan kita bisa mendapatkan nilai dari checkbox kita (apakah dicentang atau tidak) dengan hasil kembalian dari fungsi checkState().
Radio Button
Kita bisa membuat radio button pada PySide dengan mendeklarasikan instance dari kelas PySide.QtGui.QRadioButton. QRadioButton adalah turunan dari kelas PySide.QtGui.QAbstractButton [1]. Sehingga ketika radio button dicentang, dia akan meng-emit signal PySide.QtGui.QAbstractButton.toggled(). Begitu juga ketika kita ingin mendapatkan nilai dari radio-button, kita bisa memanggil fungsi isChecked() yang diturnkan dari kelas PySide.QtGui.QAbstractButton.
Untuk membuat radio button [melanjutkan kode program di atas], kita bisa melakukannya dengan cara seperti berikut:
bungkus = QtGui.QRadioButton('Bungkus')
layout.addRow(QtGui.QLabel('Bungkus Makanan?'))
layout.addRow(bungkus)
Combo Box
PySide.QtGui.QComboBox adalah widget yang terdiri dari tombol dan popup-list [3]. Berfungsi untuk menampilkan pilihan (yang cukup banyak) kepada user dengan pemanfaat ruang sesedikit mungkin.
Combo Box bisa berisi gambar/icon sebagaimana ia bisa juga berisi teks string [4]. Kita bisa menambahkan item kepada combo box dengan memanggil fungsi insertItem() atau setItemText().
Untuk signal, QComboBox menyediakan dua buah sinyal, currentIndexChanged() dan activated(). Sinyal currentIndexChanged() akan selalu dipicu manakala indeks dari QComboBox berubah. Ada pun sinyal activated(), ia hanya akan dipicu kalau QComboBox diubah oleh user, bukan diubah secara program [5].
Dan untuk mendapatkan current index atau current item, kita bisa menggunakan dua fungsi yang terdapat pada QComboBox, yaitu: currentIndex() untuk mendapatkan indeks yang sedang aktif, dan currentText() untuk mendapatkan text dari item yang sedang aktif.
Berikut contoh pembuatan combo-box.
menuComboBox = QtGui.QComboBox()
menuComboBox.insertItem(1, 'Nasi Goreng')
menuComboBox.insertItem(2, 'Nasi Pecel')
menuComboBox.insertItem(3, 'Nasi Kuning')
layout.addRow(QtGui.QLabel('Menu Makanan'))
layout.addRow(menuComboBox)
Font Combo Box
Kelas PySide.QtGui.QFontComboBox masih kelas turunan dari PySide.QtGui.QComboBox. Dan seperti namanya, ia adalah combo box yang berfungsi untuk memilih font [6]. Dan kita tidak perlu repot-repot untuk setting apa-apa, hanya tinggal buat instance-nya saja, dan letakkan font combo box ke layout yang diinginkan.
Hanya saja, untuk mengambil font yang dipilih, fungsi yang kita panggil berbeda dengan fungsi yang ada pada kelas PySide.QtGui.QComboBox. Yaitu: currentFont().
Berikut contoh implementasi combo box pada layout yang sudah kita buat.
fontComboBox = QtGui.QFontComboBox()
layout.addRow(QtGui.QLabel('Pilih Font'))
layout.addRow(fontComboBox)
Date Time Edit
Date Time Edit adalah sebuah inputan yang mengijinkan kita memilih tanggal dan waktu. Dalam PySide, kita bisa menyelesaikan hal itu dengan menggunakan kelas PySide.QtGui.QDateTimeEdit. Bahkan pada kelas ini, kita bisa mengubah tanggal dan waktu dengan menggunakan keyboard, mau pun dengan menggunakan tombol panah yang terdapat pada inputan [7].
Cara membuatnya sederhana, cukup deklarasikan instance dari kelas PySide.QtGui.QDateTimeEdit.
dateTimeEdit = QtGui.QDateTimeEdit(QtCore.QDateTime.currentDateTime())
NB: Parameter pertama adalah untuk mengatur nilai default dari QDateTimeEdit.
Lalu tambahkan dateTimeEdit di atas ke dalam layout yang sudah kita buat.
layout.addRow(QtGui.QLabel('Tanggal dan Waktu'))
layout.addRow(dateTimeEdit)
Berikut adalah penampilan dari PySide.QtGui.QDateTimeEdit.
Date Edit
Hampir mirip dengan sebelumnya, hanya saja dengan PySide.QtGui.QDateEdit inputan yang disajikan adalah tanggal saja, tidak pakai waktu atau jam. Bahkan, PySide.QtGui.QDateEdit masih kelas turunan dari PySide.QtGui.QDateTimeEdit.
Berikut contoh implementasi dari kelas PySide.QtGui.QDatetimeEdit:
dateEdit = QtGui.QDateEdit(QtCore.QDate.currentDate())
layout.addRow(QtGui.QLabel('Tanggal'))
layout.addRow(dateEdit)
Time Edit
Masih sama dengan QDateEdit, PySide.QtGui.QTimeEdit masih kelas turunan dari kelas PySide.QtGui.QDateTimeEdit. Hanya saja ia hanya menampilkan waktu saja. Dan parameternya pun kita menggunakan instance dari kelas PySide.QtCore.QTime.
Contoh penggunaan:
timeEdit = QtGui.QTimeEdit(QtCore.QTime.currentTime())
layout.addRow(QtGui.QLabel('Waktu'))
layout.addRow(timeEdit)
Line Edit
Line Edit adalah sebuah widget yang mengijinkan user untuk mengedit teks dalam format satu baris [8]. Dengan kelas ini, user bisa melakukan beberapa hal mendasar berkaitan dengan manipulasi teks dalam format satu baris secara out of the box, seperti: copy and paste, undo dan redo, plus drug and drop.
Contoh penggunaan PySide.QtGui.QLineEdit.
lineEdit = QtGui.QLineEdit()
layout.addRow(QtGui.QLabel('Nama'))
layout.addRow(lineEdit)
Spin Box
Kelas PySide.QtGui.QSpinBox pada PySide menyediakan widget spin box. Yaitu widget yang didesain untuk menginputkan angka dari bilangan bulat, mau pun dari bilangan pecahan [9]. Kita bisa mengubah data pada spin box dengan menulisnya maunal atau pun dengan menggunakan tombol arah atas dan bawah.
Contoh penggunaan spin box:
spinBox = QtGui.QSpinBox()
layout.addRow(QtGui.QLabel('Jumlah Porsi'))
layout.addRow(spinBox)
Text Edit
Widget terakhir yang akan saya bahas pada Tutorial PySide kali ini adalah Text Edit, dari kelas PySide.QtGui.QTextEdit. Yaitu hampir sama dengan PySide.QtGui.QLineEdit, hanya saja pada kelas ini kita bisa mengedit teks lebih dari satu baris. Juga [10], widget ini bisa berfungsi untuk memanipulasi plain text atau pun rich text (HTML). Insyaallah untuk lebih detailnya, saya akan membahas QTextEdit pada tulisan tersendiri.
Contoh penggunaan:
textEdit = QtGui.QTextEdit()
layout.addRow(QtGui.QLabel('Catatan'))
layout.addRow(textEdit)
Source Code Lengkap
Versi Procedural
import sys
from PySide import QtGui, QtCore
"""
Jago Ngoding tutorial PySide bahasa Indonesia
author: Ibnu Jakaria
"""
app = QtGui.QApplication(sys.argv)
window = QtGui.QWidget()
window.resize(300, 200)
window.setWindowTitle('Tutorial PySide')
layout = QtGui.QFormLayout(window)
nasiGoreng = QtGui.QCheckBox('Nasi Goreng')
nasiPecel = QtGui.QCheckBox('Nasi Pecel')
nasiKuning = QtGui.QCheckBox('Nasi Kuning')
bungkus = QtGui.QRadioButton('Bungkus')
menuComboBox = QtGui.QComboBox()
menuComboBox.insertItem(1, 'Nasi Goreng')
menuComboBox.insertItem(2, 'Nasi Pecel')
menuComboBox.insertItem(3, 'Nasi Kuning')
fontComboBox = QtGui.QFontComboBox()
dateTimeEdit = QtGui.QDateTimeEdit(QtCore.QDateTime.currentDateTime())
dateEdit = QtGui.QDateEdit(QtCore.QDate.currentDate())
timeEdit = QtGui.QTimeEdit(QtCore.QTime.currentTime())
lineEdit = QtGui.QLineEdit()
spinBox = QtGui.QSpinBox()
textEdit = QtGui.QTextEdit()
button = QtGui.QPushButton('Pesan')
layout.addRow(QtGui.QLabel('Menu:'))
layout.addRow(nasiGoreng)
layout.addRow(nasiPecel)
layout.addRow(nasiKuning)
layout.addRow(QtGui.QLabel('Bungkus Makanan?'))
layout.addRow(bungkus)
layout.addRow(QtGui.QLabel('Menu Makanan'))
layout.addRow(menuComboBox)
layout.addRow(QtGui.QLabel('Pilih Font'))
layout.addRow(fontComboBox)
layout.addRow(QtGui.QLabel('Tanggal dan Waktu'))
layout.addRow(dateTimeEdit)
layout.addRow(QtGui.QLabel('Tanggal'))
layout.addRow(dateEdit)
layout.addRow(QtGui.QLabel('Waktu'))
layout.addRow(timeEdit)
layout.addRow(QtGui.QLabel('Nama'))
layout.addRow(lineEdit)
layout.addRow(QtGui.QLabel('Jumlah Porsi'))
layout.addRow(spinBox)
layout.addRow(QtGui.QLabel('Catatan'))
layout.addRow(textEdit)
layout.addRow(button)
window.show()
sys.exit(app.exec_())
Versi OOP
import sys
from PySide import QtGui, QtCore
"""
Jago Ngoding tutorial PySide bahasa Indonesia
author: Ibnu Jakaria
"""
class Jendela(QtGui.QWidget):
def __init__(self):
super(Jendela, self).__init__()
self.siapkanUI()
def siapkanUI(self):
self.resize(300, 200)
self.setWindowTitle('Tutorial PySide')
layout = QtGui.QFormLayout(self)
nasiGoreng = QtGui.QCheckBox('Nasi Goreng')
nasiPecel = QtGui.QCheckBox('Nasi Pecel')
nasiKuning = QtGui.QCheckBox('Nasi Kuning')
bungkus = QtGui.QRadioButton('Bungkus')
menuComboBox = QtGui.QComboBox()
menuComboBox.insertItem(1, 'Nasi Goreng')
menuComboBox.insertItem(2, 'Nasi Pecel')
menuComboBox.insertItem(3, 'Nasi Kuning')
fontComboBox = QtGui.QFontComboBox()
dateTimeEdit = QtGui.QDateTimeEdit(QtCore.QDateTime.currentDateTime())
dateEdit = QtGui.QDateEdit(QtCore.QDate.currentDate())
timeEdit = QtGui.QTimeEdit(QtCore.QTime.currentTime())
lineEdit = QtGui.QLineEdit()
spinBox = QtGui.QSpinBox()
textEdit = QtGui.QTextEdit()
button = QtGui.QPushButton('Pesan')
layout.addRow(QtGui.QLabel('Menu:'))
layout.addRow(nasiGoreng)
layout.addRow(nasiPecel)
layout.addRow(nasiKuning)
layout.addRow(QtGui.QLabel('Bungkus Makanan?'))
layout.addRow(bungkus)
layout.addRow(QtGui.QLabel('Menu Makanan'))
layout.addRow(menuComboBox)
layout.addRow(QtGui.QLabel('Pilih Font'))
layout.addRow(fontComboBox)
layout.addRow(QtGui.QLabel('Tanggal dan Waktu'))
layout.addRow(dateTimeEdit)
layout.addRow(QtGui.QLabel('Tanggal'))
layout.addRow(dateEdit)
layout.addRow(QtGui.QLabel('Waktu'))
layout.addRow(timeEdit)
layout.addRow(QtGui.QLabel('Nama'))
layout.addRow(lineEdit)
layout.addRow(QtGui.QLabel('Jumlah Porsi'))
layout.addRow(spinBox)
layout.addRow(QtGui.QLabel('Catatan'))
layout.addRow(textEdit)
layout.addRow(button)
app = QtGui.QApplication(sys.argv)
jendela = Jendela()
jendela.show()
sys.exit(app.exec_())
Referensi
[1] “QCheckBox”, PySide v1.07 documentation, https://srinikom.github.io/pyside-docs/PySide/QtGui/QCheckBox.html, diakses tanggal 08 Oktober 2017
[2] “QRadioButton”, PySide v1.07 documentation, https://srinikom.github.io/pyside-docs/PySide/QtGui/QRadioButton.html, diakses tanggal 08 Oktober 2017
[3] “QComboBox”, PySide v1.07 documentation, https://srinikom.github.io/pyside-docs/PySide/QtGui/QComboBox.html#PySide.QtGui.PySide.QtGui.QComboBox.insertItem, diakses tanggal 08 Oktober 2017
[4] Ibid.
[5] Ibid.
[6] “QFontComboBox”, PySide v1.07 documentation, https://srinikom.github.io/pyside-docs/PySide/QtGui/QFontComboBox.html, diakses pada tanggal 08 Oktober 2017
[7] “QDateTimeEdit”, PySide v1.07 documentation, https://srinikom.github.io/pyside-docs/PySide/QtGui/QDateTimeEdit.html, diakses pada tanggal 15 Oktober 2017
[8] “QLineEdit”, PySide v1.07 documentation, https://srinikom.github.io/pyside-docs/PySide/QtGui/QLineEdit.html, diakses pada tanggal 15 Oktober 2017
[9] “QSpinBox”, PySide v1.07 documentation, https://srinikom.github.io/pyside-docs/PySide/QtGui/QSpinBox.html, diakses pada tanggal 15 Oktober 2017
