author Ahmad Muhardian

Tutorial PyGTK #4: Mengenal 5 Macam Container untuk Membuat Layout


Pemrograman PyGTK di Linux

Pada tutorial sebelumnya kita sudah belajar membuat beberapa elemen dasar seperti tombol, label, dan tooltips.

Elemen-elemen ini kalau kita masukan langsung ke objek jendela, ia akan berantakan.

Mengapa?

Karena tidak ada kontainer yang membungkusnya. kontainer biasanya digunakan untuk membuat layout. PyGTK sudah menyediakan class-class untuk membuat container.

Ada beberapa macam jenis class kontainer di PyGTK:

  1. Container Fixed;
  2. Container Table;
  3. Container Alignment;
  4. Container VBox dan Hbox;
  5. Container Layout;
  6. dll.

Mari kita bahas satu-per-satu…

1. Container Fixed

Kontainer fixed merupakan kontainer yang akan membungkus elemen dalam posisi dan ukuran yang fix (fixed).

Kontainer ini tidak akan mengubah posisi elemen meskipun ukuran jendela diubah.

Penggunaan kontainer ini biasanya pada aplikasi game, diagram, dll.

Kontainer fixed dapat dibuat dari class Fixed().

Contoh:

container = gtk.Fixed()

Mari kita lihat contoh lengkapnya.

Buatlah file baru bernama fixed.py kemudian isi dengan kode berikut:

#!/usr/bin/python

import gtk

class App(gtk.Window):

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

        self.set_title("Container Fixed")
        self.set_size_request(300, 280)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(000, 6400, 6400))
        self.set_position(gtk.WIN_POS_CENTER)
        
        button1 = gtk.Button("Tombol 1")
        button2 = gtk.Button("Tombol 2")
        button3 = gtk.Button("Tombol 3")
                       
        container = gtk.Fixed()
           
        container.put(button1, 20, 20)
        container.put(button2, 40, 160)
        container.put(button3, 170, 50)

        self.add(container)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

App()
gtk.main()

Hasilnya:

Container Fixed

Cobalah ubah ukuran jendelanya, maka posisi dan ukuran tombol tidak akan berbuah. Ini karena kita menggunakan container Fixed.

2. Container VBox dan HBox

Class VBox dan HBox berfungsi untuk membuat kontainer box. VBox untuk box dengan penataan elemen secara vertikal sedangkan HBox untuk menata elemen secara horizonal.

Cara membuat object VBox dan HBox:

vbox = gtk.VBox(homogeneous=False, spacing=5)
hbox = gtk.HBox(homogeneous=False, spacing=5)

Ada dua parameter yang diberikan dalam konstruktor VBox dan HBox:

  • homogeneous jika diberikan True maka elemen akan memiliki ukuran yang sama;
  • spacing adalah jarak antar elemen dalam satuan piksel.

Mari kita coba..

Pertama, kita coba membuat layout dengan VBox, silahkan buat file vbox_layout.py kemudian isi dengan kode berikut:

#!/usr/bin/python

import gtk

class App(gtk.Window):
    
    def __init__(self):
        super(App, self).__init__()
        
        self.set_title("VBox Layout App")
        self.set_size_request(640, 360)
        self.set_position(gtk.WIN_POS_CENTER)
        
        # membuat kontainer vbox
        vbox = gtk.VBox(homogeneous=False, spacing=5)
                
        # membuat button
        btn_ok = gtk.Button("OK")
        btn_ok.set_size_request(70, 30)
        btn_close = gtk.Button("Close")
        
        vbox.add(btn_ok)
        vbox.add(btn_close)
        
        # tambahkan layout vbox ke window
        self.add(vbox)
        
        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

App()
gtk.main()

Hasilnya:

vbox layout

Pada contoh tersebut, kita membuat dua buah tombol. Kemudian kita tambahkan ke dalam container VBox.

Nah, sekarang coba ubah containernya menjadi HBox.

#!/usr/bin/python

import gtk

