PERTEMUAN 2PBOL

Dewi Kusumaningsih, M.Kom

• Konsep Pemrograman GUI• Pada dasarnya pemrograman GUI, adalah pemrograman yang

mengandalkan kemampuan tampilan dalam bentuk grafik. dimana program yang dibuat dapat memberikan kenikmatan tersendiri dalam penggunaannya. Tidak lagi monoton, hitam-putih, mode DOS dan lain sebagainya. Kalau kita lihat pada gambar berikut, menjelaskan bahwa interaksi yang terjadi antara user dengan program melalui sebuah tampilan yang sudah berbentuk grafik.

Pertanyaan mendasar mengenai penggunaan tampilan atau GUI dalam program adalah seberapa penting hal itu dilakukan.

Konsep GUI

Konsep GUI

• GUI → Graphical User Interface• GUI memberikan mekanisme user-friendly

untuk berinteraksi dengan aplikasi Java yang dibuat (aplikasi mudah digunakan dan cepat dipelajari bahkan untuk orang awam sekalipun)

• Komponen GUI adalah objek dimana user berinteraksi dengan objek itu menggunakan mouse, keyboard, dan bentuk inputan lain.

Konsep GUI

• Dalam Java, sebenarnya terdapat 2 package yang dapat digunakan untuk mengembangkan program-program GUI, yaitu AWT (Abstract Window Toolkit) pada package java.awt dan SWING pada package javax.swing

• Untuk program yang hanya ditempatkan pada sisi komputer server yang jarang berinteraksi dengan pengguna, maka fungsi dasar program dirasa cukup memadai.

• apabila program tersebut diperkirakan akan banyak berinteraksi dengan pengguna, maka ada baiknya jika program menggunakan tampilan.

• Beberapa alasan bahwa program harus menggunakan tampilan, yaitu :– Dengan tampilan, program akan nampak jauh lebih menarik– Interaktif– User Friendly atau mudah dalam penggunaannya– Dapat berinteraksi dengan peralatan seperti mouse, joystick dan peralatan

lainnya.

Konsep GUI

• Sedangkan interaksi yang terjadi antara pengguna dengan komponen GUI dapat dilakukan dengan beberapa cara diantaranya :

– Dengan penekanan komponen tombol.– Dengan membuat pilihan pada menu. – Melakukan enter pada objek text. – Pergerakan tombol scroll bar. – Dengan penekan tombol close pada objek wondows. – Dll.

Konsep GUI

Tiga tipe program yang berbasis kepada GUI komponen

1. Graphical components (GUI)Yaitu berupa rancangan tampilan program yang dikemas dengan menggunakan komponen-komponen grafik.

2. Listener methods Yaitu berfungsi untuk menerima dan merespon event yang terjadi

3. Application methodsFungsi-fungsi atau baris perintah yang berguna bagi pengguna untuk menghasilkan kegiatan dalam bentuk respon.

Graphical components (seperti tombol), listener methods berguna menerima events dari tombol yang di click dan application methods berisi program yang akan dijalankan saat event terjadi.

Konsep GUI

• Class/Komponen GUI pada aplikasi

– Banyak sekali komponen yang sudah disiapkan oleh java untuk membuat sebuah tampilan yang berbentuk GUI.

– Namun pada bagian ini yang akan dijelaskan adalah komponen-komponen yang terkait dengan aplikasi yang akan di buat atau dipaparkan dalam perkuliahan ini saja

– Daftar komponen yang akan digunakan atau yang akan dipaparkan dalam perkuliahan ini dapat dilihat pada tabel berikut :

Konsep GUI

• AWT adalah sekumpulan library yang tidak tergantung platform (platform independent) dan digunakan untuk menyederhanakan implementasi user-interface

• SWING adalah bentuk implementasi selanjutnya yang menambahkan komponen-komponen dalam sistem GUI tapi masih didasarkan pada arsitektur AWT (misalnya : untuk pembuatan event handling)

• Mengapa kita menggunakan SWING daripada AWT???Pada kenyataan di lapangan, program-program GUI yang ada saat ini (tentunya yang dibuat dengan Java) banyak dikembangkan dengan menggunakan komponen-komponen SWING (bukan menggunakan AWT)

Beberapa komponen atau class GUI yang akan diapakai pada aplikasi :

Komponen/Class GUI

No. Nama Komponen Kegunaan

1. JWindowUntuk membuat window atau frame yang menjadi latar belakang komponen-komponen lain.

2. JLabelUntuk membuat tulisan yang akan menjelaskan komponen lain, dapat juga berupa gambar.

3. JProgressBar Untuk membuat baris progress.4. Timer Untuk mengatur waktu tampilan.

5. Dimension Untuk mengambil dimensi screen monitor.

6. JFrame Untuk membuat frame biasa.

