Membuat Web Browser Sederhana dengan GTK, Webkit dan C

Masih begitu asing bagi beberapa programmer, ketika mendengar kata Webkit dan GTK. Tapi karena blog ini sudah menyediakan sedikit tutorial pemrograman GTK, maka kita akan mengaitkan tutorial GTK terdahulu dengan webkit. Webkit sudah dikembangkan cukup lama. Menurut Wikipedia, sampai saat ini juga telah digunakan oleh beberapa web browser, seperti safari, opera dan google chrome.

Sudah agak lama webkit melintas di pikiran saya. Namun saya belum terlalu banyak menggalinya lebih jauh. Mengapa? Karena untuk melihat Webkit terinstall di windows tidak mudah. Ini mungkin waktu yang tepat untuk berbagi sedikit tentang WebKit, karena akhir-akhir ini sedang aktif menggunakan sistem GNU/Linux. Meski kita tahu GTK cross-platform, khusus untuk tutorial ini hanya ditujukan untuk programmer GTK yang berkutat di lingkungan sistem Linux saja, karena saya belum menemukan cara praktis untuk menginstall webkit di Windows.

Untuk melihat program GTK tampil dengan widget browser, pertama kita harus menginstall libwebkit2gtk beserta development packages-nya. Disini saya menggunakan distro Ubuntu, pengguna distro lain mungkin harus sedikit mengerahkan keringat untuk bertanya pada mbah google. Sebenarnya webkit ini terinstall otomatis saat saya menginstal development packages untuk GTK, namun untuk memastikannya gunakan perintah berikut.

apt-get install libwebkit2gtk-3.0 -0 libwebkit2gtk-3.0 -dev

Awalnya saya tidak sengaja melihat dokumentasi WebkitGtk terinstall di /usr/share/gtk-doc. Berbekal ini, akhirnya saya mencoba bereksperimen membuat program sederhana dengan memanfaatkan library webkit. Hasil programnya sederhana, tapi jika saya tidak segera menulisnya mungkin suatu saat saya harus membaca dari awal lagi untuk memahami baris kode tersebut, jadi saya putuskan untuk menulis dan membagikannya untuk teman-teman semua

Widget yang disediakan webkit dapat digunakan dengan mudah, selayaknya ketika kita membuat widget GTK pada umumnya. Jadi konsep-konsepnya tentu tidak akan saya jelaskan lagi. Yang saya jelaskan di tutorial ini hanyalah beberapa fungsi yang bisa anda gunakan sebagai eksperimen secara individu.

Kelas terpenting dalam Webkit2GTK adalah WebKitWebView. Kelas ini menyediakan widget untuk digunakan secara sinkon dengan GTK. Untuk membuat widget ini, kita cukup menggunakan fungsi seperti berikut.

GtkWidget *webkit_web_view_new (void);

Fungsi di atas akan membuat sebuah widget WebKitWebView baru, selanjutnya widget tersebut dapat kita tampilkan bersama dengan widget lainnya. Referensi yang berisi daftar API WebKitWebView lain juga bisa diakses di link ini.

Contohnya implementasinya seperti ini.

webkit.c

#include <gtk/gtk.h>
#include <webkit/webkit.h>

int main(int argc, char* argv[]){
    GtkWidget *window, *webkit;
   
    gtk_init(&argc, &argv);
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(window, "Browser Webkit");
    gtk_window_set_default_size(window,800,600);
    //membuat widget webkit
    webkit = webkit_web_view_new ();
    //pasang dan tampilkan
    gtk_container_add(GTK_CONTAINER(window), webkit);
    gtk_widget_show_all(window);
    //alamat protokol harus jelas.
    //misal, situs seperti FB, google, harus https://
    webkit_web_view_load_uri (webkit, "http://m.facebook.com");
    gtk_main();
}

Build source dengan perintah berikut.
gcc -o webkit webkit.c `pkg-config --libs --cflags gtk+-3.0 webkit2gtk-3.0`
Saat pertama kali tampil, kita hanya melihat bidang segi empat kosong. Dengan sedikit kreatifitas dan usaha, kita bisa membuatnya menampilkan homepage khusus saat pertama kali tampil. Hmm, tapi saya rasa pemikiran itu masih terlalu jauh untuk saat ini, jadi kita akan memulai semunya dengan membuka sebuah website di widget ini.

void webkit_web_view_load_uri (WebKitWebView *web_view, const gchar *uri);

Parameter uri menentukan alamat yang akan diakses. Penulisannya harus disertakan protokol yang jelas, misalnya http://, https://, ftp://, atau file://. Jika tidak, webkit tidak akan bisa menampilkannya.

Penasaran hasil eksperimen saya seperti apa? Ini dia..

Untuk daftar fungsi yang jelas, silahkan buka dokumentasi WebKit2GTK(link). Disana anda akan mengetahui fungsi-fungsi sederhana, namun tentu saja, powerful. Setelah anda membacanya, anda akan bisa membayangkan gambaran abstrak untuk membuat tombol back-forward-reload, save page, menampilkan progress, dan lain-lain. 

Read more

GTK Programming : Membuat Idle dan Timeout