class App(gtk.Window):
    
    def __init__(self):
        super(App, self).__init__()
        
        self.set_title("HBox Layout App")
        self.set_size_request(640, 360)
        self.set_position(gtk.WIN_POS_CENTER)
        
        # membuat kontainer hbox
        hbox = gtk.HBox(homogeneous=False, spacing=5)
                
        # membuat button
        btn_ok = gtk.Button("OK")
        btn_ok.set_size_request(70, 30)
        btn_close = gtk.Button("Close")
        
        hbox.add(btn_ok)
        hbox.add(btn_close)
        
        # tambahkan layout hbox ke window
        self.add(hbox)
        
        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

App()
gtk.main()

Maka hasilnya:

hbox layout

Kita juga bisa menggabungkan kedua layout ini. Misalnya, layout VBox sebagai layout utama. Kemudian HBox sebgai layout anak dari VBox.

Mari kita coba.

Buatlah file baru dengan nama vbox_hbox.py kemudian isi dengan kode berikut:

#!/usr/bin/python

import gtk

class App(gtk.Window):
    
    def __init__(self):
        super(App, self).__init__()
        
        self.set_title("VBox dan Hbox Layout App")
        self.set_size_request(640, 360)
        self.set_position(gtk.WIN_POS_CENTER)
        
        # membuat kontainer vbox dan hbox
        vbox = gtk.VBox(homogeneous=False, spacing=5)
        hbox = gtk.HBox(homogeneous=False, spacing=10)
                
        # membuat button
        btn_ok = gtk.Button("OK")
        btn_ok.set_size_request(70, 30)
        btn_close = gtk.Button("Close")
        
        hbox.add(btn_ok)
        hbox.add(btn_close)
        
        vbox.add(gtk.Label("Aplikasi gabungan VBox dan HBox"))
        vbox.add(gtk.Label("Teks ini berada dalam VBox"))
        
        vbox.add(hbox)
        
        # tambahkan layout vbox ke window
        self.add(vbox)
        
        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

App()
gtk.main()

Maka hasilnya:

vbox hbox- layout

3. Container Alignment

Container Alignmet adalah kontainer yang dapat mengatur perataan elemen di dalamnya.1

Misalnya, kita ingin mengatur elemen agar rata kiri, rata tengah, rata kanan, dll. Maka kontainer ini bisa digunakan.

Berikut ini contoh cara membuat objek Container Aligment:

align = gtk.Alignment(xalign=0.0, yalign=0.0, xscale=0.0, yscale=0.0)

Keteranagan:

  • xalign adalah besarnya ruang kosong dari kiri elemen (horizontal), nilainya antara 0.0 sampai 1.0.
  • yalign adalah besarnya ruang kosong dari atas elemen (vertikal), nilainya antara 0.0 sampai 1.0.
  • xscale adalah besarnya ukuran elemen secara horizontal, nilainya antara 0.0 sampai 1.0.
  • yscale adalah besarnya ukuran elemen secara vertikal, nilainya antara 0.0 sampai 1.0.

Contoh penggunaan:

#!/usr/bin/python

import gtk

class App(gtk.Window):
    
    def __init__(self):
        super(App, self).__init__()
        
        self.set_title("Alignment Layout App")
        self.set_size_request(260, 150)
        self.set_position(gtk.WIN_POS_CENTER)
        
        # membuat kontainer vbox dan hbox
        vbox = gtk.VBox(False, 5)
        hbox = gtk.HBox(True, 3)
        
        # membuat kontainer Alignment vertikal
        valign = gtk.Alignment(0, 1, 0, 0)
        vbox.pack_start(valign)
        
        # membuat button
        btn_ok = gtk.Button("OK")
        btn_ok.set_size_request(70, 30)
        btn_close = gtk.Button("Close")
        
        #menambahkan button ke kontainer horizontal box
        hbox.add(btn_ok)
        hbox.add(btn_close)
        
        # membuat kontainer aligment horizontal
        halign = gtk.Alignment(1, 0, 0, 0)
        halign.add(hbox)
        
        # tambahkan halign layout ke valign
        vbox.pack_start(halign, False, False, 3)
        
        # tambahkan layout vbox ke window
        self.add(vbox)
        
        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

App()
gtk.main()

Hasilnya:

contoh alignment layout gtk

Nilai 1 pada pembuatan objek align sama dengan 1.0, oke sekarang coba ubah nilai xalign pada objek halign menjadi 0.5.

# membuat kontainer aligment horizontal
halign = gtk.Alignment(0.5, 0, 0, 0)
halign.add(hbox)

