author Ahmad Muhardian

Membuat Aplikasi GUI berbasis Python dengan PyGTK dan Glade

Tutorial Python Pygtk dan Glade

Pada tutorial PyGTK sebelumnya, kita sudah membuat tampilan GUI dengan hardcoding atau coding secara manual.

Harcoding memang bagus buat memahami konsep di balik GUI, namun ini nantinya akan mempersulit kita saat membuat aplikasi yang besar.

Karena itu, kita membutuhkan Glade.

Apa itu Glade?

dan bagaimana cara menggunakannya dengan PyGTK?

Mari kita bahas..

Apa itu Glade?

Glade adalah sebuah aplikasi yang berfungsi untuk membuat tampilan GUI berbasis GTK. Nantinya, Glade akan menghasilkan file XML dengan ekstensi .glade. File inilah yang akan kita gunakan di dalam PyGTK atau Python untuk membuat tampilan GUI.

Berikut ini tampilan Glade:

tampilan glade

Oh iya, Glade versi terbaru hanya mendukung pembuatan GUI untuk GTK 3 saja. Jadi, untuk GTK 2 kita akali dengan mengubah versu GTK pada XML.

Membuat GUI dengan Glade

Silakan buka Galde, kemudian buat project baru dengan mengklik ikon new.

new-project-icon

Setelah itu, tambahkan object, GTKWindow. Klik menu Toplevels lalu Pilih GTKWindow.

new gtk window

Setelah itu, ubah properti position menjadi Always Center agar jendelanya dibuka di tengah-tengah layar dan set ukurannya menjadi 640x360 pada properti Default Width dan Default Height.

window properti

Selanjutnya, tambahkan sebuah Tombol di dalam Window dengan cara:

Klik menu Control, lalu pilih GTKButton.

new gtk btn

Kemudian Klik pada area GTKWindow untuk menambahkan Button di sana. Sehingga akan menjadi seperti ini:

gtk button dan window

Sebenarnya di sini kita bisa menggunakan Container atau Layout biar rapi, namun karena ini untuk percobaan saja.. kita biarkan saja seperti ini.

Terakhir, berikan ID untuk tiap-tiap Object.

Untuk Object GTKWindow, berikan ID dengan window1.

id window

Untuk Button, berikan ID dengan button1.

id button

Oh iya, pemberian ID ini akan memudahkan kita nantinya untuk mengakses objek ini dari kode Python.

Setelah itu, simpan dengan nama main_window.glade.

Mengubah Versi GTK

File main_window.glade yang kita buat akan menggunakan GTK versi 3, ini karena kita membuatnya dengan Glade versi terbaru.

Sedangkan PyGTK tidak mendukung GTK 3, ia hanya mendukung GTK 2 saja.

Nah, untuk mengakali ini, kita harus mengubah versi GTK yang digunakan pada file main_window.glade.

Caranya:

Buka file main_window.galde dengan teks editor, lalu ubah nilai:

<requires lib="gtk+" version="3.0"/>

Menjadi:

<requires lib="gtk+" version="2.0"/>

Sehingga isi lengkap dari file main_window.glade akan menjadi seperti ini:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.22.2 -->
<interface>
  <requires lib="gtk+" version="2.0"/>
  <object class="GtkWindow" id="window1">
    <property name="can_focus">False</property>
    <property name="window_position">center-always</property>
    <property name="default_width">640</property>
    <property name="default_height">360</property>
    <child type="titlebar">
      <placeholder/>
    </child>
    <child>
      <object class="GtkButton" id="button1">
        <property name="label" translatable="yes">button</property>
        <property name="visible">True</property>
        <property name="can_focus">True</property>
        <property name="receives_default">True</property>
      </object>
    </child>
  </object>
</interface>

Catatan:

Harap berhati-hati, GTK 2 adalah versi lama. Jadi mungkin ada objek GTK yang hanya ada di GTK 3 saja.

Oke..

Selanjutnya, kita akan membuat aplikasinya dengan PyGTK.

Membuat Aplikasi GUI dengan PyGTK

