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
