GUI PROGRAMMING
Pengenalan graphical user interface
Konsep GUI Programming
 Pemrograman konvensional
Urutan operasi ditentukan oleh program
 Event drive programming
urutan operasi ditentukan oleh interaksi
user dengan antarmuka aplikasi
02312 Indledende Datalogi
kelk & sh 2004
Java GUI class-libraries
 AWT (Abstract Windowing Toolkit)
 Lebih awal – mempunyai ”Look & Feel” sesuai
platform
(Windows, Linux, Apple...)
 Swing
 Baru – L&F sama lintas platforms
 L&F Programmable
 Class names sama dengan AWT dgn tambahan
J didepannya
JFrame
 JFrame merupakan object yang
merepresentasikan window pada layar
 Merupakan container untuk meletakkan
semua interface seperti button,
checkbox, textfield dll
 Jframe dengan menu
bar dan 2 komponen /
widget pada mac os x
Membuat GUI
 Langkah membuat GUI
1. Membuat Frame (Jframe)
JFrame frame = new Jframe();
2. Membuat komponen (button, textfield dll)
JButton button = new Jbutton (“Click Me”);
3. Menambahkan komponen ke frame
frame.getContentPane().add(button);
4. Tampilkan (tentukan ukuran dan set visible)
frame.setSize(300,300);
frame.setVisible(true);
Import javax.swing.*;
Public class SimpleGui{
Public static void main (String[] args) {
JFrame frame = new JFrame();
JButton button = new JButton(“Click me”);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(button);
frame.setSize(300,300);
Frame.setVisible(true);
}
}
GUI Component
 Setiap komponen GUI didefinisikan dalam sebuah class
 Komponen GUI mempunyai konstruktor untuk membuat objek dari
komponen GUI tersebut
Contoh:
// Create a button with text OK
JButton jbtOK = new JButton("OK");
// Create a label with text "Enter your name: "
JLabel jlblName = new JLabel("Enter your name: ");
// Create a text field with text "Type Name Here"
JTextField jtfName = new JTextField("Type Name Here");
// Create a check box with text bold
JCheckBox jchkBold = new JCheckBox("Bold");
// Create a radio button with text red
JRadioButton jrbRed = new JRadioButton("Red");
// Create a combo box with choices red, green, and blue
JComboBox jcboColor = new JComboBox(new String[]{"Red", "Green", "Blue"});
Komponen umum GUI
Container
 GUI class dapat dikelompokkan dalam tiga bagian:
1 Container
merupakan komponen GUI yang digunakan untuk menampung
komponen GUI yang lain,mis:
Jframe – window utk menampung komponen GUI yg lain,
merupakan parent window
Jdialog – pop up window yg merupakan windows temporer
digunakan utk mengambil informasi dari user dan sebagai notifikasi
Japplet – window untuk menampung applet
Jpanel – windows untuk menampung komponen GUI, dapat
dinested dan digunakan utk menggambar grafik
GUI Helper
2. Helper class digunakan untuk menentukan properti suatu komponen GUI
seperti warna,font,dimensi dsb
Graphic – abstrak class yg digunakan untuk menggambar garis,teks,dan
bentuk bentuk geometri
Color – menentukan properti warna dari komponen GUI
Font – menyediakan model huruf untuk teks dan grafik,mis sans-serif,arial
dll
FontMetrics – abstrak class yang digunakan untuk mengatur properti font
Dimension – mengatur dimensi dari komponen GUI, mis : lebar dan panjang
komponen
LayoutManager – mengatur bagaimana suatu komponen ditampilkan dalam
container
Component
3. Component merupakan superclass dari semua user interface
class
 JComponent adalah abstrack class yang merupakan
