Petunjuk Pengerjaan Tugas 4

Artikel ini ditulis untuk membantu anda dalam mengerjakan tugas ke empat dan akan memberikan beberapa hal. Topik-topik yang akan dibicarakan di dalam artikel ini adalah:

1. Konsep Applet
2. Konsep GUI dengan Applet
3. Contoh Kerangka Program Tugas 4
4. Beberapa Petunjuk Mengenai Algoritma Dijkstra

Sudah barang tentu bagi sebagian dari anda yang sudah memahami pemrograman applet + GUI anda tidak perlu membacanya. Kerangka program yang dibahas pun hanyalah suatu contoh yang tidak harus diikuti.

---

Konsep Applet

Java menyediakan lingkungan pemrograman applet yang menghasilkan suatu komponen web yang dapat ditampilkan di dalam file HTML anda dan di browse dari mana saja melalui internet. Di dalam file HTML anda membuat suatu tag line, contohnya:

<applet code="MyApplet.class" width=100 height=100>
... untuk menyatakan parameter-parameter dari applet
</applet>

Struktur program applet berbeda dengan program application biasa. Program application biasanya berisikan suatu kelas utama yang di dalamnya terdapat suatu method yang bernama main(String [] arg) dengan ragam public dan static. Java interpreter setelah loading kelas ini akan jump untuk mengeksekusi program mulai dari metoda ini lalu mengikuti flow proses yang ada di dalamnya.

Sementara, dalam applet method main tersebut tidak ada. Pada dasarnya program applet merupakan subclass dari kelas Applet yang di dalamnya sudah terdapat sejumlah method yang akan dioverrid di dalam applet anda. Ada 2 metoda yang biasanya dioverrid.

• void init()
  Suatu metoda untuk melakukan inisialisasi
• void paint(Graphics g)
  Suatu metoda yang akan dijalankan secara otomatis saat applet terfokuskan pada browser (misalnya applet tertutup window lain lalu saat anda menampilkannya browser kembali. Contoh lain, anda menscroll page yang berisi applet sehingga applet tidak tampak, lalu menscroll balik untuk memunculkan applet tersebut). Graphics g adalah image yang akan kita gambari dalam metoda ini dan ia tidak perlu kita create karena ia dicreate secara otomatis saat applet diload. By default, image applet tidak disimpan jadi applet perlu untuk penggambar ulang.

Contoh 1:

Suatu blank applet (init() dan paint(Graphics g) tidak di-overrid) berikut ini sudah akan bisa dijalankan browser:
public class BlankApplet extends Applet {
// engga ada apa-apanya disini
}


Contoh 2:

Suatu applet yang menggambarkan lingkaran di suatu titik pusat di dalam metoda paint(Graphics g):
public class CircleApplet extends Applet { public void paint(Graphics g){ g.drawOval(100,100,75,75); } }


Contoh 3:

Suatu applet yang menghitung berapa kali metoda paint(Graphics g) dijalankan:
public class CountingApplet0 extends Applet { int count;
public void init(){ count = 0; }
public void paint(Graphics g) { g.drawString("Telah digambarkan ke-"+count+" kali",10,80);
count++; } }


Pertanyaan: jika paint(Graphics g) secara otomatis dipanggil oleh sistem, maka bagaimana jika kita melakukan pengubahan pada applet dan ingin segera ditampilkan? Jawab: kita bisa memanggil metoda repaint() (suatu metoda yang sudah ada dalam applet) dan di dalam repaint() itu pemanggilan ke metoda paint(Graphics g) dilakukan. Kita akan melihat contohnya saat pembahasan GUI dengan applet.

2. Konsep GUI dalam Applet

Java menyediakan package agar kita (yang membrowse applet) dapat melakukan interaksi dengan applet yaitu java.awt.* (awt=Advance Widget Toolkit). Aplikasinya amat mudah:
• definisikan layout dari komponen-komponen interaksi tersebut di dalam applet
• create komponen-komponen interaksi mengisi layout tadi
• definisikan event-event handler jika dilakukan aksi pada masing-masing komponen.

Kedua hal tersebut dilakukan di dalam metoda init() (atau metoda yang dipanggil di dalam init() tersebut).

2.1. Mendefinisikan Layout

