Membangun GUI
Membangun GUI
(dengan AWT & Swing)
(dengan AWT & Swing)
OOP Java
Materi yg akan dibahas :
Pendahuluan
Pendahuluan
Event
Event
-
-
driven Programming
driven Programming
AWT, Swing & SWT
AWT, Swing & SWT
Komponen
Komponen
-
-
komponen GUI
komponen GUI
Pendahuluan (1)
Pendahuluan (1)
Graphical User Interface (GUI)
Memberikan kemudahan kepada pengguna
Terdiri dari komponen-komponen GUI
Pengguna berinteraksi dengan komponen GUI
Pendahuluan (2)
Pendahuluan (2)
Macam
Macam
-
-
macam GUI di Java :
macam GUI di Java :
AWT (Abstract Window Toolkit)
AWT (Abstract Window Toolkit)
Swing (Lightweight, dibangun diatas AWT)
Swing (Lightweight, dibangun diatas AWT)
Pendahuluan (3)
Event
Event
-
-
driven Programming (1)
driven Programming (1)
Pemrograman di console :
Pemrograman di console :
Kontrol eksekusi program terpusat (user
Kontrol eksekusi program terpusat (user
harus mengikuti alur yg sudah diprogram)
harus mengikuti alur yg sudah diprogram)
Event
Event
-
-
driven Programming (2)
driven Programming (2)
Event
Event
-
-
driven programming :
driven programming :
User menentukan apa yg ingin dilakukannya
User menentukan apa yg ingin dilakukannya
Komponen2 menunggu aksi/trigger dari user
Komponen2 menunggu aksi/trigger dari user
Komponen menghasilkan (fire) event
Komponen menghasilkan (fire) event
Event ditangani oleh Listener yg sudah
Event ditangani oleh Listener yg sudah
didaftarkan (di registrasi)
didaftarkan (di registrasi)
Abstract Window Toolkit (1)
Abstract Window Toolkit (1)
package terdapat di java.awt
package terdapat di java.awt
Class
Class
Component
Component
Mempunyai method
Mempunyai method
paint
paint
untuk
untuk
menggambar
menggambar
Component
Component
pada layar
pada layar
Class
Class
Container
Container
Kumpulan dari komponen yang saling
Kumpulan dari komponen yang saling
berhubungan
berhubungan
Mempunyai method
Mempunyai method
add
add
untuk menambah
untuk menambah
komponen
Abstract Window Toolkit (2)
Abstract Window Toolkit (2)
Object Component Container
Object
Component
Container
Abstract Window Toolkit (3)
Abstract Window Toolkit (3)
Terdapat dua Container utama :
Terdapat dua Container utama :
Window : sebuah window bebas di layar yg
Window : sebuah window bebas di layar yg
tidak tergantung pada Container lain. Dua
tidak tergantung pada Container lain. Dua
tipe Window container :
tipe Window container :
Frame : window yg memiliki title & sudut yg
Frame : window yg memiliki title & sudut yg
dapat di resize
dapat di resize
Dialog : window yg tidak punya menu bar & tidak
Dialog : window yg tidak punya menu bar & tidak
dapat di resize
dapat di resize
Panel : harus berada didalam container lain,
Panel : harus berada didalam container lain,
mendefinisikan area yg dapat diisi komponen
mendefinisikan area yg dapat diisi komponen
lain
Komponen
Komponen
-
-
komponen (1)
komponen (1)
Komponen
Komponen
-
-
komponen GUI swing, diantaranya :
komponen GUI swing, diantaranya :
button
button
radio button
radio button
check box
check box
combo box
combo box
menu
menu
label
label
text field
text field
text pane
text pane
text area
text area
list
list
table
table
tree
tree
slider
slider
tool tip
tool tip
progress bar
progress bar
color chooser
color chooser
file chooser
file chooser
panel
panel
split pane
split pane
scroll pane
scroll pane
tabbed pane
tabbed pane
Komponen
Komponen
-
-
komponen (2)
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
-
-
komponen (3)
komponen (3)
import java.awt.*; import java.awt.event.*; public class FrameWithPanel {
private Frame f;
private Panel pan; //pan bertipe panel private Button bTest;
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); //add Panel to Frame 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();
} }
Layout Manager (1)
Layout Manager (1)
BorderLayout (default layout manager for
BorderLayout (default layout manager for
a window, dialog and frame)
a window, dialog and frame)
FlowLayout (default layout manager for a
FlowLayout (default layout manager for a
panel and applet)
panel and applet)
GridLayout (menyediakan fleksibilitas
GridLayout (menyediakan fleksibilitas
dalam menempatkan komponen)
dalam menempatkan komponen)
CardLayout
CardLayout
Layout Manager (2)
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)
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)
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)
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
-
-
contoh (1)
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();
} }
Contoh
Contoh
-
-
contoh (2)
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); }
