PERTEMUAN 3 PBOL Dewi Kusumaningsih M Kom Konsep

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 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 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 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 1. Graphical components (GUI) Yaitu berupa rancangan tampilan program yang dikemas dengan menggunakan komponen-komponen grafik. Contoh seperti tombol, Textfield, Label, Scrollbar 2. Listener methods Yaitu berfungsi untuk menerima dan merespon event yang terjadi. Contoh ketika tombol di klik maka akan merespon dengan melakukan sesuatu. 3. 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 1. JWindow Kegunaan 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. 4. JProgress. Bar Timer 5. Dimension 6. JFrame 7. JDesktop. Pane 8. JMenu. Bar 9. JMenu Untuk membuat baris progress. Untuk mengatur waktu tampilan. Untuk mengambil dimensi screen monitor. Untuk membuat frame biasa. Untuk membuat frame induk yang disisipkan pada frame biasa. untuk menampung dan menampilkan menu baris (Pulldown Menu). Untuk membuat menu baris dan sub menu yang merupakan induk dari sub menu yang lain.

Komponen/Class GUI Untuk membuat sub menu yang merupakan menu terakhir. 10. JMenu. Item 11. JPopup. Menu 12. JTool. Bar Untuk menampung dan menampilkan menu popup. 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. Simple. Date. Format Mengatur format tampilan 17. String Class tipe data 18. JInternal. Frame Untuk membuat frame anak. 19. JText. Field Untuk menginput string 20. JText. Area Untuk menginput string yang lebih dari satu baris

Komponen/Class GUI 21. JScroll. Pane 22. JCombo. Box Untuk membuat objek tabel Untuk membuat objek kombo yang berisi daftar pilihan. 23. Button. Group Untuk membuat objek group sebagai tempat objek radiobutton. 24. 25. 26. 27. 28. JRadio. Button JTabel JOption. Pane Integer Printer. Job 29. Graphics 2 D 30. 31. 32. Connection Statement Result. Set Untuk membuat objek pilihan Untuk membuat objek tabel Untuk menampilkan kotak dialog Class tipe data Untuk mengaktifkan printer dialog Untuk membuat objek grafik dua dimensi. Untuk membuat objek koneksi. Untuk membuat statement. Untuk menampung hasil query.

Komponen/Class GUI Sedangkan daftar package yang digunakan pada aplikasi, dapat dilihat pada tabel berikut: No. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. Nama Package java. awt. * javax. swing. *; java. awt. event. *; javax. swing. border. Line. Border; java. util. *; java. text. *; javax. swing. Timer; java. sql. *; java. io. *; javax. swing. table. Default. Table. Model; import java. lang. *; 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. 1. 2. 3. 4. 5. Nama Interface Action. LIstener Focus. Listener Key. Adapter Printable

CONTOH PROGRAM GUI Saat kita membuat program java GUI, yang pertama kali kita harus kuasai adalah penggunaan 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 frame 1{ public static void main(String args []){ JFrame tampil = new JFrame(); tampil. show(); } }

CONTOH PROGRAM GUI //program kedua //menggunakan konstruktor import javax. swing. *; class frame 21 extends JFrame{ frame 21(){ //construktor show(); } } class frame 2{ public static void main(String args[]){ new frame 21(); } }

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 frame 61 extends JFrame{ frame 61(){ super("Universitas Budi Luhur"); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); this. set. Location (10, 100); this. set. Size(300, 200); set. Resizable(false); show(); } } class frame 62{ public static void main (String args[]){ new frame 61(); } }