Sampai sekarang, banyak kontributor yang mengupayakan GTK menjadi thread-safe, namun hal itu rupanya sangat sulit. Untuk mengakses widget dengan fungsi GTK secara bersamaan dari thread, banyak yang merekomendasikan untuk menggunakan idle atau time out. Setelah memahami 2 konsep ini, Anda dapat mengombinasikannya dengan thread tanpa harus kawatir masalah keamanan dalam multithreading.  Jadi, apa itu idle dan timeout?
 
Idle
Idle adalah suatu fungsi yang disisipkan pada main thread. Biasanya idle digunakan untuk mengakses widget secara terus menerus saat program berjalan.
Seperti yang telah kita ketahui sebelumnya, gtk_main() sebenarnya bekerja menerima event dan melanjutkannya kepada callback yang sesuai. Dengan menambahkan sebuah idle, fungsi yang kita inginkan akan dieksekusi setelah gtk_main() menangani handle.

Untuk menambahkan idle, kita dapat memilih satu dari 2 macam metode, yaitu dengan metode dari GDK atau dengan metode dari GLib. Menurut beberapa sumber, metode dari GDK lebih aman, namun ada pula sumber yang mengatakan keduanya sama saja. Jika dilihat dari dokumentasi GTK, penggunaan metode dari GLib ataupun GDK sama sekali tidak dipermasalahkan, namun programmer dianjukan untuk memakai fungsi dari GDK.

GDK:

guint gdk_threads_add_idle (GSourceFunc function, gpointer data);

GLib:

guint g_idle_add (GSourceFunc function, gpointer data);

function : Argumen ini berupa alamat ke fungsi callback GSourceFunc yang ingin didaftarkan. GSourceFunc merupakan fungsi khusus untuk membuat idle dan timeout. Bentuk fungsinya seperti berikut:

gboolean nama_callback (gpointer user_data);
{
   //do something
}

Fungsi callback ini akan terus dipanggil selama kita masih mengembalikan TRUE. Saat fungsi selesai dengan return FALSE, maka secara otomatis idle dihapus.  

data : Argumen kedua ini berupa pointer ke data yang dikirimkan pada fungsi callback. Sifatnya opsional, jadi bisa dikosongi.
 
Timeout
Timeout kurang lebih sama dengan idle. Perbedaanya, sebelum menjalankan fungsi callback, interval akan diperiksa terlebih dahulu.

Metode untuk membuat timeout juga disediakan oleh GDK dan GLib, sama halnya dengan idle. Parameter function dan data memiliki ketentuan pemakaian yang sama dengan fungsi yang dijelaskan sebelumnya. Fungsi berikut memiliki parameter interval, yaitu jangka waktu yang dipakai sebagai patokan sebelum pemanggilan fungsi callback. Satuan interval ditulis dalam milidetik, jadi, jika ingin callback dipanggil setiap 1 detik, gunakan argumen 1000 pada parameter interval.

GDK:

guint gdk_threads_add_timeout (guint interval, GSourceFunc function, gpointer data);

GLib:

guint g_timeout_add (guint interval, GSourceFunc function, gpointer data);

Contoh Kode

#include<stdio.h>
#include<gtk/gtk.h>

GtkWidget *window;
int num = 0;
char str[20];

gboolean timeout (gpointer user_data)
{
   sprintf((char*)&str,"Timeout: %d x", num);
   gtk_window_set_title(GTK_WINDOW(window),(char*)&str);
   num++;
   return TRUE;
}

void window_destroy (GtkWidget *object, gpointer user_data)
{
    g_print("Event destroy diterima :) \n");
    gtk_main_quit();
}

int main(int argc, char *argv[])
{
    gtk_init(&argc, &argv);
    //window baru
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window),"GtkWindow");
    //hubungkan signal destroy
    g_signal_connect (window, "destroy", G_CALLBACK (window_destroy),NULL);
    //daftar timeout. Fungsi akan dipanggil setiap 1000 ms (1 detik)
    gdk_threads_add_timeout(1000,timeout,0);
    //tampilkan widget
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}

Kode di atas akan membuat timeout dengan interval 1000 ms. Fungsi timeout() didaftarkan sebagai callback. Sehingga setiap satu detik, fungsi tersebut dipanggil. Dalam fungsi tersebut kita mengubah titlebar window dengan jumlah total pemanggilan fungsi callback.

Hasil

Read more

GTK Programming : Tipe Variabel Dasar GLib

GTK dibangun dengan mengimplementasikan GLib. Sehingga banyak tipe data yang mengikuti standar dari GLib. Pada dasarnya semua tipe data tersebut merupakan tipe data standar bahasa C yang didefinisikan sesuai konvensi GLib. Sederhananya, hampir semua tipe dasar GLib sama seperti fungsi standar C dengan tambahan karakter “g” di awal dan menyingkat keyword “unsigned” dengan karakter “u”.

Berikut ini adalah daftar lengkap tipe dasar GLib dan persamaannya dengan tipe standar yang biasa diimplementasikan pada bahasa C.

