Membuat GUI dengan QT Designer

Jalankan QTDesigner dari PyChram untuk menghasilkan antarmuka GUI dan mengubahnya
menjadi file .py menggunakan PyUIC.

1. PyCharm : Pilih Tools-> ExternalTools-> QTdesigner.

2.

Tampilan Utama dari Qt Designer :

Pilih template/form yang diinginkan, dan lakukan Create.

Hasilnya :
Langkah berikutnya mengkonversikan file .ui ke file .py (kode Python) :

 Klik kanan file .ui yang sudah dibuat (guipertama.ui) dan pilih ExternalTools-> PyUIC di
daftar pop-up.
Langkah berikutnya adalah Buka File guipertama.py pada pycharm:

Hasilnya :
Memilih Jenis Form untuk Top Level Window:

Keterangan Template/form yang dapat dipilih :

1. Dialog with Buttons Bottom
 a. Template ini digunakan untuk membuat form dengan disertai OK dan cancel
dibagian bawah, yang ditempatkan secara horizontal. kontrol-kontrol lain yang
dibutuhkan dapat ditambahkan kedalam form
b. Merupakan turunan dari kelas QDialog
2. Dialog with Buttons Right
a. Template ini digunakan untuk membuat form dengan disertai tombol ok dan
cancel di kanan atas, yang ditempatkan secara vertical. Template juga bebas
menambahkan control-kontrol lain yang dibutuhkan
b. Merupakan turunan dari kelas QDialog
3. Dialog without Buttons
a. Template ini digunakan untuk membuat form kosong (tanpa tombol OK dan
cancel). Semua control yang ditempatkan ke dalam form sepenuhnya menjadi
tanggung jawab pendesain
b. Merupakan turunan dari kelas QDialog
4. Main Window
a. Template ini digunakan untuk membuat form utama yang disertai dengan menu,
toolbar, dan status bar
b. Dapat menghapus control-kontrol tersebut jika tidak diperlukan
5. Widget
a. Template ini digunakan untuk membuat form kosong yang merupakan turunan
langsung dari kelas QWidget

Bagian-bagian dalam QT Designer :

1. Toolbar

Keterangan :
 New, digunakan untuk membuat form baru
 Open, digunakan untuk membuka file .ui yang sebelumnya sudah dibuat
 Save, digunakan untuk menyimpan rancangan tampilan form ke dalam file .ui
 Send to Back, digunakan untuk menempatkan control dibelakang control lainnya
 Bring to Front, digunakan untuk menempatkan control di depan control lainnya
 Edit Widgets, mode penyuntingan (edting) yang digunakan untuk melakukan pengaturn
control-kontrol di dalam form, seperti nama objek, pengaturan posisi objek (jika tidak
menggunakan layout), teks yang ditampilkan pada suatu objek tertentu, dan sebagainya.
 Edit Signal/Slots, mode penyuntingan yang digunakan untuk melakukan pengaturan
signal dan slot dari control-kontrol yang ada di dalam form
 Edit Buddies, mode penyuntingan untuk pembuatan buddy, misalnya kita dapat
mengkaitkan label tertentu dengan control lineEdit. Pada control label, dapat dilakukan
 penambahan tanda & di depan huruf tertentu (misalnya huruf S). dengan cara ini, lineEdit
dapat diaktifkan hanya menekan tombol Alt+S
 Edit Tab Order, mode penyuntingan untuk mengatur urutan tab. Melalui pengaturan
seperti ini, control-kontrol dapat diaktifkan melalui penekanan tombol Tab sesuai urutan
yang ditetapkan
 Lay Out Horizontally, digunakan untuk mengatur control-kontrol (yang dipilih) di dalam
form secara horizontal
 Lay Out Vertically, digunakan untuk mengatur control-kontrol (yang dipilh) di dalam
