GUI Application

Tutor: Nova Eka Diana

Graphical User Interface (GUI)

• GUI: aplikasi dengan fitur antar-muka dalam bentuk grafis danlebih interaktif

Simple GUI: Input/Output

• ConsoleScanner s = new Scanner(System.in);

System.out.println("masukkan nama anda: ");

String nama = s.nextLine();

• Dialog boxesSwing.JOptionPane;

String nama = JOptionPane.showInputDialog("Masukkan nama anda: ");

JOptionPane.showMessageDialog(null, "Nama anda: " + nama, "Nama", JOptionPane.PLAIN_MESSAGE);

JOptionPane

• Input Dialogs: showInputDialog– hanya menerima string sebagai input

– Scanner bisa menerima input dengan tipe apapun

String number = JOptionPane.showInputDialog("angka: ");

int numb = Integer.parseInt(number);

• Message dialogs: showMessageDialog– Argumen: (parentComponent, message, title, tipe message dialog)

image: Java How To Program 9th Ed, Deitel

JOptionPane: Latihan

• Masukkan angka pertama dan kedua

• Tampilkan hasil perkalian antara kedua angka tersebut

Tipe GUI Elemen

• Component: elemen entitas dari GUI, seperti Button, Label, dan TextField

• Container: digunakan untuk menghandle komponen-komponen dalam layout tertentu

* images: http://www3.ntu.edu.sg/home/ehchua/programming/java/J4a_GUI.html

Swing Components

* images: http://www3.ntu.edu.sg/home/ehchua/programming/java/J4a_GUI.html

Java API untuk GUI

• Swing (javax.swing.*)– JComponent: JTextField, JLabel, JButton, JChechBox, JComboBox, Jlist,

JPanel

– Container: Jframe, JApplet

• Event Handling (java.awt.event) – Event classes: ActionEvent, MouseEvent, KeyEvent, WindowEvent

– Event listener interface: ActionListener, MouseListener, KeyListener, WindowListener

– Event listener adapter: MouseAdapter, KeyAdapter, WindowAdapter

GUI: Frame

MainGUI extends JFrame {

public MainGUI() {

super("GUI COMPONENT");

setLayout(new FlowLayout()); // import java.awt.FlowLayout;

setSize(300, 200);

setVisible(true);

}

static void main(String[] args)

{

new MainGUI();

}

}

GUI: Component

• Import javax.swing.JLabel;

• Import javax.swing.JTextField;

• Import javax.swing.JButton;

• Jlabel label = new JLabel(“nama”);

• JTextField textfield = new JTextField();

• JButton button = new JButton(“Button”);

• add(label);

• add(textfield);

• add(button);

GUI: Content-pane & JPanel

• JComponent tidak boleh langsung ditambahkan ke top-level container (Jframe, Japplet) karena merupakan lightweight components’

• Harus ditambahkan ke content-pane dari top-level container

• Content-pane adalah container yang bisa diset layout-nya, dandigunakan untuk mengelompokkan component.

• Ada dua cara:– Get content-pane getContentPane() dan menambahkan komponen

diatasnya (default layout : BORDER_LAYOUT)

– Set content-pane ke JPanel

GUI: Content-pane & JPanel

• getContentPane()Container c = getContentPane();//cp.setLayout(new FlowLayout());cp.add(label);cp.add(textfield);cp.add(button);}

• JPanelJPanel p = new JPanel(new FlowLayout());p.add(label);p.add(textfield);p.add(button);this.getContentPane().add(panel);//this.add(panel);

GUI: Event Handling (java.awt.event)

• Buat class event handler yang mengimplementasikan event-listener interface yang sesuai

• Tambahkan event-handler ke tiap komponen dengan menggunakanlistener yang sesuai, misal addActionListener(handler)

• Event-handler invocation:– actionEvents actionListeners

– mouseEventsmouseListeners, mouseMotionListeners

– keyEvents keyListeners

Action Event

Event Handler implements Action Listener

GUI: Event Handling

• java.awt.event.ActionEvent;• java.awt.event.ActionListener;• textfield.addActionListener(new Handler());• button.addActionListener(new Handler());

• private class Handler implements ActionListener {public void actionPerfomed(ActionEvent e) {if(e.getSource() == textfield)

JOptionPane.showMessageDialog(null, e.getActionCommand());if(e.getSource() == button)

JOptionPane.showMessageDialog(null, “SUBMIT Button diklik”);}

• }

Latihan

• getText();

GUI: ComboBox

• Import java.awt.event.ItemEvent;

• Import java.awt.event.ItemListener;

• String b*+ = ,“a”, “b”-;

• JComboBox box = new JComboBox(b);

• box.addItemListener(new ComboHandler());• Private class ComboHandler implements ItemListener {

public void itemStateChanged(ItemEvent e) {

if(e.getStateChange() == ItemEvent.SELECTED)

huruf = (String)box.getSelectedItem();

}

• }

Latihan

JCheckBox

javax.swing.JCheckBox;JCheckBox checkBox = new JCheckBox(“BOLD”);checkBox.addItemListener(new Handler());

class Handler implements ItemListener {public void itemStateChanged(ItemEvent e) {Font font = null;

if(checkBox.isSelected()) {font = new Font(“Serif”, Font.BOLD, 14);

}

textField.setFont(font);}}

JRadioButton

• javax.swing.JRadioButton;

• JRadioButton radio = new JRadioButton(String name, boolselected);

• ButtonGroup group = new ButtonGroup();

• panel.add(radio);

• group.add(radio);

• radio.addItemListener(new Handler());

Layout Managers

• FlowLayout– Default layout untuk Jpanel– Menambahkan komponen dari kiri ke kanan– Alignment bisa diatur untuk kiri, tengah, kanan (FlowLayout.LEFT,

FlowLayout.CENTER, FlowLayout.RIGHT)– new FlowLayout()– layout.setAlignment(FlowLayout.LEFT);

• BorderLayout– Menyusun komponen dalam 5 area: NORTH, SOUTH, EAST, WEST, dan

CENTER.NORTH– new BorderLayout(jarak horizontal, jarak vertikal);

• GridLayout– Membagi kontainer ke dalam grid dalam kolom dan baris– Tiap komponen mempunyai lebar dan tinggi yang sama– new GridLayout(jumlah baris, jumlah kolom)

Referensi

• Java How To Program 9th Ed, Deitel Deitel, Prentice Hall, 2012

• Java Programming Tutorial: Programming Graphical User Interface (GUI), http://www3.ntu.edu.sg/home/ehchua/programming/java/J4a_GUI.html, February 2013