7. JDesktopPaneUntuk membuat frame induk yang disisipkan pada frame biasa.

8. JMenuBaruntuk menampung dan menampilkan menu baris (Pulldown Menu).

9. JMenuUntuk membuat menu baris dan sub menu yang merupakan induk dari sub menu yang lain.

Komponen/Class GUI

10. JMenuItemUntuk membuat sub menu yang merupakan menu terakhir.

11. JPopupMenu Untuk menampung dan menampilkan menu popup.

12. JToolBarUntuk menampung dan menampilkan menu dalam bentuk toolbar.

13. JPanel Untuk menampung objek/komponen lain

14. JButton Untuk membuat tombol.

15. Date Untuk mengambil fungsi tanggal dan jam aktif

16. SimpleDateFormat Mengatur format tampilan

17. String Class tipe data

18. JInternalFrame Untuk membuat frame anak.

19. JTextField Untuk menginput string

20. JTextArea Untuk menginput string yang lebih dari satu baris

Komponen/Class GUI

21. JScrollPane Untuk membuat objek tabel

22. JComboBoxUntuk membuat objek kombo yang berisi daftar pilihan.

23. ButtonGroupUntuk membuat objek group sebagai tempat objek radiobutton.

24. JRadioButton Untuk membuat objek pilihan

25. JTabel Untuk membuat objek tabel

26. JOptionPane Untuk menampilkan kotak dialog

27. Integer Class tipe data

28. PrinterJob Untuk mengaktifkan printer dialog

29. Graphics2DUntuk membuat objek grafik dua dimensi.

30. Connection Untuk membuat objek koneksi.

31. Statement Untuk membuat statement.

32. ResultSet Untuk menampung hasil query.

Sedangkan daftar package yang digunakan pada aplikasi, dapat dilihat pada tabel berikut:

Komponen/Class GUI

No. Nama Package1. java.awt.*2. javax.swing.*;3. java.awt.event.*;4. javax.swing.border.LineBorder;5. java.util.*;6. java.text.*;7. javax.swing.Timer;8. java.sql.*;9. java.io.*;10. javax.swing.table.DefaultTableModel;11. import java.lang.*;12. import java.awt.print.*;

• Komponen asli/original berasal dari package Abstract Window Toolkit (AWT)

• Untuk melakukan interaksi antara komponen dengan user perlu ditambahkan Interface. Dimana daftar interface yang digunakan pada aplikasi, dapat dilihat pada Tabel berikut

No. Nama Interface1. ActionLIstener2. FocusListener3. KeyListener4. KeyAdapter5. Printable

Komponen/Class GUI

CONTOH PROGRAM GUI

//program pertama//Tidak Menggunakan Construktorimport javax.swing.JFrame;class frame1{ public static void main(String args []){ JFrame tampil = new JFrame(); tampil.show(); }}

Saat kita membuat program java GUI, yang pertama kali kita harus kuasai adalah penggunaan JFrame. JFrame digunakan untuk mendesain model tampilan yang didalamnya dapat kita tempatkan komponen-komponen lainnya. Contoh penggunaan tampilan frame pada program java :

CONTOH PROGRAM GUI//program kedua//menggunakan konstruktorimport javax.swing.*;class frame21 extends JFrame{ frame21(){ //construktor show();}}class frame2{ public static void main(String args[]){ new frame21(); }}

CONTOH PROGRAM GUI

• Apabila kedua program tersebut dikompilasi dan dijalankan maka akan terdapat tampilan seperti dibawah ini :

CONTOH PROGRAM GUIUntuk membuat frame dengan tulisan “Universitas Budi Luhur”, pada posisi x = 10 dan Y = 100, lebar = 300, tinggi = 200, Resizable false, dan akan terhapus di alokasi memori setelah aplikasi di tutup seperti pada gambar sebagai berikut :

CONTOH PROGRAM GUI//program ketigaimport javax.swing.*;class frame61 extends JFrame{ frame61(){ super("Universitas Budi Luhur"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setLocation (10,100); this.setSize(300,200); setResizable(false); show(); }}class frame62{ public static void main (String args[]){ new frame61(); }}

CONTOH PROGRAM GUI• Grafik dua dimensi (2D) menggunakan class yang terdapat pada java.awt.*, yaitu

Canvas. Komponen Canvas tersebut berbentuk kotak kosong pada layar. Didalam Canvas tersebut dapat kita gunakan sebagai media gambar 2 (dua) dimensi. Penggunaan Canvas harus dibarengi dengan sub class paint sebagai media gambar yang berupa perintah.

• Cara menggabungkan penggunaan Canvas dan Jframe adalah sebagai berikut :

//program ke empatimport javax.swing.*;import java.awt.*;//Class Canvasclass grap1 extends Canvas{

