Membangun GUI (dengan AWT & Swing) OOP Java

Transkripsi

1 Membangun GUI (dengan AWT & Swing) OOP Java

2 Materi yg akan dibahas : Pendahuluan Event-driven Programming AWT, Swing & SWT Komponen-komponen GUI Layout manager

3 Pendahuluan (1) Graphical User Interface (GUI) Memberikan kemudahan kepada pengguna Terdiri dari komponen-komponen GUI Pengguna berinteraksi dengan komponen GUI melalui mouse, keyboard, dll.

4 Pendahuluan (2) Macam-macam macam GUI di Java : AWT (Abstract Window Toolkit) Swing (Lightweight, dibangun diatas AWT) SWT (buatan IBM)

5 Pendahuluan (3)

6 Event-driven Programming (1) Pemrograman di console : Kontrol eksekusi program terpusat (user harus mengikuti alur yg sudah diprogram) Sequence, percabangan & pengulangan

7 Event-driven Programming (2) Event-driven programming : User menentukan apa yg ingin dilakukannya Komponen2 menunggu aksi/trigger dari user Komponen menghasilkan (fire) event Event ditangani oleh Listener yg sudah didaftarkan (di registrasi) Komponen Event Listener

8 Abstract Window Toolkit (1) package terdapat di java.awt Class Component Mempunyai method paint untuk menggambar Component pada layar Class Container Kumpulan dari komponen yang saling berhubungan Mempunyai method add untuk menambah komponen

9 Abstract Window Toolkit (2) Object Component Container

10 Abstract Window Toolkit (3) Terdapat dua Container utama : Window : sebuah window bebas di layar yg tidak tergantung pada Container lain. Dua tipe Window container : Frame : window yg memiliki title & sudut yg dapat di resize Dialog : window yg tidak punya menu bar & tidak dapat di resize Panel : harus berada didalam container lain, mendefinisikan area yg dapat diisi komponen lain

11 Komponen-komponen (1) Komponen-komponen GUI swing, diantaranya : button radio button check box combo box menu label text field text pane text area list table tree slider tool tip progress bar color chooser file chooser panel split pane scroll pane tabbed pane toolbar

