11
GRAPHICAL USER
INTERFACE (GUI)
DENGAN SWING
IF34348 - Pemrograman Lanjut
Swing
Definisi swing
Komponen Swing
Layout Manager
IF34348 - Pemrograman Lanjut
Swing adalah API (Application Programming Interface) untuk
membuat GUI (Graphical User Interface) untuk aplikasi yang
dibuat dengan Java.
Package yang bisa digunakan : javax.swing.*
IF34348 - Pemrograman Lanjut
Beberapa komponen Swing
1.
JComponent : class induk untuk semua komponen Swing
2.
JFrame : Class yang dapat membuat frame.
3.
JPanel : Class yang dapat digunakan untuk menampung komponen
lain.
4.
JLabel : Class yang digunakan untuk menampilkan label.
5.
JButton : class untuk membuat sebuah tombol
6.
JCheckBox : Class untuk membuat pilihan ya/tidak
7.
JTextField : Class untuk mengisi data text
IF34348 - Pemrograman Lanjut
Langkah-langkah membuat aplikasi GUI dengan Swing :
Membuat objek dengan class JFrame. Isi judul frame sebagai
parameternya
Atur setVisible dengan nilai true.
Hasil Run adalah sebuah window kecil :
MEMBUAT APLIKASI GUI
import javax.swing .*;
public class GUI1 {
public static void main(String[] args) {
JFrame f=new JFrame("Demo Swing");
f.setVisible (true);
}
}
IF34348 - Pemrograman Lanjut
Method setSize memiliki parameter lebar (width) dan tinggi
(height). Lebar dan tinggi dalam satuan pixel.
MENGUBAH UKURAN WINDOW
import javax.swing .*;
public class GUI1 {
public static void main(String[] args) {
JFrame f=new JFrame("Demo Swing");
f.setSize (200, 100);
f.setVisible (true);
}
IF34348 - Pemrograman Lanjut
Jika anda mengklik tombol Close windows pada aplikasi
berbasis Swing, maka windows akan tertutup tetapi
aplikasinya belum benar-benar tertutup.
Untuk benar-benar menutup maka anda harus mengatur
setDefaultCloseOperation dengan konstanta
JFrame.EXIT_ON_CLOSE.
MENUTUP APLIKASI
i mpor t j avax. swin g .* ; p ubli c c lass GUI1 {
pub lic stat ic v oid main (Str ing [] ar gs) { J Fram e f =new JFra me ( "Demo Swi ng" );
f .set Def aultC lose Ope ratio n (JF ram e.EXI T_ON _CL OSE );
f .set Siz e (200 , 10 0); f .set Vis ible ( true ); }
IF34348 - Pemrograman Lanjut
Langkah untuk menambah sebuah komponen ke sebuah
Frame adalah :
Buat objeknya (sesuai dengan komponen yang diinginkan).
Tambahkan ke Frame dengan memanggil method add() milik Frame.
MENAMBAH KOMPONEN
i mpor t j avax. swin g .* ; p ubli c c lass GUI1 {
p ubli c s tatic voi d m ain(S trin g[] args ) { …
J Butt on tombo l =ne w J Butto n ("T omb ol "); f .add (to mbol ) ;
… }
IF34348 - Pemrograman Lanjut
Layout komponen dalam sebuah Container (misalnya Frame,
atau Panel) dapat diatur dengan menggunakan method
setLayout(). Parameternya adalah objek Layout yang
diantaranya adalah :
null
: Untuk layout absolute, dimana posisi dan ukuran
ditentukan secara manual oleh programmer.
FlowLayout
BorderLayout
GridLayout
PENGATURAN LAYOUT
IF34348 - Pemrograman Lanjut
Absolut (null) adalah pengaturan layout secara absolute
(programmer menentukan lokasi dan ukurannya secara
manual).
Untuk menentukan lokasi dan ukuran suatu komponen,
gunakan method setBounds milik setiap komponen.
Parameter setBounds adalah
x : lokasi koordinat x (bagian kiri dari komponen)
y : lokasi koordinat y (bagian atas dari komponen)
width : lebar komponen
height : tinggi komponen
Semua satuannya adalah pixel.
Contoh : setBounds(40,50,100,20) : Koordinat kiri atas adalah
40,50 dengan lebar 100 dan tinggi 20.
PENGATURAN LAYOUT
(NULL)
IF34348 - Pemrograman Lanjut
PENGATURAN LAYOUT
(NULL)
i mpor t j avax. swin g .* ;
p ubli c c lass Layo utA bsolu te {
p ubli c s tatic voi d m ain(S trin g[] args ) { J Fram e f =new JFra me ( "Demo Swi ng" );
f .set Def aultC lose Ope ratio n (JF ram e.EXI T_ON _CL OSE ); f .set Siz e (300 , 15 0);
f .set Lay out (n ull) ;
J Labe l l bl1=n ew J Lab el ("B ilan gan : ") ;
l bl1. set Bound s(10 ,10 ,100, 20);
J Text Fie ld tx t1=n ew JText Fiel d () ;
t xt1. set Bound s(12 0,1 0,100 ,20) ;
J Butt on tombo l =ne w J Butto n ("T omb ol ");
t ombo l.s etBou nds ( 120 ,40,8 0,20 );
f .add (lb l1); f .add (tx t1); f .add (to mbol ) ;
IF34348 - Pemrograman Lanjut
Peletakan komponen dengan layout Flowlayout dimulai dari
kiri ke kanan.
Package yang digunakan : java.awt.FlowLayout
Konstruktornya :
FlowLayout() : posisi di tengah dan celah (gap) horizontal dan vertikal
sebesar 5 (default).
FlowLayout(int align) : Mengatur alignment-nya (LEFT, RIGHT,
CENTER).
FlowLayout(int align, int hgap, int vgap) : Mengatur alignment, gap
horizontal dan gap vertikal.
PENGATURAN LAYOUT
(FLOWLAYOUT)
IF34348 - Pemrograman Lanjut
PENGATURAN LAYOUT
(FLOWLAYOUT)
i mpor t j ava.a wt.F low Layou t ; i mpor t j avax. swin g .* ;
p ubli c c lass Layo utF lowLa yout {
p ubli c s tatic voi d m ain(S trin g[] args ) { J Fram e f =new JFra me ( "Demo Swi ng" );
f .set Def aultC lose Ope ratio n (JF ram e.EXI T_ON _CL OSE ); f .set Siz e (300 , 17 0 );
f .set Lay out (n ew F low Layou t ()) ; f or( i nt i=1;i <=10 ;i+ +){
if( i%5 ==1)/ / to mbo l 1 d an 6 di buat lebi h p anjan g f .add (ne w JBu tton ("T ombol Pan jan g "+i )); els e
f.add (new JB utton ("To mbo l "+i )); }
f .set Vis ible ( true ); }
IF34348 - Pemrograman Lanjut
Peletakan komponen dengan layout BorderLayout dilakukan
dengan membagi container menjadi 5 bagian yaitu NORTH,
EAST, SOUTH, WEST, CENTER)
Package yang digunakan : java.awt.BorderLayout
Tidak semua bagian harus anda gunakan.
Konstruktornya :
BorderLayout() : Tanpa gap.
BorderLayout(int hgap, int vgap) : Mengatur gap horizontal dan
vertikal.
PENGATURAN LAYOUT
(BORDERLAYOUT)
IF34348 - Pemrograman Lanjut
PENGATURAN LAYOUT
(BORDERLAYOUT)
i mpor t j ava.a wt.B ord erLay out ; i mpor t j avax. swin g .* ;
p ubli c c lass Layo utB order Layo ut {
pub lic stat ic v oid main (Str ing [] ar gs) { J Fram e f =new JFra me ( "Demo Swi ng" );
f .set Def aultC lose Ope ratio n (JF ram e.EXI T_ON _CL OSE ); f .set Siz e (300 , 20 0);
f .set Lay out (n ew B ord erLay out ( ));
J Butt on tombo lSou th = new J Butt on ( "SELA TAN" );
f .add (ne w JBu tton ("U TARA" ), Bo rde rLayo ut.N ORT H ); f .add (ne w JBu tton ("B ARAT" ), Bo rde rLayo ut.W EST ); f .add (ne w JBu tton ("T IMUR" ), Bo rde rLayo ut.E AST );
f .add (ne w JTe xtAr ea ( "TENG AH") , Bo rderL ayou t.C ENTER ); f .add (to mbolS outh ,Bo rderL ayou t.S OUTH ) ;
f .set Vis ible ( true ); }
IF34348 - Pemrograman Lanjut
Peletakan komponen dengan layout GridLayout dilakukan
dengan mengatur layout berdasarkan banyaknya kolom dan
baris.
Package yang digunakan : java.awt.GridLayout
Tidak semua bagian harus anda gunakan.
Konstruktornya :
GridLayout() : semua komponen dibuat perkolom dalam 1 baris.
GridLayout(int rows, int cols) : Mengatur banyaknya baris dan kolom.
GridLayout(int rows, int cols, int hgap, int vgap) : Mengatur
banyaknya baris dan kolom serta celah vertikal dan horizontal.
PENGATURAN LAYOUT
IF34348 - Pemrograman Lanjut
PENGATURAN LAYOUT
(GRIDLAYOUT)
i mpor t j ava.a wt.G rid Layou t ; i mpor t j avax. swin g .* ;
p ubli c c lass Layo utG ridLa yout {
publ ic stati c vo id main( Stri ng[ ] arg s) { J Fram e f =new JFra me ( "Demo Swi ng" );
f .set Def aultC lose Ope ratio n (JF ram e.EXI T_ON _CL OSE ); f .set Siz e (300 , 20 0);
f .set Lay out (n ew G rid Layou t (5, 2,5 ,10)) ; f or(i nt i=1;i <=10 ;i+ +)
f .add (ne w JBu tton (In teger .toS tri ng (i) ));
f .set Vis ible ( true ); }
IF34348 - Pemrograman Lanjut
Misalkan anda ingin membuat aplikasi dengan layout seperti
pada gambar di bawah ini :
PENGATURAN LAYOUT LANJUT
A : • BorderLayout B : • NORTH BorderLayout C : • WEST Borderlayout,
• Layout komponen Grid 1
kolom. D: • CENTER BorderLayout • Layout komponen BorderLayout E : • CENTER BorderLayout F : • SOUTH BorderLayout
• Layout komponen di dalam
menggunakan FlowLayout
A
B
C
D
E
F
IF34348 - Pemrograman Lanjut
JFrame dibagi-bagi menjadi beberapa bagian yang setiap
bagiannya dapat menampung komponen lain. Anda bisa
gunakan JPanel.
Atur dulu Jpanelnya agar sesuai dengan tampilan yang
diinginkan.
Jika Panel sudah sesuai, tambahkan komponen-komponen ke
Jpanel yang sesuai.
IF34348 - Pemrograman Lanjut
PENGATURAN LAYOUT LANJUT
i mpor t j ava.a wt .* ; i mpor t j avax. swin g .* ; p ubli c c lass Gui2 {
p ubli c s tatic voi d m ain(S trin g[] args ) { J Fram e f =new JFra me ( "Gui Comp lex ");
f .set Def aultC lose Ope ratio n (JF ram e.EXI T_ON _CL OSE ); f .set Siz e (800 ,600 );
J Pane l p anelJ udul =ne w JPa nel ( ); J Pane l p anelM enu = new JPan el () ; J Pane l p anelI si =n ew JPane l (); f .set Lay out (n ew B ord erLay out ( ));
f .add (pa nelJu dul, Bor derLa yout .NO RTH ); f .add (pa nelMe nu,B ord erLay out. WES T ); f .add (pa nelIs i,Bo rde rLayo ut.C ENT ER );
IF34348 - Pemrograman Lanjut
PENGATURAN LAYOUT LANJUT
J Labe l j udul = new JLa bel (" Apli kas i Tes ter GUI Swin g"); p anel Jud ul.ad d (ju dul );
p anel Jud ul.se tLay out (new Flow Lay out () ); J Butt on tombo lNew =ne w JBu tton ("N ew"); J Butt on tombo lOpe n =n ew JB utto n (" Open" ); J Butt on tombo lSav e =n ew JB utto n (" Save. ..") ; J Butt on tombo lClo se = new J Butt on ( "Clos e"); p anel Men u.set Layo ut ( new G ridL ayo ut (10 ,1)) ; p anel Men u.add (tom bol New );
p anel Men u.add (tom bol Open ) ; p anel Men u.add (tom bol Save ) ; p anel Men u.add (tom bol Close );
IF34348 - Pemrograman Lanjut
PENGATURAN LAYOUT LANJUT
J Text Are a edi tor= new JTex tAre a () ; J Pane l p anelF ile = new JPan el () ;
p anel Isi .setL ayou t (n ew Bo rder Lay out () ); p anel Isi .add ( edit or, Borde rLay out .CENT ER ); p anel Isi .add ( pane lFi le,Bo rder Lay out.S OUTH ); J Labe l l ketfi le =n ew JLabe l ("N ama File : " ); J Labe l l namaf ile = new JLab el (" < Na ma Fi le>" );
p anel Fil e.set Layo ut ( new F lowL ayo ut (Fl owLa you t.LEF T )); p anel Fil e.add (lke tfi le );
p anel Fil e.add (lna maf ile ); f .set Vis ible ( true );
} }