Tipe GLib	Tipe C	Tipe GLib	Tipe C
gboolean	int	gint16	signed short
gpointer	void*	guint16	unsigned short
gconstpointer	const void*	gint32	signed int
gchar	char	guint32	unsigned int
guchar	unsigned char	gint64	signed long
gint	int	guint64	unsigned long
guint	unsigned int	gfloat	float
gshort	short	gdouble	double
gushort	unsigned short	gsize	unsigned long
glong	long	gssize	signed long
gulong	unsigned long	goffset	unsigned long
gint8	signed char	gintptr	signed int
guint8	unsigned char	guintptr	unsigned int

Banyak tipe GLib yang memiliki kesamaan tipe dasar C, misalnya gsize dan gulong. Walaupun begitu, GLib tidak menggunakan tipe-tipe tersebut secara sembarangan. Misalnya tipe gulong digunakan untuk menampung data umum, sementara itu gsize lebih direkomendasikan untuk menyimpan ukuran suatu data dalam byte. Tipe gboolean merupakan definisi lain dari tipe int. Kita tahum tipe int dapat menampung data beragam, tapi penggunaan gboolean lebih direkomendasikan untuk menampung angka 0 atau 1 saja. Tipe gint8, guint8, dan lainnya juga demikian. Pada dasarnya kelompok tipe ini sama seperti tipe gint, guint dan lainnya. Bedanya fungsi gint dan lainnya dapat dipakai untuk menampung data umum, sementara guint8 dan lainnya direkomendasikan untuk menampung data yang erat kaitannya dengan pehitungan matematis.

Perbedaan penggunaan setiap tipe data tadi hanyalah rekomendasi. Jika anda tahu bahwa antara kedua tipe memiiliki kesamaan, anda bebas untuk menggunakan salah satu diantaranya. Bahkan anda juga boleh menggunakan tipe standar C saja.

Read more

GTK Programming : GtkRange dan GtkScale

GtkRange merupakan kelas dasar yang diturunkan pada widget berjenis adjustment atau widget yang dkhususkan untuk peyesuaian level. Widget ini menyimpan beberapa properti untuk mengatur kerja widget. GtkScale adalah salah satu turunan GtkRange. Bentuk GtkScale panjang dengan dilengkapi satu buah kontrol slider untuk mengatur levelnya.

Tulisan ini lebih bermaksud untuk memperkenalkan GtkScale, namun karena widget ini turunan GtkRange, untuk menggunakannya kita harus sekaligus mengenal dan mempelajari GtkRange.

GtkScale dapat dengan mudah dibuat dengan fungsi gtk_scale_new_with_range(). Fungsi ini akan membuat sebuah widget sesuai dengan argumen yang diberikan.

GtkWidget *gtk_scale_new_with_range (GtkOrientation orientation, gdouble min, gdouble max, gdouble step);

Argumen yang digunakan dalam fungsi di atas adalah sebagai berikut:

• orientation : GTK_ORIENTATION_VERTICAL atau GTK_ORIENTATION_HORIZONTAL
• min : Nilai terendah yang bisa diatur melalui GtkScale
• max : Nilai tertinggi
• step : Perubahan nilai saat GtkScale diatur dengan arrow keyboard. Misalnya nilainya 2, maka saat menekan tombol panah atas, nilai GtkScale akan bergeser ke 2 nilai lebih tinggi.

Contoh Kode

#include<gtk/gtk.h>

int main(int argc, char *argv[])
{
    GtkWidget *window, *box, *scale1, *scale2;
    gtk_init(&argc, &argv);
    //window baru
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window),"GtkScale");
    gtk_widget_set_size_request(window,250,100);
    //buat box
    box = gtk_box_new(GTK_ORIENTATION_VERTICAL,10);
    //buat GtkAdjustment dan GtkScale
    scale1 = gtk_scale_new_with_range (GTK_ORIENTATION_HORIZONTAL, 0,100,1);
    scale2 = gtk_scale_new_with_range (GTK_ORIENTATION_HORIZONTAL, 0,100,1);
    gtk_range_set_inverted(GTK_RANGE(scale2),TRUE);
    //pack
    gtk_box_pack_start(GTK_BOX(box),scale1,TRUE,TRUE,10);
    gtk_box_pack_start(GTK_BOX(box),scale2,TRUE,TRUE,10);
    gtk_container_add(GTK_CONTAINER(window), box);
    //tampilkan widget
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
} 

 Pada kode di atas, kita juga mencoba satu metode dasar yang disediakan oleh GtkRange, yaitu gtk_range_set_inverted(). Fungsi ini sangat berguna untuk mengatur arah slider. Misalnya sebelum memanggil ini nilai minimum ada di kiri dan maksimum ada di kanan, maka fungsi ini dapat mengubah letak nilai minimum dan maksimum menjadi kebalikannya. Coba lihat screenshot untuk melihat efeknya. Adapun bentuk fungsi gtk_range_set_inverted adalah sebagai berikut.

void gtk_range_set_inverted (GtkRange *range, gboolean setting);

Fungsi diatas akan memutar arah saat argumen setting adalah TRUE, untuk mengembalikan ke keadaan semula, kita cukup memanggil fungsi ini dengan argumen setting = FALSE.