form seara vertical.
 Lay Out Horizontally in Splitter, digunakan untuk mengatur control-kontrol (yang
dipilih) di dalam form secara horizontal disertai dengan control splitter ditengahnya.
Melalui cara ini, control di dalam form dapat diperbesar atau diperkecil dengan
menggeser splitter ke kiri atau ke kanan
 Lay Out Vertically in Splitter, digunakan untuk mengatur control-kontrol (yang dipilih)
di dalam form secara vertikal disertai dengan control splitter ditengahnya. Melalui cara
ini, control di dalam form dapat diperbesar atau diperkecil dengan menggeser splitter ke
atas dan ke bawah
 Lay Out in a Grid, digunakan untuk mengatur control-kontrol (yang dipilih) ke dalam
bentuk tabular atau grid.
 Lay Out in Form Layout, digunakan untuk mengatur control-kontrol (yang dipilih)
menggunakan jenis form Layout.
 Break Layout, digunakan untuk menghapus layout yang telah diterapkan untuk control-
kontrol tertentu
 Adjust Size, digunakan untuk menyetel ukuran control-kontrol yang dipilih

2. Widget Box:
Adalah bagian yang berisi daftar control yang dapat ditempatkan ke dalam form. Control-kontrol
tersebut dikelompokkan berdasarkan kategori tertentu: Layouts, Spacers, dll. Untuk menempatkan
salah satu control dari Widget Box ke form dengan melakukan drag-and-drop ke dalam form.
 3. Form
Adalah komponen utama di dalam Qt Designer yang merupakan wadah dari control-kontrol lain..
tampilan yang ada di bagian ini akan menjadi tampilan program
 4. Object Inspector
Adalah bagian yang menunjukkan daftar control di dalam form. Kontrol-kontrol tersebut
ditampilkan secara hirarkis berdasarkan hubungan orang tua-anak (parent-child), seperti gambar
dibawah.

5. Property Editor
Digunakan untuk menentukan nilai-nilai property dari objek yang sedang aktif (objek yang sedang
dipilih di dalam form). Daftar properti yang ditampilkan pada property Editor tergantung dari kelas
atau jenis objek yang dipilih sebagai contoh. Prpoerty Editor akan menampilkan daftar property
yang berbeda untuk objek dari kelas QLineEdit dan QPushButton.
 6. Action Editor
Bagian digunakan untuk membuat aksi-aksi yang nantinya dapat dikaitkan denan menu dan
toolbar. Dengan menunjuk ke satu aksi tertentu, suatu item menu dan toolbar akan memiliki
perilaku yang sama. Pembuatan aksi dilakukan untk mencegah adanya duplikasi kode. Seperti
gambar bagian action Editor dibawah ini.

7. Signal/Slot Editor
Digunakan untuk membuat hubungan signal dan slot dari suatu control tertentu yang terdapat di
dalam form. Dengan mendefinisikan hubungan tersebut di dalam Signal/Slot Editor, kita tidak
perlu lagi megggunakan metode connect() di dalam kode program. Seperti gambar dibawah.
8 Resource Browser
Digunakan untuk mengatur daftar file resource yang digunakan di dalam program (jika ada),
seperti file gambar, audio, dll. Seperti gambar dibawah.

Meninjau Hasil Rancangan Form :

Rancanga form yang telah dibuat dapat dilihat hasilnya melalui menu Form | Preview atau cukup
dengan menekan Ctrl+R.
Meskipun hasil yang ditampilkan tersebut tampak seperti program yang sedang dieksekusi, tapi
form ini sama sekali belum memiliki kemampuan menangani event tertentu karena kita memang
belum mengisi kode ke dalamnya.
Seperti gambar dibawah.
Pengaturan Layout dengan Qt Designer:
1. Menggunakan Horizontal Layout
akan menyusun control-kontrol di dalam form secara horizontal. Control-kontrol yang akan
disusun perlu dipilih terlebih dahulu. Untuk memilih beberapa control yang ada di dalam form,
gunakan tombol Ctrl dikuti dengan Klik.
Langkah-langkah penggunaan Horizontal Layout:
1. Tempatkan beberapa control (misalnya QLabel dan QLineEdit) dari Widget Box ke
dalam form
2. Melalui Property Editor, ubah property objectName dari label menjadi label1 dan properti
text menjadi Nama.
3. Melalui Property Editor, ubah properti objectName dari lineEdit menjadi lineEdit1
 4. Klik objek label1, tekan tombol Ctrl, lalu klik lineEdit1 untuk mengelompokkan kedua
