IF PEMROGRAMAN LANJUT GRAPHICAL USER INTERFACE (GUI) 11 DENGAN SWING. Oleh : Andri Heryandi, M.T

IF34348 - PEMROGRAMAN LANJUT

GRAPHICAL USER INTERFACE (GUI) DENGAN SWING

Oleh : Andri Heryandi, M.T.

11

MATERI HARI INI IF34348 - Pemrograman Lanjut

 Swing  Definisi swing  Komponen Swing  Layout Manager


2

SWING 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.*


3

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


4

MEMBUAT APLIKASI GUI 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. import javax.swing .*; public class GUI1 { public static void main(String[] args ) { JFrame f=new JFrame("Demo Swing"); f.setVisible (true); } }

Hasil Run adalah sebuah window kecil :


5

MENGUBAH UKURAN WINDOW IF34348 - Pemrograman Lanjut

 Method setSize memiliki parameter lebar (width) dan tinggi (height). Lebar dan tinggi dalam satuan pixel. 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); } }


6

MENUTUP APLIKASI 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. i mp o r t j avax. swin g .* ; p ub l i c c lass GUI1 { p u b 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 ); } } Oleh : Andri Heryandi, M.T.

7

MENAMBAH KOMPONEN 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. i mp o r t j avax. swin g .* ; p ub l i c c lass GUI1 { p ubli c s tatic voi d m ain(S trin g[] a r g s ) { … J Butt on tombo l =ne w J Butto n ( " T omb ol " ) ; f .add ( to mbol ) ; … } }


8

PENGATURAN LAYOUT 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

Lihat : http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html Oleh : Andri Heryandi, M.T.

9

PENGATURAN LAYOUT (NULL) 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. Oleh : Andri Heryandi, M.T.

10

PENGATURAN LAYOUT (NULL) IF34348 - Pemrograman Lanjut

i m p o r t j avax. swin g .* ; p u b l i c c lass Layo utA bsolu te { p ubli c s tatic voi d m ain(S trin g[] a r g 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 , 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 ) ; f .set Vis ible ( true ); } Oleh : Andri Heryandi, M.T. }

11

PENGATURAN LAYOUT (FLOWLAYOUT) 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.


12

PENGATURAN LAYOUT (FLOWLAYOUT) IF34348 - Pemrograman Lanjut

i m p o r t j ava.a wt.F low Layou t ; i m p o r t j avax. swin g .* ; p u b l i c c lass Layo utF lowLa yout { p ubli c s tatic voi d m ain(S trin g[] a r g 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 , 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 . a d d (new JB utton ( " To mbo l "+i )); } f .set Vis ible ( true ); } } Oleh : Andri Heryandi, M.T.

Silahkan constructor FlowLayout diubah-ubah.

13

PENGATURAN LAYOUT (BORDERLAYOUT) 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.


14

PENGATURAN LAYOUT (BORDERLAYOUT) IF34348 - Pemrograman Lanjut

i m p o r t j ava.a wt.B ord erLay out ; i m p o r t j avax. swin g .* ; p u b l i c c lass Layo utB order Layo ut { pu b 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 ); } } Oleh : Andri Heryandi, M.T.

Coba hilangkan beberapa tombol, lihat layout hasilnya.

15

PENGATURAN LAYOUT (GRIDLAYOUT) 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.


16

PENGATURAN LAYOUT (GRIDLAYOUT) IF34348 - Pemrograman Lanjut

i m p o r t j ava.a wt.G rid Layou t ; i m p o r t j avax. swin g .* ; p u b l i c c lass Layo utG ridLa yout { p u b l 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 ); } }


17

PENGATURAN LAYOUT LANJUT IF34348 - Pemrograman Lanjut

 Misalkan anda ingin membuat aplikasi dengan layout seperti pada gambar di bawah ini :

B

A D E C F Oleh : Andri Heryandi, M.T.

A: • B: • C: • •

BorderLayout NORTH BorderLayout 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 18


 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.


19


i m p o r t j ava.a wt .* ; i m p o r t j avax. swin g .* ; p u b l i c c lass Gui2 { p ubli c s tatic voi d m ain(S trin g[] a r g s ) { J Fram e f =new JFra me ( " G u i 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 );


20


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 ( n e w 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 ) ;


21


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 ); }

}


22

IF PEMROGRAMAN LANJUT GRAPHICAL USER INTERFACE (GUI) 11 DENGAN SWING. Oleh : Andri Heryandi, M.T

Recommend Documents