Beberapa fungsi di bawah ini mungkin juga akan bermanfaat untuk memperluas fungsional program Anda.

Mengubah posisi dan nilai fill level GtkScale :

void gtk_range_set_value (GtkRange *range, gdouble value);

  Menyembunyikan/menampilkan fill level:

void gtk_range_set_show_fill_level (GtkRange *range, gboolean show_fill_level);

  Selain mengenal fungsi dasarnya, mungkin akan lebih baik jika Anda mengenal beberapa jenis callback yang ada pada GtkRange. Semua callback ini bisa dihubungkan dengan fungsi g_signal_connect() seperti pada tulisan-tulisan sebelumnya.

“change-value” : signal ini muncul saat kontrol slider GtkScale digerakkan oleh pengguna.

void user_function (GtkRange *range, gpointer user_data)
{
   //handler
}

 

“format-value” : Signal berasal berasal dari GtkScale. Dapat anda gunakan untuk mengganti angka fill level yang ditampilkan diatas widget. Signal ini juga dipanggil saat slider digerakkan.

gchar *user_function (GtkScale *scale, gdouble value, gpointer user_data)
{
   //handler
}

  Contoh penggunaannya adalah sebagai berikut:

...
#include<malloc.h>
...
gchar *scale_format_value (GtkScale *scale, gdouble value, gpointer user_data)
{
   char *val;
   val = (char*)malloc(50); //Jangan kawatir, GTK akan mengeksekusi free() setelah selesai.
   sprintf(val, "Value = %f", value);
   return val;
}

GtkWidget *scale;
int main(int argc, char *argv[])
{
    ...
    g_signal_connect (scale, "format-value", G_CALLBACK (scale_format_value),NULL);
    ...
} 

     
Hasil

Read more

GTK Programming : Membuat Thread dengan GLib

Thread adalah bagian dari proses, namun thread bukanlah proses. Dalam sebuah proses minimal terdapat satu buah thread utama, disebut juga sebagai main thread. Dalam program C, main thread adalah kode yang berada pada fungsi main() sekaligus fungsi-fungsi yang dipanggil dari main().

Thread biasanya dibuat untuk menjalankan tugas lebih cepat, atau digunakan saat ada 2 tugas yang harus dikerjakan secara bersamaan. Misalnya dalam sebuah video player, kita tidak bisa hanya bekerja dengan main thread, setidaknya ada 1 atau 2 lagi thread lainnya. Thread utama untuk menerima input/perintah dari user, thread kedua untuk mengolah suara dan thread ketiga untuk mengolah video. Tentu saja hal ini tidak bisa dilakukan dengan 3 fungsi yang berjalan secara berurutan, ketiganya harus berjalan bersamaan.
 
Dengan membuat thread baru, itu artinya kita membuat fungsi lain berjalan bersamaan dengan fungsi main() dalam waktu yang sama. Dengan berjalan bersamaan, program dapat berjalan lebih cepat. Tapi hal itu bukan berarti akan membuat semuanya lebih mudah.

Program yang menjalankan lebih dari satu thread, harus menjaga agar data global tidak diakses secara bersamaan. Jika tidak, hal yang tak diinginkan dapat terjadi sewaktu-waktu. Sehingga program yang mengimplementasikan multithreading harus mempertimbangkan syncronization primitives.

Kita tidak akan membahas bagaimana mengimplementasikan syncronization primitives. Tapi sekarang kita akan membahas permasalahan thread di GTK yang sangat erat kaitannya dengan multithreading.

Sebuah library dikatakan thread-safe apabila dapat diakses oleh banyak thread secara bersamaan. GTK mungkin aman dipakai untuk banyak program, tetapi rupanya GTK sampai sekarang belum tergolong thread-safe. Jadi, GTK hanya diperbolehkan untuk diakses dari main thread saja.
Semua fungsi callback sebenarnya dieksekusi sebagai bagian dari main thread, jadi jangan kawatir. Lagipula, tidak banyak keperluan berkaitan GTK yang harus diakses melalui thread. Jika ada, maka kita sebaiknya menggunakan idle dan timer untuk melakukannya. Selengkapnya tentang idle dan timer akan dibahas pada kesempatan lain yaa..

Baik, sekarang kita bahas bagaimana membuat thread. Walaupun kita tidak bisa mengakses GTK dari sini, nantinya kita akan menemui banyak sekali hal yang harus dilakukan secara multithreading.
Untuk membuat sebuah thread, gunakan fungsi berikut.

GThread *g_thread_new (const gchar *name, GThreadFunc func, gpointer data);

Fungsi di atas mengembalikan struktur GThread. Struktur ini bersifat opaque, atau tidak bisa diakses secara langsung. Kita hanya perlu tahu bahwa struktur ini berisi tentang informasi thread. Fungsi ini menggunakan 3 argumen, yaitu:

• name : identitas thread. Digunakan untuk keperluan debug, jadi cukup isikan sesuai dengan keinginan anda. Maksial 16 karakter
• func : Pointer ke fungsi GThreadFunc, yaitu fungsi yang digunakan sebagai thread.
• data : Data yang digunakan sebagai argumen pada fungsi GThreadFunc.