Buatlah file baru dengan nama main.py dengan isi sebagai berikut:

#!/usr/bin/python 

import gtk

# membuat object builder untuk load ui glade
builder = gtk.Builder()
builder.add_from_file("main_window.glade")

# membuat objek window dari ui glade
window = builder.get_object("window1")

# event saat close button diklik
window.connect("destroy", gtk.main_quit)

window.show_all()
gtk.main()

Setelah itu, taruh file main_window.glade satu folder dengan file main.py seperti ini:

file-python-dan-gui-galde

Sekarang coba eksekusi programnya..

Maka hasilnya:

program dengan python glade

Mantap.. 👍

Keuntungan menggunakan Glade adalah file GUI yang kita buat bisa digunakan ulang tanpa harus membuat dari nol di tiap program Python.

Mari kita buktikan..

Buatlah file python baru dengan nama main_oop.py dengan isi sebagai berikut.

#!/usr/bin/python 

import gtk

class App:
    
    def __init__(self):
        self._initUI()
        
    def _initUI(self):
        # membuat object builder untuk load ui glade
        builder = gtk.Builder()
        builder.add_from_file("main_window.glade")
        self.window = builder.get_object("window1")
        self.window.connect("destroy", gtk.main_quit)
        self.window.show_all()


App()
gtk.main()

Simpan file ini satu folder dengan file main_window.glade.

Setelah itu, cobalah eksekusi.

Maka hasilnya:

program dengan python glade

Membuat Handler untuk Signal dan Event

Nah untuk meng-handle event atau signal dari objek, caranya sama seperti di Harcoding.

Mari kita coba..

Misalkan kita ingin membuat handler saat tombol diklik. Maka kita bisa membuat kodenya seperti ini:

#!/usr/bin/python 

import gtk

class App:
    
    def __init__(self):
        self._initUI()
        
    def _initUI(self):
        # membuat object builder untuk load ui glade
        builder = gtk.Builder()
        builder.add_from_file("main_window.glade")
        self.window = builder.get_object("window1")
        
        self.button = builder.get_object("button1")
        self.button.connect("clicked", self.on_button_click)
        
        self.window.connect("destroy", gtk.main_quit)
        self.window.show_all()
    
    def on_button_click(self, button):
        print("Button diklik!")

App()
gtk.main()

Pada contoh ini, kita menghubungkan sinyal clicked pada objek button dengan method on_button_click.

Maka hasilnya:

event andler

Pesan “Button diklik!” akan ditampilkan pada terminal, saat tombol diklik.

Troubleshooting..

Beberapa masalah mungkin akan kamu dapatkan, berikut ini cara mengatasinya:

Tema Adwita tidak Ditemukan

Biasanya jika kita tidak menggunakan DE Gnome, maka tema ini tidak akan ditemukan. Saat menjalankan program, kita akan mendapatkan error seperti ini:

GtkWarning: Unable to locate theme engine in module_path: "adwaita"

✅ Solusi:

Install tema Gnome dengan perintah berikut ini:

sudo apt install gnome-themes-standard

Versi GTK didukung PyGTK

Saat mengeksekusi program, kita mendapatkan pesan error seperti ini:

$ python main_window.py
Traceback (most recent call last):
  File "main_window.py", line 7, in <module>
    builder.add_from_file("main_window.glade")
glib.GError: main_window.glade: required gtk+ version 3.20, current version is 2.24

Ini artinya, versi GTK pada file main_window.glade belum diubah menjadi versi 2.0.

✅ Solusi:

Ubah versi GTK pada file main_window.glade menjadi versi 2.0.

<requires lib="gtk+" version="2.0"/>

Apa Selanjutnya?

Karena GTK 2 sudah lawas, saya sarankan untuk lanjut belajar tentang PyGObject. Karena PyGObject menggunakan GTK 3 dan tentunya dengan API yang lebih modern.

Silakan lanjutkan ke:

Tapi, jika kamu ingin tetap pakai GTK 2 juga tidak apa-apa.