pertemuan 2 pbol - Situs Blog Staff Pengajar Universitas Budi Luhur

PERTEMUAN 3
PBOL
Dewi Kusumaningsih, M.Kom
Konsep GUI
• Konsep Pemrograman GUI
• Pada dasarnya pemrograman GUI  pemrograman yang
mengandalkan kemampuan tampilan dalam bentuk grafik.
• Tidak lagi monoton, hitam-putih, 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.
Konsep GUI
• GUI → Graphical User Interface
• GUI 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
– SWING pada package javax.swing
• 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)
• Perbedaan AWT dan Swing
– package Swing yang mempunyai tampilan look
and feel yang sama meski dijalankan pada
paltform yang berbeda
– Swing menyediakan komponen yang lebih menarik
seperti color chooser dan option pane
– Swing bukan pengganti dari AWT, dan tidak bisa
berdiri sendiri, karena setiap program butuh
berkomunikasi dengan mekanisme dasar dari
target platform seperti Event Handling yang ada di
AWT, jadi Swing akan selalu berdampingan dengan
AWT.
Konsep GUI
• Untuk program yang hanya ditempatkan pada sisi komputer
server yang jarang berinteraksi dengan pengguna, maka
fungsi dasar program dirasa cukup memadai tanpa GUI
• Apabila program tersebut diperkirakan akan banyak
berinteraksi dengan pengguna, maka ada baiknya jika
program menggunakan tampilan  dengan GUI
• 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. Contoh seperti tombol, Textfield, Label, Scrollbar
2.
Listener methods
Yaitu berfungsi untuk menerima dan merespon event yang terjadi. Contoh ketika
tombol di klik maka akan merespon dengan melakukan sesuatu.
3.
Application methods
Fungsi-fungsi atau baris perintah yang berguna bagi pengguna untuk
menghasilkan kegiatan dalam bentuk respon. Contoh ketika GUInya yaitu tombol
, lalu dilakukan event yaitu di klik maka aplication method nya adalah melakukan
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 :
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 ();
}
}