12 Komponen-komponen (2) import java.awt.*; import java.awt.event.*; public class FrameExample { private Frame f; public FrameExample() { f = new Frame("Hallo teman-teman!"); public void launchframe() { f.setsize(170,170); f.setbackground(color.blue); f.addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); f.setvisible(true); public static void main(string[] args) { FrameExample guiwindow = new FrameExample(); guiwindow.launchframe();

13 Komponen-komponen (3) import java.awt.*; import java.awt.event.*; public class FrameWithPanel { private Frame f; private Panel pan; private Button btest; //pan bertipe panel public FrameWithPanel(String title) { f = new Frame(title); pan = new Panel(); //bentuk panel btest = new Button("Click saya!"); public void launchframe() { f.setsize(300,200); f.setbackground(color.green); f.setlayout(null); //pecat layout mgr pan.setsize(100,70); pan.setbackground(color.white); pan.setlocation(100,50); pan.add(btest); f.add(pan); f.addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); f.setvisible(true); //add Panel to Frame public static void main(string[] args) { FrameWithPanel guiwindow = new FrameWithPanel("Frame dengan Panel"); guiwindow.launchframe();

14 Layout Manager (1) BorderLayout (default layout manager for a window, dialog and frame) FlowLayout (default layout manager for a panel and applet) GridLayout (menyediakan fleksibilitas dalam menempatkan komponen) CardLayout GridBagLayout

15 Layout Manager (2) import java.awt.*; import java.awt.event.*; public class BorderExample { private Frame f; private Button bn, bs, bw, be; private TextArea ta; public BorderExample() { f = new Frame("GUI Border Layout"); bn = new Button("B1"); bs = new Button("B2"); bw = new Button("B3"); be = new Button("B4"); ta = new TextArea("Ini text \n ini juga...", 5, 30, TextArea.SCROLLBARS_BOTH); public void launchframe() { //karena default jadi bisa tidak ditulis //f.setlayout(new BorderLayout()); f.add(bn, BorderLayout.NORTH); f.add(bs, BorderLayout.SOUTH); f.add(bw, BorderLayout.WEST); f.add(be, BorderLayout.EAST); f.add(ta, BorderLayout.CENTER); f.setsize(200, 200); f.addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); f.setvisible(true); public static void main(string[] args) { BorderExample guiwindow = new BorderExample(); guiwindow.launchframe();

16 Layout Manager (3) import java.awt.*; import java.awt.event.*; public class FlowExample { private Frame f; private Button b1; private Button b2; private Button b3, b4, b5; public FlowExample() { f = new Frame("GUI Flow Layout"); b1 = new Button("Press Me"); b2 = new Button("Don't Press Me"); b3 = new Button("Tombol ke 3"); b4 = new Button("Tombol ke 4"); b5 = new Button("Tombol ke 5"); public void launchframe() { f.setlayout(new FlowLayout()); f.add(b1); f.add(b2); f.add(b3); f.add(b4); f.add(b5); f.pack(); //alternatif setsize (di pas) f.addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); f.setvisible(true); public static void main(string[] args) { FlowExample guiwindow = new FlowExample(); guiwindow.launchframe();

17 Layout Manager (4) import java.awt.*; import java.awt.event.*; public class GridExample { private Frame f; private Button b1, b2, b3, b4, b5, b6; public GridExample() { f = new Frame("GUI Grid Layout"); b1 = new Button("1"); b2 = new Button("2"); b3 = new Button("3"); b4 = new Button("4"); b5 = new Button("5"); b6 = new Button("6"); public void launchframe() { f.setlayout(new GridLayout(3, 2)); f.add(b1); f.add(b2); f.add(b3); f.add(b4); f.add(b5); f.add(b6); f.pack(); //alternatif setsize (di pas) f.addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); f.setvisible(true); public static void main(string[] args) { GridExample guiwindow = new GridExample(); guiwindow.launchframe();

18 Layout Manager (5) import java.awt.*; import java.awt.event.*; public class ComplexLayoutExample { private Frame f; private Panel p; private Button bw, bc; private Button bfile, bhelp; public ComplexLayoutExample() { f = new Frame("GUI Complex Layout"); bw = new Button("West"); bc = new Button("Area kerja"); bfile = new Button("File"); bhelp = new Button("Help"); public void launchframe() { f.add(bw, BorderLayout.WEST); f.add(bc, BorderLayout.CENTER); //buat panel di utara p = new Panel(); p.add(bfile); p.add(bhelp); f.add(p, BorderLayout.NORTH); f.pack(); //alternatif setsize (di pas) f.addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); f.setvisible(true); public static void main(string[] args) { ComplexLayoutExample guiwindow = new ComplexLayoutExample(); guiwindow.launchframe();

19 Contoh-contoh (1) import java.awt.*; import java.awt.event.*; public class Calculator { private Frame f; private Panel p; private Label lab; private Button b1,b2,b3,b4,b5,b6,b7,b8,b9,b0,bplus,bsama,bminus,bkali,bbagi; public Calculator() { f = new Frame("Calculator"); p = new Panel(); lab = new Label(); b1 = new Button("1"); b2 = new Button("2"); b3 = new Button("3"); b4 = new Button("4"); b5 = new Button("5"); b6 = new Button("6"); b7 = new Button("7"); b8 = new Button("8"); b9 = new Button("9"); b0 = new Button("0"); bplus = new Button("+"); bsama = new Button("="); bminus = new Button("-"); bkali = new Button("*"); bbagi = new Button("/"); public void launchframe() { f.add(lab, BorderLayout.NORTH); p = new Panel(new GridLayout(5, 3)); p.add(b1); p.add(b2); p.add(b3); p.add(b4); p.add(b5); p.add(b6); p.add(b7); p.add(b8); p.add(b9); p.add(b0); p.add(bplus); p.add(bsama); p.add(bminus); p.add(bkali); p.add(bbagi); f.add(p, BorderLayout.CENTER); f.pack(); f.addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); f.setvisible(true); public static void main(string[] args) { Calculator guiwindow = new Calculator(); guiwindow.launchframe();

20 Contoh-contoh (2) //file : ATMClient.java //note : minus bank account import java.io.*; import java.awt.*; public class ATMClient { public static void main(string[] args) { // Run the ATM GUI ATMClient client = new ATMClient(); client.launchframe(); // PLACE YOUR GUI CODE HERE // GUI component instance variables private Frame frame; private Panel plefthalf; private Panel prighthalf; private TextField entryfield; private TextField messagefield; private TextArea outputarea; public ATMClient() { frame = new Frame("ATM Bank Miing"); initializeframecomponents(); public void launchframe() { frame.pack(); frame.setresizable(false); frame.setvisible(true); private void initializeframecomponents() { initlefthalf(); initrighthalf(); private void initlefthalf() { plefthalf = new Panel(); plefthalf.setlayout(new GridLayout(2, 1)); inittopleft(); initbottomleft(); frame.add(plefthalf, BorderLayout.WEST); private void inittopleft() { Panel topleftpanel = new Panel(); topleftpanel.setlayout(new GridLayout(3, 1)); Button[] menubuttons = new Button[] {new Button("Display account balance"), new Button("Make a deposit"), new Button("Make a withdrawal"); for (int i=0; i<3; i++) { topleftpanel.add(menubuttons[i]); plefthalf.add(topleftpanel); private void initbottomleft() { // Initialize entry text field and keypad grid panel Panel entrykeypadpanel = new Panel(); entrykeypadpanel.setlayout(new BorderLayout()); // Create and add entry text field entryfield = new TextField(10); entrykeypadpanel.add(entryfield, BorderLayout.NORTH); // Create keypad grid and buttons Panel keypadgrid = new Panel(); keypadgrid.setlayout(new GridLayout(4, 3)); Button[] keypadbuttons = new Button[] {new Button("1"), new Button("2"), new Button("3"), new Button("4"), new Button("5"), new Button("6"), new Button("7"), new Button("8"), new Button("9"), new Button("0"), new Button(""), new Button("ENTER"); for (int i=0; i<12; i++) { keypadgrid.add(keypadbuttons[i]); entrykeypadpanel.add(keypadgrid, BorderLayout.SOUTH); // Add entry/keypad panel to left-half panel plefthalf.add(entrykeypadpanel); private void initrighthalf() { prighthalf = new Panel(); prighthalf.setlayout(new BorderLayout()); outputarea = new TextArea(10, 75); prighthalf.add(outputarea, BorderLayout.CENTER); messagefield = new TextField(75); prighthalf.add(messagefield, BorderLayout.SOUTH); prighthalf.setenabled(false); frame.add(prighthalf, BorderLayout.EAST);

21 Contoh-contoh (3) Apa yang bisa dilakukan dengan menggunakan Swing? Semua model GUI yg bisa dilakukan dalam bahasa pemrograman lain. Contoh : C:\Program Files\Java\jdk1.5.0_06\demo\jfc\SwingSet2\SwingSet2.jar C:\Program Files\Java\jdk1.5.0_05\demo\jfc\Java2D\Java2Demo.jar