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

Aplikasi-aplikasi diubuntu: • Aplikasi Grafis •
Aplikasi Internet •
Aplikasi Office •
Aplikasi Sound & Video •
Aplikasi Programming
Post Reply
User avatar
nif
Been thanked: 1 time

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

Post 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

Post 21 Apr 2012, 19:50

mana nih contohnya?


User avatar
nif
Been thanked: 1 time

Post 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
Been thanked: 1 time

Post 21 Apr 2012, 19:52

belthsazar wrote:mana nih contohnya?
Sabar dong kang, baru mau ditulis. :grin:


User avatar
Malsasa
Contact:

Post 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

Post 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
Contact:

Post 21 Apr 2012, 20:04

paling ga, mantap neh info nya :D
ditunggu contoh program yg dah jadi gan


User avatar
nif
Been thanked: 1 time

Post 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 //baris1
#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();
} //baris15[/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 :
jendela1 = new Fl_Window(200,200,"Hello");
Membuat objek jendela1. Width=200 piksel, height=200 piksel, title = �Hello�.
jendela1->begin(); dan jendela1->end();
Semua objek yang dibuat di antara kedua perintah ini akan otomatis menjadi children dari jendela1.
kotak1 = new Fl_Box(50,25,100,40,"Halo Warga FUI!");
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.
jendela1->show(argc,argv);
return Fl::run();

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.

nif-desktop:~$ fltk-config --compile helloworld.cxx

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

nif-desktop:~$ ./helloworld

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
Contact:

Post 22 Apr 2012, 15:10

tutorialnya bagus nih, ditunggu tingkat menengah dan mahirnya.


User avatar
lisnux
Contact:

Post 22 Apr 2012, 18:53

keren :D
yang di dukung hanya bahasa C aja ya??


User avatar
nif
Been thanked: 1 time

Post 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
Been thanked: 1 time

Post 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 //baris1
#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();
} //baris31[/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

Post 22 Apr 2012, 23:07

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


User avatar
pupil
Contact:

Post 22 Apr 2012, 23:39

wah, tutor yang bagus, ditunggu tutor selanjutnya :)


User avatar
nif
Been thanked: 1 time

Post 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
Been thanked: 1 time

Post 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 & saja.
[spoiler=helloworld3.cxx]#include //baris1
#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&awab"); //tanda "&"
bt_jawab->callback(jawab_cb);
bt_reset = new Fl_Button(20, 130, 60, 30, "&Reset"); //tanda "&"
bt_reset->callback(reset_cb);
jendela1->end();
jendela1->show(argc,argv);
return Fl::run();
} //baris31[/spoiler]
Penjelasan program :
Kita hanya menambahkan tanda & 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 Alt+a pada keyboard. Begitu juga tombol Reset dengan menekan Alt+r. Cara ini berguna jika Anda tidak punya mouse ;).
Satu catatan lagi; fitur hotkey dengan FLTK ini tidak case sensitive. Artinya menekan Alt+a dianggap sama saja dengan Alt+A ataupun Alt+Shift+a.


User avatar
CDX

Post 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
Been thanked: 1 time

Post 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 //baris1
#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();
jendela1->resizable(jendela1); //resizeability
jendela1->show(argc,argv);
return Fl::run();
} //baris32[/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
Contact:

Post 24 Apr 2012, 00:31

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


User avatar
saa7_go
Contact:

Post 24 Apr 2012, 06:36

pupil wrote:kalau komponen Ui semisal textfield, radio button, checkbox, dan koneksi ke database gimana?
sabar om pupil, paling sedang diolah tutorialnya ama om nif. :D

btw, untuk database sepertinya pake pustaka masing2 database yg mo dipake.
Last edited by saa7_go on 27 Feb 2016, 20:03, edited 1 time in total.
Reason: nambah jawaban


User avatar
IntegerManual
Contact:

Post 24 Apr 2012, 07:23

om pupil ini ga jelas.. java atau c dia :grin:


User avatar
saa7_go
Contact:

Post 24 Apr 2012, 07:24

IntegerManual wrote:om pupil ini ga jelas.. java atau c dia :grin:
mastah dia, apa2 bisa. :grin:


User avatar
pupil
Contact:

Post 24 Apr 2012, 07:51

wah, saya malu dibilang seperti itu. Saya cuma orang yang seneng aja ama programming, kalau skill, paling seputar hello world. Ditunggu tutor selanjutnya ya mas nif :)