CONTOH PROGRAM GUI • • Grafik dua dimensi (2 D) 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 grap 1 extends Canvas{ public void paint (Graphics g){ //(x, y, width, height) g. draw. Rect(1, 5, 50, 20); g. draw. Line(35, 50, 100, 70); //(x, y, width, height, arcwidth, archeight g. draw. Round. Rect(1, 50, 30, 40, 5, 100); g. set. Color(Color. YELLOW); //set warna g. draw. Oval(110, 50, 40, 30); g. set. Font(new Font("Tahoma", Font. ITALIC, 20)); g. draw. String("9511500134", 80, 15); g. set. Color(Color. BLUE); //set warna g. fill. Rect(1, 110, 30, 20); g. fill. Oval(50, 110, 30, 20); } } //Class frame class grap 11 extends JFrame{ private Container konten=new Container(); private grap 1 dua. D =new grap 1(); grap 11(){ super("Universitas Budi Luhur"); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); this. set. Location(10, 100); this. set. Size(250, 200); konten= get. Content. Pane(); konten. add(dua. D); show(); } public static void main(String args[]){ new grap 11(); } }

• Perumpamaan membuat gambar 2 D 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 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 2 D pada Canvas, yaitu bulat, kotak, garis dan lain-lain.

Pada gambar terdapat beberapa objek, yaitu : – Kotak • draw. Rect (x, y, width, height) – Kotak dengan bundaran di pinggir • draw. Round. Rect (x, y, width, height, arcwidth, archeight) – Kotak dengan warna didalamnya • fill. Rect (x, y, width, height) – Penggunaan Font • set. Font(new Font("<Model Font>", <STANDAR|BOLD|ITALIC>, <Size>)) – String • drawstring(“<tulisan>”, x, y) – Garis • draw. Line(x, y, width, height) – Bundar • draw. Oval(x, y, width, height) – Bundar dengan warna didalamnya • fill. Oval(x, y, width, height) – Pewarnaan • set. Color(<color>) Ketika hendak menggunakan Class pertama pada class kedua (frame) perlu menggunakan perintah : private grap 1 dua. D =new grap 1(); Kemudian class pertama tersebut ditampilkan pada JFrame dengan menggunakan perintah : konten. add(dua. D);

Merancang Program Logo, Sesuai Contoh Aplikasi

/* --------------------------------------------------Nama Program : SIP. java Dipanggil Oleh : Keterangan : Program Splash dengan Logo dan Baris Progres Dibuat Oleh : AEnd. F@2008, Versi Update --------------------------------------------------*/ // Deklarasi package import java. awt. *; import javax. swing. *; import java. awt. event. *; import javax. swing. border. Line. Border; // Deklarasi class public class SIP extends JWindow { private Dimension dimensi = Toolkit. get. Default. Toolkit(). get. Screen. Size(); private JLabel lbl. Logo = new JLabel(new Image. Icon ("Gambar/sip. jpg")); private JProgress. Bar baris. Progres = new JProgress. Bar(); private int time = 0; private Timer timer; // Deklarasi konstruktor public SIP () {

// Mengatur warna garis pinggir baris. Progres. set. Border(new Line. Border (Warna, 1)); lbl. Logo. set. Border (new Line. Border (Warna, 1)); // Menempatkan objek ke container get. Content. Pane(). add(lbl. Logo, Border. Layout. NORTH); get. Content. Pane(). add(baris. Progres, Border. Layout. CENTER); // Mengatur lama window logo tampil pada layar monitor timer=new Timer(50, new Action. Listener(){ public void action. Performed(Action. Event evt){ time++; baris. Progres. set. Value(time); if(baris. Progres. get. Percent. Complete()==1. 0){ utama. } }}); timer. start(); timer. stop(); set. Visible(false); // menjalankan menu // new Menu_Utama();

// Menyiapkan variabel warna. Color Warna = Color. blue; // Mengatur baris progress baris. Progres. set. Value(0); baris. Progres. set. Preferred. Size(new Dimension(100, 15)); baris. Progres. set. Background(Color. white); baris. Progres. set. Foreground(Color. red); baris. Progres. set. String. Painted(true); // Menemparkan objek kememori sebelum ditampilkan pack(); show(); } // Mengatur lokasi window tepat ditengah layar monitor set. Location (dimensi. width / 2 - get. Width() / 2, dimensi. height / 2 - get. Height() / 2); // menampilkan window ke layar monitor } // Deklarasi metode utama public static void main (String args[]) { new SIP (); }