Senin, 14 April 2014

GTK Programming : Packing dengan GtkGrid



Setelah pada tutorial sebelumnya kita menggunakan GtkBox untuk packing widget, kali ini kita akan menggunakan widget container yang lain untuk melakukan packing widget. GtkBox mampu mempacking widget secara vertikal ataupun horisontal, jika ingin mempacking secara horisontal sekaligus vertikal akan membutuhkan lebih dari 2 GtkBox. Tentu ini akan terasa kurang efisien. Jangan kawatir, kita dapat memecakan masalah ini dengan GtkGrid.

Sebelumnya ada pula widget bernama GtkTable yang memiliki fungsi serupa dengan GtkGrid. Sampai saat ini GtkTable masih ada, akan tetapi sekarang sudah tidak dianjurkan lagi penggunaannya(deprecated). Sekarang ini peranan GtkTable digantikan  dengan GtkGrid. Karena GtkTable sudah deprecated, disini kita hanya akan membahas GtkGrid saja.

Let's start
Cara kerja GtkGrid hampir sama dengan GtkBox seperti yang telah kita bahas pada tutorial sebelumnya. Semua widget yang bernaung dalam GtkGrid akan menyesuaikan diri sesuai dengan peletakan kolom dan barisnya.

Kode yang kita pakai pada tutorial sekarang ini tidak jauh berbeda dengan kode yang barusan kita pelajari pada tutorial sebelumnya. Teknik dasar packing dengan GtkGrid mirip sekali dengan GtkBox. Berikut adalah kodenya:
#include<gtk/gtk.h>

int main(int argc, char *argv[])
{
    GtkWidget *window, *button1, *button2, *button3, *grid;
  
    gtk_init(&argc, &argv);
    //buat window
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window),"GtkGrid Demo");
    //buat grid
    grid = gtk_grid_new();
    //pasang GtkGrid pada window
    gtk_container_add(GTK_CONTAINER(window), grid);
    //buat button
    button1 = gtk_button_new_with_label("Button 1");
    button2 = gtk_button_new_with_label("Button 2");
    button3 = gtk_button_new_with_label("Button 3");
    //pasang
    gtk_grid_attach(GTK_GRID(grid),button1,1,1,1,1);
    gtk_grid_attach(GTK_GRID(grid),button2,2,1,1,1);
    //gtk_grid_attach(GTK_GRID(grid),button3,1,2,2,1);
    gtk_grid_attach(GTK_GRID(grid),button3,1,2,1,1);
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}

Dan, seperti biasa, saya hanya akan membahas kode yang belum pernah dibahas pada tutorial-turorial sebelumnya. Kode asing yang paling pertama kita temui adalah fungsi gtk_grid_new(). Bisa ditebak, fungsi ini adalah untuk membuat GtkGrid baru. :)
Prototype lengkap fungsi gtk_grid_new() adalah sebagai berikut:
GtkWidget *gtk_grid_new(void);

Selanjutnya kita pasang GtkGrid seperti halnya yang kita lakukan dalam pemasangan GtkBox.
Kita langsung lompat saja menuju beberapa baris selanjutnya. Pada baris ini terjadi proses pemasangan widget pada GtkGrid.
gtk_grid_attach(GTK_GRID(grid),button1,1,1,1,1);
gtk_grid_attach(GTK_GRID(grid),button2,2,1,1,1);
/*gunakan kode di bawah ini untuk melihat 1 widget ditempatkan dalam 1 kolom
gtk_grid_attach(GTK_GRID(grid),button3,1,2,2,1);
*/
gtk_grid_attach(GTK_GRID(grid),button3,1,2,1,1);

Fungsi prototype lengkap gtk_grid_attach() adalah sebagai berikut.
void gtk_grid_attach(GtkGrid *grid, GtkWidget *child, gint left, gint top, gint width, gint height);
grid: pointer ke GtkWidget yang telah didaftarkan dengan gtk_grid_new()
child: widget yang ingin ditambahkan ke dalam cntainer GtkGrid
left: lokasi penempatan kolom GtkGrid
top: lokasi penempatan baris GtkGrid
width: jumlah kolom yang digunakan untuk widget yang akan dipasang
height: jumlah baris yang digunakan untuk widget yang akan dipasang

Sederhana bukan? Yups, itu karena GtkGrid memiliki cara kerja yang mirip dengan GtkBox yang telah kita pelajari sebelumnya. :)

Hasil
Hasil layout dari ketiga button yang terpasang pada GtkGrid dapat anda lihat pada screenshot berikut.

'button3' dengan parameter width 1 kolom

 'button3' dengan parameter width 2 kolom
Selamat mencoba :)
Load disqus comments

0 comments