IMPLEMENTASI PARSER UNTUK GUI BUILDER DARI FAST LIGHT TOOLKIT DAN MENGHASILKAN KODE PYTHON TUGAS AKHIR Diajukan untuk Memenuhi Sebagian Persyaratan Memperoleh Gelar Sarjana Komputer Pada Bidang Studi Komputasi Berbasis Jaringan Jurusan Teknik Informatika Fakultas Teknologi Informasi Institut Teknologi Sepuluh Nopember Surabaya Oleh: Yulia Eka Christia Sari NRP: 5104 100 002
Disetujui oleh Pembimbing Tugas Akhir : Wahyu Suadi, S.Kom, M.Kom. NIP: 132303065
................................ (pembimbing)
SURABAYA Januari 2009
IMPLEMENTASI PARSER UNTUK GUI BUILDER DARI FAST LIGHT TOOLKIT DAN MENGHASILKAN KODE PYTHON Nama Mahasiswa NRP Jurusan Dosen Pembimbing
: Yulia Eka Christia Sari : 5104 100 002 : Teknik Informatika FTIf-ITS : Wahyu Suadi, S.Kom, M.Kom. 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
vii
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.
viii
PARSER IMPLEMENTATION OF FAST LIGHT TOOLKIT GUI BUILDER WITH PYTHON CODE GENERATION Student Name NRP Major Supervisor
: Yulia Eka Christia Sari : 5104 100 002 : Teknik Informatika FTIf-ITS : Wahyu Suadi, S.Kom, M.Kom. ABSTRACT
Fast Light Toolkit, or FLTK is an independent library Graphical User Interface (GUI) which can proceed as Cross Platform. By utilizing FLTK, developers or programmers can make GUI by using FLUID, then generates the result into C++.So that, the developers or the user could utilize the benefit of implementing FLTK through FLUID designer formed. An output file of FLUID which is resulted by the user , has file structure liked XML, that allow us to parse the file. Next, we can generate into another languages. Yet, most of developer have had used fluid file and generated it into Phython, named flconvert. Day after day, it has changed into FLTK 2, that is more complete with more features than FLTK 1. On the other hand, new application is needed to generate FLTK 2 into Phyton. Therefore, through this Final Project , application will be developed.How to parse the file to change the structure of the GUI that has been made FLUID2 output language python, which will be described in the book. Phyton is a improvement language of C and C++. Phyton is made because of developer’s needed in making a language as same as C++. In phyton, GUI can be developed by using pyFLTK. PyFLTK is a FLTK library binding to library FLTK, that possibly us to use it in Phython.
ix
KATA PENGANTAR Segala puji syukur kepada Allah SWT yang senantiasa memberikan limpahan berkah dan rahmat-Nya sehingga terselesaikan Tugas Akhir yang berjudul “ Implementasi Parser Untuk GUI Builder Dari Fast Light Toolkit dan Menghasilkan Kode Python“ ini. Shalawat serta salam semoga selalu tercurahkan kepada Rasulullah SAW yang telah meninggalkan wasiat yang tak ternilai harganya, yaitu iman. Tak lupa pula pada kesempatan ini penulis mengucapkan terima kasih sebanyak-banyaknya kepada: 1. Bapak Wahyu Suadi, S.Kom, M.Kom selaku dosen pembimbing yang telah memberikan arahan, bimbingan serta inspirasi dalam menyelesaikan tugas akhir ini. 2. Bapak Yudhi Purwananto selaku Kepala Jurusan Teknik Informatika. 3. Kedua Orang tua dan adik-adik saya yang selalu memberi semangat dan doanya untuk saya. 4. Seluruh Staf Dosen Jurusan Teknik Informatika – ITS atas pengajaran dan bimbingan selama masa perkuliahan. 5. Seluruh Staf dan Karyawan Jurusan Teknik Informatika – ITS terima kasih atas kerjasama dan bantuannya. 6. Rekan-rekan satu angkatan 2004 yang dengan setia menemani saya dalam sedih maupun senang selama ini. 7. Agus yang selalu membantu saya untuk menyelesaikan tugas akhir saya ini. 8. Nana, Ayik, Tice, Zul, Nofian yang selalu memberi semangat semangat dan dukungan untuk menyelesaikan tugas akhir ini. 9. Teman-teman seperjuangan TC lainnya dan rekan-rekan lainnya yang tidak dapat Penulis sebutkan satu per satu. 10. Teman-teman alfa room yang selalu memberi semangat untuk menyelesaikan tugas akhir ini.
xi
11. Serta semua pihak yang tidak dapat penulis sebutkan satu persatu yang telah banyak memberikan berbagai macam bantuan. Tugas akhir ini masih jauh dari kesempurnaan, oleh karena itu sangat diharapkan kritik dan saran yang membangun untuk perbaikan kedepan.
Surabaya, Januari 2009 penulis
xii
DAFTAR ISI HALAMAN JUDUL................................................................... i ABSTRAK................................................................................ vii KATA PENGANTAR .............................................................. xi DAFTAR ISI ........................................................................... xiii DAFTAR GAMBAR ............................................................. xvii BAB 1 PENDAHULUAN..................................................... 1 1.1 Latar Belakang ............................................................... 1 1.2 Permasalahan.................................................................. 2 1.3 Batasan Permasalahan .................................................... 2 1.4 Tujuan Pembuatan Tugas Akhir..................................... 3 1.5 Metodologi ..................................................................... 3 1.6 Sistematika Penulisan..................................................... 4 BAB 2 TINJAUAN PUSTAKA........................................... 7 2.1 FLUID ............................................................................ 7 2.1.1 Struktur File Fluid (.fl)............................................. 8 2.1.2 GUI Fluid Desainer................................................ 10 2.2 FLTK dan PYFLTK ..................................................... 13 2.2.1 Fast Light Toolkit (FLTK)..................................... 13 2.2.2 History FLTK ........................................................ 13 2.2.3 History PYFLT ...................................................... 14 2.2.4 Fitur – fitur FLTK.................................................. 15 2.2.5 Licensing................................................................ 16 2.2.6 PYFLTK Script...................................................... 16 2.2.7 Widget and Attribut ............................................... 17 2.3 Bahasa Python .............................................................. 18 2.3.1 History Python ....................................................... 19 2.3.2 Fitur Python ........................................................... 19 2.3.3 Kode Python .......................................................... 20 BAB 3 PERANCANGAN SISTEM .................................. 25 3.1 Widget Class dan Property FLTK2 .............................. 27 3.1.1 Widget Class .......................................................... 27
xiii
3.1.2 Property Widget......................................................29 Algoritma Sistem...........................................................30 3.2.1 Pembacaan File FLUID2 ........................................30 3.2.2 Parsing File FLUID2 ..............................................31 3.2.3 Translite File FLUID2 ............................................31 3.3 Template File Python ....................................................32 BAB 4 IMPLEMENTASI SISTEM...................................35 4.1 Implementasi Pembacaan File Fluid2 ...........................35 4.2 Implementasi Parser ......................................................36 4.3 Implementasi Template Bahasa Python ........................46 4.3.1 Template RepeatButton ..........................................47 4.3.2 Template Adjuster...................................................52 4.3.3 Template BarGroup ................................................53 4.3.4 Template Browser...................................................54 4.3.5 Template Button .....................................................55 4.3.6 Template Check Button ..........................................56 4.3.7 Template Choice.....................................................57 4.3.8 Template Clock.......................................................57 4.3.9 Template Dial .........................................................59 4.3.10 Template File Browser .....................................60 4.3.11 Template File Input ..........................................61 4.3.12 Template Group................................................62 4.3.13 Template Help View ........................................63 4.3.14 Template Input .................................................64 4.3.15 Template Input Browser...................................65 4.3.16 Template Invisible Box ....................................66 4.3.17 Template Item ..................................................67 4.3.18 Template Light Button .....................................67 4.3.19 Template Menu Bar..........................................68 4.3.20 Template Output...............................................69 4.3.21 Template Packed Group ...................................70 4.3.22 Template Popup Menu .....................................71 4.3.23 Template Progress Bar .....................................71 4.3.24 Template Radio Button ....................................73 4.3.25 Template Return Button ...................................74 3.2
xiv
4.3.26 Template Scroll Bar......................................... 75 4.3.27 Template Scroll Group .................................... 76 4.3.28 Template Slider ............................................... 77 4.3.29 Template Status Bar Group ............................. 78 4.3.30 Template Tab Group ....................................... 79 4.3.31 Template Text Display .................................... 79 4.3.32 Template Text Editor....................................... 80 4.3.33 Template Thumbwheel.................................... 81 4.3.34 Template Tiled Group ..................................... 82 4.3.35 Template Value Input...................................... 83 4.3.36 Template Value Output ................................... 85 4.3.37 Template Value Slider..................................... 86 4.3.38 Template Widget ............................................. 87 4.3.39 Template Wizard Group.................................. 88 4.4 Desaign GUI Convert ................................................... 89 BAB 5 UJI COBA............................................................... 91 5.1 Lingkungan Pelaksaan Uji coba ................................... 91 5.2 Uji Coba ....................................................................... 91 5.2.1 Widget Hello Word............................................... 91 5.2.2 Widget Text ........................................................... 94 5.2.3 Widget Menu ........................................................ 99 5.2.4 Widget Valuator................................................... 103 5.2.5 Widget Group ...................................................... 109 5.2.6 Widget Tab Group ............................................... 115 5.2.7 Widget Button...................................................... 119 BAB 6 SARAN DAN KESIMPULAN ............................ 125 6.1 Kesimpulan................................................................. 125 6.2 Saran........................................................................... 125 DAFTAR PUSTAKA ............................................................ 127 BIODATA PENULIS ............................................................ 129
xv
DAFTAR GAMBAR Gambar 1.1 Flowchart ..................................................................2 Gambar 2.1 Flowchrat Fluid ........................................................8 Gambar 2.2-a Kode Program File Fluid2 ...................................8 Gambar 2.2-b Kode Program File Fluid2 (lanjutan) .................9 Gambar 2.3 Tampilan Program Fluid2.......................................9 Gambar 2.4 Jendela Inspector ...................................................10 Gambar 2.5 Widget Bin ..............................................................10 Gambar 2.6 Fungsi Code ............................................................11 Gambar 2.7 Fungsi Group..........................................................11 Gambar 2.8 Fungsi Button .........................................................11 Gambar 2.9 Fungsi Valuators ....................................................12 Gambar 2.10 Fungsi Text ...........................................................12 Gambar 2.11 Fungsi Menu .........................................................12 Gambar 2.12 Fungsi Other.........................................................13 Gambar 2.13-a Kode Program pyFLTK Script .......................16 Gambar 2.14-a Kode Program untuk menampilkan window ......................................................................16 Gambar 2.15-a Kode Program untuk menampilkan helloword ..................................................................17 Gambar 2.16-a Kode Program untuk mengakhiri window.....17 Gambar 2.17 Hasil Output pyFLTK2 Script............................17 Gambar 2.18 Kode Program Python untuk menampilkan window ......................................................................20 Gambar 2.19-a Kode Program Python untuk menampilkan button ........................................................................20 Gambar 2.19-b Kode Program Python untuk menampilkan button (lanjutan) ......................................................21 Gambar 2.20 Output Button ......................................................21 Gambar 2.21 Kode Program untuk menampilkan Text..........22 Gambar 2.22 Kode Program untuk menampilkan Valuators...................................................................22 Gambar 2.23 Output Valuator...................................................23
xvii
Gambar 2.24-a Kode Program untuk menampilkan Menu ....23 Gambar 2.24-b Kode ProgramPython untuk menampilkan Menu(lanjutan) ........................................................24 Gambar 2.25 Kode Program Python untuk menampilkan Other .........................................................................24 Gambar 3.1 Rancangan Convert ...............................................25 Gambar 3.2 Flowchart Alur Parsing .........................................26 Gambar 3.3 Kode Program File FLUID2 ................................30 Gambar 3.4 Kode Program File FLUID2 .................................32 Gambar 3.5 Kode Program File Python....................................32 Gambar 4.1 Kode Program mendeklarasikan widget .............35 Gambar 4.2 Kode Program menambah property ....................36 Gambar 4.3 Kode Program mendeklarasikan widget property ....................................................................36 Gambar 4.4 Kode Program menghindari kata version, header, dan code_name ...........................................37 Gambar 4.5 Kode Program melakukan Cheing widget fluid ...........................................................................37 Gambar 4.6 Kode Program melakukan pembacaan widget fluid ...........................................................................37 Gambar 4.7 Kode Program Mengambil nilai property diantara kurungkurawal.........................................38 Gambar 4.8 Kode Program checking property sebuah widget ........................................................................38 Gambar 4.9 Kode Program pembacaan property sebuah widget ........................................................................38 Gambar 4.10 Kode Program mengambil nilai didalam property ....................................................................39 Gambar 4.11 Kode Program proses perubahan widget fluid menjadi kode python ......................................40 Gambar 4.12 Kode Program proses perubahan widget fluid yang mempunyai child menjadi kode python .......................................................................40 Gambar 4.13 Kode Program proses perubahan nilai property fluid“xywh” menjadi kode python .........41
xviii
Gambar 4.14 Kode Program proses perubahan nilai property fluid“label” menjadi kode python ..........41 Gambar 4.15 Kode Program proses perubahan nilai property fluid“color” menjadi kode python..........42 Gambar 4.16 Kode Program proses perubahan nilai property fluid“box” menjadi kode python ............42 Gambar 4.17 Kode Program proses perubahan nilai property fluid“buttonbox” menjadi kode python .......................................................................43 Gambar 4.18 Kode Program proses perubahan nilai property fluid“labelcolor” menjadi kode python .......................................................................43 Gambar 4.19 Kode Program proses perubahan nilai property fluid“buttonbox” menjadi kode python .......................................................................44 Gambar 4.20 Kode Program proses perubahan nilai property fluid“align” menjadi kode python..........44 Gambar 4.21 Kode Program proses perubahan nilai property fluid“highlight_color” menjadi kode python .......................................................................44 Gambar 4.22 Kode Program proses perubahan nilai property fluid“highlight_textcolor” menjadi kode python ..............................................................45 Gambar 4.23 Kode Program proses perubahan nilai property fluid“value” menjadi kode python .........45 Gambar 4.24 Kode Program proses perubahan nilai property fluid“labelsize” menjadi kode python....45 Gambar 4.25 Kode Program proses perubahan nilai property fluid“labeltype” menjadi kode python...46 Gambar 4.26 Kode Program proses perubahan nilai property fluid“deactivate” menjadi kode python .......................................................................46 Gambar 4.27 Kode Program Menambah Widget ....................47 Gambar 4.28 Kode Program Python Menampilkan Color .....47 Gambar 4.29 Kode Program Python Menampilkan Box.........48
xix
Gambar 4.30 Kode Program Python Menampilkan ButtonBox.................................................................48 Gambar 4.31 Kode Program Python Menampilkan ButtonColor..............................................................48 Gambar 4.32 Kode Program Python Menampilkan LabelColor................................................................49 Gambar 4.33 Kode Program Python Menampilkan Align......49 Gambar 4.34 Kode Program Python Menampilkan HighlightColor .........................................................49 Gambar 4.35 Kode Program Python Menampilkan HighlightLabel .........................................................50 Gambar 4.36 Kode Program Python Menampilkan Deactivate .................................................................50 Gambar 4.37 Kode Program Python Menampilkan Label .....51 Gambar 4.38 Kode Program Python Menampilkan LabelType.................................................................51 Gambar 4.39 Kode Program Python Menampilkan LabelSize...................................................................51 Gambar 4.40 Kode Program Python Menampilkan XYWH ..52 Gambar 4.41 Tampilan GUI Convert .......................................89 Gambar 5.1-a Kode Program Fluid2.........................................91 Gambar 5.1-b Kode Program Fluid2(lanjutan) .......................92 Gambar 5.2 Output Fluid2 Hello Word....................................93 Gambar 5.3-a Kode Program Python hasil generate gambar 5.1-a.............................................................93 Gambar 5.4 Output Python HelloWord....................................94 Gambar 5.5-a Kode Program Fluid2.........................................94 Gambar 5.5-b Kode Program Fluid2(lanjutan) .......................95 Gambar 5.5-c Kode Program Fluid2(lanjutan) ........................96 Gambar 5.5-d Kode Program Fluid2(lanjutan) .......................97 Gambar 5.6 Output Fluid2 Text ................................................97 Gambar 5.7-a KodeProgramPython Hasil Generate gambar 5.4-a.............................................................98 Gambar 5.7-b Kode Program Python Hasil Generate gambar 5.4-a(lanjutan)............................................99
xx
Gambar 5.8 Output Python Text ...............................................99 Gambar 5.9-a Kode Program Fluid2.......................................100 Gambar 5.9-b Kode Program Fluid2 (lanjutan).....................101 Gambar 5.10 Output Fluid2 Menu ..........................................102 Gambar 5.11-a Kode Program Python Hasil Generate gambar 5.9-a...........................................................102 Gambar 5.11-b Kode Program Python Hasil Generate gambar 5.9-a(lanjutan)..........................................103 Gambar 5.12 Output Python Valuator....................................103 Gambar 5.13-a Kode Program Fluid2.....................................104 Gambar 5.13-b Kode Program Fluid2(lanjutan)....................105 Gambar 5.13-c Kode Program Fluid2(lanjutan) ....................106 Gambar 5.14 Output Fluid2 Valuator.....................................107 Gambar 5.15-a Kode Program Python Hasil Generate gambar 5.13-a.........................................................107 Gambar 5.15-b Kode Program Python Hasil Generate gambar 5.13-a(lanjutan)........................................108 Gambar 5.16 Output Python Valuator....................................109 Gambar 5.17-a Kode Program Fluid2.....................................109 Gambar 5.17-b Kode Program Fluid2(lanjutan)....................110 Gambar 5.17-c Kode Program Fluid2(lanjutan) ....................111 Gambar 5.18 Output Fluid2 Group.........................................112 Gambar 5.19-a Kode Program Fluid2.....................................113 Gambar 5.19-b Kode Program Fluid2(lanjutan)....................114 Gambar 5.19-c Kode Program Fluid2(lanjutan) ....................115 Gambar 5.20 Output Python Group........................................115 Gambar 5.21-a Kode Program Fluid2.....................................116 Gambar 5.21-b Kode Program Fluid2 (lanjutan)..................117 Gambar 5.22 Output Fluid2 Tab Group................................118 Gambar 5.23-a Kode Program Python Hasil Generate gambar 5.21-a.........................................................118 Gambar 5.23-b Kode Program Python Hasil Generate gambar 5.21-a(lanjutan)........................................119 Gambar 5.24 Output Python Tab Group................................119 Gambar 5.25-a Kode Program Fluid2.....................................120
xxi
Gambar 5.25-b Kode Program Fluid2 (lanjutan) ..................121 Gambar 5.26 Output Fluid2 Button ........................................122 Gambar 5.27-a Kode Program Python Hasil Generate gambar 5.25-a.........................................................122 Gambar 5.27-b Kode Program Python Hasil Generate gambar 5.25-a(lanjutan)........................................123 Gambar 5.28. Output Python Button ......................................123
xxii