GThreadFunc
Berbeda dengan fungsi main thread seperti biasa (int main()). Bentuk fungsi thread yang dibuat harus memiliki bentuk sebagai berikut.

gpointer nama_fungsi (gpointer data);
{
   //lakukan sesuatu
}

Return value bukan berupa int, tapi berupa data dalam bentuk pointer. Untuk mengetahui data yang dikembalikan oleh thread, gunakan fungsi berikut.

gpointer g_thread_join (GThread *thread);

Contoh

#include<gtk/gtk.h>

/* thread ini mengeprint pesan
 * lalu pause/sleep selama 1 detik
 * selama 10 kali
 * setelah itu mengembalikan nilai pointer ke string "abcde"
 */
char *r = "abcde \n";
gpointer thread(gpointer data)
{
    int i;
    for(i=10;i!=0;i--){
        g_print("Pesan dari thread() \n");
        g_usleep(1000000);
    }
    return r;
}

int main(int argc, char *argv[])
{
    GThread *t;
    //buat thread
    t = g_thread_new("mythread", thread,0);
    
    //cetak pesan dan sleep 10x
    int i;
    for(i=10;i!=0;i--)
    {
        g_print("Pesan dari main() \n");
        g_usleep(1000000);
    }
    //dapatkan return value
    g_print("Nilai return dari thread: %s \n",(char *)g_thread_join(t) );
}

Kode di atas juga menunjukkan bagaimana menggunakan fungsi g_usleep(). Fungsi ini digunakan untuk melakukan penundaan/pause dalam kurun waktu sekian microsecond.

void g_usleep (gulong microseconds);

Sekali lagi, ingat, jangan memanggil fungsi GTK dari thread :)

Hasil

Read more

GTK Programming : Yang Terlewat, gtk_main_quit()

Setelah sekian banyak tulisan tentang GTK saya posting, ada satu hal yang sengaja saya tunda waktu postingnya. Hal itu saya maksudkan untuk mengurangi kerumitan kode program saat penjelasan.

Setiap program GTK, selalu memanggil fungsi gtk_main() setelah menyiapkan dan menampilkan semua widgetnya. Apa anda penasaran apa yang ada di gtk_main()?

Fungsi gtk_main() sebenarnya adalah fungsi untuk menunggu event. Saat event diterima, gtk_main() memanggil fungsi callback yang telah didaftarkan dengan g_signal_connect().  Banyak programmer GTK awalnya mengira, saat window ditutup program akan berhenti dengan sendirinya. Tapi saat mereka menjalankan program melalui terminal, mereka tahu, bahwa program ternyata masih tetap berjalan. Saat tombol tutup di pojok window kita klik, itu hanya menutup window saja. Saat itu gtk_main() akan terus berjalan menunggu event.

Untuk menghentikan gtk_main(), kita hanya bisa melakukannya dengan fungsi gtk_main_quit(). Darimana kita mengeksekusi fungsi tersebut? Program kan terus membaca event?
Sebenarnya saat window ditutup, ia mengeluarkan signal “destroy”, tepat setelah window menghilang dari desktop. Bagian inilah yang dapat kita manfaatkan untuk membelokkan gtk_main() ke fungsi callback untuk menangani event “destroy” tadi. Dalam fungsi callback kita sisipkan saja kode gtk_main_quit(), dan selesailah sudah.

Jika kita sebelumnya mengalokasikan memory atau resource, semua sebaiknya kita bebaskan dari fungsi callback ini.

Source code 

#include<gtk/gtk.h>
#include<malloc.h>

void window_destroy (GtkWidget *object, gpointer user_data)
{
    g_print("Event destroy diterima :) \n");
    gtk_main_quit();
}

int main(int argc, char *argv[])
{
    GtkWidget *window;
    gtk_init(&argc, &argv);
    //window baru
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window),"GtkWindow");
    //hubungkan signal
    g_signal_connect (window, "destroy", G_CALLBACK (window_destroy),NULL);
    //tampilkan widget
    gtk_widget_show_all(window);
    gtk_main();
    //Setelah gtk_main_quit() dipanggil...
    g_print("Hey, gtk_main_quit() sudah dipanggil :) \n");
    return 0;
}

Hasil

Read more

GTK Programming : GtkLinkButton

GtkLinkButton adalah widget turunan GtkButton dengan tambahan hyperlink. Widget ini sesuai untuk menaruh link website pada aplikasi. Saat pengguna mengeklik widget ini, browser default akan terbuka untuk membuka link yang  telah ditentukan. Sebenarnya bukan hanya untuk link ke website, bisa juga link ke folder, file, printer, dll. Semuanya tergantung parameter URI. Misalnya, “http://www.komputoo.com”, maka sistem akan membuka browser dan membuka link, atau “file:///home/irvan/”, maka sistem akan membuka file manager pada lokasi folder tersebut dan satu lagi contoh URI yang sering digunakan, “mailto:cinta@kamu.com”, URI ini akan membuka software pengelola email.

