Pengantar GUI:
Frames, Simple Components, dan
Layouts
minggu 12
Objectives (Sasaran)
•
•
•
•
•
•
•
Untuk mengenal komponen GUI sederhana
Untuk menjelaskan hierarki Java GUI API
Untuk membuat tampilan bagi user menggunakan
frames, panels, dan komponen GUI sederhana
Untuk memahami aturan penggunaan layout managers
Untuk menggunakan FlowLayout, GridLayout, dan
BorderLayout managers dalam mengatur layout
components di dalam container
Untuk mengatur warna (colors) dan tampilan (font)
menggunakan class Color dan Font
Untuk menggunakan JPanel di subcontainers
2
Elemen-Elemen Program GUI
Programming

Components



Layouts
 Mengatur posisi components di dalam
container
Events


Object visual yang muncul ke screen
Merespon aksi yang dilakukan user
Graphics

Lines, shapes, colors, fonts, etc.
Semuanya terenkapsulasi di Java Classes dan Packages
Components

Dua kategori dari Java Component classes:

AWT – Abstract Windows Toolkit (java.awt package)
 Versi awal dari komponen GUI



Bergantung pada “peer architecture”… tampilan dilakukan oleh
platform OS dimana aplikasi / aplet dijalankan
Bersifat “heavy-weight”
Swing
 Versi yang lebih baru


(javax.swing package)
Bukan “peer architecture”…components menampilkan secara
independen, tidak tergantug OS
Bersifat “lightweight”
The textbook focuses primarily on Swing classes
Swing vs. AWT
So
why do the GUI component classes have a prefix J? Instead of JButton,
why not name it simply Button? In fact, there is a class already named Button
in the java.awt package.
When
Java was introduced, the GUI classes were bundled in a library known
as the Abstract Windows Toolkit (AWT). For every platform on which Java runs,
the AWT components are automatically mapped to the platform-specific
components through their respective agents, known as peers. AWT is fine for
developing simple graphical user interfaces, but not for developing
comprehensive GUI projects. Besides, AWT is prone to platform-specific bugs
because its peer-based approach relies heavily on the underlying platform.
With the release of Java 2, the AWT user-interface components were replaced
by a more robust, versatile, and flexible library known as Swing components.
Swing components are painted directly on canvases using Java code, except
for components that are subclasses of java.awt.Window or java.awt.Panel,
which must be drawn using native GUI on a specific platform. Swing
components are less dependent on the target platform and use less of the
native GUI resource. For this reason, Swing components that don’t rely on
native GUI are referred to as lightweight components, and AWT components
are referred to as heavyweight components.
5
GUI Class Hierarchy (AWT)
GUI Class Hierarchy (Swing)
Container Classes
Container classes can contain
other GUI components.
GUI Helper Classes
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.
Swing GUI Components
Membuat GUI Objects


// Membuat button (tombol) dengan teks OK
JButton jbtOK = new JButton("OK");



// Membuat label dengan teks "Enter your name: "
JLabel jlblName = new JLabel("Enter your name: ");
Label

Text
field
Check
Box
Button


// Membuat text field dengan teks "Type Name Here"
JTextField jtfName = new JTextField("Type Name Here");



// Membuat check box dengan teks bold
JCheckBox jchkBold = new JCheckBox("Bold");



// Membuat radio button dengan teks red
JRadioButton jrbRed = new JRadioButton("Red");




// Membuat combo box dengan pilihan red, green, and blue
JComboBox jcboColor = new JComboBox(new String[]{"Red",
"Green", "Blue"});
Combo
Box
Radio
Button
Frames

Frame adalah window yang
independen dan merupakan
window terluar.

Frame menjadi dasar untuk
meletakkan komponen lain di
aplikasi GUI

Class Frame bisa digunakan
untuk membuat windows
Listing 12.1 p404 Frame
Membuat
Penggunaan setiap jenis class
Swing memerlukan import
package javax.swing
Instansiasi object swing
bertipe Frame
Memanggil method-method di JFrame untuk mengatur tampilan
dan tingkah laku JFrame
Listing 12.1 p404 Frame
Membuat
Mengatur lebar dan tinggi frame dalam ukuran pixels
Listing 12.1 p404 Frame
Membuat
Mengatur frame agar terletak di tengah screen ketika ditampilkan
Listing 12.1 p404 Frame
Membuat
Ketika user menutup window, aplikasi akan dihentikan
Listing 12.1 p404 Frame
Membuat
Baris ini digunakan untuk menampilkan frame di screen
Ini adalah
bagaimana frame
akan terlihat.
Perhatikan title
bar, content area,
minimize,
maximize/restore,
dan close icons.
Caption di title bar
ditentukan oleh
argumen di
constructor
Frames dengan Components




Frame adalah container. Oleh karena itu frame
dapat memiliki components (seperti buttons,
text fields, etc.)
Components ditambahkan ke content pane dari
frame
Content pane adalah area berwarna abu-abu di
window Frame
Cara sederhana untuk menggabarkan konsep
container adalah:

JFrame memiliki:
1. Menu bar
2. Content pane
Gambaran konsep Frame
Containment
From: http://java.sun.com/docs/books/tutorial/uiswing/components/toplevel.html
Actually, there’s more to it than this, but this picture will suffice for now.
Menambahkan Komponen ke
Frame
Title bar
// Menambahkan button ke frame
frame.getContentPane().add(
new JButton("OK"));
Content pane
21
Delegasi Content Pane di JDK
1.5
Title bar
Content pane
// Menambahkan button ke frame
frame.getContentPane().add(
new JButton("OK"));
// Menambahkan button ke frame
frame.add(
new JButton("OK"));
22
Menambahkan Komponen ke
Frame (Kode Program)
Class JFrame
24
Layout Managers