control tersebut.

5. Klik toolbar Lay Out Horizontally untuk menjadikan kedua control di atas disusun secara
horizontal. Tampilan terakhir yang diperoleh adalah sebagai Berikut:

2. Menggunakan Vertical Layout

Untuk menggunakan vertical layout, klik control-kontrol yang akan disusun secara vertical;
termasuk control-kontrol yang sudah disusun secara horizontal (misalnya)
Pada contoh di atas, terdapat tiga pasang control label dan lineEdit yang masing-masing sudah
disusun secara horizontal menggunakan Horizontal Layout. Jika ketiga layout tersebut aktif

dan pilih toolbar Lay Out Vertically, maka tampilan form di atas akan menjadi gambar dibawah
ini.
 3. Menggunakan Grid Layout:
Grid Layout akan menjadikan control-kontrol di dalam form disusun secara tabular (terdiri dari
baris dan kolom). Sebagai contoh, misalnya kita memiliki control-kontrol yang tersusun tidak
teratur, seperti berikut:

Lakukan pilih toolbar Layout in Grid, maka tampilan form di atas akan menjadi seperti dibawah
ini.

Selanjutnya, dapat dilakukan menggeser control-kontrol di atas dengan melakukan drag-and-drop

dan menempatkannya ke dalam sel yang sesuai. Dan diizinkan juga untuk mengatur lebar dari
control-kontrol tertentu. Gambar akhir seperti dibawah ini.
 4. Menggunakan Form Layout
Form Layout memiliki aturan penempatan yang agak rumit dan kaku dibandingkan dengan
Horizontal, Vertikal, dan Grid Layout. Oleh karena itu, jenis layout ini jarang digunakan.
5. Menggunakan Horizontal Layout dengan Splitter
Dengan adanya Splitter, dapat dilakukan mengatur lebar dari kedua control bersangkutan dengan
menggeser penunjuk mouse kekiri maupun kekanan. Sebagai contoh, tempatkan dua control
QPushButton ke dalam form, aktifkan kedua control tersebut , lalu pilih menu toolbar Lay Out
Horizontally in Splitter.
Arahkan petunjuk mouse ke bagian tengah dari kedua control di atas, lalu anda dapat menggeser
ke kiri untuk memerkecil lebar dari PushButton 1 dan memperbesar lebar dari PushButton 2. Jika
penunjukk mouse digeser ke kanan, maka lebar dari PushButton 1 akan bertambah dan lebar
PushButton 2 akan berkurang

6. Menggunakan Vertikal Layout dengan Splitter

Dengan adanya Splitter, dapat dilakukan mengatur tinggi dari kedua control bersangkutan
dengan menggeser penunjuk mouse ke atas maupun ke bawah. Sebagai contoh, tempatkan dua
control QPushButton ke dalam form, aktifkan kedua control tersebut, lalu pilih menu toolbar
Lay Out Vertically in Splitter.

Arahkan petunjuk mouse ke bagian tengah dari kedua control di atas (Splitter), Jika penunjuk
mouse digeser ke atas, maka tinggi PushButton 1 akan berkurang dan tinggi PushButton 2 akan
bertambah, dan begitu sebaliknya.
 7. Menghapus Layout
Untuk menghapus layout yang sedang aktif, pilih toolbar Break Layout. Setelah Layout
dihilangkan maka control-kontrol yang berada di dalam layout bersangkutan akan diurai kembali
menjadi bagian yang saling terpisah satu sama lain.