Untuk mendefinisikan layout, suatu metoda this.setLayout(...) (prefiks this. bisa dihilangkan!) dipanggil dengan "..." diisi:
• jika diisi null (ditulis setLayout(null)):
  maka artinya penempatan dan ukuran komponen akan dilakukan secara eksplisit oleh programmer
• jika diisi instans dari BorderLayout (ditulis setLayout(new BorderLayout())):
  maka layoutnya akan mengikuti border dari applet (posisi hanya disebutkan dengan notasi "north", "south", "west", "east" yang menyatakan border atas, bawah, kiri, kanan dari applet
• jika diisi instans dari FlowLayout (ditulis setLayout(new FlowLayout())):
  maka layoutnya akan "mengalir" mulai dari pojok kiri atas ke kanan, dan setiap baris dari atas ke bawah.
• (Masih ada sejumlah layout lain yang menarik untuk dicoba, tapi tidak dibahas di sini.)

Bisa juga kita definisikan layout yang lebih kompleks secara hirarkis dengan mengcreate suatu komponen Panel. Panel sendiri adalah suatu komponen yang mana di atasnya bisa ditempatkan komponen-komponen lain. Setelah membahas komponen akan diberi contoh mengenai layout dan layout kompleks tsb.

2.2. Create komponen-komponen interaksi

Java menyediakan sejumlah komponen standard:
• Label: untuk menuliskan suatu fixed string pada applet
• TextField: untuk menerima masukan teks
• TextArea: untuk menerima masukan teks yang lebih besar (sudah ada scroll barnya jika teks lebih panjang dari yang ditampilkan).
• Button: untuk mengaktifkan suatu event
• dlsb. (Juga, selain komponen standard itu sendiri, saat ini terdapat banyak komponen yang lebih lanjut, seperti swing, JFC, dll.)

Jika suatu komponen telah dicreate maka ia harus ditempatkan pada applet (sesuai dengan layout ybs.), atau suatu Panel dalam applet tersebut dengan perintah this.add().

Contoh:

pada CountingApplet0 ditambahkan suatu button untuk mereset variabel count (tapi event handlernya belum ada jadi operasi reset belum dapat dilakukan) dan suatu textfield untuk menerima masukan:
public class CountingApplet1 extends Applet { int count;
Button resetButton;
Label startLabel;
TextField inputTeks;

public void init(){ count = 0;
this.setLayout(null);

// create button reset
resetButton = new Button("Reset");
resetButton.setBounds(20,20,50,30);
this.add(resetButton);

// create label untuk TextField
startLabel = new Label("Start Dari");
startLabel.setBounds(70,20,50,30);
this.add(startLabel);

// create TextField
inputTeks = new TextField();
inputTeks.setBounds(120,20,50,30);
this.add(inputTeks);
}
public void paint(Graphics g) { g.drawString("Telah digambarkan ke-"+count+" kali",10,80);
count++; } }

Jika kita menggunakan layout tertentu maka kita tidak perlu mendefinisikan secara eksplisit koordinat (x,y) dari komponen- komponen tsb. Misalnya jika kita gunakan FlowLayout maka init() kita modifikasi:

public void init() { count = 0;
this.setLayout(new FlowLayout());

// create button reset
resetButton = new Button("Reset");
this.add(resetButton);

// create label untuk TextField
startLabel = new Label("Start Dari");
this.add(startLabel);

// create TextField
inputTeks = new TextField(" ");
this.add(inputTeks); }

Maka, komponen-komponen akan ditempatkan secara otomatis pada applet.

2.3. Pendefinisian Event-handler

Applet di atas sudah bisa dijalankan namun komponen-komponen tersebut belum berfungsi karena kita belum mendefinisikan bagaimana caranya menangani event yang dikenakan kepadanya. Dalam Java digunakan istilah Listener. Masing-masing jenis komponen kita mendefinisikan Listener-nya. Misalnya untuk obyek Button: kita perlu
• mengimplementasikan ActionListener dan
• mendefinisikan metoda actionPerformed(ActionEvent ) di dalam ActionListener.
• mengkaitkan dengan obyek Button ybs. dengan instans dari ActionListener tersebut.

Contoh:

Dari applet CountingApplet1 di atas kita definisikan respons yang akan terjadi jika Button resetButton diklik.
public class CountingApplet2 extends Applet { int count;
Button resetButton;
Label startLabel;
TextField inputTeks;

public void init(){ count = 0;
this.setLayout(null);

// create button reset
resetButton = new Button("Reset");
resetButton.setBounds(20,20,50,30);
this.add(resetButton);

// mengkaitkan dengan Listenernya
resetButton.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent event) { count = 0;
repaint(); } } );