public void paint (Graphics g){//(x,y,width,height)g.drawRect(1,5,50,20);g.drawLine(35,50,100,70);//(x,y,width,height,arcwidth,archeightg.drawRoundRect(1,50,30,40,5,100);g.setColor(Color.YELLOW); //set warnag.drawOval(110,50,40,30);g.setFont(new Font("Tahoma",Font.ITALIC,20));g.drawString("9511500134",80,15);g.setColor(Color.BLUE); //set warnag.fillRect(1,110,30,20);g.fillOval(50,110,30,20);

}}//Class frameclass grap11 extends JFrame{

private Container konten=new Container();private grap1 duaD =new grap1();grap11(){

super("Universitas Budi Luhur");setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);this.setLocation(10,100);this.setSize(250,200);konten= getContentPane();konten.add(duaD);show();

}public static void main(String args[]){

new grap11();}

}

• Perumpamaan membuat gambar 2D menggunakan objek Canvas adalah seperti menggambar pada sebuah kertas kosong dengan pensil gambar. Hanya saja penggunaan objek Canvas menggunakan posisi piksel pada frame.

• Posisi 0 pada horizontal (X=0) dan posisi 0 pada vertikal (Y=0), menunjukan posisi tersebut berada pada posisi ujung paling kiri dan paling atas dari frame.

• Jika X > 0 maka posisi berada ke arah kanan dari frame, sedangkan jika Y > 0 maka posisi berada ke arah bawah dari frame.

• Banyak objek yang dapat digunakan untuk menggambar 2D pada Canvas, yaitu bulat, kotak, garis dan lain-lain.

Pada gambar terdapat beberapa objek, yaitu :– Kotak

• drawRect (x,y,width, height)– Kotak dengan bundaran di pinggir

• drawRoundRect (x, y, width, height, arcwidth, archeight)– Kotak dengan warna didalamnya

• fillRect (x,y,width,height)– Penggunaan Font

• setFont(new Font("<Model Font>", <STANDAR|BOLD|ITALIC>, <Size>)) – String

• drawstring(“<tulisan>”,x,y)– Garis

• drawLine(x,y,width,height)– Bundar

• drawOval(x,y,width,height)– Bundar dengan warna didalamnya

• fillOval(x,y,width, height)– Pewarnaan

• setColor(<color>)Ketika hendak menggunakan Class pertama pada class kedua (frame) perlu menggunakan

perintah :private grap1 duaD =new grap1();Kemudian class pertama tersebut ditampilkan pada JFrame dengan menggunakan perintah :konten.add(duaD);

Merancang Program Logo, Sesuai Contoh Aplikasi

/*----------------------------------------------------------------------------------------------------Nama Program : SIP.javaDipanggil Oleh : -Keterangan : Program Splash dengan Logo dan Baris ProgresDibuat Oleh : AEndF@2008, Versi Update----------------------------------------------------------------------------------------------------*/// Deklarasi packageimport java.awt.*;import javax.swing.*;import java.awt.event.*;import javax.swing.border.LineBorder;// Deklarasi classpublic class SIP extends JWindow {

private Dimension dimensi = Toolkit.getDefaultToolkit().getScreenSize();private JLabel lblLogo = new JLabel(new ImageIcon

("Gambar/sip.jpg"));private JProgressBar barisProgres = new JProgressBar();private int time = 0;private Timer timer;// Deklarasi konstruktorpublic SIP () {

// Mengatur warna garis pinggir barisProgres.setBorder(new LineBorder (Warna, 1));lblLogo.setBorder (new LineBorder (Warna, 1));

// Menempatkan objek ke containergetContentPane().add(lblLogo, BorderLayout.NORTH);getContentPane().add(barisProgres,BorderLayout.CENTER);// Mengatur lama window logo tampil pada layar monitortimer=new Timer(50,new ActionListener(){

public void actionPerformed(ActionEvent evt){

time++;barisProgres.setValue(time);

if(barisProgres.getPercentComplete()==1.0){timer.stop();setVisible(false);// menjalankan menu

utama.// new Menu_Utama();

}}}); timer.start();

// Menyiapkan variabel warna.Color Warna = Color.blue;// Mengatur baris progressbarisProgres.setValue(0);barisProgres.setPreferredSize(new Dimension(100,15));barisProgres.setBackground(Color.white);barisProgres.setForeground(Color.red);barisProgres.setStringPainted(true);// Menemparkan objek

kememori sebelum ditampilkanpack();

// Mengatur lokasi window tepat ditengah layar monitorsetLocation (dimensi.width / 2 - getWidth() / 2,

dimensi.height / 2 - getHeight() / 2);// menampilkan window ke layar monitor

show();}// Deklarasi metode utamapublic static void main (String args[]) {

new SIP (); }

}