IMPLEMENTASI PARSER UNTUK GUI BUILDER DARI FAST LIGHT TOOLKIT DAN MENGHASILKAN KODE PYTHON

MAKALAH SEMINAR TUGAS AKHIR PERIODE JANUARI 2009

IMPLEMENTASI PARSER UNTUK GUI BUILDER DARI FAST LIGHT

TOOLKIT DAN MENGHASILKAN KODE PYTHON

Yulia Eka Christia Sari. – Wahyu Suadi, S.Kom,

Jurusan Teknik Informatika, Fakultas Teknologi Informasi, Institut Teknologi Sepuluh Nopember, Email: yulia@cs.its.ac.id

Abstrak Fast Light Toolkit atau yang biasa disebut dengan FLTK merupakan Graphical User Interface (GUI) library yang independent dan dapat berjalan cross platform. Dengan memanfaatkan FLTK, para developer atau programmer dapat menggunakannya untuk membuat GUI dengan menggunakan FLUID yang kemudian hasilnya dapat digenerate menjadi bahasa C++. Sehingga para developer ataupun user yang menginginkan pembuatan aplikasi berbasiskan GUI dengan praktis, maka dapat memanfaatkan keunggulan FLTK melalui FLUID Designer.

File yang telah dihasilkan dari FLUID ketika user membuat sebuah GUI, ternyata memiliki struktur file yang menyerupai XML yang memungkinkan kita memparsing file tersebut. Dari hasil parsing tersebut kita dapat melakukan generate ke dalam output bahasa lain. Sampai sekarang para developer sudah ada memanfaatkan file fluid untuk digenerate ke dalam bahasa phyton, yang bernama flconvert. Dengan sejalan perkembangan yang ada, FLTK telah berada pada versi FLTK2, dimana fitur fitur FLTK2 lebih lengkap dari pada FLTK1, Sementara ini belum ada aplikasi yang mengenerate FLTK2 ke dalam bahasa python. Maka pada Tugas Akhir ini saya akan membuat aplikasi tersebut. Bagaimana cara melakukan parsing untuk merubah file struktur GUI yang telah dibuat degan FLUID2 menjadi output bahasa python, yang akan dijelaskan pada buku ini. Bahasa python merupakan improvement dari bahasa C dan C++. Bahasa python dibuat sebagai bentuk dari keinginan para developer untuk membuat bahasa serupa C++. Dengan bahasa python kita dapat membuat GUI dengan menggunakan pyFLTK. pyFLTK adalah binding untuk library FLTK, yang memungkinkan pemakaian library ini didalam python.

Kata kunci: FLTK, pyFLTK, FLUID2,

Python.

1. PENDAHULUAN

Perkembangan teknologi informasi yang berkembang dengan pesat pada saat ini Fast

Light Toolkit adalah libaray GUI yang platform independent (unix, linux, win32, MacOS). Sistem ini mengutamakan pemaikan resource yang minimal dengan mengimplimentasikan sejumlah widget sederhana namun fungsional. Libarry ini dibuat dalam bahasa c++ dan memiliki GUI (fluid) yang memiliki wizard untuk menghasilkan output dalam bahasa c++ juga. Tujuan dari tugas akhir saya adalah menghasilkan output dalam bahasa python. Dengan menggunakan Pyfltk, karena pyfltk adalah binding untuk library FLTK, yang memungkinkan pemaikan library didalam pyhon. Sebenarnya sudah ada project yang mengerjakan hal yang sama (flconvert). Tapi project ini sudah tidak update (sejak November 2003) dan tidak mampu lagi mengolah data dengan fotmat yang baru. Maka disini saya mengupdate (flconvert) supaya dapat mengolah data dengan format yang baru.

2. FLUID2

FLUID (Fast LIght User Interface Designer) merupakan wizard yang terbentuk dari hasil compile source FLTK. Ketika kita mendownload paket FLTK, maka fluid secara otomatis sudah termasuk satu paket didalamnya. Akan tetapi masih berupa source dan belum menjadi file executable yang siap pakai. Untuk dapat digunakan maka fluid source perlu kita rebuild dan compile supaya menghasilkan executable yang siap untuk dipakai. Dengan fluid maka kita dapat membuat widget dalam bahasa C++ yang kemudian dapat kita generate hasilnya ke dalam kode C++ dan siap digunakan sesuai dengan kebutuhan masing – masing developer atau pengguna aplikasi.

Setelah merancang sebuah applikasi, FLUID menyusun .fl files ke dalam .cxx file, yang menggambarkan semua object dari .fl file, dan .h file, yang mana semua deklarasi menjadi global.FLUID juga mendukung lokalisasi label string yang menggunakan pesan file dan GNU gettext atau POSIX catgets interfaces.

Gambar 1. Flowchrat Fluid

Didalam Fluid2 ada widget widget class dan fiture yang di sediakan oleh Fluid2. Widget class yang tersedia di FLUID2 terdiri dari widget button, widget group, widget valuator, widget text, widget, widget other. Widget button terdiri dari widget return button, widget light button, widget check button, widget radio button, widget repeat button. Widget Valuator terdiri dari widget slider, widget valueslider, widget valueinput, widget valueoutput, widget scrollbar, widget adjuster, widget dial, widget thumbweel, widget progressbar. Widget text terdiri dari widget input, widget output, widget textdisplay, widget texteditor, widget fileinput. Widget menu terdiridari widget menubar, widget popupmenu, widget choice, widget browser, widget inputbrowser, widget filebrowser, widget item, widget divider. Widget group terdiri dari widget window, widget packedgroup, widget tabgroup, widget scrollgroup, widget tiledgroup, widget statusgroup, widget bargroup, widget statusgroup. Widget other terdiri dari widget clock, widget help.

