GtkTreeView

Disadur dari :
- Artikel Lars Wirzenius ( http://liw.iki.fi/liw/texts/gtktreeview-tutorial.html )
- Dokumentasi Gtk 2.0 ( http://developer.gnome.org/doc/API/2.0/gtk/TreeWidget.html )

GtkTreeView mengunakan pendekatan Model/View/Controller. Dalam arti untuk membuat tree-view ini terdapat tiga konsep yang perlu diimplementasikan. Pertama, model, sebagai representasi dari data yang akan ditampilkan. Kedua, view, dalam hal ini GtkTreeView yang akan menampilkan data di layar. Ketiga, controller, yaitu alur logika di dalam program kita yang mengubungkan antara model dan view.

Walaupun tampaknya menbuat hal ini menjadi sukar tetapi akhirnya akan menyederhanakan struktur program. Implikasi lain yaitu, kita dapat membuat beberapa view yang berbeda untuk menampilkan data yang sama. Contohnya seperti di progam untuk menampilkan direktori dan berkas-berkas di dalamnya. Kita dapat melihatnya dengan tampilan yang berbeda, misalnya : big-icon, small-icon, list-detail-properties, show thumb-nail, dan lain lain.

Selain dari artikel ini Anda diharapkan juga melihat dokumentasi Gtk dan tutorial dari Lars Wirzenius. Namun tutorial dari Lars Wirzenius menggunakan bahasa pemrograman Python.

Model : GtkTreeModel dan GtkTreeStore

GtkTreeModel adalah definisi interface yang akan digunakan oleh GtkTreeView. Anda dapat membuat model sendiri sebagai implemetasi dari GtkTreeModel tetapi Gtk menyediakan 2 implementasi model yang siap digunakan. Secara umum, dua model ini sangat mencukupi untuk sebagian besar kebutuhan. GtkTreeStore dapat menyimpan data secara hirarki, sedangkan GtkListStore menyimpan data secara linear.

Pertama, kita akan menggunakan model GtkListStore untuk menyimpan data. Model mirip dengan tabel pada database, terdiri dari baris-baris data dengan beberapa kolom. Setiap kolom mempunyai tipe data tertentu.


GtkListStore *store = gtk_list_store_new (3, G_TYPE_STRING, G_TYPE_STRING, G_TYPE_BOOLEAN);

Untuk membuat GtkListStore kita gunakan fungsi gtk_list_store_new(). Argumen pertama adalah jumlah kolom, kedua dan selanjutnya adalah tipe data di kolom yang bersangkutan. Tetapi umumnya argumen pertama adalah anggota enumerasi untuk memudahkan pemrograman. Contohnya :


enum
{
   KOLOM_NAMA=0,
   KOLOM_WARNA,
   KOLOM_DIKANTOR,
   JML_KOLOM
};

GtkListStore *store = gtk_list_store_new (JML_KOLOM,       /* Jumlah komlom */
                                          G_TYPE_STRING,   /* Nama */
                                          G_TYPE_STRING,   /* Warna foreground */
                                          G_TYPE_BOOLEAN); /* Sedang dikantor ? */

Untuk memasukkan data ke dalam model dapat dilakukan dengan fungsi gtk_list_store_set(). Sebuah objek pembantu GtkTreeIter sebagai iterator diperlukan untuk menentukan posisi baris di mana data akan diletakkan. Contohnya :


GtkTreeIter   iter;

gtk_list_store_append (store, &iter, NULL);  /* ambil iterator */
gtk_list_store_set (store, &iter,
                    KOLOM_NAMA, "Habibi",   /* data pertama */
                    KOLOM_WARNA, "red",
                    KOLOM_DIKANTOR, FALSE
                    -1);

gtk_list_store_append (store, &iter, NULL);  /* ambil iterator */
gtk_list_store_set (store, &iter,
                    KOLOM_NAMA, "Gus Duur",   /* data ke dua */
                    KOLOM_WARNA, "green",
                    KOLOM_DIKANTOR, FALSE
                    -1);

gtk_list_store_append (store, &iter, NULL);  /* ambil iterator */
gtk_list_store_set (store, &iter,
                    KOLOM_NAMA, "Megahwati",   /* data ke tiga */
                    KOLOM_WARNA, "blue",
                    KOLOM_DIKANTOR, TRUE
                    -1);

Membuat View

Untuk membuat view serta mehubungkannya dengan model yang telah kita buat digunakan fungsi gtk_tree_view_new_with_model(). Contoh :


GtkWidget *treeview;

treeview = gtk_tree_view_new_with_model (GTK_TREE_MODEL (store));

Langkah selanjutnya adalah membuat kolom yang menampilkan data di dalam model. Setiap kolom yang dibuat akan dimasukkan ke dalam treeview. Setiap kolom perlu informasi tentang : nama kolom, data yang mana dari model yang akan ditampilkan, dan widget yang akan menampilkan data tersebut. Widget tersebut dikenal sebagai renderer. Contoh :

GtkCellRenderer *renderer;
GtkTreeViewColumn *column;

renderer = gtk_cell_renderer_text_new ();
column = gtk_tree_view_column_new_with_attributes ("Nama",
                                                   renderer,
                                                   "text", KOLOM_NAMA,
                                                   "foreground", KOLOM_WARNA,
                                                   NULL);
gtk_tree_view_append_column (GTK_TREE_VIEW (treeview), column);

renderer = gtk_cell_renderer_toggle_new ();
column = gtk_tree_view_column_new_with_attributes ("Di Kantor ?",
                                                   renderer,
                                                   "active", KOLOM_DIKANTOR,
                                                   NULL);
gtk_tree_view_append_column (GTK_TREE_VIEW (treeview), column);

Kita lihat disini jumlah kolom pada model tidak selalu sama dengan kolom pada treeview. Bisa saja kolom pada model berisi informasi tambahan yang digunakan secara internal di dalam program dan tidak perlu ditampilkan di dalam treeview. Pada contoh di atas ada kolom di dalam model yang digunakan sebagai parameter untuk warna foreground pada renderer.

Sampai disini, semua langkah untuk menampilkan treeview telah dilakukan. Membuat model untuk menyimpan data. Memasukkan data ke dalam model. Membuat treeview serta menghubungkannya dengan model. Membuat kolom dan hubungannya dengan data di dalam model.

Menangkap Pilihan

Kebanyakan aplikasi yang menampilkan treeview memerlukan pengolahan lebih lanjut terutama jika pengguna melakukan pilihan pada treeview tersebut. Untuk melakukan hal ini diperlukan objek pembantu lainnya yaitu GtkTreeSelection dan menangkap signal "changed".

/* prototipe fungsi callback untuk signal "changed" */
static void tree_selection_changed_cb (GtkTreeSelection *selection, gpointer data);

GtkTreeSelection *select;

select = gtk_tree_view_get_selection (GTK_TREE_VIEW (treeview)); /* untuk mengambil objek GtkTreeSelection */
gtk_tree_selection_set_mode (select, GTK_SELECTION_SINGLE);
g_signal_connect (G_OBJECT (select), "changed",                  /* menghubungkan signal ke fungsi callback */
                  G_CALLBACK (tree_selection_changed_cb),
                  NULL);

Untuk mendapatkan data dari baris treeview yang dipilih.


static void
tree_selection_changed_cb (GtkTreeSelection *selection, gpointer data)
{
        GtkTreeIter iter;
        GtkTreeModel *model;
        gchar *namanya;

        if (gtk_tree_selection_get_selected (selection, &model, &iter))
        {
                gtk_tree_model_get (model, &iter, KOLOM_NAMA, &namanya, -1);

                g_print ("Anda memilih yang namanya %s\n", namanya);

                g_free (namanya);
        }
}

Perlu diperhatikan adalah passing argumen untuk setiap fungsi-fungsi dari gtk_tree_*, terutama untuk variable yang akan diisi atau diubah di dalam fungsi.

<<Menggunakan Tabel

Dasar-dasar Gtk+

Hosted by www.Geocities.ws