superclass dari komponen swing mis,
JButton,JRadioButton,JTextField,dsb
JButton jbtOK = new JButton("OK");
System.out.println(jbtOK instanceof JButton);
System.out.println(jbtOK instanceof AbstractButton);
System.out.println(jbtOK instanceof JComponent);
System.out.println(jbtOK instanceof Container);
System.out.println(jbtOK instanceof Component);
System.out.println(jbtOK instanceof Object);
13
Container Classes
Dimension
Font
FontMetrics
Component
Graphics
Object Color
Container
Panel Applet
Frame
Dialog
Window
JComponent
JApplet
JFrame
JDialog
Swing Components
in the javax.swing package
Lightweight
Heavyweight
Classes in the java.awt
package
1
LayoutManager
*
JPanel
Container classes can contain
other GUI components.
14
Dimension
Font
FontMetrics
Component
Graphics
Object Color
Container
Panel Applet
Frame
Dialog
Window
JComponent
JApplet
JFrame
JDialog
Swing Components
in the javax.swing package
Lightweight
Heavyweight
Classes in the java.awt
package
1
LayoutManager
*
JPanel
The helper classes are not
subclasses of Component. They
are used to describe the
properties of GUI components
such as graphics context, colors,
fonts, and dimension.
GUI Helper Classes
15
Swing GUI Components
JMenuItem
JCheckBoxMenuItem
AbstractButton
JComponent
JMenu
JRadioButtonMenuItem
JToggleButton JCheckBox
JRadioButton
JComboBox
JInternalFrame
JLayeredPane
JList
JMenuBar
JOptionPane
JPopupMenu
JProgressBar
JFileChooser
JScrollBar
JScrollPane
JSeparator
JSplitPane
JSlider
JTabbedPane
JTable JTableHeader
JTextField
JTextComponent
JTextArea
JToolBar JToolTip
JTree
JRootPane
JPanel
JPasswordField
JColorChooser
JLabel
JEditorPane
JSpinner
JButton
Klasifikasi komponen Swing
 Top-Level Containers
 Komponen kontainer dengan level hirarki teratas
 General-Purpose Containers
 Intermediate containers yang dapat dimanfaatkan untuk berbagai macam
keperluan
 Special-Purpose Containers
 Intermediate containers dengan peranan spesifik pada UI
 Basic Controls
 Komponen atomik yang tujuan utamanya membaca input dari user;
 Umumnya mempunyai bentuk dan kegunaan yang sederhana
 Uneditable Information Displays
 Atomic components yang tujuannya sebagai penampil informasi bagi user
 Editable Displays of Formatted Information
 Atomic components yang menampilkan informasi terformat yang bisa diedit
apabila diperlukan
top-level containers
Frame ( and JFrame)
Dialog ( and JDialog)
Applet (and JApplet)
General-Purpose Containers
Panel ( and JPanel)
JToolBar
JScrollPane
JTabbedPane
JSplitPane
Special-Purpose Containers
JLayeredPane
JInternalFrames
Root Pane
Basic Controls
JCheckBox
JRadioButton
JButton
JMenu
JMenuItem
List ( and JList)
Basic Controls
Choice ( and JComboBox) JTextField
JSlider
Uneditable Information Displays
Label ( and JLabel)
JProgressBar
JToolTip
Editable Displays of Formatted Information
JTree JText JTable
FileDialog ( and JFileChooser)
JColorChooser
Bahan Lanjut
 GUI Programming