Maka hasilnya, hbox yang berisi dua tombol akan berada di rata tengah.

algiment center

Jika 0.5 diganti menjadi 0, maka ukuran spasi di bagian kiri akan menjadi 0 yang artinya hbox yang berisi tombol akan menjadi rata kiri.

# membuat kontainer aligment horizontal
halign = gtk.Alignment(0, 0, 0, 0)
halign.add(hbox)

Hasilnya:

align left

Selain itu, coba juga untuk mengubah nilai xscale. Ini merupakan besarnya ukuran elemen yang ada di dalam layout alignment.

Contoh:

# membuat kontainer aligment horizontal
halign = gtk.Alignment(0, 0, 1, 0)
halign.add(hbox)

Ukuran xscale diubah menjadi 1, maka elemen hbox yang berisi tombol akan diperbesar secara horizontal (100%).

xscale

Coba ubah lagi nilainya menjadi 0.5,

# membuat kontainer aligment horizontal
halign = gtk.Alignment(0, 0, 0.5, 0)
halign.add(hbox)

Maka hasilnya:

xscale 50

4. Container Table

Berikutnya kita akan mencoba kontainer Table. Seperti namanya, kontainer ini memiliki baris dan kolom seperti tabel.

Kontainer tabel dapat kita buat dengan class Table().

Contoh:

table = gtk.Table(5, 4, True)

Mari kita coba dalam program. Buatlah file baru bernama kalkulator.py kemudian isi dengan kode berikut.

import gtk


