PARSER IMPLEMENTATION OF FAST LIGHT TOOLKIT GUI BUILDER WITH PYTHON CODE GENERATION

(1)

PARSER IMPLEMENTATION OF FAST LIGHT TOOLKIT GUI BUILDER WITH PYTHON CODE

GENERATION

Student Name : Yulia Eka Christia Sari

NRP : 5104 100 002

Major : Teknik Informatika FTIf-ITS

Supervisor : 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.

(2)

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

(3)

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

(4)

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

(5)

3.1.2 Property Widget...29

3.2 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

(6)

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

(7)

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

(8)

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

(9)

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

(10)

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

(11)

Gambar 5.8 Output Python Text ...99

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.12 Output Python Valuator...103

Gambar 5.13-b Kode Program Fluid2(lanjutan)...105

Gambar 5.14 Output Fluid2 Valuator...107

Gambar 5.16 Output Python Valuator...109

Gambar 5.18 Output Fluid2 Group...112

Gambar 5.20 Output Python Group...115

Gambar 5.21-b Kode Program Fluid2 (lanjutan)...117

Gambar 5.22 Output Fluid2 Tab Group ...118

Gambar 5.24 Output Python Tab Group...119

(12)

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