Sedangkan fiture yang ada di dalam fluid terdiri dari xywh, label, hide, deactivate, resizable, button box, color, button color label

color, align, highlight_color, highlight_label_color.

Tampilan FLUID2 bisa di lihat di bawah ini

Gambar 2. Jendela Inspector

Gambar 3. Widget Bin

3. FLTK

FLTK adalah toolkit GUI yang gratis, open source, sangat kecil, cepat dan portabel (Linux, Windows, Macintosh). Memiliki lisensi LGPL dimodifikasi yang memungkinkan terhubung statis.

FLTK dirancang untuk modular kecil dan cukup untuk dapat terhubung statically, tetapi bekerja dengan baik sebagai sebuah shared library. FLTK terdapat juga GUI builder yang disebut FLUID yang dapat di gunakan membuat aplikasi dalam beberapa menit.

4. DESAIN DAN IMPLEMENTASI

Aplikasi Convert adalah suatu aplikasi untuk mengenerate kode fluid ke kode python. Jadi kita harus membuat GUI di FLUID2 terlebih dahulu setelah itu disimpan didalam fólder. Untuk melakukan pengeneratetan, di dalam aplikasi convert ada pilihannya untuk mengerate ke kode pitón.

4.1. Arsitektur Implementasi

Dibawah ini merupakan rancangan inti dari aplikasi convert

Gambar. 4. Rancangan Convert

File fluid2 ini sebagai input dari aplikasi convert lalu dip roses dengan cara memparsing widget widget dan property yang ada di file fluid melalui template template yang dibuat, setelah itu menampilkan outputnya berupa kode python.

Dibawah ini merupakan alur diagram proses parsing fluid

Gambar 5. Flowchart Parsing Flui

File fluid2 di cek, tidak sama dengan end of file atau tidak. jika ya maka stop, jika tidak

maka keproses berikutnya yaitu readline lalu di cek filenya,ada sebuah string yang mengandung widget fluid2 atau tidak, yang melakukan pengecekkan token string mengandung sebuah widget fluid adalah fungsi IsItem, jika tidak mengandung widget fluid2 maka akan kembali lagi ke proses readline, jika mengantung widget fluid maka akan ke proses berikutknya, yaitu ReadItem yang berfungsi untuk melakukan pembacaan Widget, lalu ke proses berikutnya, yaitu void WriteItem ini berfungsi untuk menulis pendeklarasian widget widget FLUID2 ke kode Python, dalam proses void WriteItem ini akan di cek, widget punya child atau tidak, jika tidak maka kembali ke proses readline, jika ya maka kembali ke while !EOF, dan fungsi untuk menulis.Pendeklarasian widget widget FLUID2 yang mempunyai child yaitu fungsi Void WriteItemWithParent.

Sebelum ke proses ReadItem akan di cek terlebih dulu ada property yang ada didalam widget FLUID2 tersebut atau tidak, yang melakukan fungsi pengecekkan ini adalah Isprop, jika ada maka akan di baca oleh fungsi ReadProperty, setelah dibaca maka di ambil lah nilai property yang ada di widget dan parent, fungsi yang mengambil nilai ini adalah Void ReadValue, Setelah dibaca maka akan di tulis nilai nilai property yang ada,yang dilakukan oleh fungsi VoidWriteProp.

4.2. Desain Implementasi

Seperti terlihat pada Gambar pada tampilan GUI convert ada 3 pilihan yaitu File, Action, dan About. Jika kita belum membuat tampilan GUI di FLUID2, kita bisa membuatnya terlebih dahulu. Pilih File klik create, di situ akan muncul aplikasi FLUID2, setelah kita buat maka kita simpan di derrktori, setelah tersimpan kita pilih File open, pilih dimana kita membuat kode FLUID2 tadi setelah itu pilih Action klik convert untuk mengenerate ke kode python

5. UJI COBA

Uji coba dilakukan untuk mencoba program convert ini berjalan dengan baik atau tidak.

Uji coba ini terdiri dari beberapa skenario, yaitu mengconvert kode fluid ke kode python yang sedeharana dan mengconvert kode fluid ke kode python yang komplek.

5.1. Uji Coba Pertama

Pada skenario yang pertama ini mengconvert widget yang sederhana, misalnya widget window, dan widget button.

• Widget Window o Output Fluid2 o Output Python • Widget Button o Output Fluid2 o Output Python

5.2. Uji Coba Kedua

Pada skenario yang kedua ini mengconvert widget yang lebih compleks, misalnya widget text, dan widget tabgroup.

• Widget text o Output Fluid2 o Output Python • Widget TabGroup o Output Fluid2 4

o Output Python

6. SIMPULAN

Setelah dilakukan serangkaian uji coba terhadap aplikasi, maka dapat diambil kesimpulan sebagai berikut :

1. Aplikasi Convert dapat berjalan dengan baik untuk melakukan generate GUI ke dalam bahasa Python melalui file fluid2 yang telah dibuat.

2. Beberapa property yang ada didalam file fluid2 bisa di generate kedalam file python.

7. DAFTAR PUSTAKA

1) http://www.fltk.org/ , Library Fast Light

Toolkit, di akses tanggal 15 oktober 2008.

2) http://pyfltk.sourceforge.net, Library

PyFLTK, diakses tanggal 4 november2008

3) http://pypi.python.org, Library Python,

diakses tanggal 4 desember 2008 4) http://www.fltk.org/doc-1.1/fluid.html

FLUID, diakses tanggal 31 desember 2008