Membangun GUI (dengan AWT & Swing)
OOP Java
Materi yg akan dibahas :
Pendahuluan Event-driven Programming AWT, Swing & SWT Komponen-komponen GUI Layout manager
Pendahuluan (1) Graphical User Interface (GUI) Memberikan kemudahan kepada pengguna Terdiri dari komponen-komponen GUI
Pengguna berinteraksi dengan komponen GUI melalui mouse, keyboard, dll.
Pendahuluan (2) Macam-macam GUI di Java : AWT (Abstract Window Toolkit) Swing (Lightweight, dibangun diatas AWT) SWT (buatan IBM)
Pendahuluan (3)
Event-driven Programming (1) Pemrograman di console : Kontrol eksekusi program terpusat (user harus mengikuti alur yg sudah diprogram) Sequence, percabangan & pengulangan
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
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
Abstract Window Toolkit (2) Object Object
Component Component
Container
Container
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
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
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(); }
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);
public static void main(String[] args) { FrameWithPanel guiWindow = new FrameWithPanel("Frame dengan Panel"); guiWindow.launchFrame(); }
//add Panel to Frame
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
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(); }
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(); }
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(); }
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(); }
Contoh-contoh (1) import java.awt.*; import java.awt.event.*; public class Calculator { private private private private
Frame f; Panel p; Label lab; 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(); } }
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); }
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