Layout Vertikal Layout dengan Splitter di atas akan dihapus dengan klik toolbar Break
Layout, hasilnya (kembali seperti semula/awal) seperti gambar dibawah ini.
 Model Penyuntingan (Editing) Form pada Qt Designer :
Pada saat bekerja dengan Qt Designer, terdapat empat mode penyunting form, yaitu: Edit
Widget, Edit Signals/Slots, Edit Buddies, dan Edit Tab Order. Keempat mode tersebut dapat
diaktifkan melalui toolbar, seperti gambar dibawah.

1. Mode Edit Widgets

Mode ini merupakan mode standar (default). Ketika pertama kali menjalankan Qt Desiger, mode
yang aktif adalah mode Edit Widgets. Dalam mode ini, kita dapat menempatkan control-kontrol
dari Wdgets Box ke dalam form, mengatur posisi dari control-kontrol di dalam form. Menentukan
nilai property dari control-kontrol tersebut, dan mengatur layout.
2. Mode Edit Signals/Slots
Mode ini digunakan untuk mengatur hubungan signal dan slot dari control-kontrol tertentu. Untuk
mendemonstrasikan cara membuat hubungan signal dan slot melalui Qt Designer, dengan langkah-
langkah sebagai berikut :
1. Buat form baru dengan memilih menu File | New | Dialog without Buttons
2. Tempatkan satu control QLineEdit dan dua control QPushButton.
3. Melalui Property Edtor, ubah property objectName dari objek QLineEdit menjadi
LineEdit1, objectName dari objek QPushButton pertama menjadi pushButton1, dan
objectName dari objek QPushButton kedua enjadi pushButton2
4. Melalui Property Editor, ubah property text dari lineEdit1 menjadi Qt Designer, text dari
pushButton1 menjadi Kosongkan, dan text dari pushButton2 menjadi Keluar
 5. Pilih toolbar Edit Signals/Slots untuk mengaktifkan mode Edit Signals/Slots
6. Klik pushButton1 dan drag ke lineEdt1, lalu drop

Pada dialog di atas, pilih signal clicked() untuk pushButton1 dan slot clear() untuk lineEdit1, lalu
klik OK.

7. Masih di mode Edit Signals/Slots, klik kembali pushButton2 dan drag ke form, lalu drop
Pada dialog di atas, pilih signal clicked() untuk pushButton2 dan slot reject() untuk Dialog, lalu
OK.

Langkah-langkah yang dilakukan di atas akan membuat dua buah hubungan signal dan slot,
yaitu:
 Antara signal clicked() milik pushButton1 dengan slot clear() milik lineEdit1.
 Antara signal clicked() milik pushButton2 dengan slot reject() milik Dialog (objek dari
kelas QDialog).

Hubungan signal dan slot yang dibuat melaui proses di atas secara otomatis akan ditampilkan
juga pada bagian Signal/Slot Editor, seperti berikut:
Untuk memeriksa pengaruh yang ditimbulkan dari signal dan slot yang dibuat di atas, yaitu
dengan memilih menu Form | Preview atau cukup dengan menekan tombol Ctrl+R. hasilnya
seperti gambar dibawah ini.

Ketika tombol pertama (Kosongkan) dipilih, teks pada lineEdit1 akan dihapus. Ini artinya, ketika
signal clicked() pada pushButton1 terjadi, metode clear() milik lineEdit1 akan dipanggil.
Jika yang dipilih adalah tombol kedua (Keluar), maka form atau dialog akan ditutup. Kali ini,
ketika signal clicked() pada pushButton2 terjadi, metode reject() pada objek Dialog akan
dipanggil.

3. Mode Edit Buddies

