A. TUJUAN PEMBELAJARAN - 13a GUI.pdf
R A K T
I K U M
2
7 P
2
7 N T A R U K A R A F
I K U M P R A K T
I S A N T A R M U K A G R A F
I S A M G
A. TUJUAN PEMBELAJARAN 1. Memahami konsep Graphical User Interface (GUI).
2. Mampu membuat program yang menerapkan konsep GUI.
3. Mampu membuat program berbasis GUI yang melibatkan penggunaan komponen GUI.
B. DASAR TEORI
Ciri utama dari tampilan model ini adalah seluruh data ditampilkan dalam bentuk teks (text
based ). Model tampilan ini memiliki kelemahan yaitu lebih sulit membuat tampilan program
menjadi indah dan menarik, dikarenakan kurangnya dukungan warna. Monitor model teks hanya
24 mendukung warna sampai 16, berbeda dengan model grafik yang mendukung warna sampai 2 (2 pangkat 24) bahkan bisa lebih, tergantung graphic-card yang digunakan.
Bab ini akan membahas tentang Graphical User Interface (GUI), suatu metode untuk antar-muka
komputer berbasis grafis. GUI digunakan dalam pembuatan program aplikasi dengan
mempertimbangkan dua aspek yaitu keindahan tampilan dan kemudahan penggunaan program.
n
Keindahan tampilan akan mempengaruhi orang untuk melihat da merasa senang terhadap
program yang kita buat, dan kemudahan penggunaan program akan berdampak pada ketertarikan
orang untuk terus menggunakan program yang kita buat. Di dunia bisnis, hal ini merupakan
target jangka panjang.
Materi dalam bab ini akan disajikan secara sistematis dan terstruktur, mulai dari pengenalan
objek utama, penambahan objek-objek pendukung (lebih dikenal sebagai komponen) sampai
interaksi komputer dengan user. Untuk melengkapi uraian tentang GUI ini, pada akhir bab kita
membuat sebuah project yang diberi nama ”Kalkulator Mini". Project ini menyajikan pembuatan
sebuah kalkulator sederhana yang bisa digunakan untuk melakukan proses perhitungan
matematika biasa. Beberapa fungsi yang rumit dari kalkulator sesungguhnya tidak dimasukkan
dalam project ini. Anda bisa mengembangkan project ini secara mandiri.Pembahasan kita mulai class JFrame. Dalam lingkup Java, sebuah interface window dikenal
dengan sebutan frame . Bagi anda yang pernah menggunakan software Delphi (bahasa visual
untuk Pascal ) tentu pernah menjumpai komponen TFrame. Perlu diingat bahwa frame dalam
lingkup Delphi berbeda dengan frame dalam lingkup Java. Frame dalam lingkup Java identik
dengan TForm di Delphi atau Form di Visual Basic . Perlu juga diketahui bahwa seluruh
pembahasan pada bab ini mengacu kepada sistem operasi Windows , tepatnya Windows 2000atau Windows XP . Anda yang menggunakan sistem operasi lain seperti UNI X atau LI NUX
mungkin akan melihat beberapa perbedaan tampilan yang tidak mengganggu.Windows Explorer
Jika anda membuka program maka secara tidak sadar anda telah
mengaktifkan sebuah window (atau frame). Frame adalah sebuah objek yang merepresentasikan
suatu area di layar yang berisi sejumlah objek lain untuk menyampaikan informasi kepada user.
Kita bisa menambahkan sejumlah komponen lain ke dalam sebuah framw dengan tujuan yang
sesuai dengan fungsi komponen tersebut.Sebuah objek yang merupakan instansiasi dari class JFrame bisa dipanggil melalui dua cara,
yaitu:1. Dipanggil melalui class utama yang mengandung fungsi main().
2. Dipanggil melalui class lain yang merupakan class tersendiri turunan dari JFrame.
M a n a j e m e n P e m a s a n g a n K o m p o n e n M a n a j e m e n P e m a s a n g a n K o m p o n e n
Manajemen pemasangan komponen (layout management) diperlukan untuk mengatur
penempatan komponen di dalam frame agar bisa menghasilkan bentuk interface yang menarik.
Penggunaan layout-manager dalam mengatur letak komponen juga akan memudahkan kita
menempelkan komponen pada frame.
Java menyediakan sejumlah metode dalam mengatur penempelan komponen ke dalam frame.
Pada bagian ini kita hanya akan membahas tiga metode: FlowLayout , GridLayout dan
BorderLayout . Masing-masing metode memiliki keunggulan dan kekurangan dibandingkan
dengan metode yang lain. Hal yang menarik adalah kita tidak harus terpaku pada satu metode
dalam mengatur pemasangan komponen; kita boleh mengkombinasikan beberapa metode agar
pemasangan komponen menjadi lebih baik dan mudah.
Method setLayout(LayoutManager) digunakan untuk mengatur jenis metode yang digunakan
pada saat memasang komponen. Method ini bisa kita gunakan pada class JFrame, JPanel dan
Container. Pembahasan selanjutnya akan menunjukkan penggunaan berbagai metode pengaturan
penempelan komponen pada frame.C. TUGAS PENDAHULUAN
1. Pelajari layout – layout yang bisa digunakan untuk mengatur tata letak komponen, kemudian buat daftar mengenai layout tersebut, beserta penjelasan dan contoh tampilannya.
D. PERCOBAAN P e r c o b a a n 1 : M e m b u a t j e n d e l a s e d e r h a n a d e n g a n J F r a m e P e r c o b a a n 1 : M e m b u a t j e n d e l a s e d e r h a n a d e n g a n J F r a m e
1 import javax.swing. JFrame ;
2 3 //-------------------------- 4 // Definisi class MYFRAME 5 //-------------------------- 6 class MyFrame extends JFrame 7 {
8 MyFrame() 9 { 10 super ("Contoh frame");
11 12 show(); 13 } 14 } 15 16 //--------------- 17 // Class utama 18 //--------------- 19 public class JFrame_4 20 {
public static void String
21 main ( [] args) 22 {
new
23 MyFrame(); 24 } 25 }
P P e e r r c c o o b b a a a a n n
2 2 : : M M e e n n g g h h a a p p u u s s F F r r a a m m e e d d a a r r i i M M e e m m o o r r i i import JFrame
1 javax.swing. ;
2 3 //-------------------------- 4 // Definisi class MYFRAME 5 //-------------------------- 6 class MyFrame extends JFrame 7 {
8 MyFrame() 9 {
super
10 ("Contoh frame"); 11 setDefaultCloseOperation ( JFrame .EXIT_ON_CLOSE); 12 13 show(); 14 } 15 } 16 17 //--------------- 18 // Class utama 19 //--------------- 20 public class JFrame_5 21 {
public static void String
22 main ( [] args) 23 { 24 new MyFrame(); 25 } 26 }
P e r c o b a a n 3 : F r a m e d e n g a n U k u r a n T e t a p P e r c o b a a n 3 : F r a m e d e n g a n U k u r a n T e t a p
1 import javax.swing. JFrame ;
2 3 //-------------------------- 4 // Definisi class MYFRAME 5 //-------------------------- 6 class MyFrame extends JFrame 7 {
8 MyFrame() 9 { 10 super ("Contoh frame");
JFrame
11 setDefaultCloseOperation ( .EXIT_ON_CLOSE); 12 setLocation (200,100); 13 setSize (300,100); 14 setResizable (false); 15 16 show(); 17 } 18 } 19 20 //---------------
21 // Class utama 22 //--------------- 23 public class JFrame_8 24 { 25 public static void main ( String [] args) 26 { 27 new MyFrame(); 28 } 29 }
P P e e r r c c o o b b a a a a n n
4 4 : : S S t t r r a a t t e e g g i i “ “ T T e e m m p p e e l l L L a a n n g g s s u u n n g g ” ”
1 import javax.swing.*;
import
2 java.awt.*;
3 4 class MyFrame extends JFrame 5 { 6 private Container container = new Container (); 7 private JButton new JButton
tombol = ("Tombol");
8
9 MyFrame() 10 {
super
11 ("Strategi 'Tempel-Langsung'");
12 13 setDefaultCloseOperation ( JFrame .EXIT_ON_CLOSE); 14 setSize (250,80); 15 setLocation (100,100); 16 17 container = getContentPane(); 18 19 container.add (tombol); 20 21 show(); 22 } 23 } 24 25 public class TempelLangsung_1 26 {
public static void String
27 main ( [] args) 28 { 29 new MyFrame(); 30 } 31 }
P e r c o b a a n 5 : M a n a j e m e n P e m a s a n g a n K o m o a t – p n e n F l o w l y o u P e r c o b a a n 5 : M a n a j e m e – n P e m a s a n g a n K o m p o n e n F l o w l a y o u t
1 import javax.swing.*;
import
2 java.awt.*;
3
4 class MyFrame extends JFrame 5 { 6 private Container container = new Container (); 7 private JButton new JButton
tombol = ("Tombol");
8 private JLabel new JLabel ("Tulisan");
tulisan =
9
10 MyFrame() 11 {
super
12 ("Demo FlowLayout");
13 14 setDefaultCloseOperation ( JFrame .EXIT_ON_CLOSE); 15 setSize (250,80); 16 setLocation (100,100); 17 18 container = getContentPane(); 19 container.setLayout ( new FlowLayout ());
20 21 container.add (tombol); 22 container.add (tulisan);
23 24 show(); 25 } 26 } 27 28 public class FlowLayout_1 29 {
public static void String
30 main ( [] args) 31 { 32 new MyFrame(); 33 } 34 }
P 6 : M a n a j e m e n P e m a s a n g a n K o m p o n e n G r i d l a y o u t – e r c o b a a n P e r c o b a a n 6 : M a n j e – a m e n P e m a s a n g a n K o m p o n e n G r i d l a y o u t
1 import javax.swing.*;
import
2 java.awt.*;
3 4 class MyFrame extends JFrame 5 { 6 private Container container = new Container (); 7 private JButton new JButton
tombol = ("Tombol"); private JLabel new JLabel
8 ("Tulisan");
tulisan =
9
10 MyFrame() 11 { 12 super ("GridLayout 1-baris 2-kolom");
13 JFrame 14 setDefaultCloseOperation ( .EXIT_ON_CLOSE); 15 setSize (250,80); 16 setLocation (100,100);
17
18 container = getContentPane(); 19 container.setLayout ( new GridLayout (1,2)); 20 21 container.add (tulisan); 22 container.add (tombol);
23 24 show(); 25 } 26 } 27 28 public class GridLayout_1 29 { 30 public static void main ( String [] args) 31 {
new
32 MyFrame(); 33 } 34 }
P P e e r r c c o o b b a a a a n n
7 7 : : M M a a n n a a j j e e m m e e n n P P e e m m a a s s a a n n g g a a n n K K o o m m p p o o n n e e n n – B B o o r r d d e e r r l l a a y y o o u u – t t import
1 javax.swing.*; 2 import java.awt.*;
3
class extends JFrame
4 MyFrame 5 { 6 private Container container = new Container ();
7 8 private JButton new JButton
tombolUtara = ("NORTH");
9 private JButton new JButton
tombolSelatan = ("SOUTH"); private JButton new JButton
10
tombolTimur = ("EAST");
11 private JButton new JButton
tombolBarat = ("WEST"); private JButton new JButton
12 ("CENTER");
tombolTengah =
13
14 MyFrame() 15 {
super
16 ("Demo BorderLayout");
17 18 setDefaultCloseOperation ( JFrame .EXIT_ON_CLOSE); 19 setSize (250,130); 20 setLocation (100,100); 21 22 container = getContentPane(); 23 container.setLayout ( new BorderLayout ());
24 BorderLayout 25 container.add (tombolUtara, .NORTH); 26 container.add (tombolSelatan, BorderLayout .SOUTH); 27 container.add (tombolTimur, BorderLayout .EAST);
BorderLayout
28 container.add (tombolBarat, .WEST); 29 container.add (tombolTengah, BorderLayout .CENTER); 30 31 show();
32 } 33 } 34 35 public class BorderLayout_1 36 {
public static void String
37 main ( [] args) 38 {
new
39 MyFrame(); 40 } 41 }
P P e e r r c c o o b b a a a a n n
8 8 : : L L a a y y o o u u t t K K o o m m p p o o n n e e n n d d a a l l a a m m J J P P a a n n e e l l import
1 javax.swing.*;
import
2 java.awt.*;
3
class extends JFrame
4 MyFrame 5 { 6 private Container container = new Container (); 7 private JPanel new JPanel ();
jPanel =
8 9 private JLabel
labelUserName = new JLabel
("User name :");
private JLabel
10 labelPassword =
new JLabel ("Password :");
11 private JTextField textFieldUserName =
new JTextField ("", 8);
12 private JTextField textFieldPassword =
new JTextField ("", 8); private JButton new JButton
13 buttonOK = ("OK"); 14 private JButton buttonCancel = new JButton ("Cancel");
15
16 MyFrame() 17 { 18 super ("Demo JPanel - Login");
19 20 setDefaultCloseOperation ( JFrame .EXIT_ON_CLOSE); 21 setSize (250,10); 22 setLocation (100,100); 23 24 jPanel.setLayout ( new GridLayout (3,2)); 25 jPanel.add (labelUserName); 26 jPanel.add (textFieldUserName); 27 jPanel.add (labelPassword); 28 jPanel.add (textFieldPassword); 29 jPanel.add (buttonOK); 30 jPanel.add (buttonCancel); 31 32 container = getContentPane(); 33 container.add (jPanel);
34
35 show(); 36 } 37 }
38 39 public class JPanel_2 40 { 41 public static void main ( String [] args) 42 {
new
43 MyFrame(); 44 } 45 }
E. LATIHAN L a t i h a n 1 : M e m b u a t t a m p i l a n H P m i n i L a t i h a n 1 : M e m b u a t t a m p i l a n H P m i n i
Buatlah tampilan HP seperti pada gambar berikut : L a t i h a n 2 : M e m b u a t t a m p i l a n i n p u t d a t a L a t i h a n 2 : M e m b u a t t a m p i l a n i n p u t d a t a Buatlah tampilan input data seperti gambar berikut :
L L a a t t i i h h a a n n
3 3 : : D D e e s s a a i i n n u u s s e e r r i i n n t t e e r r f f a a c c e e s s e e s s u u a a i i p p e e t t u u n n j j u u k k p p a a d d a a g g a a m m b b a a r r b b e e r r i i k k u u t t Petunjuk : Gantilah JApplet dengan JPanel
F. TUGAS Buatlah tampilan kalkulator mini seperti pada gambar berikut :
G. LAPORAN RESMI
Kumpulkan hasil percobaan di atas dan tambahkan analisa untuk tiap percobaan, latihan, dan
tugas yang telah dibuat.