01-GUI Programming;s Pengenalan GUI.pptx

  • 1.
  • 2.
    Konsep GUI Programming Pemrograman konvensional Urutan operasi ditentukan oleh program  Event drive programming urutan operasi ditentukan oleh interaksi user dengan antarmuka aplikasi
  • 3.
    02312 Indledende Datalogi kelk& sh 2004 Java GUI class-libraries  AWT (Abstract Windowing Toolkit)  Lebih awal – mempunyai ”Look & Feel” sesuai platform (Windows, Linux, Apple...)  Swing  Baru – L&F sama lintas platforms  L&F Programmable  Class names sama dengan AWT dgn tambahan J didepannya
  • 4.
    JFrame  JFrame merupakanobject yang merepresentasikan window pada layar  Merupakan container untuk meletakkan semua interface seperti button, checkbox, textfield dll
  • 5.
     Jframe denganmenu bar dan 2 komponen / widget pada mac os x
  • 6.
    Membuat GUI  Langkahmembuat GUI 1. Membuat Frame (Jframe) JFrame frame = new Jframe(); 2. Membuat komponen (button, textfield dll) JButton button = new Jbutton (“Click Me”); 3. Menambahkan komponen ke frame frame.getContentPane().add(button); 4. Tampilkan (tentukan ukuran dan set visible) frame.setSize(300,300); frame.setVisible(true);
  • 7.
    Import javax.swing.*; Public classSimpleGui{ Public static void main (String[] args) { JFrame frame = new JFrame(); JButton button = new JButton(“Click me”); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.getContentPane().add(button); frame.setSize(300,300); Frame.setVisible(true); } }
  • 8.
    GUI Component  Setiapkomponen GUI didefinisikan dalam sebuah class  Komponen GUI mempunyai konstruktor untuk membuat objek dari komponen GUI tersebut Contoh: // Create a button with text OK JButton jbtOK = new JButton("OK"); // Create a label with text "Enter your name: " JLabel jlblName = new JLabel("Enter your name: "); // Create a text field with text "Type Name Here" JTextField jtfName = new JTextField("Type Name Here"); // Create a check box with text bold JCheckBox jchkBold = new JCheckBox("Bold"); // Create a radio button with text red JRadioButton jrbRed = new JRadioButton("Red"); // Create a combo box with choices red, green, and blue JComboBox jcboColor = new JComboBox(new String[]{"Red", "Green", "Blue"});
  • 9.
  • 10.
    Container  GUI classdapat dikelompokkan dalam tiga bagian: 1 Container merupakan komponen GUI yang digunakan untuk menampung komponen GUI yang lain,mis: Jframe – window utk menampung komponen GUI yg lain, merupakan parent window Jdialog – pop up window yg merupakan windows temporer digunakan utk mengambil informasi dari user dan sebagai notifikasi Japplet – window untuk menampung applet Jpanel – windows untuk menampung komponen GUI, dapat dinested dan digunakan utk menggambar grafik
  • 11.
    GUI Helper 2. Helperclass digunakan untuk menentukan properti suatu komponen GUI seperti warna,font,dimensi dsb Graphic – abstrak class yg digunakan untuk menggambar garis,teks,dan bentuk bentuk geometri Color – menentukan properti warna dari komponen GUI Font – menyediakan model huruf untuk teks dan grafik,mis sans-serif,arial dll FontMetrics – abstrak class yang digunakan untuk mengatur properti font Dimension – mengatur dimensi dari komponen GUI, mis : lebar dan panjang komponen LayoutManager – mengatur bagaimana suatu komponen ditampilkan dalam container
  • 12.
    Component 3. Component merupakansuperclass dari semua user interface class  JComponent adalah abstrack class yang merupakan superclass dari komponen swing mis, JButton,JRadioButton,JTextField,dsb JButton jbtOK = new JButton("OK"); System.out.println(jbtOK instanceof JButton); System.out.println(jbtOK instanceof AbstractButton); System.out.println(jbtOK instanceof JComponent); System.out.println(jbtOK instanceof Container); System.out.println(jbtOK instanceof Component); System.out.println(jbtOK instanceof Object);
  • 13.
    13 Container Classes Dimension Font FontMetrics Component Graphics Object Color Container PanelApplet Frame Dialog Window JComponent JApplet JFrame JDialog Swing Components in the javax.swing package Lightweight Heavyweight Classes in the java.awt package 1 LayoutManager * JPanel Container classes can contain other GUI components.
  • 14.
    14 Dimension Font FontMetrics Component Graphics Object Color Container Panel Applet Frame Dialog Window JComponent JApplet JFrame JDialog SwingComponents in the javax.swing package Lightweight Heavyweight Classes in the java.awt package 1 LayoutManager * JPanel The helper classes are not subclasses of Component. They are used to describe the properties of GUI components such as graphics context, colors, fonts, and dimension. GUI Helper Classes
  • 15.
    15 Swing GUI Components JMenuItem JCheckBoxMenuItem AbstractButton JComponent JMenu JRadioButtonMenuItem JToggleButtonJCheckBox JRadioButton JComboBox JInternalFrame JLayeredPane JList JMenuBar JOptionPane JPopupMenu JProgressBar JFileChooser JScrollBar JScrollPane JSeparator JSplitPane JSlider JTabbedPane JTable JTableHeader JTextField JTextComponent JTextArea JToolBar JToolTip JTree JRootPane JPanel JPasswordField JColorChooser JLabel JEditorPane JSpinner JButton
  • 16.
    Klasifikasi komponen Swing Top-Level Containers  Komponen kontainer dengan level hirarki teratas  General-Purpose Containers  Intermediate containers yang dapat dimanfaatkan untuk berbagai macam keperluan  Special-Purpose Containers  Intermediate containers dengan peranan spesifik pada UI  Basic Controls  Komponen atomik yang tujuan utamanya membaca input dari user;  Umumnya mempunyai bentuk dan kegunaan yang sederhana  Uneditable Information Displays  Atomic components yang tujuannya sebagai penampil informasi bagi user  Editable Displays of Formatted Information  Atomic components yang menampilkan informasi terformat yang bisa diedit apabila diperlukan
  • 17.
    top-level containers Frame (and JFrame) Dialog ( and JDialog) Applet (and JApplet)
  • 18.
    General-Purpose Containers Panel (and JPanel) JToolBar JScrollPane JTabbedPane JSplitPane
  • 19.
  • 20.
  • 21.
    Basic Controls Choice (and JComboBox) JTextField JSlider
  • 22.
    Uneditable Information Displays Label( and JLabel) JProgressBar JToolTip
  • 23.
    Editable Displays ofFormatted Information JTree JText JTable FileDialog ( and JFileChooser) JColorChooser
  • 24.