Mengatur peletakan components di container.
Ini merupakan alternatif untuk mengatur letak
componen secara hardcoding dengan presisi
pixel.
Keuntungan: resizing container (frame) tidak
akan mengganggu tampilan components
Layout managers yang sering digunakan:

FlowLayout, GridLayout, BorderLayout, CardLayout,
dan GridBagLayout
Hierarki Layout Manager
LayoutManager adalah interface. Semua class layout implement interface ini
FlowLayout




Meletakkan components secara berurutan dari kiri ke kanan
berdasarkan urutan penambahan components bersangkutan
Components secara otomatis akan menempati baris baru bila
lebar container tidak mencyukupi untuk menampung semua
components dalam satu baris
Secara default digunakan oleh applets dan panels, tapi tidak
oleh frames
Pilihan:


left, center (ini adalah default), or right
Typical syntax: dalam constructor class Frame
 setLayout(new FlowLayout(FlowLayout.LEFT))
ATAU
 setLayout(new
FlowLayout(FlowLayout.LEFT,hgap,vgap))
Class Frame yang menggunakan FlowLayout layout manager
Class Frame yang menggunakan FlowLayout layout manager
Note: membuat subclass dari
JFrame
Class Frame yang menggunakan FlowLayout layout manager
Note: adalah umum untuk
membuat Frame dengan
menyertakan main
method.
Class Frame yang menggunakan FlowLayout layout manager
Swing components berada di java.swing package
Layout managers berada di java.awt package
1
2
Constructor akan melakukan hal berikut ini:
1) Mengatur layout manager untuk content pane di frame
2) Menambahkan components pada content pane di frame
Dalam kasus ini, layout yang digunakan adalah Flow, dan terdapat 6 komponen
Swing yang ditambahkan
Resizing frame menyebabkan
components pindah ke baris bawahnya.
GridLayout

Mengatur komponen dalam susunan baris dan kolom

Konstruktornya::

setLayout
 (new GridLayout(rows,columns))
ATAU
setLayout(new GridLayout(rows,columns,hgap,vgap))





Components akan ditambahkan secara terurut dari kiri ke kanan,
baris per baris
Ukuran components semuanya sama
Jika container di-resized, components juga berubah ukuran, dan
tetap di posisi yang sama
Class Frame yang menggunakan GridLayout layout manager
Setting layout manager
Menambahkan
components
Resizing frame menyebabkan
components berubah pula ukurannya,
namun grid pattern-nya tetap
BorderLayout


Mengatur components ke lima area: North, South, East, West, dan Center
Konstruktor:
 setLayout(new BorderLayout())



setLayout(new BorderLayout(hgap,vgap))
untuk setiap komponen:
 add (the_component, region)



ATAU
setting area yang diinginkan:
 BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST,
BorderLayout.NORTH, atau BorderLayout.CENTER
Tingkah laku: jika container di-resize, ukuran components juga berubah, namun
orientasi letaknya tetap.
NOTE: maksimum hanya ada lima components yang bisa ditambah dan ditampilkan,
masing-masing area satu component.
Class Frame yang menggunakan BorderLayout layout manager
Setting layout manager
Menambahkan components
ke area yang diinginkan
Resizing frame
menyebabkan
ukuran komponen
berubah, namun
tetap di area yang
sama
NOTE: area CENTER lebih luas dari area
lainnya
Menggunakan Panels sebagai
“Sub-Containers”




JPanel adalah component yang dapat berisi components
lainnya.
Sebagai containers, JPanels dapat memiliki layout
managers-nya sendiri.
Dengan ini, kita dapat menggabungkan layout dalam
frame yang sama dengan menambahkan panel ke frame
dan dengan menambahkan components ke panel.
Sehingga, seperti JFrames, kita dapat menggunakan
method berikut bersama JPanels:


add() – menambah components ke panel
setLayout() – untuk mengasosiasikan layout manager pada
panel
Contoh
ini menggunakan panels untuk
mengorganisasi components. Program
membuat tampilan user untuk oven
microwave.
Class Frame yang
mengandung panels
untuk mengorganisasi
components
Class Frame yang
mengandung panels
untuk mengorganisasi
components
Membuat panel dan
mengatur layout-nya
Class Frame yang
mengandung panels
untuk mengorganisasi
components
Menambahkan
components ke
panel
Class Frame yang
mengandung panels
untuk mengorganisasi
components
Membuat panel lain dan
mengatur layoutnya…perhatikan bahwa
pengaturan layout pada panel
dapat dilakukan melalu
constructor
Class Frame yang
mengandung panels
untuk mengorganisasi
components
Menambahkan components ke panel kedua
NOTE: panel p1 berada di dalam
panel p2!
Class Frame yang
mengandung panels
untuk mengorganisasi
components
Menambahkan panel dan button
ke content pane milik frame.
Note: layout manager standard
milik JFrame adalah Border,
sehingga jika tidak secara
eksplisit memanggil method
setLayout(), maka frame ini berlayout Border
Button di area CENTER
Panel p2 di area EAST
Frame memiliki BorderLayout manager
Text field di area NORTH
Panel p1 di area CENTER
Panel p2 memiliki BorderLayout manager
Panel p1 memiliki GridLayout manager,
empat baris dan tiga kolom