MODUL 3

PENGENALAN GUI (Graphical User Interface)

PENGENALAN GUI
Tanpa mempelajari tentang grapichal user interface (GUI) API, Anda masih tetap bisa
membuat suatu program. Tetapi, program Anda akan kelihatan tidak menarik dan tidak
nyaman digunakan bagi para user. Memiliki GUI yang baik dapat memberi efek pada
penggunaan aplikasi. Java menyediakan banyak tool seperti Abstract Windowing Toolkit dan
Swing untuk mengembangkan aplikasi GUI yang interaktif.
AWT dan Swing menyediakan komponen GUI yang dapat digunakan dalam membuat aplikasi
Java dan applet. Tidak seperti beberapa komponen AWT yang menggunakan native code,
keseluruhan Swing ditulis menggunakan bahasa pemrograman Java. Swing menyediakan
implementasi platformindependent dimana aplikasi yang dikembangkan dengan platform yang
berbeda dapat memiliki tampilan yang sama. Begitu juga dengan AWT menjamin tampilan look
and feel pada aplikasi yang dijalankan pada dua mesin yang berbeda menjadi terlihat sama.
Swing API dibangun dari beberapa API yang mengimplementasikan beberapa jenis bagian dari
AWT. Kesimpulannya, komponen AWT dapat digunakan bersama dengan komponen Swing.
Beberapa komponen AWT
Berikut ini adalah daftar dari kontrol AWT. Kontrol adalah komponen seperti
tombol atau textfield yang mengijinkan user untuk berinteraksi dengan aplikasi
GUI. Berikut ini semua subclass dari class Components
Label Button Choise

TextField CheckBox List

TextArea CheckBoxGroup ScrollBar

Berikut adalah contoh GUI dengan menggunakan fitur void objek() {
AWT (Abstract Windowing Toolkit): getContentPane().setLayout(null);
getContentPane().add(cb1);
import javax.swing.*;
getContentPane().add(txt);
import java.awt.*;
getContentPane().add(bt);
class cekbok extends JFrame { cb1.setBounds(30, 90, 150, 20);
txt.setBounds(30, 120, 150, 20);
Checkbox cb1 = new Checkbox("Cex Box"); bt.setBounds(30, 150, 150, 20);
TextField txt = new TextField("Text Field"); setVisible(true);
Button bt = new Button("Tombol/Button"); }
cekbok() {
public static void main(String[] args) {
super("PROGRAM GUIKU");
setLocation(200, 100); cekbok ZZ = new cekbok();
setSize(400, 350); ZZ.objek();
}
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
} }
Layout Manager
Posisi dan ukuran suatu komponen ditentukan oleh layout manager. Layout
manager mengatur tampilan dari komponen di dalam kontainer. Berikut ini
beberapa layout manager yang terdapat di dalam Java.
1.FlowLayout
2.BorderLayout
3.GridLayout Layout

manager dapat diatur menggunakan method setLayout dari class Container.

Method ini dapat ditulis sebagai berikut.