Let's Start
Ada 2 fungsi yang disediakan GTK untuk membuat GtkLinkButton, yaitu, gtk_link_button_new() dan gtk_link_button_new_with_label(). Fungsi pertama hanya memiliki 1 buah parameter string, berupa alamat URI. Label yang akan ditampilkan widget adalah string URI itu sendiri. Funsi yang kedua bentuknya hampir sama, hanya saja ada 1 parameter lagi, berupa sting yang menentukan label link button. Fungsi kedua ini kita pilih jika kita ingin menampilkan label sesuai keinginan.

GtkWidget *gtk_link_button_new (const gchar *uri);

GtkWidget *gtk_link_button_new_with_label (const gchar *uri, const gchar *label);

Source Code

#include<gtk/gtk.h>

int main(int argc, char *argv[])
{
    GtkWidget *window, *box, *link1, *link2, *link3;
    gtk_init(&argc, &argv);
    //window baru
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window),"GtkLinkButton");
    //buat gtkbox horisontal lalu pasang ke window
    box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 10);
    gtk_container_add(GTK_CONTAINER(window), box);
    //buat linkbutton
    link1 = gtk_link_button_new("http://www.komputoo.com");
    link2 = gtk_link_button_new_with_label("http://www.facebook.com/komputoo", "Komputoo's Facebook");
    link3 = gtk_link_button_new_with_label("file:///home/", "Buka folder /home");
    //pasang widget ke box
    gtk_box_pack_start(GTK_BOX(box),link1,TRUE,TRUE,10);
    gtk_box_pack_start(GTK_BOX(box),link2,TRUE,TRUE,10);
    gtk_box_pack_start(GTK_BOX(box),link3,TRUE,TRUE,10);
    //tampilkan widget
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}

Lebih Jauh dengan GtkLinkButton
Ada beberapa fungsi lagi yang dapat Anda pelajari sendiri. Seperti biasa, tentu saja penerapan fungsi tambahan ini sengaja tidak saya sertakan dalam source code.

gtk_link_button_get_uri()
Fungsi ini digunakan untuk mendapatkan URI dari GtkLinkButton. Parameter link_button adalah widget yang diinginkan, lalu return value berupa pointer ke string URI.

const gchar *gtk_link_button_get_uri (GtkLinkButton *link_button);

gtk_link_button_set_uri()
Fungsi ini digunakan untuk mengupdate/mengubah URI widget GtkLinkButton. Paramater pertama adalah widget yang ingin diubah dan parameter kedua adalah string URI yang baru.

void gtk_link_button_set_uri (GtkLinkButton *link_button, const gchar *uri);

gtk_link_button_get_visited()
Fungsi ini digunakan untuk mengetahui apakah link sudah pernah dikunjungi sebelumnya. Parameternya adalah widget GtkLinkButton yang diinginkan. Jika sudah pernah return value bernilai 1 atau sama dengan GTK_TRUE.

gboolean gtk_link_button_get_visited (GtkLinkButton *link_button);

gtk_link_button_set_visited()
Sebuah link dinyatakan visited (sudah pernah dikunjungi) tepat setelah user mengeklik link button pertama kali. Jika Anda ingin mengubah status menjadi visited ataupun sebaliknya, gunakan fungsi ini. Seperti biasa, parameter pertama adalah widget GtkLinkButton yang dinginkan dan parameter kedua adalah status yang diinginkan. Nilai 0 atau GTK_FALSE artinya link belum pernah dikunjungi, sementara nilai 1 atau GTK_TRUE bermaksud sebaliknya.

void gtk_link_button_set_visited (GtkLinkButton *link_button, gboolean visited);

Hasil

Read more

GTK Programming : Input Text dengan GtkEntry

GtkEntry juga merupakan jenis widget esensial alam pembuatan software. Widget ini sangat erat kaitannya dengan keyboard. Fungsi widget ini yaitu untuk menerima karakter yang telah diketik oleh user. GtkEntry hanya untuk menerima input dalam satu baris teks saja. Teks yang ditampilkan secara multiline harus dibuat dengan widget GtkTextView.

Banyak sekali fungsi API yang dapat kita gunakan untuk memanipulasi GtkEntry. Namun, karena masih dalam tahap awal, tutorial ini hanya menjelaskan fungsi dasarnya saja.

Let's Start
Pertama-tama, kita akan mengetahui bagaimana membuat widget GtkEntry. Setelah itu, beberapa API juga akan kita gunakan untuk mengolah teks dari dalam GtkEntry.

Sebelum membuat widget, perlu Anda ketahui bahwa GtkEntry sangat erat kaitannya dengan GtkEntryBuffer. Widget ini bersifat invisible, tidak untuk ditampilkan dan hanya berperan sebagai pelengkap. GtkEntryBuffer merupakan widget tersembunyi yang membantu GtkEntry menyimpan teks di dalamnya.

Fungsi gtk_entry_new() akan membuat GtkEntry sekaligus membuat serta menghubungkannya dengan GtkEntryBuffer. Jika mau, kita juga bisa membuat objek GtkEntryBuffer sendiri dengan gtk_entry_buffer_new(), lalu membuat GtkEntry dan menghubungkan GtkEntryBuffer dengan fungsi gtk_entry_new_with_buffer(). Untuk membantu Anda lebih mudah memahaminya, tutorial ini hanya mencangkup fungsi gtk_entry_new()  saja.