class PyApp(gtk.Window):

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

        self.set_title("Calculator")
        self.set_size_request(250, 230)
        self.set_position(gtk.WIN_POS_CENTER)

        vbox = gtk.VBox(False, 2)
        
        mb = gtk.MenuBar()
        filemenu = gtk.Menu()
        filem = gtk.MenuItem("File")
        filem.set_submenu(filemenu)
        mb.append(filem)

        vbox.pack_start(mb, False, False, 0)

        table = gtk.Table(5, 4, True)

        table.attach(gtk.Button("Cls"), 0, 1, 0, 1)
        table.attach(gtk.Button("Bck"), 1, 2, 0, 1)
        table.attach(gtk.Label(), 2, 3, 0, 1)
        table.attach(gtk.Button("Close"), 3, 4, 0, 1)

        table.attach(gtk.Button("7"), 0, 1, 1, 2)
        table.attach(gtk.Button("8"), 1, 2, 1, 2)
        table.attach(gtk.Button("9"), 2, 3, 1, 2)
        table.attach(gtk.Button("/"), 3, 4, 1, 2)

        table.attach(gtk.Button("4"), 0, 1, 2, 3)
        table.attach(gtk.Button("5"), 1, 2, 2, 3)
        table.attach(gtk.Button("6"), 2, 3, 2, 3)
        table.attach(gtk.Button("*"), 3, 4, 2, 3)

        table.attach(gtk.Button("1"), 0, 1, 3, 4)
        table.attach(gtk.Button("2"), 1, 2, 3, 4)
        table.attach(gtk.Button("3"), 2, 3, 3, 4)
        table.attach(gtk.Button("-"), 3, 4, 3, 4)

        table.attach(gtk.Button("0"), 0, 1, 4, 5)
        table.attach(gtk.Button("."), 1, 2, 4, 5)
        table.attach(gtk.Button("="), 2, 3, 4, 5)
        table.attach(gtk.Button("+"), 3, 4, 4, 5)

        vbox.pack_start(gtk.Entry(), False, False, 0)
        vbox.pack_end(table, True, True, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

PyApp()
gtk.main()

Hasilnya:

table layout

5. Container Layout

Container Layout mirip seperti container fixed, namun container ini punya keunggulan.. yakni ukurannya bisa lebih besar.

Biasanya, Container layout digunakan untuk menampilkan elemen yang luas.

Cara membuat container layout:

layout = gtk.Layout()

Mari kita coba..

Buatlah file baru dengan nama layout_container.py, kemudian isi dengan kode berikut:

#!/usr/bin/python

import gtk

class App(gtk.Window):
    
    def __init__(self):
        super(App, self).__init__()
        
        self.set_title("Layout Container App")
        self.set_size_request(640, 360)
        self.set_position(gtk.WIN_POS_CENTER)
        
        # membuat object scrolled_window
        scrolled_window = gtk.ScrolledWindow()
        
        # membuat layout container dengan ukuran 400x400
        layout_container = gtk.Layout()
        layout_container.set_size(400,400)
        
        btn = gtk.Button("Klik saya")
        
        # tambahkan button ke dalam layout pada posisi 125,200
        layout_container.put(btn, 125, 200)
        
        # tambahkan layout ke dalam scrolled_window
        scrolled_window.add(layout_container)
        
        # tambahkan scrolled_window ke dalam window utama
        self.add(scrolled_window)
        
        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

App()
gtk.main()

Maka hasilnya:

container layout

Karena ukuran container layout lebih besar dari pada ukuran window utama, maka akan ada scrollbar.

Oh iya, Container layout harus dibungkus di dalam ScrolledWindow agar memiliki scrollbar.

Apa Selanjutnya?

Sebenarnya masih banyak lagi class Container di GTK yang belum di bahas. Semua container ini bisa dilihat di dokuemntasi GTK.

Selain itu, kita juga bisa menggunakan aplikasi Glade untuk melihat daftar Container yang tersedia pada GTK.

container-pada-glade

Oh iya, nanti kita juga akan coba menggunakan Glade untuk membuat GUI dengan lebih cepat.

Baca Juga ini

Tutorial PyGTK #2: Belajar Membuat Tombol, Label, dan Event Click Handler

Tutorial PyGTK #2: Belajar Membuat Tombol, Label, dan Event Click Handler

Pada tutorial ini, kamu akan belajar cara membuat tombol dan label. Serta belajar cara membuat fungsi untuk event handler pada tombol...

Tutorial PyGTK #1: Belajar Pemrograman GUI dengan Python dan PyGTK di Linux

Tutorial PyGTK #1: Belajar Pemrograman GUI dengan Python dan PyGTK di Linux

GUI adalah singkatan dari Graphical User Interface. Aplikasi GUI memang mudah digunakan. Karena terdapat tampilan visual grafis yang bisa diklik. Salah satu modul atau libraray yang sering digunakan untuk membuat aplikasi GUI adalah GTK+. Pada kesempatan ini, kita akan menggunakan modul tersebut dengan mencoba membuat sebuah jendela atau window. Mari kita mulai… Apa itu GTK+ dan PyGTK?Sebelum itu, kamu harus pahami dulu apa perbedaan dari GTK+ dan PyGTK. GTK+ (GIMP Toolkit) merupakan library yang digunakan untuk membangun antarmuka grafis.

Tutorial PyGTK #3: Belajar Membuat Tooltips

Tutorial PyGTK #3: Belajar Membuat Tooltips

Pada tutorial ini, kamu akan belajar cara membuat Tooltips dengan PyGTK. Tooltips adalah sebuah informasi tambahan pada elemen...

7 (Bahasa) Pemrograman yang Dapat Dilakukan Langsung di Ubuntu

7 (Bahasa) Pemrograman yang Dapat Dilakukan Langsung di Ubuntu

Apa saja bahasa pemrograman yang bisa kamu langsung pakai di Ubuntu?

Belajar Python: Cara Proses Data JSON dengan Python (dari File dan Web API)

Belajar Python: Cara Proses Data JSON dengan Python (dari File dan Web API)

Mau tau cara proses data JSON di Python? baca tutorial ini! Pada tutorial ini, kamu akan belajar cara membaca JSON dari file dan web API

Membuat Program Countdown Timer (Pomodoro) dengan Python

Membuat Program Countdown Timer (Pomodoro) dengan Python

Waktu hitung mundur (countdown timer) sering kita temukan pada kehidupan sehari-hari. Biasanya kita gunakan untuk menghitung mundur sesuatu yang penting, seperti: deadline, detik pergantian tahun, timer saat memasak, pomodoro, dll. Nah, pada tutorial ini.. Kita akan belajar membuat program timer dengan Python dengan studi kasus Pomodoro Timer. Sebenarnya tidak hanya bisa dipakai untuk Pomodoro saja sih, program ini juga nanti akan bisa digunakan untuk timer yang lainnya. Oke kalau bagitu,