P 5 Bab 4 : GUI (Graphical User Interface) 4.1 Tujuan. 4.2 Materi. 4.3 Review OOP. : Suzuki, Ferari, Toyota, Honda, Jaguar

Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Mercu Buana Yogyakarta

Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

P–5 Bab 4 : GUI (Graphical User Interface)

4.1 Tujuan Mahasiswa mampu : • Mengetahui pemrograman GUI dengan Java • Mengetahui dan memahami berbagai GUI dalam pemrograman java. • Mengetahui dan memahami pemrograman GUI dengan IDE NetBeans.

4.2 Materi Komponen GUI dalam pemrograman java : 1. Frame 2. Label 3. Text Field 4. Radio Button 5. Combo Box 6. Check Box 7. Button

4.3 Review OOP

Class Object

: Mobil : Suzuki, Ferari, Toyota, Honda, Jaguar SQ – http://sidiq.mercubuana-yogya.ac.id – [email protected] - 1



4.4 GUI •

•

Merupakan aplikasi dalam pemrograman Java yang berbasis grafis. Dalam pemrograman Java terdapat dua kelas yang berperan dalam GUI, antara lain : 1. Abstract Windowing Toolkit (AWT) → Di dalam paket : “java.awt”. 2. Swing → Di dalam paket : “javax.swing”. Package swing merupakan perkembangan dari package awt di pemrograman Java sebelumnya.

Java Architecture Sumber : http://www.write-technical.com/126581/session1/lecture1/archi_packages.gif

4.5 AWT •

Komponen AWT dalam pemrograman Java antara lain seperti : ◦ Frame ◦ Font & Graphics ◦ Image ◦ Button

Frame • •

Class Frame merupakan class yang darinya dapat diturunkan sebuah frame (window). Di atas window ini dapat dilakukan berbagai pekerjaan grafis seperti membuat garis, kotak, lingkaran, elips, poligon, menulis teks atau menempatkan komponen antar muka grafis seperti button, check box, radio button dan lain-lain.

SQ – http://sidiq.mercubuana-yogya.ac.id – [email protected] - 2



Contoh :

•

