Modul 9 -Antarmuka grafis dalam window

1

Modul 9:antarmuka grafis (GUI)

dalam window

Setelah mengikuti mata kuliah inimahasiswa dapat membuat

program antarmuka grafis (GUI) sederhana dalam lingkungan window

Modul 9 -Antarmuka grafis dalam window

2

Pengantar :

Dalam modul ini akan diuraikan beberapatopik bahasan yaitu :

1. Kendali mouse untuk windows2. Pengertian antar muka grafis

(Graphical User Interface =GUI)3. Mengendalikan componen GUI :

Button, Label, TextEdit, TextArea

Modul 9 -Antarmuka grafis dalam window

3

1. Kendali mouse dengan interface MouseListener

Untuk mengendalikan mouse dapat digunakan interface MouseListener, MouseMoveListener dan MouseWheelListenerKetiga interface tersebut memiliki metod-metod yang berparameterkan MouseEvent yang memungkinkan kita mengatahuievent apa yang kita lakukan pada mouseStruktur class dari MouseEvent adalah sbb

Modul 9 -Antarmuka grafis dalam window

4

class MouseEvent daninterface MouseListenerVariabel dam method untuk Class MouseEvent

Variabel : int x,y, MOUSE_PRESSED , MOUSE_RELEASED, MOUSE_CLICKED , MOUSE_ENTERED, MOUSE_EXITED ,MOUSE_MOVED, MOUSE_DRAGGED , MOUSE_WHEELMethod : getX(), getY(), getClickCount()

public interface MouseListener extends EventListener {public void mouseClicked(MouseEvent e);public void mousePressed(MouseEvent e);public void mouseReleased(MouseEvent e);public void mouseEntered(MouseEvent e);public void mouseExited(MouseEvent e);

}

Modul 9 -Antarmuka grafis dalam window

5

Membuat efek mouseclick

Efek yang lain dapat diberikan pada metod mousePressed, mouseReleased dan lain-lain

Setelah di klikbeberapa kali tampilanjadi

Modul 9 -Antarmuka grafis dalam window

6

mousePressed() danmouseReleased()

Ketika mouse ditekan kitamenggambar lingkaran danketika mouse dilepas kitamenggambar kotak

Hasil setelah tekanlepas beberapa kali

Modul 9 -Antarmuka grafis dalam window

7

Mouse Gerak dan gulungDisamping aksi penekanan mouse, gerakan mouse dan rodamouse juga disediakan metod yang dapat diimplementasi jikaevent tersebut terjadiMetod tersebut ada dlam interface MouseMotionLisetener danMouseWheelListener, sbb :

MENUNGGU AKSI MOUSE GERAK:public interface MouseMotionListener extends EventListener {

public void mouseDragged(MouseEvent e);public void mouseMoved(MouseEvent e);

}MENUNGGU AKSI MOUSE GULUNG:

public interface MouseWheelListener extends EventListener {public void mouseWheelMoved(MouseWheelEvent e);

}

Modul 9 -Antarmuka grafis dalam window

8

Memprogram mouse gerak denganMouseMotionListener

Efek gerakan mouse dapat dibuat jauh lebih kompleks dari sekedar mencetakposisinyaEfek dapat didefinisikan dalam gerak mouse atau mouse drag

Hasil ketika mouse dilewatkan di atas frame

Modul 9 -Antarmuka grafis dalam window

9

2. Pengertian GUIGUI = Grafical User Interface adalah teknik pemrograman window dengan menggunakan komponen window sehingga user dapatberinteraksi dengan nyaman dengan windowSeluruh komponen window seperti Menu, Label, Button dll adalahsubclass dari class ComponentTeknis pembuatan GUI adalah sbb :TAHAP MENDEFINISKAN OBJEK :Definisikan objek dari komponen yang akan ditaruh dalam frame padasaat frame dibuat (pada conctsructor frame yang kita definisikan)Letakkan objek dalam frameTAHAP MENDEFINISIKAN AKSI :Tahap ini didefinisikan tergantung dari jenis komponennyaPada komponen tombol aksi didefinisikan dengan caramengimplementasi interface ActionListenerPada komponen lain seperti Choice dll ada cara tersendiri

Modul 9 -Antarmuka grafis dalam window

10

3. Komponen utama GUI : Button, Label, TextField dan TextAreaKomponen Button :

Constructor Button() : mendefinisikan tombol tanpa labelButton(String lbl) : mendefinisikan tombol dengan label lblMethod : setLabel(String lbl) : untuk mengganti label dari tombolgetLabel() : untuk mendapatkan label dari suatu tombol

Tombol ini belum dapatberaksi

Modul 9 -Antarmuka grafis dalam window

