Download Materi

PERTEMUAN 2
PBOL
Dewi Kusumaningsih, M.Kom
Konsep GUI
• Konsep Pemrograman GUI
• Pada dasarnya pemrograman GUI, adalah pemrograman yang
mengandalkan kemampuan tampilan dalam bentuk grafik.
dimana program yang dibuat dapat memberikan kenikmatan
tersendiri dalam penggunaannya. Tidak lagi monoton, hitamputih, mode DOS dan lain sebagainya. Kalau kita lihat pada
gambar berikut, menjelaskan bahwa interaksi yang terjadi
antara user dengan program melalui sebuah tampilan yang
sudah berbentuk grafik.
Pertanyaan mendasar mengenai
penggunaan tampilan atau GUI dalam
program adalah seberapa penting hal itu
dilakukan.
Konsep GUI
• GUI → Graphical User Interface
• GUI memberikan mekanisme user-friendly
untuk berinteraksi dengan aplikasi Java yang
dibuat (aplikasi mudah digunakan dan cepat
dipelajari bahkan untuk orang awam
sekalipun)
• Komponen GUI adalah objek dimana user
berinteraksi dengan objek itu menggunakan
mouse, keyboard, dan bentuk inputan lain.
Konsep GUI
• Dalam Java, sebenarnya terdapat 2 package
yang dapat digunakan untuk mengembangkan
program-program GUI, yaitu AWT (Abstract
Window Toolkit) pada package java.awt dan
SWING pada package javax.swing
Konsep GUI
• Untuk program yang hanya ditempatkan pada sisi komputer
server yang jarang berinteraksi dengan pengguna, maka
fungsi dasar program dirasa cukup memadai.
• apabila program tersebut diperkirakan akan banyak
berinteraksi dengan pengguna, maka ada baiknya jika
program menggunakan tampilan.
• Beberapa alasan bahwa program harus menggunakan
tampilan, yaitu :
–
–
–
–
Dengan tampilan, program akan nampak jauh lebih menarik
Interaktif
User Friendly atau mudah dalam penggunaannya
Dapat berinteraksi dengan peralatan seperti mouse, joystick dan
peralatan lainnya.
Konsep GUI
• Sedangkan interaksi yang terjadi antara pengguna dengan
komponen GUI dapat dilakukan dengan beberapa cara
diantaranya :
–
–
–
–
–
–
Dengan penekanan komponen tombol.
Dengan membuat pilihan pada menu.
Melakukan enter pada objek text.
Pergerakan tombol scroll bar.
Dengan penekan tombol close pada objek wondows.
Dll.
Konsep GUI
 Tiga tipe program yang berbasis kepada GUI komponen
1.
Graphical components (GUI)
Yaitu berupa rancangan tampilan program yang dikemas dengan menggunakan
komponen-komponen grafik.
2.
3.
Listener methods
Yaitu berfungsi untuk menerima dan merespon event yang terjadi
Application methods
Fungsi-fungsi atau baris perintah yang berguna bagi pengguna untuk
menghasilkan kegiatan dalam bentuk respon.
 Graphical components (seperti tombol), listener methods