User avatar
buzzing_bee
Contact:

Post 24 Apr 2012, 09:34

pupil wrote:wah, saya malu dibilang seperti itu. Saya cuma orang yang seneng aja ama programming, kalau skill, paling seputar hello world. Ditunggu tutor selanjutnya ya mas nif :)


iya cuma seputar hello world tapi dengan modifikasi penambahan looping, inheritance, dan function2 yg dirasa perlu :D

sepertinya ilham akan senang kalo masuk trit ini :D


User avatar
nif
Been thanked: 1 time

Post 26 Apr 2012, 08:45

pupil wrote:kalau komponen Ui semisal textfield, radio button, checkbox, dan koneksi ke database gimana?
Untuk textfield, radio button, checkbox, dll Insya Allah akan saya bahas pada saatnya. Saat ini belum saya tulis. Maklum, saya kan pake metode 'kejar tayang'. :laugh:
Kalo untuk database, mungkin tidak. Ilmunya belum nyampe. Saya nyimak aja deh. :grin:


User avatar
nif
Been thanked: 1 time

Post 26 Apr 2012, 08:56

#5 : HelloWorld5 : mengatur property
FLTK adalah toolkit yang minimalis, terutama dari segi tampilan. Tapi bukan berarti kita tidak bisa mengatur tampilannya sama sekali. Di sini kita akan mencoba mengatur property widget yang kita gunakan pada helloworld4, terutama yang berkaitan dengan tampilan program.
[spoiler=helloworld5.cxx]#include //baris1
#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,"Hello5");
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->color(FL_BLUE);
kotak1->box(FL_ROUNDED_BOX);
kotak1->color(FL_WHITE);
kotak1->labelcolor(FL_RED);
kotak1->labelfont(FL_TIMES_BOLD_ITALIC);
bt_jawab->color(FL_YELLOW,FL_RED);
bt_jawab->labelsize(16);
bt_reset->color(FL_GREEN,FL_BLACK);

jendela1->end();
jendela1->resizable(jendela1);
jendela1->show(argc,argv);
return Fl::run();
} //baris40[/spoiler]
Penjelasan program :
Program ini sama seperti helloworld4. Perbedaannya hanya pada pengaturan property tampilan saja.
-jendela1 : kita buat berwarna biru
-kotak1 : kita buat boxtype = FL_ROUNDED_BOX (default = FL_NO_BOX, alias transparan), warna box putih, warna tulisan (label) merah, dan jenis huruf FL_TIMES_BOLD_ITALIC (default = FL_HELVETICA).
-bt_jawab : kita buat berwarna kuning ketika OFF dan merah ketika ON, serta ukuran huruf 16 (default = 14).
-bt_reset : kita buat berwarna hijau ketika OFF dan hitam ketika ON.

Hasilnya kurang lebih seperti ini.

Image