Berikut prototype fungsinya:

GtkWidget *gtk_entry_new (void);

Setelah dibuat dan ditampilkan, sekarang widget dapat menerima input teks dari keyboard. Jika diperlukan, Teksdalam widget dapat diubah dengan fungsi gtk_entry_set_text(). Kemudian Anda juga bisa mengekstrak teks dari widget tersebut dengan memanggil fungsi gtk_entry_get_text(),

void gtk_entry_set_text (GtkEntry *entry, const gchar *text);

Fungsi di atas membutuhkan 2 argumen untuk bekerja. Dai parameterpertama, yaitu entry, adalah widget GtkEntry yang akan diubah teksnya. Lalu yang kedua, text, adalah text yang ingin ditampilkan pada widget.

const gchar *gtk_entry_get_text (GtkEntry *entry);

Fungsi untuk mengekstrak teks berbentuk seperti di atas. Satu buah parameter merupakan GtkEntry yang ingin diketahui teksnya. Dari hasil pemanggilan fungsi, kita akan memperoleh sebuah pointer ke teks yang ditampilkan oleh widget.

Fungsi lain yang mungkin harus kita ketahui adalah gtk_entry_get_text_length(), untuk mengetahui jumlah huruf dalam teks dan gtk_entry_set_max_length(), untuk membatasi jumlah huruf dalam GtkEntry.

guint16 gtk_entry_get_text_length (GtkEntry *entry);

Parameter entry adalah GtkEntry yang ingin diketahui panjang hurufnya. Setelah memanggil fungsi, kita mendapatkan return berupa panjang huruf.

void gtk_entry_set_max_length (GtkEntry *entry, gint max);

Parameter pertama, yaitu entry adalah GtkEntry yang ingin diatur, lalu parameter max berupa panjang huruf maksimum.

Source Code
Kode berikut akan menampilkan window berisi sebuah GtkEntry dan GtkButton. Button ini untuk membuktikan cara kerja fungsi-fungsi yang dijelaskan di atas.

#include<gtk/gtk.h>

GtkWidget *window, *box, *entry, *button;

void button_clicked(GtkButton *button, gpointer user_data)
{
    const gchar *teks = gtk_entry_get_text(GTK_ENTRY(entry));
    guint16 panjang = gtk_entry_get_text_length(GTK_ENTRY(entry));
    g_print("Teks: %s\nPanjang: %d\n",teks, panjang);
    return;
}

int main(int argc, char *argv[])
{
    gtk_init(&argc, &argv);
    //window baru
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window),"Hello world");
    //buat gtkbox horisontal lalu pasang ke window
    box = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 10);
    gtk_container_add(GTK_CONTAINER(window), box);
    //buat GtkEntry, set text, set max length
    entry = gtk_entry_new();
    gtk_entry_set_text(GTK_ENTRY(entry),"Hello");
    gtk_entry_set_max_length(GTK_ENTRY(entry),10);
    //buat button, connect signal
    button = gtk_button_new_with_label("Tampil");
    g_signal_connect(button, "clicked", G_CALLBACK(button_clicked), 0);
    //pasang entry dan button ke box
    gtk_box_pack_start(GTK_BOX(box),entry,TRUE,TRUE,10);
    gtk_box_pack_start(GTK_BOX(box),button,TRUE,TRUE,10);
    //tampilkan widget
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}

Hasil

Read more

GTK Programming : GtkSeparator

Separator bisa jadi merupakan widget paling sederhana diantara widget lainnya, karena untuk membuat widget ini, kita cukup tahu satu fungsi API saja. Separator merupakan widget yang berperan sebagai garis pembatas antara dua widget atau lebih. Umumnya widget ini banyak dipasang dibagian toolbar atau bagian lain yang memiliki banyak icon. Tapi sebenarnya penggunaannya bebas di tangan programmer.
 
Let’s Start
Pembuatan GtkSeparator dilakukan dengan fungsi gtk_separator_new(), berikut ini adalah bentuk lengkap fungsinya.

GtkWidget *gtk_separator_new (GtkOrientation orientation);

Satu buah parameter tipe GtkOrientation diperlukan untuk menentukan orientasi separator, dapat berupa vertikal(GTK_ORIENTATION_VERTICAL) atau horisontal(GTK_ORIENTATION_HORIZONTAL).

Source Code

#include<gtk/gtk.h>

int main(int argc, char *argv[])
{
    GtkWidget *window, *box, *button1, *separator, *button2;
    gtk_init(&argc, &argv);
    //window baru
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window),"GtkSeparator");
    //buat gtkbox horisontal lalu pasang ke window 
    box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 10); 
    gtk_container_add(GTK_CONTAINER(window), box);
    //buat gambar dari file dan icon theme
    button1 = gtk_button_new_with_label("button1");
    separator = gtk_separator_new(GTK_ORIENTATION_HORIZONTAL);
    button2 = gtk_button_new_with_label("button2");
    //pasang image1 dan image2 ke box
    gtk_box_pack_start(GTK_BOX(box),button1,TRUE,TRUE,10); 
    gtk_box_pack_start(GTK_BOX(box),separator,TRUE,TRUE,10); 
    gtk_box_pack_start(GTK_BOX(box),button2,TRUE,TRUE,10);
    //tampilkan widget
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
} 