// create label untuk TextField
startLabel = new Label("Start Dari");
startLabel.setBounds(70,20,50,30);
this.add(startLabel);

// create TextField
inputTeks = new TextField();
inputTeks.setBounds(120,20,50,30);
this.add(inputTeks); }

public void paint(Graphics g) { g.drawString("Telah digambarkan ke-"+count+" kali",10,80);
count++; } }

Kita bisa mendefinisikan suatu Listener jika terjadi event pada komponen TextField, misalnya setiap pengetikan karakter. Tapi biasanya komponen TextField baru direspons setelah kita selesai mengetikan suatu string kepadanya. Jadi yang terpenting adalah bagaimana kita membaca string yang diketikkan padanya.

Kita bisa mengakses teks yang diketikkan tersebut dengan metoda field.getText() dengan field adalah obyek TextField ybs. Contohnya pada CountingApplet2 di atas operasi mereset counter adalah melakukan pengisian count dengan harga yang diberikan pada inputTeks.

public class CountingApplet3 extends Applet { int count;
Button resetButton;
Label startLabel;
TextField inputTeks;

public void init(){ count = 0;
this.setLayout(null);

// create button reset
resetButton = new Button("Reset");
resetButton.setBounds(20,20,50,30);
this.add(resetButton);
// mengkaitkan dengan Listenernya
resetButton.addActionListener( new ActionListener() { public void actionListener(ActionEvent event) { try { String s = inputTeks.getText();
count = Integer.parseInt(s); }
catch(NumberFormatException e) { count = 0; }
repaint(); } } );

// create label untuk TextField
startLabel = new Label("Start Dari");
startLabel.setBounds(70,20,80,30);
this.add(startLabel);

// create TextField
inputTeks = new TextField();
inputTeks.setBounds(150,20,50,30);
this.add(inputTeks); }

public void paint(Graphics g) { count++;
g.drawString("Telah digambarkan ke-"+count+" kali",10,80); } }

Applet dapat langsung menerima aksi dari mouse (tanpa melalui komponen-komponennya) dengan mendefinisilan MouseListener mirip di atas (kecuali di atas Listener dikaitkan dengan resetButton). Jadi tambahkan di dalam init() didefinisikan respons pada penekanan/pelepasan tombol mouse di atas applet:

this.addMouseListener( new MouseAdapter() { public void mousePressed(MouseEvent e) { // apa yang akan dilakukan jika tombol
// mouse ditekan di atas applet }
public void mouseReleased(MouseEvent e) { // apa yang akan dilakukan jika tombol
// mouse direlease di atas applet }
// beberapa aksi pada mouse lainnya dapat
// didefinisikan berikutnya } };

Sementara, untuk melakukan dragging maka diimplementasikan MouseMotionListener sbb.:

this.addMouseMotionListener( new MouseMotionAdapter() { public void mouseDragged(mouseEvent e) { // apa yang dilakukan jika
// mouse di-drag di atas applet } } ); Untuk melengkapi contoh di atas maka sisipkanlah baris-baris berikut dalam init() untuk menggambari applet dengan mouse.
this.addMouseListener( new MouseAdapter() { public void mousePressed(MouseEvent e) { Graphics g = getGraphics();
xold = e.getX();
yold = e.getY();
g.drawLine(xold,yold,xold,yold); } } );

this.addMouseMotionListener( new MouseMotionAdapter() { public void mouseDragged(MouseEvent e) { Graphics g = getGraphics();
int x = e.getX();
int y = e.getY();
g.drawLine(xold,yold,x,y);
xold = x;
yold = y; } } ); Dan tambahkan deklarasi variabel di awal applet.
int xold, yold;

Note: variabel yang diakses metoda di dalam suatu Listener walaupun dicode di dalam metoda init() namun tetap dieksekusi sepertinya ada di luar init(). Jadi semua variabel (kecuali yang lokal di dalam metoda listener itu) harus dideklarasikan pada applet (bukan pada init().

3. Contoh Kerangka Program Tugas 4

Klik disini untuk melihat kerangka program (format txt).

4. Beberapa Petunjuk Mengenai Algoritma Dijkstra