Dewi Kusumaningsih, M.Kom PERTEMUAN 3 PBOL Dewi Kusumaningsih, M.Kom

Konsep GUI Konsep Pemrograman GUI Pada dasarnya pemrograman GUI  pemrograman yang mengandalkan kemampuan tampilan dalam bentuk grafik. 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.

Konsep GUI GUI → Graphical User Interface GUI 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 SWING pada package javax.swing

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)

Perbedaan AWT dan Swing package Swing yang mempunyai tampilan look and feel yang sama meski dijalankan pada paltform yang berbeda Swing menyediakan komponen yang lebih menarik seperti color chooser dan option pane Swing bukan pengganti dari AWT, dan tidak bisa berdiri sendiri, karena setiap program butuh berkomunikasi dengan mekanisme dasar dari target platform seperti Event Handling yang ada di AWT, jadi Swing akan selalu berdampingan dengan AWT.

Konsep GUI Untuk program yang hanya ditempatkan pada sisi komputer server yang jarang berinteraksi dengan pengguna, maka fungsi dasar program dirasa cukup memadai tanpa GUI Apabila program tersebut diperkirakan akan banyak berinteraksi dengan pengguna, maka ada baiknya jika program menggunakan tampilan  dengan GUI 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 Graphical components (GUI) Yaitu berupa rancangan tampilan program yang dikemas dengan menggunakan komponen-komponen grafik. Contoh seperti tombol, Textfield, Label, Scrollbar Listener methods Yaitu berfungsi untuk menerima dan merespon event yang terjadi. Contoh ketika tombol di klik maka akan merespon dengan melakukan sesuatu. Application methods Fungsi-fungsi atau baris perintah yang berguna bagi pengguna untuk menghasilkan kegiatan dalam bentuk respon. Contoh ketika GUInya yaitu tombol , lalu dilakukan event yaitu di klik maka aplication method nya adalah melakukan 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 :

Komponen/Class GUI Beberapa komponen atau class GUI yang akan diapakai pada aplikasi : No. Nama Komponen Kegunaan 1. JWindow Untuk membuat window atau frame yang menjadi latar belakang komponen-komponen lain. 2. JLabel Untuk 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. JDesktopPane Untuk membuat frame induk yang disisipkan pada frame biasa. 8. JMenuBar untuk menampung dan menampilkan menu baris (Pulldown Menu). 9. JMenu Untuk membuat menu baris dan sub menu yang merupakan induk dari sub menu yang lain.

Komponen/Class GUI 10. JMenuItem Untuk membuat sub menu yang merupakan menu terakhir. 11. JPopupMenu Untuk menampung dan menampilkan menu popup. 12. JToolBar Untuk 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. JComboBox Untuk membuat objek kombo yang berisi daftar pilihan. 23. ButtonGroup Untuk membuat objek group sebagai tempat objek radiobutton. 24. JRadioButton Untuk membuat objek pilihan 25. JTabel 26. JOptionPane Untuk menampilkan kotak dialog 27. Integer Class tipe data 28. PrinterJob Untuk mengaktifkan printer dialog 29. Graphics2D Untuk membuat objek grafik dua dimensi. 30. Connection Untuk membuat objek koneksi. 31. Statement Untuk membuat statement. 32. ResultSet Untuk menampung hasil query.

Komponen/Class GUI Sedangkan daftar package yang digunakan pada aplikasi, dapat dilihat pada tabel berikut: No. Nama Package 1. 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/Class GUI 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 Interface 1. ActionLIstener 2. FocusListener 3. KeyListener 4. KeyAdapter 5. Printable

CONTOH PROGRAM GUI 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 : //program pertama //Tidak Menggunakan Construktor import javax.swing.JFrame; class frame1{ public static void main(String args []){ JFrame tampil = new JFrame(); tampil.show(); }

CONTOH PROGRAM GUI //program kedua //menggunakan konstruktor import 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 GUI Untuk 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 ketiga import 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 empat import javax.swing.*; import java.awt.*; //Class Canvas class 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,archeight g.drawRoundRect(1,50,30,40,5,100); g.setColor(Color.YELLOW); //set warna g.drawOval(110,50,40,30); g.setFont(new Font("Tahoma",Font.ITALIC,20)); g.drawString("9511500134",80,15); g.setColor(Color.BLUE); //set warna g.fillRect(1,110,30,20); g.fillOval(50,110,30,20); } //Class frame class 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.java Dipanggil Oleh : - Keterangan : Program Splash dengan Logo dan Baris Progres Dibuat Oleh : AEndF@2008, Versi Update */ // Deklarasi package import java.awt.*; import javax.swing.*; import java.awt.event.*; import javax.swing.border.LineBorder; // Deklarasi class public 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 konstruktor public SIP () {

// Mengatur warna garis pinggir barisProgres.setBorder(new LineBorder (Warna, 1)); lblLogo.setBorder (new LineBorder (Warna, 1)); // Menempatkan objek ke container getContentPane().add(lblLogo, BorderLayout.NORTH); getContentPane().add(barisProgres,BorderLayout.CENTER); // Mengatur lama window logo tampil pada layar monitor timer=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 progress barisProgres.setValue(0); barisProgres.setPreferredSize(new Dimension(100,15)); barisProgres.setBackground(Color.white); barisProgres.setForeground(Color.red); barisProgres.setStringPainted(true);// Menemparkan objek kememori sebelum ditampilkan pack(); // Mengatur lokasi window tepat ditengah layar monitor setLocation (dimensi.width / 2 - getWidth() / 2, dimensi.height / 2 - getHeight() / 2); // menampilkan window ke layar monitor show(); } // Deklarasi metode utama public static void main (String args[]) { new SIP ();