[SHARE] C/C++ GUI Tingkat Dasar dengan FLTK

Aplikasi-aplikasi diubuntu: • Aplikasi Grafis •
Aplikasi Internet •
Aplikasi Office •
Aplikasi Sound & Video •
Aplikasi Programming
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

[SHARE] C/C++ GUI Tingkat Dasar dengan FLTK

Postby nif » 21 Apr 2012, 19:40

Mungkin bagi sebagian orang membuat sebuah program Graphical User Interface (GUI) di Linux adalah hal yang mudah. Tidak untuk saya :( . Tapi untunglah beberapa minggu yang lalu saya mencoba FLTK. Ternyata GUI toolkit yang ini cukup sederhana, mudah digunakan dan dipahami.
Di sini saya akan mencoba menulis sedikit yang saya ketahui tentang FLTK, dalam bentuk contoh2 program sederhana. Siapa tau berguna bagi rekan2 FUI.
Mohon koreksinya. ;)
Last edited by nif on 27 Feb 2016, 20:03, edited 1 time in total.
Reason: edit judul
User avatar
belthsazar
Posts: 1300
Joined: 02 Jul 2011, 04:38
Location: Surabaya, Indonesia

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby belthsazar » 21 Apr 2012, 19:50

mana nih contohnya?
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby nif » 21 Apr 2012, 19:50

TENTANG FLTK
FLTK (Fast Light Toolkit) adalah GUI toolkit cross-platform yang bisa digunakan di Unix/Linux, Windows, dan Mac. Sesuai namanya, FLTK didesain untuk menjadi GUI toolkit yang ringan dan sederhana, namun tetap mampu memenuhi kebutuhan pengguna.
Jika dibandingkan dengan GUI toolkit di Linux lainnya (seperti GTK+ atau Qt), kelebihan FLTK antara lain ;
- lebih sederhana
- lebih mudah dimengerti dan digunakan
Sedangkan kekurangannya ;
- jenis widget kalah lengkap
- tampilan kalah menarik

Lisensi
FLTK berlisensi free (GNU Library Public License, Versi 2). Selain itu FLTK boleh digunakan untuk membuat aplikasi komersial tanpa perlu meminta izin pada developernya.
(Kutip: dokumentasi FLTK �... . Contrary to popular belief, it can be used in commercial software - even Bill Gates could use it!� :grin: )

Versi
Saat ini versi stable terbaru FLTK adalah 1.3. Versi ini masih cukup baru, sehingga beberapa versi Ubuntu di bawah 12.04 masih menggunakan versi 1.1. Tidak masalah karena perbedaan kedua versi ini tidak signifikan.

Instalasi
FLTK ada di repository Ubuntu. Tinggal install paket bernama libfltk dan libfltk(versi)-dev serta fluid (opsional). Bisa juga menginstall dari source.
Atau kalo mau ringkas, cukup install fluid. Semua paket FLTK beserta dependensinya otomatis akan ikut terinstall (jika Anda online tentunya).

Bahasa yang Didukung
FLTK digunakan untuk bahasa C++. Meski demikian banyak developer FLTK yang menggunakannya dengan gaya C (misalnya dengan menggunakan header stdio.h, bukan iostream). Konon hal itu karena alasan portabilitas (C lebih portable dari C++).
Di sini saya juga akan menggunakan cara seperti itu. Saya lebih terbiasa printf-scanf daripada cin-cout.

Dokumentasi
Keterangan mengenai jenis2 class / widget yang dimiliki FLTK beserta dengan method dan property-nya dapat dilihat di dokumentasi FLTK.

FLUID GUI Designer
FLTK memiliki GUI designer yang bernama FLUID (ada di repository Ubuntu). Tapi untuk program2 sederhana yang saya buat di sini, saya belum akan menggunakan FLUID. Saya akan menuliskan langsung dalam bentuk script.
Last edited by nif on 27 Feb 2016, 20:03, edited 1 time in total.
Reason: edit instalasi
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby nif » 21 Apr 2012, 19:52

belthsazar wrote:mana nih contohnya?

Sabar dong kang, baru mau ditulis. :grin:
User avatar
Malsasa
Posts: 2971
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby Malsasa » 21 Apr 2012, 19:55

Wah, terima kasih, Kang... Apakah tidak keberatan jika akang menyertakan juga skrinsot? Saya ini awam yang lebih senang banyak gambar, soalnya :) Terima kasih banyak.

Oya, apa akang bisa bikin user interface mockup?
User avatar
belthsazar
Posts: 1300
Joined: 02 Jul 2011, 04:38
Location: Surabaya, Indonesia

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby belthsazar » 21 Apr 2012, 19:59

nif wrote:
belthsazar wrote:mana nih contohnya?

Sabar dong kang, baru mau ditulis. :grin:


wkkwkwkw.. kirain udah jadi.
User avatar
aptfast
Posts: 3847
Joined: 03 Jan 2010, 23:38
Location: Jakarta, Indonesia
Contact:

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby aptfast » 21 Apr 2012, 20:04

paling ga, mantap neh info nya :D
ditunggu contoh program yg dah jadi gan
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby nif » 21 Apr 2012, 20:05

#1 : HelloWorld
Kita mulai dari program yang paling mudah; helloworld. Program ini tidak melakukan apa-apa, cuma menampilkan suatu tulisan. Di sini kita membutuhkan widget window dan box (untuk menampilkan tulisan). Programnya kita beri nama helloworld.cxx.
[spoiler=helloworld.cxx]#include [color:#3333FF]//baris1[/color]
#include
#include

Fl_Window *jendela1;
Fl_Box *kotak1;

int main(int argc, char **argv) {
jendela1 = new Fl_Window(200,200,"Hello");
jendela1->begin();
kotak1 = new Fl_Box(20,25,160,40,"Halo Warga FUI!");
jendela1->end();
jendela1->show(argc,argv);
return Fl::run();
} [color:#3333FF]//baris15[/color][/spoiler]
Penjelasan program :
baris 1-3 adalah header2 yang disertakan. Di program ini kita menggunakan widget FLTK jenis window dan box, jadi kita harus menyertakan header untuk keduanya. Satu lagi adalah , yang harus kita sertakan dalam setiap program yang menggunakan FLTK.
Baris 5-6 adalah inisialisasi. Kita menginisialisasi jendela1 dari class Fl_Window dan kotak1 dari class Fl_Box.
Baris 8 memulai fungsi utama.
Penjelasan perintah-perintah di fungsi utama :
[color:#990000]jendela1 = new Fl_Window(200,200,"Hello");[/color]
Membuat objek jendela1. Width=200 piksel, height=200 piksel, title = �Hello�.
[color:#990000]jendela1->begin();[/color] dan [color:#990000]jendela1->end();[/color]
Semua objek yang dibuat di antara kedua perintah ini akan otomatis menjadi children dari jendela1.
[color:#990000]kotak1 = new Fl_Box(50,25,100,40,"Halo Warga FUI!");[/color]
Membuat objek kotak1. X-position=50 piksel, Y-position=25 piksel, width=100 piksel, height=40 piksel, label = "Halo Warga FUI!�. Karena kotak1 adalah children dari jendela1, maka X-position dan Y-position diukur dari pojok kiri atas jendela1.
[color:#990000]jendela1->show(argc,argv);
return Fl::run();[/color]
Perintah untuk menampilkan jendela1 (beserta childrennya), looping, dan mengatur nilai kembalian ke sistem.

Kompilasi
Agar menjadi file yang executable, file helloworld.cxx kita compile melalui terminal.

[color:#006600]nif-desktop:~$ fltk-config --compile helloworld.cxx[/color]

Apa itu fltk-config? Compiler? Bukan. Fltk-config hanya program pembantu. File ini ikut terinstall saat kita menginstall FLTK. Gunanya untuk memudahkan proses kompilasi. Fltk-config akan memanggil compiler C++ di komputer Anda (misalnya g++) dan secara otomatis mengatur optionnya (linker option, nama output, dll).

Run
File hasil kompilasi dapat kita jalankan dari terminal

[color:#006600]nif-desktop:~$ ./helloworld[/color]

Atau dapat juga klik kiri 2 kali dengan mouse, seperti menjalankan program pada umumnya.

Nah, ketika dijalankan kurang lebih hasilnya seperti ini.

Image
User avatar
saa7_go
Posts: 464
Joined: 21 Jan 2011, 23:37
Contact:

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby saa7_go » 22 Apr 2012, 15:10

tutorialnya bagus nih, ditunggu tingkat menengah dan mahirnya.
User avatar
IntegerManual
Posts: 418
Joined: 13 May 2011, 15:36
Location: Kerajaan Loa Bakung
Contact:

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby IntegerManual » 22 Apr 2012, 17:12

mantapffff..... :)
bintang ****
User avatar
lisnux
Posts: 1763
Joined: 02 Jan 2010, 16:26
Location: Samarinda
Contact:

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby lisnux » 22 Apr 2012, 18:53

keren :D
yang di dukung hanya bahasa C aja ya??
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby nif » 22 Apr 2012, 20:19

@All : Terima kasih. Insya Allah saya akan coba update secara berkala. (maaf, tak bisa berkala ternyata :( )
@Malsasa : User interface mockup? Maaf, saya bahkan tak tau apa itu.. :smile:
@saa7_go : Hehehe. Tingkat menengah dan mahir kan bagiannya mastah saa7_go. :laugh:
@lisnux : iya mastah, hanya C/C++ aja.

@Om Momod : Rasanya saya kurang lengkap memberi judul trit ini. Saya tidak menyertakan bahasa pemrogramannya. Jika dirasa perlu, tolong ditambahkan ya. (Gak jadi, ternyata bisa diedit sendiri :grin: )
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby nif » 22 Apr 2012, 20:30

#2 : HelloWorld2 : callback
Program helloworld yang sudah kita buat adalah contoh program yang tidak melakukan apa2. Dari awal dijalankan sampai akhir ya cuma begitu saja, tidak berubah. Tentu program seperti ini tidak berguna. Sebuah program yang baik seharusnya bisa memberikan suatu reaksi ketika user melakukan suatu aksi. Konsep aksi-reaksi inilah yang dikenal dengan istilah signal dan callback.
Sekarang kita akan memodifikasi program helloworld yang sudah kita buat untuk menerapkan konsep ini. Kita akan menambahkan dua buah tombol (button). Program akan memberikan reaksi jika tombol2 tersebut ditekan. Program ini saya namakan helloworld2.cxx.
[spoiler=helloworld2.cxx]#include [color:#3333FF]//baris1[/color]
#include
#include
#include

Fl_Window *jendela1;
Fl_Box *kotak1;
Fl_Button *bt_jawab, *bt_reset;

void jawab_cb(Fl_Widget *, void *) {
kotak1->label("Halo juga!!");
kotak1->redraw();
}

void reset_cb(Fl_Widget *, void *) {
kotak1->label("Halo Warga FUI!");
kotak1->redraw();
}

int main(int argc, char **argv) {
jendela1 = new Fl_Window(200,200,"Hello2");
jendela1->begin();
kotak1 = new Fl_Box(20,25,160,40,"Halo Warga FUI!");
bt_jawab = new Fl_Button(100, 120, 80, 40, "Jawab");
bt_jawab->callback(jawab_cb);
bt_reset = new Fl_Button(20, 130, 60, 30, "Reset");
bt_reset->callback(reset_cb);
jendela1->end();
jendela1->show(argc,argv);
return Fl::run();
} [color:#3333FF]//baris31[/color][/spoiler]
Penjelasan program :
Di program ini kita menambahkan dua buah button, yaitu bt_jawab dan bt_reset. Jika bt_jawab diklik (signal), maka akan memanggil fungsi jawab_cb (callback). Sedangkan jika bt_reset diklik maka akan memanggil fungsi reset_cb.
Fungsi jawab_cb bekerja mengubah label kotak1. Fungsi reset_cb bekerja mengubah kembali label kotak1 seperti semula. Setelah pengubahan label (atau perubahan tampilan apapun), kita memerlukan redraw() untuk untuk meng-update tampilan program.
Bagian2 lain dari program ini tidak perlu saya jelaskan. Anda pasti sudah paham. :cool:

Setelah dicompile dan dijalankan, kurang lebih tampilannya seperti ini.

Image
User avatar
belthsazar
Posts: 1300
Joined: 02 Jul 2011, 04:38
Location: Surabaya, Indonesia

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby belthsazar » 22 Apr 2012, 23:07

wah.. pake C++ ternyata.. saya mah udah biasa java. jadi susah. wkwkw..
User avatar
pupil
Posts: 458
Joined: 08 Jan 2012, 06:24
Location: /home/pupil
Contact:

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby pupil » 22 Apr 2012, 23:39

wah, tutor yang bagus, ditunggu tutor selanjutnya :)
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby nif » 23 Apr 2012, 19:45

belthsazar wrote:wah.. pake C++ ternyata.. saya mah udah biasa java. jadi susah. wkwkw..

Buat tutorialnya juga dong gan. Saya pengin juga belajar bahasa Java. :smile:
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby nif » 23 Apr 2012, 19:58

#3 : HelloWorld3 : hotkey
Di sini kita akan memodifikasi lagi program helloworld2 untuk menambahkan fitur hotkey (alias keyboard shortcut). Caranya mudah, tinggal menambahkan tanda [color:#CC0000]&[/color] saja.
[spoiler=helloworld3.cxx]#include [color:#3333FF]//baris1[/color]
#include
#include
#include

Fl_Window *jendela1;
Fl_Box *kotak1;
Fl_Button *bt_jawab, *bt_reset;

void jawab_cb(Fl_Widget *, void *) {
kotak1->label("Halo juga!!");
kotak1->redraw();
}

void reset_cb(Fl_Widget *, void *) {
kotak1->label("Halo Warga FUI!");
kotak1->redraw();
}

int main(int argc, char **argv) {
jendela1 = new Fl_Window(200,200,"Hello3");
jendela1->begin();
kotak1 = new Fl_Box(20,25,160,40,"Halo Warga FUI!");
bt_jawab = new Fl_Button(100, 120, 80, 40, "J[color:#CC0000]&[/color]awab"); [color:#3333FF]//tanda "&"[/color]
bt_jawab->callback(jawab_cb);
bt_reset = new Fl_Button(20, 130, 60, 30, "[color:#CC0000]&[/color]Reset"); [color:#3333FF]//tanda "&"[/color]
bt_reset->callback(reset_cb);
jendela1->end();
jendela1->show(argc,argv);
return Fl::run();
} [color:#3333FF]//baris31[/color][/spoiler]
Penjelasan program :
Kita hanya menambahkan tanda [color:#CC0000]&[/color] di depan character yang ingin kita jadikan hotkey; misalkan huruf �a� pada label button bt_jawab, dan huruf �R� pada label button bt_reset.

Setelah dicompile dan dijalankan, kurang lebih tampilannya seperti ini.

Image

Apakah Anda melihat ada perbedaan dengan program sebelumnya? Ya, ada garis bawah pada huruf �a� di tombol �Jawab� dan pada huruf �R� di tombol �Reset�.
Itu artinya sekarang tombol Jawab bisa diklik tidak hanya dengan mouse, tetapi juga dengan menekan [color:#CC0000]Alt+a[/color] pada keyboard. Begitu juga tombol Reset dengan menekan [color:#CC0000]Alt+r[/color]. Cara ini berguna jika Anda tidak punya mouse ;).
Satu catatan lagi; fitur hotkey dengan FLTK ini tidak case sensitive. Artinya menekan [color:#CC0000]Alt+a[/color] dianggap sama saja dengan [color:#CC0000]Alt+A[/color] ataupun [color:#CC0000]Alt+Shift+a[/color].
User avatar
CDX
Posts: 1616
Joined: 03 Jan 2010, 13:00
Location: Prapatan belok kiri

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby CDX » 23 Apr 2012, 20:19

wah makin menarik nih bahasan... walaupun ane ga ngerti tapi ane usahain biar ngerti.. nyimak dari awal ah..:grin:
User avatar
nif
Posts: 2816
Joined: 31 Mar 2011, 07:48

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby nif » 23 Apr 2012, 20:20

#4 : HelloWorld4 : resize & maximize
Jika Anda mengamati program2 yang telah kita buat sebelumnya (helloworld, helloworld2, helloworld3), sebenarnya ada suatu kekurangan; tidak ada tombol maximize di window border. Program2 tersebut tidak dapat di-maximize maupun di-resize ketika dijalankan.
Bagaimana mengatasinya? Mudah, bisa gunakan method resizeable(). Kita akan memodifikasi program helloworld3 untuk mempraktekkannya.
[spoiler=helloworld4.cxx]#include [color:#3333FF]//baris1[/color]
#include
#include
#include

Fl_Window *jendela1;
Fl_Box *kotak1;
Fl_Button *bt_jawab, *bt_reset;

void jawab_cb(Fl_Widget *, void *) {
kotak1->label("Halo juga!!");
kotak1->redraw();
}

void reset_cb(Fl_Widget *, void *) {
kotak1->label("Halo Warga FUI!");
kotak1->redraw();
}

int main(int argc, char **argv) {
jendela1 = new Fl_Window(200,200,"Hello4");
jendela1->begin();
kotak1 = new Fl_Box(20,25,160,40,"Halo Warga FUI!");
bt_jawab = new Fl_Button(100, 120, 80, 40, "J&awab");
bt_jawab->callback(jawab_cb);
bt_reset = new Fl_Button(20, 130, 60, 30, "&Reset");
bt_reset->callback(reset_cb);
jendela1->end();
[color:#CC0000]jendela1->resizable(jendela1);[/color] [color:#3333FF]//resizeability[/color]
jendela1->show(argc,argv);
return Fl::run();
} [color:#3333FF]//baris32[/color][/spoiler]
Penjelasan program :
Baris perintah yang kita tambahkan berfungsi untuk mengaktifkan fitur resizeability pada jendela1. Jika jendela1 di-resize atau di-maximize, semua childrennya akan mengikuti secara proporsional.

Setelah dicompile dan dijalankan, kurang lebih tampilannya seperti ini.

Image

Sekarang kita dapat melakukan resize maupun maximize ketika program dijalankan.
Last edited by nif on 27 Feb 2016, 20:03, edited 1 time in total.
Reason: salah ketik
User avatar
pupil
Posts: 458
Joined: 08 Jan 2012, 06:24
Location: /home/pupil
Contact:

Re: [SHARE] Pemrograman GUI Tingkat Dasar dengan FLTK

Postby pupil » 24 Apr 2012, 00:31

kalau komponen Ui semisal textfield, radio button, checkbox, dan koneksi ke database gimana?

Return to “Aplikasi Ubuntu”

Who is online

Users browsing this forum: No registered users and 4 guests