setLayout(LayoutManager mgr)
FlowLayout
Cara meletakkan komponen dari
FlowLayout Manager dimulai dari kiri ke
kanan dan dari atas ke bawah, dimulai
dari pojok kiri atas. Seperti pada saat
Anda mengetik menggunakan editor kata
pada umumnya. Berikut adalah contoh
penggunaan FlowLayout :
import java.awt.*;
class FlowLayoutDemo extends Frame {
public static void main(String args[]) {
FlowLayoutDemo fld = new FlowLayoutDemo();
fld.setLayout(new FlowLayout());
fld.add(new Button("ONE"));
fld.add(new Button("TWO"));
fld.add(new Button("THREE"));
fld.setSize(100, 100);
fld.setVisible(true);
}
}
BorderLayout
BorderLayout membagi kontainer menjadi lima
bagian diantaranya utara, selatan, timur, barat,
dan tengah. Setiap komponen dimasukkan ke
dalam region yang spesifik. Region utara dan
selatan membentuk jalur horizontal sedangkan
region timur dan barat membentuk jalur
vertikal. Dan region tengah berada pada
perpotongan jalur horizontal dan vertikal.
Tampilan ini adalah bersifat default untuk
object Window, termasuk object dari subclass
Window yaitu tipe Frame dan Dialog. Berikut
adalah contoh penggunaan BorderLayout :
import java.awt.*;
class BorderLayoutDemo extends Frame {
public static void main(String args[]) {
BorderLayoutDemo bld = new BorderLayoutDemo();
bld.setLayout(new BorderLayout(10, 10)); //may remove
bld.add(new Button("NORTH"), BorderLayout.NORTH);
bld.add(new Button("SOUTH"), BorderLayout.SOUTH);
bld.add(new Button("EAST"), BorderLayout.EAST);
bld.add(new Button("WEST"), BorderLayout.WEST);
bld.add(new Button("CENTER"), BorderLayout.CENTER);
bld.setSize(200, 200);
bld.setVisible(true);
}
}
Null Layout/Tanpa Layout
Jika Anda memilih untuk tidak menggunakan layout manager, Anda dapat mengisi
null sebagai argumen untuk method ini. Tetapi selanjutnya, Anda akan mengatur
posisi elemen secara manual dengan menggunakan method setBounds dari class
Components. setBounds(int x, int y, int width, int height) Method ini mengatur
posisi berdasarkan pada argumen x dan y, dan ukuran berdasarkan argumen width
dan height. Berikut adalah contoh penggunaan NullLayout :
import javax.swing.*; void objek() {
import java.awt.*; getContentPane().setLayout(null);
getContentPane().add(cb1);
class NullLayoutDemo extends JFrame { getContentPane().add(cb2);
getContentPane().add(cb3);
cb1.setBounds(30, 90, 150, 20);
Checkbox cb1 = new Checkbox("Pilih A");
cb2.setBounds(30, 120, 150, 20);
Checkbox cb2 = new Checkbox("Pilih B");
cb3.setBounds(30, 150, 150, 20);
Checkbox cb3 = new Checkbox("Pilih C");
setVisible(true);
}
NullLayoutDemo() {
super("PROGRAM GUIKU"); public static void main(String args[]) {
setLocation(200, 100); NullLayoutDemo ZZ = new NullLayoutDemo();
setSize(400, 350); ZZ.objek();
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }
} }
Komponen Swing
Seperti pada package AWT, package dari Swing menyediakan banyak class untuk membuat
aplikasi GUI. Package tersebut dapat ditemukan di javax.swing. Perbedaan utama antara
keduanya adalah komponen Swing ditulis menyeluruh menggunakan Java. Kesimpulannya,
program GUI ditulis menggunakan banyak class dari package Swing yang mempunyai
tampilan look and feel yang sama meski dijalankan pada paltform yang berbeda. Lebih dari
itu, Swing menyediakan komponen yang lebih menarik seperti color chooser dan option pane.
Nama dari komponen GUI milik Swing hampir sama persis dengan komponen GUI milik
AWT. Perbedaan jelas terdapat pada penamaan komponen. Pada dasarnya, nama komponen
Swing sama dengan nama komponen AWT tetapi dengan tambahan huruf J pada prefixnya.
Sebagai contoh, satu komponen dalam AWT adalah button class. Sedangkan pada Swing,
nama komponen tersebut menjadi Jbutton class. Berikut adalah daftar dari komponen Swing.
Berikut ini contoh sederhana menggunakan komonen swing : void tampilan() {
getContentPane().add(nama);
import javax.swing.*; nama.append("nama kamu siapa");
import java.awt.*; getContentPane().add(bt);
import java.awt.event.*; getContentPane().add(txnama);
txnama.setBackground(Color.LIGHT_GRAY);
public class fil extends JFrame {
bt.addActionListener(new ActionListener() {
JTextArea nama = new JTextArea(10, 10); public void actionPerformed(ActionEvent e)
JButton bt = new JButton("Copy"); {
JTextArea txnama = new JTextArea(10, 10); txnama.append(nama.getSelectedText());
}
fil() { });
super("INI ADALAH FORM"); getContentPane().setLayout(new
setLocation(200, 300); FlowLayout());
setSize(400, 300); setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }
setVisible(true);
} public static void main(String args[]) {
fil f = new fil();
f.tampilan();
}
}
Perlu diperhatikan pada package java.awt masih saja diimpor karena layout
manager yang digunakan terdapat pada package tersebut. Juga, memberi judul
pada frame dan mengepack komponen di dalam frame dapat juga dilakukan untuk
frame AWT.
Membuat Menu Sederhana
JMenu adalah komponen yang berupa kumpulan fungsi yang berhubungan dengan
fitur-fitur yang terdapat pada suatu Aplikasi. Dibagi atas beberapa yaitu:
1. JMenuBar adalah menu yang didalamnya yang bersifat klik down atau apabila
menu tersebut di klik maka akan muncul pilihan menu.
2. JMenu adalah komponen yang terdapat pada menuBar dimana ia merupakan
objek yang ada pada menubar.
3. JMenuItem adala menu yang berguna untuk menambah item (objek/pilihan)
menu pada menu.