Buddy adalah istilah dalam PyQt yang digunakan untuk mengaktifkan focus dari control tertentu
melalui penekanan tombol Alt dan salah satu tobol huruf. Tombol huruf yang digunakan
ditentukan pada saat kita membuat teks dalam sebuah label, yaitu dengan menambahkan tanda &
di depan huruf bersangkutan. Selanjutnya, label tersebut dikaitkan dengan control yang akan
diaktifkan fokusnya. Jika bekerja dengan kode, buddy dari suatu label dapat ditentukan
menggunakan metode setBuddy().
namaLabel.setBuddy(namaKontroLain)
Untuk mendemonstrasikan cara pembuatan buddy melalui Qt Designer, ikuti langkah-langkah
berikut :
1. Buat form baru dengan memilih File | New Dialog without Buttons
2. Tempatkan dua control QLabel dan QLineEdit
3. Ubah property objectName dari objek QLabel pertama menjadi label1 dan objek QLabel
kedua menjadi label2
4. Ubah property objecName dari objek QLineEdit pertama menjadi lineEdit1 dan objek
QLineEdit kedua menjadi lineEdit2
5. Ubah property text dari label1 menjadi &Name dan label2 menjadi Nomor &HP

6. Pilih toolbar Edit Buddies untuk mengaktifkan mode Edit Buddies

7. Klik label1 dan drag ke lineEdit1, lalu drop

8. Klik label2 dan drag ke lineEdit2, lalu drop

 9. Pilih menu Form | Preview atau dengan menekan tombol Ctrl+R

10. Tekan tombol Alt+N dan Alt+H secara bergantian untuk melihat pengaruh yang
ditimbukan oleh buddy
Pada contoh di atas, kita menentukan buddy untuk label1 dan label2. Ketika tombol Alt+N ditekan,
focus akan diarahkan ke control lineEdit1. Jika Alt+H yang ditekan, maka focus akan diarahkan
ke control lieEdt2
Huruf yang diawali dengan tanda & pada control label akan ditampilkan dengan garis bawah.
 4. Mode Edit Tab Order
Mode ini digunakan untuk mengatur urutan focus dari control-konrol yang terdapat di dalam form
pada saat user menekan tombol Tab. Perlu diperhatikan bahwa tidak semua control (widget) dapat
dikenai focus. Untuk mendemonstrasikan fungsi dari mode Edit Tab Order, silahkan dibuat form
baru dan tempatkan beberapa control ke dalamnya, lalu klik toolbar Edit Tab Order.
Contoh tampilan form yang berada di dalam mode ini sebegai berikut :

Urutan focus dari control-kontrol di dalam form di atas dapat diubah dengan melakukan klik
pada angka-angka yang ditampilkan.
Untuk melihat hasilnya, pilih menu Form | Preview, lalu tekan tombol tab beberapa kali.

Contoh Program GUI dengan Qt Designer:

1. Rancang tampilan form dari program yang akan dibuat
2. Form yang telah dirancang dikonversikan ke dalam kode Python (menjadi kelas)
3. Kode hasil konversi (berada dalam bentuk kelas) kemudian diturunkan lagi menjadi kelas
baru dan dipadukan dengan kode-kode lain untuk menghasilkan suatu program yang utuh
1. Merancang Tampilan Form
a. Buat form baru  File|New|Dialog without Buttons
b. Ubah property windowTitle dari form menjadi Demo Qt Designer
c. Tempatkan satu control QLabel, QLineEdit, dan dua control QPushButton
d. Ubah property text dari objek QLabel menjadi Masukkan nama Anda:
e. Ubah property objectName dari objek QLineEdit menjadi nameEdit
f. Ubah property objectName dari objek QPushButton pertama menjadi helloButton
dan property text menjadi Hallo
g. Ubah property objectName dari objek QPushButton kedua menjadi exitButton
dan property text menjadi Keluar

h. Pilih toolbar Edit Signals/Slots untuk mengaktifkan mode Edit Signals/Slots