berguna menerima events dari tombol yang di click dan
application methods berisi program yang akan dijalankan saat
event terjadi.
Konsep GUI
• Class/Komponen GUI pada aplikasi
– Banyak sekali komponen yang sudah disiapkan oleh java
untuk membuat sebuah tampilan yang berbentuk GUI.
– Namun pada bagian ini yang akan dijelaskan adalah
komponen-komponen yang terkait dengan aplikasi yang
akan di buat atau dipaparkan dalam perkuliahan ini saja
– Daftar komponen yang akan digunakan atau yang akan
dipaparkan dalam perkuliahan ini dapat dilihat pada tabel
berikut :
• AWT adalah sekumpulan library yang tidak
tergantung platform (platform independent)
dan digunakan untuk menyederhanakan
implementasi user-interface
• SWING adalah bentuk implementasi
selanjutnya yang menambahkan komponenkomponen dalam sistem GUI tapi masih
didasarkan pada arsitektur AWT (misalnya :
untuk pembuatan event handling)
• Mengapa kita menggunakan SWING daripada
AWT???
Pada kenyataan di lapangan, programprogram GUI yang ada saat ini (tentunya yang
dibuat dengan Java) banyak dikembangkan
dengan menggunakan komponen-komponen
SWING (bukan menggunakan AWT)
Komponen/Class GUI
Beberapa komponen atau class GUI yang akan diapakai pada aplikasi :
No.
Nama Komponen
1.
JWindow
Kegunaan
Untuk membuat window atau frame yang menjadi
latar belakang komponen-komponen lain.
2.
JLabel
Untuk membuat tulisan yang akan menjelaskan
komponen lain, dapat juga berupa gambar.
3.
4.
JProgressBar
Timer
5.
Dimension
6.
JFrame
7.
JDesktopPane
8.
JMenuBar
9.
JMenu
Untuk membuat baris progress.
Untuk mengatur waktu tampilan.
Untuk mengambil dimensi screen monitor.
Untuk membuat frame biasa.
Untuk membuat frame induk yang disisipkan pada
frame biasa.
untuk menampung dan menampilkan menu baris
(Pulldown Menu).
Untuk membuat menu baris dan sub menu yang
merupakan induk dari sub menu yang lain.
Komponen/Class GUI
Untuk membuat sub menu yang merupakan
menu terakhir.
10.
JMenuItem
11.
JPopupMenu
12.
JToolBar
Untuk menampung dan menampilkan menu
popup.
Untuk menampung dan menampilkan menu
dalam bentuk toolbar.
13.
JPanel
Untuk menampung objek/komponen lain
14.
JButton
Untuk membuat tombol.
15.
Date
Untuk mengambil fungsi tanggal dan jam aktif
16.
SimpleDateFormat
Mengatur format tampilan
17.
String
Class tipe data
18.
JInternalFrame
Untuk membuat frame anak.
19.
JTextField
Untuk menginput string
20.
JTextArea
Untuk menginput string yang lebih dari satu baris
Komponen/Class GUI
21.
JScrollPane
22.
JComboBox
Untuk membuat objek tabel
Untuk membuat objek kombo yang berisi daftar
pilihan.
23.
ButtonGroup
Untuk membuat objek group sebagai tempat
objek radiobutton.
24.
25.
26.
27.
28.
JRadioButton
JTabel
JOptionPane
Integer
PrinterJob
29.
Graphics2D
30.
31.
32.
Connection
Statement
ResultSet
Untuk membuat objek pilihan
Untuk membuat objek tabel
Untuk menampilkan kotak dialog
Class tipe data
Untuk mengaktifkan printer dialog
Untuk membuat objek grafik dua dimensi.
Untuk membuat objek koneksi.
Untuk membuat statement.
Untuk menampung hasil query.
Komponen/Class GUI
Sedangkan daftar package yang digunakan pada aplikasi,
dapat dilihat pada tabel berikut:
No.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Nama Package
java.awt.*
javax.swing.*;
java.awt.event.*;
javax.swing.border.LineBorder;
java.util.*;
java.text.*;
javax.swing.Timer;
java.sql.*;
java.io.*;
javax.swing.table.DefaultTableModel;
import java.lang.*;
import java.awt.print.*;
Komponen/Class GUI
• Komponen asli/original berasal dari package Abstract Window
Toolkit (AWT)
• Untuk melakukan interaksi antara komponen dengan user perlu
ditambahkan Interface. Dimana daftar interface yang digunakan
pada aplikasi, dapat dilihat pada Tabel berikut
No.
1.
2.
3.
4.
5.
Nama Interface
ActionLIstener
FocusListener
KeyListener
KeyAdapter
Printable
CONTOH PROGRAM GUI
Saat kita membuat program java GUI, yang pertama kali kita harus
kuasai adalah penggunaan JFrame. JFrame digunakan untuk
mendesain model tampilan yang didalamnya dapat kita tempatkan
komponen-komponen lainnya.
Contoh penggunaan tampilan frame pada program java :
//program pertama
//Tidak Menggunakan Construktor
import javax.swing.JFrame;
class frame1{
public static void main(String args []){
JFrame tampil = new JFrame();
tampil.show();
}
}
CONTOH PROGRAM GUI
//program kedua
//menggunakan konstruktor
import javax.swing.*;
class frame21 extends JFrame{
frame21(){
//construktor
show();
}
}
class frame2{
public static void main(String args[]){
new frame21();
}
}
CONTOH PROGRAM GUI
• Apabila kedua program tersebut dikompilasi
dan dijalankan maka akan terdapat tampilan
seperti dibawah ini :
CONTOH PROGRAM GUI
Untuk membuat frame dengan tulisan “Universitas Budi Luhur”,
pada posisi x = 10 dan Y = 100, lebar = 300, tinggi = 200, Resizable
false, dan akan terhapus di alokasi memori setelah aplikasi di tutup
seperti pada gambar sebagai berikut :
CONTOH PROGRAM GUI
//program ketiga
import javax.swing.*;
class frame61 extends JFrame{
frame61(){
super("Universitas Budi Luhur");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setLocation (10,100);
this.setSize(300,200);
setResizable(false);
show();
}
}
class frame62{
public static void main (String args[]){
new frame61();
}
}
CONTOH PROGRAM GUI
•
•
Grafik dua dimensi (2D) menggunakan class yang terdapat pada java.awt.*, yaitu
Canvas. Komponen Canvas tersebut berbentuk kotak kosong pada layar. Didalam
Canvas tersebut dapat kita gunakan sebagai media gambar 2 (dua) dimensi.
Penggunaan Canvas harus dibarengi dengan sub class paint sebagai media gambar
yang berupa perintah.
Cara menggabungkan penggunaan Canvas dan Jframe adalah sebagai berikut :
//program ke empat
import javax.swing.*;
import java.awt.*;
//Class Canvas
class grap1 extends Canvas{
public void paint (Graphics g){
//(x,y,width,height)
g.drawRect(1,5,50,20);
g.drawLine(35,50,100,70);
//(x,y,width,height,arcwidth,archeight
g.drawRoundRect(1,50,30,40,5,100);
g.setColor(Color.YELLOW);
//set warna
g.drawOval(110,50,40,30);
g.setFont(new Font("Tahoma",Font.ITALIC,20));
g.drawString("9511500134",80,15);
g.setColor(Color.BLUE);
//set warna
g.fillRect(1,110,30,20);
g.fillOval(50,110,30,20);
}
}
//Class frame
class grap11 extends JFrame{
private Container konten=new Container();
private grap1 duaD =new grap1();
grap11(){
super("Universitas Budi Luhur");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setLocation(10,100);
this.setSize(250,200);
konten=
getContentPane();
konten.add(duaD);
show();
}
public static void main(String args[]){
new grap11();
}
}
• Perumpamaan membuat gambar 2D menggunakan
objek Canvas adalah seperti menggambar pada sebuah
kertas kosong dengan pensil gambar. Hanya saja
penggunaan objek Canvas menggunakan posisi piksel
pada frame.
• Posisi 0 pada horizontal (X=0) dan posisi 0 pada vertikal
(Y=0), menunjukan posisi tersebut berada pada posisi
ujung paling kiri dan paling atas dari frame.
• Jika X > 0 maka posisi berada ke arah kanan dari frame,
sedangkan jika Y > 0 maka posisi berada ke arah bawah
dari frame.
• Banyak objek yang dapat digunakan untuk
menggambar 2D pada Canvas, yaitu bulat, kotak, garis
dan lain-lain.
Pada gambar terdapat beberapa objek, yaitu :
– Kotak
• drawRect (x,y,width, height)
– Kotak dengan bundaran di pinggir
• drawRoundRect (x, y, width, height, arcwidth, archeight)
– Kotak dengan warna didalamnya
• fillRect (x,y,width,height)
– Penggunaan Font
• setFont(new Font("<Model Font>", <STANDAR|BOLD|ITALIC>, <Size>))
– String
• drawstring(“<tulisan>”,x,y)
– Garis
• drawLine(x,y,width,height)
– Bundar
• drawOval(x,y,width,height)
– Bundar dengan warna didalamnya
• fillOval(x,y,width, height)
– Pewarnaan
• setColor(<color>)
Ketika hendak menggunakan Class pertama pada class kedua (frame) perlu menggunakan
perintah :
private grap1 duaD =new grap1();
Kemudian class pertama tersebut ditampilkan pada JFrame dengan menggunakan perintah :
konten.add(duaD);
Merancang Program Logo, Sesuai
Contoh Aplikasi
/*
---------------------------------------------------------------------------------------------------Nama Program
: SIP.java
Dipanggil Oleh
:Keterangan
: Program Splash dengan Logo dan Baris Progres
Dibuat Oleh
: AEndF@2008, Versi Update
---------------------------------------------------------------------------------------------------*/
// Deklarasi package
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import javax.swing.border.LineBorder;
// Deklarasi class
public class SIP extends JWindow {
private Dimension dimensi =
Toolkit.getDefaultToolkit().getScreenSize();
private JLabel lblLogo
= new JLabel(new ImageIcon
("Gambar/sip.jpg"));
private JProgressBar barisProgres = new JProgressBar();
private int time = 0;
private Timer timer;
// Deklarasi konstruktor
public SIP () {
// Mengatur warna garis pinggir
barisProgres.setBorder(new LineBorder (Warna, 1));
lblLogo.setBorder (new LineBorder (Warna, 1));
// Menempatkan objek ke container
getContentPane().add(lblLogo, BorderLayout.NORTH);
getContentPane().add(barisProgres,BorderLayout.CENTER);
// Mengatur lama window logo tampil pada layar monitor
timer=new Timer(50,new ActionListener(){
public void actionPerformed(ActionEvent
evt){
time++;
barisProgres.setValue(time);
if(barisProgres.getPercentComplete()==1.0){
timer.stop();
setVisible(false);
// menjalankan menu
utama.
// new Menu_Utama();
}
}}); timer.start();
// Menyiapkan variabel warna.
Color Warna = Color.blue;
// Mengatur baris progress
barisProgres.setValue(0);
barisProgres.setPreferredSize(new Dimension(100,15));
barisProgres.setBackground(Color.white);
barisProgres.setForeground(Color.red);
barisProgres.setStringPainted(true);// Menemparkan objek
kememori sebelum ditampilkan
pack();
// Mengatur lokasi window tepat ditengah layar monitor
setLocation (dimensi.width / 2 - getWidth() / 2,
dimensi.height / 2 - getHeight() / 2);
// menampilkan window ke layar monitor
show();
}
// Deklarasi metode utama
public static void main (String args[]) {
new SIP ();
}
}