Contoh Aplikasi Yang menggunakan menu DI dalamnya :

import javax.swing.*; void objek() {
import java.awt.*; getContentPane().add(mb, BorderLayout.NORTH);
mb.add(mn);
import javax.swing.table.*;
mn2.add(bt);
import java.awt.event.*;
mn.add(mn2);
import java.sql.*;
mn.add(mnt);
mn.add(unta);
class menunya extends JFrame {
mb.setBounds(10, 10, 100, 30);
setVisible(true);
JMenuBar mb = new JMenuBar(); }
JMenu mn = new JMenu("File");
JMenu mn2 = new JMenu("Open"); public static void main(String args[]) {
JRadioButton bt = new JRadioButton("buku"); menunya ZZ = new menunya();
JMenuItem mnt = new JMenuItem("Close"); ZZ.objek();
JMenuItem unta = new JMenuItem("Unta"); }
}
menunya() {
super("PROGRAM MENGHITUNG ZAKAT");
setLocation(200, 100);
setSize(400, 350);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
Menambahkan Warna
Untuk menambahkan warna pada komponenn windows yang kita buat kita perlu menambahkan statement yang
di dalam java di kenali sebagai penambah atribut warna. Contoh ;
“ getContentPane().setBackground(Color.GREEN); “ ini untuk memberikan warna pada frame yang kita buat.

“ bt.setBackground(Color.RED); “ Untuk memberikan warna pada background komponen komponen lain selain
frame dimana bt adalah nama dari pembentukan objek yang dibuat berdasarkan komponen tersebut.

“ bt.setForeground(Color.GREEN); “ Untuk memberikan warna pada tulisan yang ada pada komponen tersebut.
Penambahan warna berdasarkan statement diatas hanya berlaku untuk warna sederhana.

“ bt.setForeground(new java.awt.Color(0, 0, 153)); “

“ bt.setBackground(new java.awt.Color(1,9,123)); “

Adalah untuk memberikan warna yang dapat kita sesuaikan tingkat warnanya berdasarkan warna R,G,B.
Contoh Menambahkan Atribut Warna Dari Komponen Yang Telah Kita Buat :
import java.awt.*; void tampilan() {
getContentPane().add(nama);
import java.awt.event.*;
nama.append("nama kamu siapa");
import javax.swing.*; getContentPane().add(bt);
bt.setForeground(new java.awt.Color(0, 0, 153));
public class warna extends JFrame{ bt.setBackground(new java.awt.Color(1, 9, 13));
bt.setBackground(Color.GRAY);
JTextArea nama = new JTextArea(10, 10); bt.setForeground(Color.GREEN);
JButton bt = new JButton("Copy"); getContentPane().add(txnama);
txnama.setBackground(Color.LIGHT_GRAY);
JTextArea txnama = new JTextArea(10, 10);
bt.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
warna() { txnama.append(nama.getSelectedText());
super("INI ADALAH FORM"); }
setLocation(200, 300); });
setSize(400, 300); getContentPane().setLayout(new FlowLayout());
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true);
setVisible(true); }
}
public static void main(String args[]) {
warna f = new warna();
f.tampilan();
}
}
 import javax.swing.*;
import java.awt.*;

Menambahkan Gambar import java.awt.event.*;

public class gambar extends JFrame {

Untuk menambahkan gambar pada komponen JLabel lb = new JLabel(new ImageIcon("zom.jpg"));

windows kita bisa menggunakan label yang gambar() {

super("INI ADALAH FORM");
didalamnya kita selipkan statement setLocation(200, 300);
(“new ImageIcon("e.jpg") ”) setSize(300, 400);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
untuk memanggil gambar tersebut. Syarat untuk setVisible(true);
menambahkan sebuah gambar yang ditampilkan }

kedalam frame, gambar tersebut harus berada void tampilan() {

didalam folder yang satu dengan letak source getContentPane().add(lb);
getContentPane().setLayout(new FlowLayout());
atau kelas tersebut diletakkan (disimpan). setVisible(true);
}

Contoh Menampilkan gambar ke dalam aplikasi public static void main(String args[]) {
gambar f = new gambar();
kita dengan menggunakan JLabel : f.tampilan();
}
}
TERIMAKASIH