i. Klik exitButton dan drag ke form, lalu drop
j. Pilih signal clicked() untuk exitButton dan slot reject() untuk form atau dialog
 k. Simpan form di atas di folder kerja Anda.

2. Form yang telah dirancang dikonversikan ke dalam kode Python (menjadi kelas):
mengkonversikan file .ui ke file .py (disimpan dengan nama hallo_gui.py)
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'hallo_gui.ui'

#
# Created by: PyQt5 UI code generator 5.13.0
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Dialog(object):
def setupUi(self, Dialog):
Dialog.setObjectName("Dialog")
Dialog.resize(511, 332)
self.label = QtWidgets.QLabel(Dialog)
self.label.setGeometry(QtCore.QRect(60, 60, 151, 16))
self.label.setObjectName("label")
self.nameEdit = QtWidgets.QLineEdit(Dialog)
self.nameEdit.setGeometry(QtCore.QRect(60, 100, 391, 20))
self.nameEdit.setObjectName("nameEdit")
self.helloButton = QtWidgets.QPushButton(Dialog)
self.helloButton.setGeometry(QtCore.QRect(160, 160, 75, 23))
self.helloButton.setObjectName("helloButton")
self.exitButton = QtWidgets.QPushButton(Dialog)
self.exitButton.setGeometry(QtCore.QRect(270, 160, 75, 23))
self.exitButton.setObjectName("exitButton")

self.retranslateUi(Dialog)
self.exitButton.clicked.connect(Dialog.reject)
QtCore.QMetaObject.connectSlotsByName(Dialog)

def retranslateUi(self, Dialog):

_translate = QtCore.QCoreApplication.translate
Dialog.setWindowTitle(_translate("Dialog", "Demo Qt Designer"))
self.label.setText(_translate("Dialog", "Masukkan Nama Anda:"))
self.helloButton.setText(_translate("Dialog", "Hallo"))
self.exitButton.setText(_translate("Dialog", "Keluar"))
 if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
Dialog = QtWidgets.QDialog()
ui = Ui_Dialog()
ui.setupUi(Dialog)
Dialog.show()
sys.exit(app.exec_())

3. Membuat Kode Python

Untuk menggunakan kode yang terdapat di dalam file hallo_gui.py, perlu membuat file baru,
misalnya dengan nama DemoQtDesigner.py seperti kode dibawah ini.
import sys

from hallo_gui import *

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *

class MainForm(QDialog):
def __init__(self, parent=None):
QDialog.__init__(self, parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
self.ui.helloButton.clicked.connect(self.helloButtonClick)

def helloButtonClick(self):
QMessageBox.information(self, 'Demo Qt Designer', 'Hallo %s, apa kabar?' %
self.ui.nameEdit.text())

if __name__ == "__main__ ":

a = QApplication(sys.argv)

form = MainForm()
form.show()
a.exec_()

Penjelasan :
Agar kelas Ui_Dialog yang terdapat di dalam file hallo_gui.py dapat dikenal dari file
DemoQtDesigner.py, maka perlu mengimpor file tersebut menggunakan kode berikut:
From hallo_gui import *
Selanjutnya untuk membuat objek (instance) dari kelas Ui_Dialog, gunakan kode berikut:
self.ui = Ui_Dialog()
pada baris kode di atas, self.ui adalah objek dari kelas Ui_Dialog. Untuk memanggil metode
setupUi() yang didefinisikan di dalam kelas Ui_Dialog, kode yang diperlukan adalah sebagai
berikut:
self.ui.setupUi(self)

Menjalankan Program DemoQtDesigner.py

Hasilnya adalah:

Tampilan di atas diperoleh ketika pegguna program telah mengisi nama ke kotak yan disediakan
dan memilih tombol Hallo. Tombol Keluar yang terdapat pada contoh di atas berguna untuk
menutup form. Karena form tersebut merupakan form utama, maka menutup form berarti juga
menghentikan eksekusi program.