Sangat sederhana bukan? :)
Let's see it!

Hasil

Selamat mencoba... :)

Read more

GTK Programming : GtkImage untuk Penayangan Gambar

Gambar merupakan komponen esensial untuk sebuah program. Tanpa gambar program yang kita buat terasa kurang menarik dan kurang interaktif. Dalam GTK, widget GtkImage adalah widget yang dibuat khusus untuk menampilkan gambar. Beruntung sekali, widget ini mendukung banyak format gambar, jadi kita tidak perlu repot-repot memikirkan lagi untuk membuat gambar yang formatnya sesuai. Karena GTK sudah mendukung hampir semua jenis format gambar bitmap.

Gambar yang bisa diload oleh GTK bisa berasal dari beberapa macam sumber, bisa dari file, icon theme, stock, resource, dll. Dalam tutorial ini hanya akan dibahas cara penampilan icon dari file dan icon theme, karena kedua sumber gambar tersebut mungkin akan lebih sering digunakan.

Gambar dari file tidak perlu saya jelaskan, yang jelas untuk menampilkannya kita harus tahu path file gambar yang akan ditampilkan. Misalnya, “/home/irvan/jannina.png”.
Sementara itu, berbagai jenis icon theme yang dapat kita temukan pada folder /usr/share/icons/. Icon yang digunakan dipilih berdasarkan tema icon saat ini. Untuk memilih jenis icon dari theme yang akan ditampilkan, kita cukup mengetahui nama file icon tanpa harus mengetahui path nya.

Let’s Start
Membuat widget GtkImage dapat dilakukan dengan fungsi gtk_image_new(). Fungsi ini hanya membuat sebuah widget tanpa menyertakan gambar. Untuk menempatkan gambar pada widget, selanjutnya kita harus menggunakan fungsi  gtk_image_set_from_file() atau  gtk_image_set_from_icon_name(). Baca sampai akhir untuk mengetahui penjelasan kedua fungsi ini.

Kita juga bisa meload gambar bersamaan dengan pembuatan widget. Membuat GtkImage dengan gambar dari file sangat mudah. Fungsi yang kita gunakan hanya memerlukan sebuah parameter berupa path file gambar yang akan ditampilkan.

GtkWidget *gtk_image_new_from_file(const gchar *filename);

Sementara itu, membuat gambar dari icon theme tidak jauh berbeda. Untuk meload gambar dari icon theme, selain menyertakan parameter nama icon, kita juga menyertakan ukuran icon pada parameter kedua.

GtkWidget *gtk_image_new_from_icon_name(const gchar *icon_name, GtkIconSize size);

Berikut ini adalah macam-macam ukuran icon yang merupakan kelompok enumerasi dari GtkIconSize:

• GTK_ICON_SIZE_INVALID
• GTK_ICON_SIZE_MENU
• GTK_ICON_SIZE_SMALL_TOOLBAR
• GTK_ICON_SIZE_LARGE_TOOLBAR
• GTK_ICON_SIZE_BUTTON
• GTK_ICON_SIZE_DND
• GTK_ICON_SIZE_DIALOG

Source Code

#include<gtk/gtk.h>
int main(int argc, char *argv[])
{
    GtkWidget *window, *box, *image1, *image2;
    gtk_init(&argc, &argv);
    //window baru
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window),"Hello world");
    //buat gtkbox horisontal lalu pasang ke window 
    box = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 10); 
    gtk_container_add(GTK_CONTAINER(window), box);
    //buat gambar dari file dan icon theme
    image1 = gtk_image_new_from_file("/home/irvan/jannina.png");
    image2 = gtk_image_new_from_icon_name("gtk-open", GTK_ICON_SIZE_DIALOG);
    //pasang image1 dan image2 ke box
    gtk_box_pack_start(GTK_BOX(box),image1,TRUE,TRUE,10); 
    gtk_box_pack_start(GTK_BOX(box),image2,TRUE,TRUE,10);
    //tampilkan widget
    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}

Mengatur Gambar
Sebelumnya telah disinggung tentang fungsi gtk_image_set_from_file() dan gtk_image_set_from_icon_name(). Kedua fungsi ini dapat kita gunakan untuk meload gambar pada GtkImage yang belum berisi gambar, atau juga bisa untuk mengubah gambar yang sudah ada sebelumnya.

void gtk_image_set_from_file (GtkImage *image, const gchar *filename);

void gtk_image_set_from_icon_name (GtkImage *image, const gchar *icon_name, GtkIconSize size);

Parameter image adalah widget yang ingin di atur. Penjelasan parameter lainnya sama seperti fungsi sebelumnya.
Kedua fungsi ini tidak disertakan dalam source code, silahkan mencobanya sendiri yaa. :D


Hasil

Read more