Contoh Frame 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* ------------------------* ContohFrame.java * author : SidiQ - UMBY ------------------------- */ import java.awt.*; public class ContohFrame extends Frame { public static void main(String args[]) { Frame f = new Frame(); f.resize(250,150); // x,y f.show(); } }

Output :

•

Windows tersebut belum dapat ditutup dengan mengklik mouse pada tanda x dipojok layar. ◦ Agar windows tersebut dapat ditutup dengan Ctrl-Alt-Del diakhiri dengan EndTask. ◦ Agar suatu window dapat ditutup dengan normal (dengan mengklik x dipojok kanan atas), perlu didefinisikan suatu method handleEvent() dari windows sebagai berikut : public boolean handleEvent(Event evt) { if (evt.id == Event.WINDOW_DESTROY) System.exit(0); return false; }




Font & Graphics • •

Kelas Font memungkinkan kita mengatur jenis huruf, ukuran huruf, model huruf (tebal,italic dan lain-lain). Contoh : setFont(new Font("Calibri", Font.BOLD, 14)

Keterangan : ◦ Font : Calibri ◦ Size : 14 point - Bold (huruf normal 12 point) •

Kelas Graphics merupakan class yang memungkinkan kita untuk menulis teks, menggambar garis, kotak lingkaran dan lain-lain. Beberapa method dalam class Graphics antara lain : drawString(String s, x,y) //membuat string dikoordinat x,y drawLine(x1,y1,x2,y2) //membuat garis drawRect(x1,y1,x2,y2) //membuat kotak fillRect(x1,y1,x2,y2) //mengisi kotak drawOval(x1,y1,width,height) //membuat lingkaran atau oval drawRoundRect(x1,y1,x2,y2) //membuat kotak pojoknya bulat fillRoundRect(x1,y1,x2,y2) //mengisi kotak drawPolygon(x1,y1,x2,y2) //mencetak poligon drawArc(x,y,widht,height,startangle,stopangle)

•

Untuk menuliskan suatu string di windows pada posisi kolom x dan baris y. ◦ Koordinat layar windows adalah : 0,0 berada pada pojok kiri atas; ◦ x=jumlah point kearah kanan dan ◦ y=jumlah point kearah bawah (vertikal), seperti pada gambar berikut.

•

Untuk drawOval apabila widht dan height sama akan menghasilkan lingkaran dan apabila tidak sama akan menghasilkan bentuk oval. Contoh :

•




Contoh Font 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

/* ------------------------* ContohFont.java * author : SidiQ - UMBY ------------------------- */ import java.awt.*; public class ContohFont extends Frame { public ContohFont() { setTitle("Contoh Font");//judul windows } public void paint(Graphics g) { g.drawRect(20,40,200,60); g.drawString("Welcome To",30,60); g.setFont(new Font("Calibri", Font.BOLD, 14)); g.drawString("Univ.Mercu Buana Yogyakarta ",30,80); } public boolean handleEvent(Event evt) { if (evt.id == Event.WINDOW_DESTROY) System.exit(0); return false; } public static void main(String args[]) { Frame f = new ContohFont(); f.resize(300,150); f.show(); } }

Output :

Image •

Class abstract Image yang memungkinkan kita untuk menampilkan dan memanipulasi SQ – http://sidiq.mercubuana-yogya.ac.id – [email protected] - 5



data Image dalam berbagai format, seperti GIF, PNG, BMP dan lain-lain. Beberapa method yang penting yang berhubungan dengan class Image antara lain :

•

Toolkit.getDefaultToolkit().getImage(nmFILE)

Keterangan : ◦ nmFile → Yaitu untuk mengambil gambar yang tersimpan dalam file nmFILE. ◦ Dalam nmFILE termuat lengkap dengan nama directori dan subdirectory, kecuali file gambar kita ada pada directory yang sama dengan file program.

•

drawImage(objekgambar,x,y,skalaX,skalaY,pengamatGambar);

Keterangan : ◦ Parameter pertama objekgambar adalah nama objek gambar yang telah diambil dari file ke memory dengan method getImage(). ◦ Parameter kedua dan ketiga :x,y adalah koordinat pojok kiri atas dari peletakan gambar pada windows. ◦ Paramater kempat dan kelima adalah sekala horisontal dan vertikal dalam satuan point dari gambar. Contoh :

•

Contoh Image 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/* ------------------------* ContohImage.java * author : SidiQ - UMBY ------------------------- */ import java.awt.*; import java.awt.Image.*; public class ContohImage extends Frame { String nmFILE="UMBY.PNG"; Image gb=Toolkit.getDefaultToolkit().getImage(nmFILE); public void paint(Graphics g) { setTitle("Contoh Image"); g.setColor(Color.magenta); g.drawString("Welcome !",85,180); g.drawImage(gb,60,50,this); } public boolean handleEvent(Event evt) { if (evt.id == Event.WINDOW_DESTROY) System.exit(0); return false;




25 26 27 28 29 30 31 32 33 }

} public static void main(String args[]) { Frame f = new ContohImage(); f.resize(240,200); f.show(); }

Output :

Button Contoh :

•

Contoh Button 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/* ------------------------* ContohImage.java * author : SidiQ - UMBY ------------------------- */ import java.awt.*; public class ContohButton extends Frame { public ContohButton() { setTitle("Contoh Button"); setLayout(new FlowLayout()); add(new Button("Yellow")); add(new Button("Blue")); add(new Button("Orange")); add(new Button("Cyan")); add(new Button("Pink")); add(new Button("Red")); add(new Button("White")); }




21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 }

public boolean handleEvent(Event evt) { if (evt.id == Event.WINDOW_DESTROY) System.exit(0); return super.handleEvent(evt); } public boolean action(Event evt, Object arg) { if (arg.equals("Yellow")) setBackground(Color.yellow); else if (arg.equals("Blue")) setBackground(Color.blue); else if (arg.equals("Orange")) setBackground(Color.orange); else if (arg.equals("Cyan")) setBackground(Color.cyan); else if (arg.equals("Pink")) setBackground(Color.pink); else if (arg.equals("Red")) setBackground(Color.red); else if (arg.equals("White")) setBackground(Color.white); else return false; repaint(); return true; } public static void main(String[] args) { Frame f = new ContohButton(); f.resize(320, 150); f.show(); }

Output :




4.7 SWING •

Komponen SWING dalam pemrograman Java antara lain seperti : 1. Frame 2. Label 3. Text Field 4. Radio Button 5. Combo Box 6. Check Box 7. Button

Frame Frame merupakan tempat/bingkai untuk komponen lain ditempatkan. Komponen di dalam Java yang digunakan untuk membuat Frame adalah JFrame. Contoh Program :

• • •

Contoh Frame 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/* ------------------------* ContohFrame.java * author : SidiQ - UMBY --------------------------- */ import javax.swing.*; class ContohFrame extends JFrame // pewarisan { ContohFrame() { setTitle("Frame"); //judul di frame setLocation(300,100); //x,y setSize(250,100); //panjang,lebar //mengaktifkan button close di frame setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); //menampilkan frame }

}

public static void main(String[]args) { ContohFrame sq=new ContohFrame(); //object baru }

Output :




Label Label merupakan komponen yang digunakan untuk membuat tulisan di frame. Komponen di dalam Java yang digunakan untuk membuat Label adalah JLabel. Contoh Program :

• • •

Contoh Label 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

/* ------------------------* ContohLabel.java * author : SidiQ - UMBY --------------------------- */ import javax.swing.*; class ContohLabel extends JFrame // pewarisan { //membuat object labelContoh JLabel labelContoh=new JLabel("Label"); ContohLabel() { setTitle("Label"); //judul di frame setLocation(300,100); //x,y setSize(250,100); //panjang,lebar //mengaktifkan button close di frame setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } void GUI() { //mengatur letak komponen, null=koordinat manual getContentPane().setLayout(null); // meletakkan object labelContoh di Frame getContentPane().add(labelContoh); // x,y,lebar,tinggi labelContoh.setBounds(10,10,80,20); setVisible(true); //menampilkan frame } public static void main(String[]args) { ContohLabel sq=new ContohLabel(); //object baru sq.GUI(); // memanggil method GUI } }

Output :




Text Field Text Field merupakan komponen yang digunakan untuk memberikan input terhadap program dalam bentuk teks (String). Komponen di dalam Java yang digunakan untuk membuat Text Field adalah JTextField. Contoh program :

• • •

Contoh TextField 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

/* ------------------------* ContohTextField.java * author : SidiQ - UMBY --------------------------- */ import javax.swing.*; class ContohTextField extends JFrame // pewarisan { //membuat object textContoh, 35=lebar JTextField textContoh=new JTextField(35); ContohTextField() { setTitle("Text Field"); //judul di frame setLocation(300,100); //x,y setSize(240,120); //panjang,lebar //mengaktifkan button close di frame setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } void GUI() { //mengatur letak komponen, null=koordinat manual getContentPane().setLayout(null); // meletakkan object textContoh di Frame getContentPane().add(textContoh); // x,y,lebar,tinggi textContoh.setBounds(10,10,150,20); setVisible(true); //menampilkan frame }

}

public static void main(String[]args) { //object baru ContohTextField sq=new ContohTextField(); sq.GUI(); // memanggil method GUI }

Output :




Radio Button Radio Button merupakan komponen yang digunakan untuk memberikan input terhadap program dalam bentuk pilihan. Komponen di dalam Java yang digunakan untuk membuat Radio Button adalah JRadioButton. Contoh program :

• • •

Contoh Radio Button 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 39 40 41 42 43 44 45 46

/* ------------------------* ContohRadioButton.java * author : SidiQ - UMBY --------------------------- */ import javax.swing.*; class ContohRadioButton extends JFrame // pewarisan { //membuat object radioContoh1 JRadioButton radioContoh1=new JRadioButton("Radio 1"); JRadioButton radioContoh2=new JRadioButton("Radio 2"); //menyatukan object ButtonGroup groupContoh=new ButtonGroup(); ContohRadioButton() { setTitle("Radio Button"); //judul di frame setLocation(300,100); //x,y setSize(240,120); //panjang,lebar //mengaktifkan button close di frame setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } void GUI() { //mengatur letak komponen, null = koordinat manual getContentPane().setLayout(null); // meletakkan object radioContoh1 di Frame getContentPane().add(radioContoh1); //x,y,lebar,tinggi radioContoh1.setBounds(10,10,80,20); getContentPane().add(radioContoh2); radioContoh2.setBounds(10,30,80,20); groupContoh.add(radioContoh1); //menyatukan object groupContoh.add(radioContoh2); setVisible(true); //menampilkan frame } public static void main(String[]args) { //object baru ContohRadioButton sq=new ContohRadioButton(); sq.GUI(); // memanggil method GUI } }




Output :

Combo Box Combo Box merupakan komponen yang digunakan untuk memberikan input terhadap program dalam bentuk pilihan. Komponen di dalam Java yang digunakan untuk membuat Combo Box adalah JComboBox. Contoh program :

• • •

Contoh Combo Box 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/* ------------------------* ContohComboBox.java * author : SidiQ - UMBY --------------------------- */ import javax.swing.*; class ContohComboBox extends JFrame // pewarisan { //membuat object comboContoh String[] Contoh={"ComboBox1","ComboBox2","ComboBox3"}; JComboBox comboContoh=new JComboBox(Contoh); ContohComboBox() { setTitle("Combo Box"); //judul di frame setLocation(300,100); //x,y setSize(240,120); //panjang,lebar //mengaktifkan button close di frame setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); //menampilkan frame } void GUI() { //mengatur letak komponen, null = koordinat manual getContentPane().setLayout(null); // meletakkan object comboContoh di Frame getContentPane().add(comboContoh); //x,y,lebar,tinggi comboContoh.setBounds(10,10,120,20);




31 32 33 34 35 36 37 39 40 41 42 }

setVisible(true); //menampilkan frame } public static void main(String[]args) { //object baru ContohComboBox sq=new ContohComboBox(); sq.GUI(); // memanggil method GUI }

Output :

Check Box Check Box merupakan komponen yang digunakan untuk memberikan input terhadap program dalam bentuk pilihan check. Komponen di dalam Java yang digunakan untuk membuat Check Box adalah JCheckBox. Contoh program :

• • •

Contoh Check Box 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/* ------------------------* ContohCheckBox.java * author : SidiQ - UMBY --------------------------- */ import javax.swing.*; class ContohCheckBox extends JFrame // pewarisan { //membuat object checkContoh JCheckBox checkContoh1=new JCheckBox("CheckBox 1"); JCheckBox checkContoh2=new JCheckBox("CheckBox 2"); //menyatukan object ButtonGroup groupContoh=new ButtonGroup(); JPanel panel1= new JPanel(); ContohCheckBox() { setTitle("Check Box"); //judul di frame setLocation(300,100); //x,y




20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 39 40 41 42 43 44 45 46 47 48 }

setSize(240,120); //panjang,lebar //mengaktifkan button close di frame setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } void GUI() { //mengatur letak komponen, null = koordinat manual getContentPane().setLayout(null); // meletakkan object checkContoh1 di Frame getContentPane().add(checkContoh1); //x,y,lebar,tinggi checkContoh1.setBounds(10,10,120,20); getContentPane().add(checkContoh2); checkContoh2.setBounds(10,40,120,20); groupContoh.add(checkContoh1); //menyatukan object groupContoh.add(checkContoh2); setVisible(true); //menampilkan frame } public static void main(String[]args) { //object baru ContohCheckBox sq=new ContohCheckBox(); sq.GUI(); // memanggil method GUI }

Output :

Button Button merupakan komponen berbentuk tombol yang digunakan untuk melakukan eksekusi terhadap program. Komponen di dalam Java yang digunakan untuk membuat Button adalah JButton. Contoh Program :

• • •

Contoh Button 1 2 3

/* ------------------------* ContohButton.java * author : SidiQ - UMBY




4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 39

--------------------------- */ import javax.swing.*; class ContohButton extends JFrame // pewarisan { //membuat object buttonSAVE JButton buttonContoh=new JButton("Button"); ContohButton() { setTitle("Button"); //judul di frame setLocation(300,100); //x,y setSize(240,120); //panjang,lebar //mengaktifkan button close di frame setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } void GUI() { //mengatur letak komponen, null = koordinat manual getContentPane().setLayout(null); // meletakkan object buttonContoh di Frame getContentPane().add(buttonContoh); //x,y,lebar,tinggi buttonContoh.setBounds(10,10,100,20); setVisible(true); //menampilkan frame }

}

public static void main(String[]args) { ContohButton sq=new ContohButton(); //object baru sq.GUI(); // memanggil method GUI }

Output :




4.9 Tugas Soal : •

Buat code program berbasis GUI dengan mengimplementasikan AWT &. SWING dengan menggunakan editor text (Geany, Gedit, dll) .

Sketsa Output :

Ketentuan tugas : 1. Tugas dikerjakan secara individu 2. Tidak boleh menggunakan identifier (object, class, method) seperti yang tercantum dalam contoh program pada pembahasan di atas. 3. Jika ketentuan pada poin 1 tidak diikuti, secara otomatis dianggap tidak mengerjakan tugas (tugas tidak di terima).




Pengumpulan : • Tugas di kumpulkan paling lambat : ◦ Date : 28 October 2013 ◦ Time : 23:59 WIB • Tugas dikumpulkan melalui e-mail dengan ketentuan sebagai berikut : ◦ File Name & Mail Subject : ▪ Kelas 21 : P5_Java_21-NIM • Ex – File Name : P5_Java_21-11111034.odt • Ex – Mail Subject : P5_Java_21-11111034 ▪ Kelas 22 : P5_Java_22-NIM • Ex – File Name : P5_Java_22-1111105.odt • Ex – Mail Subject : P5_Java_22-11111034 ◦ Email : ▪ Kelas 21 : [email protected] ▪ Kelas 22 : [email protected] • Jika Fie Name & Mail Subject tidak sesuai ketentuan secara otomatis dianggap tidak mengerjakan tugas (tugas tidak di terima)


P 5 Bab 4 : GUI (Graphical User Interface) 4.1 Tujuan. 4.2 Materi. 4.3 Review OOP. : Suzuki, Ferari, Toyota, Honda, Jaguar

Recommend Documents