11

Contoh : Aksi Tombol 1 (jika tombol diklik pindah)

Posisi mula-mula

Push diklik 4 kali

Hello diklik 4 kali

Modul 9 -Antarmuka grafis dalam window

12

Contoh : Aksi Tombol 2 (jika tombol diklik label-nya berubah)

Jika tombol diklikmaka bilanganrandom 0 s/d 1 dibangkitkanuntuk mengambilkata acak yang dijadikan sbglabel.

Jika katakebetulan“STOP” tomboldiremove.

Jika 10 x klikprogram ditutup

Modul 9 -Antarmuka grafis dalam window

13

Komponen Label Komponen Label :

Constructor Label (String lbl) : mendefinisikan Label dengan label lblMethod : setText(String lbl) : untuk mengganti label dari LabelgetText() : untuk mendapatkan label dari suatu Label

Contoh : akan dibuat program mengendallikan efek tombol untukmembesarkan dan mengecilkan tulisan pada Labelmerubah ukuran label (besar, kecil) diatur dengan efek klik tombol

Mula-mula klik besarkan klik kecilkan

Modul 9 -Antarmuka grafis dalam window

14

Programnya…

Modul 9 -Antarmuka grafis dalam window

15

TextFieldKomponen TextField :

Constructor TextField (String txt) : mendefinisikan TextField berisi teks txt TextField (int n) : mendefinisikan TextField selebar n kolomMethod : setText(String txt) : untuk mengganti teks pada TextField dg txtgetText() : untuk mendapatkan text dari suatu TextFieldsetEchoChar( char) : menset char yang muncul jika diketikgetEchoChar( ) : mendapatkan char yang muncul

Contoh : akan dibuat program membaca angka bulat dari keyboard danmencari nilai faktorialnyaAngka dibaca dengan TextField tf1, hasil ditampilkan denganTextField tf2

Modul 9 -Antarmuka grafis dalam window

16

Program faktorial dengan TextField

Modul 9 -Antarmuka grafis dalam window

17

TextAreaConstructor :TextArea(cacah baris , cacah kolom)

Method Penting : setText(String s) untuk merubah isi TextAreagetText() untuk mengambil isi TextAreaappend(String s) menambahkan s ke dalam TextAreainsert(String s, int p) insert string s dalam area posisi preplace(String s, int i, int j) replace text s dalam area mulai i s/d jselect(int awal , int akhir) memilih (blok) seleksi textgetSelectedText() mengambil teks terseleksi oleh select()

Modul 9 -Antarmuka grafis dalam window

18

Contoh Efek Append, Insert danReplace

Modul 9 -Antarmuka grafis dalam window

19

Lanjutnya…

Modul 9 -Antarmuka grafis dalam window

20

Hasil program

Mula-mula

TulisYOGYA dan klikAppend 4 kali

Isi KITA pada Kata

Dan 6 padaposisi

Klik Insert

Isi Kata dg RUDI

Dan posisi dg 15

Klik Replace

Modul 9 -Antarmuka grafis dalam window

21

Rangkuman

Grafical User Interface (GUI) memfasilitasi programmer untukmerancang antar muka grafisKendali GUI utamanya dilakukan dengan cara implementasiinterface java yang sudah tersediaPengendalian mouse, baik gerakan aksi tekan mouse ataugerak mouse dilakukan dengan mendfinisikan metod dibawahinterface MouseListener dan MouseMotionListenerPengendalian tombol didefinisikan dengan mengimplementasiinterface ActionListener yaitu mendefinisikan metodActionPerformedUntuk menginput teks satu baris digunakan class TextFieldUntuk membaca teks banyak baris digunakan class TetArea

Modul 9 -Antarmuka grafis dalam window

22

Latihan1. Buatlah program dengan komponen antar muka grafis untuk

membaca Panjang dan Lebar suatu empat persegi panjang dengan EditText dan menampilkan Luas dan Keliling. Layout sebagai berikut : Kotak untuk memasukkan Panjang dan Lebar adalah EditText. Tombol HitungLuas dan HitungKell apabila diklik maka pada kotak luas dan kotak keliling akan muncul hasilnya apabila dalam kotakPanjang dan Lebar ada datanya. Bila tombol Clear di klik semua EditText dibersihkan.

Modul 9 -Antarmuka grafis dalam window

23

Latihan2. Buatlah program kamus Inggis-Indonesia dengan

antar muka GUI sebagai berikut

Sekenario:

Jika tombol CARI ditekan maka akan menampikan kata indonesiadari suatu kata inggris yang diinput dikotak KATA INGGRIS, atautulisan TIDAK DITEMUKAN jika kata tersebut tidak ada