FLTK memiliki nilai2 standar yang telah mereka enumerasi; seperti FL_RED, FL_GREEN (untuk warna), FL_NO_BOX, FL_ROUNDED_BOX (untuk boxtype), FL_HELVETICA, FL_TIMES (untuk jenis huruf), dll.
Penggunaan enumerasi adalah untuk memudahkan programmer. Bukan berarti kita tidak bisa menggunakan nilai di luar enumerasi tersebut. Misalkan kita ingin menggati warna jendela1 menjadi ubuntu orange (kode RGB-nya #DD4814), kita dapat menggunakan perintah berikut.

jendela1->color(0xDD481400);

Untuk keterangan lebih lengkap mengenai jenis dan cara pengaturan property masing2 widget dapat dilihat di dokumentasi FLTK.
Last edited by nif on 27 Feb 2016, 20:03, edited 1 time in total.
Reason: salah ketik


User avatar
nif
Been thanked: 1 time

Post 04 May 2012, 16:42

#Sisipan : LetterRun
Image
Sebelumnya maaf, sudah beberapa hari saya gak update trit ini. Maklum baru pindah versi (sekarang Xubuntu 12.04) dan beberapa kesibukan lain.
Di sini saya berikan contoh program permainan edukasi sederhana buatan saya. Namanya LetterRun. Program ini mengetes kecepatan dan akurasi Anda dalam mengetik.
Cuma program sederhana banget, tetapi menggunakan beberapa komponen yang Insya Allah akan kita bahas selanjutnya (input-output, checkbox, spinner, dial, dll).
Source code-nya saya lampirkan di bawah, beserta file binary-nya kalo males compile sendiri. :smile:
Attachments
letterrun.zip
(0 Bytes) Downloaded 50 times


User avatar
nif
Been thanked: 1 time

Post 05 May 2012, 14:46

#6 : FreeCopy : input-output teks
Di sini kita akan menggunakan widget input dan output dasar dari FLTK, yaitu Fl_Input dan Fl_Output. Keduanya digunakan untuk input-output data bertipe string (teks).
[spoiler=freecopy.cxx]#include //baris1
#include
#include
#include
#include

Fl_Window *jendela1;
Fl_Button *bt_copy;
Fl_Input *input1;
Fl_Output *output1;
const char* tmp_teks;

void copy_cb(Fl_Widget *, void *) {
tmp_teks = input1->value();
output1->value(tmp_teks);
output1->redraw();
}

int main(int argc, char **argv) {
jendela1 = new Fl_Window(400,280,"FreeCopy");
jendela1->begin();
input1 = new Fl_Input(90, 20, 280, 30, "Input ");
input1->value("--ketik di sini--");
output1 = new Fl_Output(90, 70, 280, 30, "Output ");
bt_copy = new Fl_Button(280, 200, 60, 40, "&Copy");
bt_copy->callback(copy_cb);
jendela1->end();
jendela1->resizable(jendela1);
jendela1->show(argc,argv);
return Fl::run();
} //baris31[/spoiler]
Penjelasan Program :
Program ini sangat sederhana, hanya meng-copy string yang dimasukkan di input1 untuk ditampilkan ke output1.
tmp_teks = input1->value();
output1->value(tmp_teks);

Pada dua baris perintah di atas kita mengambil teks isi input1, kemudian memasukkannya ke output1 melalui variabel tmp_teks sebagai penyimpanan sementara.
Jika ingin ringkas sebenarnya dapat ditulis singkat seperti ini
output1->value(output1->value());
tanpa perlu menggunakan variabel penyimpanan sementara

Image


User avatar
nif
Been thanked: 1 time

Post 05 May 2012, 14:50

#7 : FreeCopy2 : check button
Sekarang kita modifikasi freecopy.cxx untuk menambahkan sebuah widget baru, yaitu check button (alias checkbox). Check button sebenarnya hanya sebuah button bertipe toggle (sekali klik ON, sekali klik OFF). Check button akan bernilai 1 ketika ON (checked), dan 0 ketika OFF (unchecked).
[spoiler=freecopy2.cxx]#include //baris1
#include
#include
#include
#include
#include

Fl_Window *jendela1;
Fl_Button *bt_copy;
Fl_Input *input1;
Fl_Output *outputA, *outputB;
Fl_Check_Button *checkA,*checkB;
const char* tmp_teks;

void copy_cb(Fl_Widget *, void *) {
tmp_teks = input1->value();
if (checkA->value() == 1) {
outputA->value(tmp_teks);
outputA->redraw();
}
if (checkB->value() == 1) {
outputB->value(tmp_teks);
outputB->redraw();
}
}

int main(int argc, char **argv) {
jendela1 = new Fl_Window(400,280,"FreeCopy2");
jendela1->begin();
input1 = new Fl_Input(90, 20, 280, 30, "Input ");
input1->value("--ketik di sini--");
outputA = new Fl_Output(90, 70, 280, 30, "Output A ");
outputB = new Fl_Output(90, 110, 280, 30, "Output B ");
bt_copy = new Fl_Button(280, 200, 60, 40, "&Copy");
bt_copy->callback(copy_cb);
checkA = new Fl_Check_Button(30, 185, 60, 30, "ke &A");
checkB = new Fl_Check_Button(30, 225, 60, 30, "ke &B");
jendela1->end();
jendela1->resizable(jendela1);
jendela1->show(argc,argv);
return Fl::run();
} //baris42[/spoiler]
Penjelasan Program :
Sama seperti sebelumnya, program ini hanya menyalin masukan input ke output. Tapi sekarang kita menggunakan 2 output, yaitu Output A dan Output B. Jika check button A di-check (ON), input akan dicopy ke Output A. Hal yang sama berlaku untuk B. Untuk percabangannya, kita hanya menggunakan instruksi if sederhana. Tak ada yang perlu dijelaskan. :smile:

Image


User avatar
nif
Been thanked: 1 time

Post 05 May 2012, 14:55

#8 : FreeCopy3 : radio button
Radio button juga termasuk salah satu komponen yang sering digunakan pada program2 GUI. Sebenarnya radio button mirip dengan check button. Perbedaannya, ketika sebuah radio button di-ON-kan, otomatis akan meng-OFF-kan radio button lain yang satu group dengannya. Maka hanya bisa ada 1 radio button yang ON dalam satu waktu.
Karena sifatnya itu, radio button digunakan sebagai input dari pertanyaan yang bersifat 'eksklusif' (hanya boleh 1 jawaban). Misalnya pertanyaan 'ya' dan 'tidak'. Kita tentu tidak ingin user memilih ya dan tidak sekaligus, atau malah tidak memilih sama sekali.
Dari segi tampilan, ada beberapa jenis tampilan radio button. Yang paling terkenal sepertinya yang berbentuk bulat (round radio button). Maka kita akan gunakan itu.
[spoiler=freecopy3.cxx]#include //baris1
#include
#include
#include
#include
#include
#include

Fl_Window *jendela1;
Fl_Button *bt_copy;
Fl_Input *input1;
Fl_Output *outputA, *outputB;
Fl_Check_Button *checkA,*checkB;
Fl_Radio_Round_Button *radioFree, *radioNon;
const char* tmp_teks;
const char* pesan_error="== maaf, sebaiknya tidak dicopy ==";

void cek_lisensi(){
if (radioFree->value() == 1) {
tmp_teks = input1->value();
}else{
tmp_teks = pesan_error;
}
}

void copy_cb(Fl_Widget *, void *) {
cek_lisensi();
if (checkA->value() == 1) {
outputA->value(tmp_teks);
outputA->redraw();
}
if (checkB->value() == 1) {
outputB->value(tmp_teks);
outputB->redraw();
}
}

int main(int argc, char **argv) {
jendela1 = new Fl_Window(400,280,"FreeCopy3");
jendela1->begin();
input1 = new Fl_Input(90, 20, 280, 30, "Input ");
input1->value("--ketik di sini--");
outputA = new Fl_Output(90, 70, 280, 30, "Output A ");
outputB = new Fl_Output(90, 110, 280, 30, "Output B ");
bt_copy = new Fl_Button(280, 200, 60, 40, "&Copy");
bt_copy->callback(copy_cb);
checkA = new Fl_Check_Button(30, 185, 60, 30, "ke &A");
checkB = new Fl_Check_Button(30, 225, 60, 30, "ke &B");
radioFree = new Fl_Radio_Round_Button(100, 185, 150, 30, "Lisensi &Free");
radioNon = new Fl_Radio_Round_Button(100, 225, 150, 30, "Lisensi &Non-Free");
radioFree->value(1);
jendela1->end();
jendela1->resizable(jendela1);
jendela1->show(argc,argv);
return Fl::run();
} //baris56[/spoiler]
Penjelasan Program :
Kita menambahkan komponen radio button untuk menanyakan 'lisensi' dari teks yang akan kita copy. Jika lisensinya free, maka teks akan dicopy-kan ke output. Jika non-free, maka program akan menampilkan pesan error. Mengapa? Karena program ini ditujukan hanya untuk meng-copy teks yang lisensinya free. Namanya juga FreeCopy.. :cool:

Image


User avatar
nif
Been thanked: 1 time

Post 14 May 2012, 10:21

#9 : FreeCopy4 : aktif/non-aktif dan hide/show
Terkadang (bahkan sering), kita harus mengatur kapan sebuah widget harus aktif dan kapan harus non-aktif. Di FLTK kita dapat melakukannya dengan menggunakan method activate() dan deactivate(). Kedua method ini bagian dari class Fl_Widget, yang merupakan class induk semua widget. Maka method2 ini diwariskan dan dapat digunakan pada semua jenis widget yang ada di FLTK.
[spoiler=freecopy4.cxx]#include //baris1
#include
#include
#include
#include
#include
#include

Fl_Window *jendela1;
Fl_Button *bt_copy;
Fl_Input *input1;
Fl_Output *outputA, *outputB;
Fl_Check_Button *checkA,*checkB;
Fl_Radio_Round_Button *radioFree, *radioNon;
const char* tmp_teks;

void free_cb(Fl_Widget *, void *) {
bt_copy->activate();
bt_copy->redraw();
}

void non_cb(Fl_Widget *, void *) {
bt_copy->deactivate();
bt_copy->redraw();
}

void copy_cb(Fl_Widget *, void *) {
tmp_teks = input1->value();
if (checkA->value() == 1) {
outputA->value(tmp_teks);
outputA->redraw();
}
if (checkB->value() == 1) {
outputB->value(tmp_teks);
outputB->redraw();
}
}

int main(int argc, char **argv) {
jendela1 = new Fl_Window(400,280,"FreeCopy4");
jendela1->begin();
input1 = new Fl_Input(90, 20, 280, 30, "Input ");
input1->value("--ketik di sini--");
outputA = new Fl_Output(90, 70, 280, 30, "Output A ");
outputB = new Fl_Output(90, 110, 280, 30, "Output B ");
bt_copy = new Fl_Button(280, 200, 60, 40, "&Copy");
bt_copy->callback(copy_cb);
checkA = new Fl_Check_Button(30, 185, 60, 30, "ke &A");
checkB = new Fl_Check_Button(30, 225, 60, 30, "ke &B");
radioFree = new Fl_Radio_Round_Button(100, 185, 150, 30, "Lisensi &Free");
radioFree->callback(free_cb);
radioNon = new Fl_Radio_Round_Button(100, 225, 150, 30, "Lisensi &Non-Free");
radioNon->callback(non_cb);
radioFree->value(1);
jendela1->end();
jendela1->resizable(jendela1);
jendela1->show(argc,argv);
return Fl::run();
} //baris59[/spoiler]
Penjelasan Program :
Kita menggunakan callback dari radio button untuk mengatur aktif / tidaknya button Copy.

Image

Selain activate() dan deactivate(), ada juga method lain yang mirip yaitu show() dan hide(). Sesuai namanya, kedua method ini digunakan untuk menampilkan dan menyembunyikan sebuah widget.


User avatar
nif
Been thanked: 1 time

Post 14 May 2012, 10:28

#10 : FreeCopy5 : input-output teks multiline
Fl_Input dan Fl_Output adalah widget untuk input-output teks yang paling sederhana. Ada beberapa widget input-output teks lain yang tingkatnya lebih tinggi. Misalnya Fl_Multiline_Input dan Fl_Multiline_Output yang bisa digunakan untuk format teks lebih dari satu baris.
[spoiler=freecopy5.cxx]#include //baris1
#include
#include
#include
#include
#include
#include
#include

Fl_Window *jendela1;
Fl_Button *bt_copy;
Fl_Multiline_Input *input1;
Fl_Output *outputA;
Fl_Multiline_Output *outputB;
Fl_Check_Button *checkA,*checkB;
Fl_Radio_Round_Button *radioFree, *radioNon;
const char* tmp_teks;

void free_cb(Fl_Widget *, void *) {
bt_copy->activate();
bt_copy->redraw();
}

void non_cb(Fl_Widget *, void *) {
bt_copy->deactivate();
bt_copy->redraw();
}

void copy_cb(Fl_Widget *, void *) {
tmp_teks = input1->value();
if (checkA->value() == 1) {
outputA->value(tmp_teks);
outputA->redraw();
}
if (checkB->value() == 1) {
outputB->value(tmp_teks);
outputB->redraw();
}
}

int main(int argc, char **argv) {
jendela1 = new Fl_Window(400,350,"FreeCopy5");
jendela1->begin();
input1 = new Fl_Multiline_Input(90, 20, 280, 60, "Input ");
input1->value("--ketik\ndi sini--");
outputA = new Fl_Output(90, 100, 280, 60, "Output A ");
outputB = new Fl_Multiline_Output(90, 170, 280, 60, "Output B ");
bt_copy = new Fl_Button(280, 270, 60, 40, "&Copy");
bt_copy->callback(copy_cb);
checkA = new Fl_Check_Button(30, 255, 60, 30, "ke &A");
checkB = new Fl_Check_Button(30, 295, 60, 30, "ke &B");
radioFree = new Fl_Radio_Round_Button(100, 255, 150, 30, "Lisensi &Free");
radioFree->callback(free_cb);
radioNon = new Fl_Radio_Round_Button(100, 295, 150, 30, "Lisensi &Non-Free");
radioNon->callback(non_cb);
radioFree->value(1);
jendela1->end();
jendela1->resizable(jendela1);
jendela1->show(argc,argv);
return Fl::run();
} //baris61[/spoiler]
Penjelasan Program :
Kita mengganti Input dan Output B menjadi jenis multiline, sedangkan Output A tetap. Ini untuk melihat perbedaan antara keduanya.

Image

Jika Anda perlu input-output yang lebih kompleks lagi, ada beberapa class widget yang dapat digunakan, seperti Fl_Text_Buffer, Fl_Text_Display, Fl_Text_Editor.


User avatar
saa7_go
Contact:

Post 16 Jul 2012, 18:38

pupil wrote:kalau komponen Ui semisal textfield, radio button, checkbox, dan koneksi ke database gimana?
gmn ya cara konekin pustaka database(sqlite/mysql/dsb) dengan fltk? udah ada tutorialnya pa belum om nif? pake widget2 apa buat nampilin recordnya dsb gitu?


User avatar
nif
Been thanked: 1 time

Post 16 Jul 2012, 19:42

trit-ku yang lama :laugh:
Baru niat untuk mulai kulanjutin lagi, udah ditanya kak saa7_go duluan :grin:
saa7_go wrote:
pupil wrote:kalau komponen Ui semisal textfield, radio button, checkbox, dan koneksi ke database gimana?
gmn ya cara konekin pustaka database(sqlite/mysql/dsb) dengan fltk? udah ada tutorialnya pa belum om nif? pake widget2 apa buat nampilin recordnya dsb gitu?
Maaf, kak saa7_go, belum bisa :( .
Kebetulan saya bukan mahasiswa IT / komputer, jadi sama sekali gak paham database. Saya niat belajar FLTK cuma buat interface GNU Octave aja sebagai pengganti Matlab.
Mungkin temen2 ada yang bisa? Silahkan dishare :smile:


User avatar
bagaspurwohandoy

Post 02 Jul 2013, 20:06

nif wrote:#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 //baris1
#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();
} //baris15[/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 :
jendela1 = new Fl_Window(200,200,"Hello");
Membuat objek jendela1. Width=200 piksel, height=200 piksel, title = �Hello�.
jendela1->begin(); dan jendela1->end();
Semua objek yang dibuat di antara kedua perintah ini akan otomatis menjadi children dari jendela1.
kotak1 = new Fl_Box(50,25,100,40,"Halo Warga FUI!");
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.
jendela1->show(argc,argv);
return Fl::run();

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.

nif-desktop:~$ fltk-config --compile helloworld.cxx

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 dan secara otomatis mengatur optionnya (linker option, nama output, dll).

Run
File hasil kompilasi dapat kita jalankan dari terminal

nif-desktop:~$ ./helloworld

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

Nah, ketika dijalankan kurang lebih hasilnya seperti ini.

Image
kang , kalo boleh tau ini bisa di buat di aplikasi windows ga ? seperti Dev C++ , Borland dll ?


User avatar
nif
Been thanked: 1 time

Post 03 Jul 2013, 20:53

wew, trit lama banget nih :grin:

@bagaspurwohandoy :
bisa :smile:
salah satu kelebihan FLTK adalah cross-platform, bisa di Unix/Linux, Windows, maupun Mac (tapi saya cuma pernah coba di Linux aja sih. gak punya Windows atau Mac :smile:)


User avatar
ichrome

Post 03 Jul 2013, 22:47

wah trit lama , saya baru liat sekarang, tapi keren!! makasih kang nif :)


User avatar
nif
Been thanked: 1 time

Post 17 Dec 2013, 20:14

lama sekali nih trit ini enggak saya update. tapi ada contoh program yang saya buat pake FLTK belum lama ini :)
http://ubuntu-indonesia.com/forums/ubbt ... Post145213


User avatar
baddwin
Contact:

Post 05 May 2014, 19:50

wah, ternyata trit lama.. :) :like:

saya kira FLTK itu bukan C/C++ lho. jadi, agak mirip-mirip Qt kan kang @nif?

saya belum tahu betul tentang FLTK ini, tapi kelihatannya toolkit yang sudah lama juga.
apa bisa stylenya diubah mengikuti lingkungan desktop? terutama tombol.


User avatar
nif
Been thanked: 1 time

Post 08 May 2014, 16:29

miraiE wrote:... jadi, agak mirip-mirip Qt kan kang @nif?
sedikit mirip om, sama2 toolkit GUI C/C++ :)
bedanya, FLTK jauh lebih sederhana. lebih mudah dipelajari dan digunakan (menurut saya).
cuma kekurangannya, 'fitur'nya enggak sebanyak Qt dan dari segi tampilan juga lebih terbatas

cmiiw


Post Reply

Who is online

Users browsing this forum: No registered users and 54 guests