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

(1)

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)

S U R A B A Y A Januari 2009

(2)

vii

IMPLEMENTASI PARSER UNTUK GUI BUILDER DARI FAST LIGHT TOOLKIT DAN MENGHASILKAN

KODE PYTHON

Nama Mahasiswa : Yulia Eka Christia Sari

NRP : 5104 100 002

Jurusan : Teknik Informatika FTIf-ITS

Dosen Pembimbing : 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

(3)

viii

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.

(4)

ix

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.

(5)

xi

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

(6)

xii

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

(7)

xiii 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

(8)

xiv

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

(9)

xv

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

(10)

xvii

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

(11)

xviii

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

(12)

xix

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

(13)

xx

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

(14)

xxi

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

(15)

xxii

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