Graphics Programming

Graphics Programming

Java mempunyai kumpulan class khusus untuk membuat aplikasi berbasis grafik

dan membuat user interfaces. Class-class tersebut di grup ke dalam suatu package

java.awt, java.awt.event, java.awt.image, java.awt.datatransfer dan java.applet yang

dinamakan Abstract Window Toolkit (AWT).

Class-class pada AWT menyediakan platform-independent, sehingga untuk setiap

platform yang berbeda komponent AWT secara otomatis di-map ke komponen spesifik

dari platform tersebut.

Hirarki AWT Class

Gambar 5.1. Hirarki AWT Class

Component

Superclass dari semua AWT User Interfaces class

Container

Digunakan untuk menampung Component-Component dari AWT.

Window

merupakan top-level window atau dasar untuk meletakkan Component

Frame

Merupakan dasar untuk meletakkan Component User Interface pada

aplikasi Java berbentuk grafik

Dialog

Digunakan untuk membuat window sementara / pop up Window

Panel

Container yang tidak nampak. digunakan untuk menampung Component

User Interface

Applet

Subclass dari Panel. Digunakan untuk membuat Applet

Graphics

Abstract class yang menyediakan fungsi graphics

Color

Berhubungan dengan warna untuk component

Font

Digunakan untuk mengambarkan String pada graphics

FontMetrics

Abstract class yang digunakan untuk mengambil properties dari font yang

digunakan

untuk mempergunakan AWT class kita harus melakukan import contoh :

import java.awt.*;

Object AWTEvent Font FontMetrics Color Graphics Component LayoutManager Container Button Label TextComponent List Choice CheckBox CheckBoxGroup Canvas MenuComponent ScrollBar MenuItem MenuBar Menu Panel Window Applet Frame Dialog FileDialog TextField TextArea

Contoh component yang diletakkan pada Frame dan Applet dapat dilihat pada Gambar

5.2a dan Gambar 5.2b

Gambar 5.2a Component yang dapat diletakkan pada Frame

Gambar 5.2b Component yang dapat diletakkan pada Applet

Frame

Frame merupakan top-level window untuk meletakkan user interface component

Beberapa method yang penting dari Frame :

Frame(String title)

Constructor (dengan judul Frame)

Frame()

Constructor (tanpa judul Frame

dispose()

melakukan

setResizable(boolean resizable)

mengubah flag Frame untuk setting ukuran

resizable bisa berisi (true/false)

setTitle(String title)

mengubah judul dari Frame

Contoh membuat Frame :

pada MyFrame.java

import java.awt.*; public class MyFrame {

public static void main (String [] args) { Frame f = new Frame(“Test Frame”); f.setSize(400,300);

f.setVisible(true);

} }

setSize() dan setVisible() merupakan method yang diturunkan dari class component.

setSize() digunakan untuk mengubah besar ukuran component dan setVisible() digunakan

untuk mengubah flag suatu component agar tampil/tidak tampil.

Frame Pull Down Menus

User Interface Component (UI) Panel Panel UI Panel UI Panel UI Panel Applet User Interface Component Panel User Interface Component Panel User Interface Component Panel User Interface Component Panel

Event Driven Programming

Pada pemrograman graphics di Java alur program menggunakan Event Driven yaitu

kode program dieksekusi apabila ada suatu Event / kejadian yang dihasilkan oleh object

tersebut.

Event terjadi apabila ada suatu interaksi dari user terhadap source object seperti, user

melakukan click pada button, menggerakkan mouse dan lain-lain. Untuk melihat source

object yang menghasilkan event dapat digunakan method getSource() dari event.

Hirarki dari AWT Events dapat dilihat pada Gambar 5.3

Gambar 5.3. Hirarki AWT Events

User Action

Source Object

Event Type Generated

Clicked on a button Button ActionEvent

Change text TextComponent TextEvent

Pressed return on a text field TextField ActionEvent Double-clicked on a list item List ActionEvent Selected or deselected an item with a

single click

List ItemEvent

Selected or deselected an item Choice ItemEvent Selected or deselected an item CheckBox ItemEvent Selected a menu item MenuItem ActionEvent Moved the scroll bar Scrollbar AdjustmentEvent Window open, closed, iconified,

deiconified, or closing

Window WindowEvent

Component added or remove from container

Container ContainerEvent Component moved, resized, hidden

and shown

Component ComponentEvent Component gained or lost focus Component FocusEvent Key released or pressed Component KeyEvent

Mouse movement Component MouseEvent

Tabel 5.1. Tabel User Action dan Source object beserta Eventnya.

JDK event handling bekerja sebagai berikut :

Gambar 5.4. Event Registration, Listening and Handling

Agar object dapat menerima event yang diberikan suatu source object maka object

tersebut harus didaftarkan terlebih dahulu / di-register. dengan method AddXListener()

EventObject AWTEvent ActionEvent AdjustmentEvent ComponentEvent ItemEvent TextEvent ContainerEvent FocusEvent InputEvent PaintEvent WindowEvent MouseEvent KeyEvent User Action

Register a listener object Source Object

Event Object

Listener Object Event Handler

dimana X merupakan XEvent(Contoh untuk ActionEvent di-register dengan

AddActionListener)

Daftar tipe dari event, Listener interface dan Listener method dapat dilihat pada Tabel 5.2

Event Class

Listener Interface

Listener Method (Handlers)

ActionEvent ActionListener actionPerformed(ActionEvent e) ItemEvent ItemListener itemStateChanged(ItemEvent e) WindowEvent WindowListener windowClosing(WindowEvent e)

windowOpened(WindowEvent e) windowIconified(WindowEvent e) windowDeiconified(WindowEvent e) windowClosed(WindowEvent e) windowActivated(WindowEvent e) windowDeactivated(WindowEvent e) ContainerEvent ContainerListener componentAdded(ContainerEvent e)

componentRemoved(ContainerEvent e) ComponentEvent ComponentListener componentMoved(ComponentEvent e)

componentHidden(ComponentEvent e) componentResized(ComponentEvent e) componentShown(ComponentEvent e) FocusEvent FocusListener focusGained(FocusEvent e)

focusLost(FocusEvent e) TextEvent TextListener textValueChanged(TextEvent e) KeyEvent KeyListener keyPressed(KeyEvent e)

keyReleased((KeyEvent e) keyTyped(KeyEvent e) MouseListener mousePressed(MouseEvent e) mouseReleased(MouseEvent e) mouseEntered(MouseEvent e) mouseExited(MouseEvent e) mouseClicked(MouseEvent e) MouseEvent MouseMotionListener mouseDragged(MouseEvent e) mouseMoved(MouseEvent e)

AdjustmentEvent AdjustmentListener adjustmentValueChanged(AdjustmentEvent e)

Tabel 5.2. Daftar Event, Listener dan Handlers

Memberikan HandlingTerhadap WindowEvent

Pada contoh class MyFrame belum diberikan EventDriven pada Frame sehingga user

tidak dapat menutup Frame. Perhatikan contoh berikut :

Pada MyFrameWithExitHandling.java

import java.awt.*;

import java.awt.event.*;

public class MyFrameWithExitHandling extends Frame implements WindowListener{

public static void main(String [] args) {

MyFrameWithExitHandling f = new MyFrameWithExitHandling(); f.setSize(200,150); f.setVisible(true); } public MyFrameWithExitHandling() { super(); addWindowListener(this); }

public MyFrameWithExitHandling(String pTitle) { super(pTitle);

setSize(200,150);

addWindowListener(this); }

public void windowClosed(WindowEvent event) { }

public void windowDeiconified(WindowEvent event) { }

public void windowIconified(WindowEvent event) { }

public void windowActivated(WindowEvent event) { }

public void windowDeactivated(WindowEvent event) { }

public void windowOpened(WindowEvent event) { }

public void windowClosing(WindowEvent event) { dispose();

System.exit(0); }

}

MyFrameWithExitHandling melakukan

extends Frame dan

implements

WindowListener. WindowListener interface mempunyai beberapa abstract method

(windowActivated(), windowDeactivated(), windowClosed(), windowOpened(),

windowClosing(), windowIconified(), windowDeiconified()) untuk melakukan

penanganan event. abstract method tersebut harus ada dan di-override agar dapat

memberikan respon yang diinginkan. Pada contoh windowClosing() di-override dan

diberikan perintah System.exit(0) yaitu perintah untuk menghentikan program.

Memberikan Handling Terhadap Mouse Events

Untuk memberikan handling terhadap mouse event. Object dapat melakukan implements

MouseListener interface. sama seperti WindowListener, pada MouseListener terdapat 4

buah abstract method (mouseClicked(), mouseReleased(), mouseEntered(),

mouseExited()) yang harus diimplementasikan. Perhatikan contoh berikut :

pada MyFrameWithMouse.java :

import java.awt.*;

import java.awt.event.*;

public class MyFrameWithMouse extends MyFrameWithExitHandling

implements MouseListener {

private int x,y=0;

public static void main(String [] args) { (new MyFrameWithMouse()).setVisible(true); } MyFrameWithMouse() { super(); addMouseListener(this); }

public void mousePressed(MouseEvent event) { System.out.println("Mouse Pressed"); System.out.println("Mouse Clicked"); x = event.getX(); y = event.getY(); repaint(); }

public void mouseClicked(MouseEvent event) {

public void mouseEntered(MouseEvent event) { System.out.println("Mouse Entered"); }

public void mouseExited(MouseEvent event) { System.out.println("Mouse Exit");

}

public void mouseReleased(MouseEvent event) { System.out.println("Mouse Released"); }

public void paint(Graphics g) { g.fillRect(x-5,y-5,10,10);

} }

Memberikan Handling Terhadap ActionEvent

Untuk memberikan

handling terhadap ActionEvent dilakukan implementasi

ActionListener interface. Perhatikan contoh berikut :

Pada TestActionEvent.java

import java.awt.*;

import java.awt.event.*;

public class TestActionEvent extends MyFrameWithExitHandling

implements ActionListener {

private Button btnClose;

public static void main(String [] args) { (new TestActionEvent()).setVisible(true); }

TestActionEvent() { super();

setLayout(new FlowLayout()); btnClose = new Button("Close"); add(btnClose);

btnClose.addActionListener(this); }

public void actionPerformed(ActionEvent e) {

String ActionCommand = e.getActionCommand(); if(e.getSource() instanceof Button) { if (ActionCommand.equals("Close")) { dispose(); System.exit(0); } } } }

pada contoh dibuat suatu object button bernama btnClose. btnClose kemudian diberikan

suatu registrasi ActionListener dengan memanggil addActionListener(). Untuk handling

dari ActionEvent diimplementasikan abstract method actionPerformed().

getActionCommand() digunakan untuk melihat ActionCommand apa yang dihasilkan

(Sama dengan label pada button). Sebelum melakukan penanganan terhadap button

lakukan pengujian terlebih dahulu dengan operator instanceof agar source object yang

di-handle benar-benar datang dari object button.

Layout Manager

Untuk mengatur letak component-component AWT dapat digunakan Layout Manager

yang dapat melakukan mapping user interface secara otomatis untuk semua sistem

window. Layout Manager terdapat dalam setiap container dan digunakan method

setLayout() untuk mengaktifkannya.

AWT menyediakan 5 macam Layout Manager yaitu : FlowLayout, GridLayout, ,

BorderLayout, GridBagLayout, CardLayout.

FlowLayout

FlowLayout merupakan Layout Manager yang mengatur component secara urutan

(sesuai dengan yang ditentukan). FlowLayout mempunyai tiga buah constructor yaitu :

public FlowLayout(int align, int hGap, int vGap)

align dapat berisi FlowLayout.RIGHT, FlowLayout.LEFT dan FlowLayout.CENTER

hGap merupakan jarak horizontal antar component dan vGap merupakan jarak vertikal

antar component

public FlowLayout(int align)

memiliki default gap 5 pixels.

public FlowLayout()

memiliki default gap 5 pixels dan align FlowLayout.CENTER

Contoh :

Pada ShowFlowLayout.java

import java.awt.*;

import java.awt.event.*;

public class ShowFlowLayout extends MyFrameWithExitHandling{ public static void main(String [] args) {

(new ShowFlowLayout()).setVisible(true); } ShowFlowLayout() { super(); setLayout(new FlowLayout(FlowLayout.CENTER,10,10)); for(int i=1;i<=10;i++) {

add(new Button("Button "+i)); }

} }

GridLayout

GridLayout merupakan LayoutManager yang mengatur component dalam bentuk grid

atau matriks.

GridLayout mempunyai constructor :

public GridLayout(int rows, int columns)

mengatur GridLayout dengan jumlah baris(row) dan kolom(columns) yang ditentukan

public GridLayout(int rows, int columns, int hGap, int vGap)

mengatur GridLayout dengan jumlah baris(row), kolom(Columns), horizontal gap dan

vertikal gap yang ditentukan.

Contoh :

Pada ShowGridLayout.java

import java.awt.*;

public class ShowGridLayout extends MyFrameWithExitHandling { public static void main(String [] args) {

(new ShowGridLayout()).setVisible(true); } ShowGridLayout() { super(); setLayout(new GridLayout(2,2,5,5)); for(int i=1;i<=10;i++) {

add(new Button("Button "+i)); }

} }

BorderLayout

BorderLayout mengatur window menjadi 5 area yaitu “east”,”west”,”center”, “north” dan

“south”.

BorderLayout mempunyai constructor :

public BorderLayout(int hGap, int vGap)

mengatur BorderLayout dengan horizontal dan vertikal gap yang ditentukan.

public BorderLayout()

method add() yang digunakan untuk BorderLayout berbeda dengan method add() pada

FlowLayout dan GridLayout.

Perhatikan contoh berikut :

Pada ShowBorderLayout.java

import java.awt.*;

public class ShowBorderLayout extends MyFrameWithExitHandling {

public static void main(String [] args) { (new ShowBorderLayout()).setVisible(true); } ShowBorderLayout() { super(); setLayout(new BorderLayout(5,10)); add("East",new Button("East")); add("West",new Button("West")); add("North",new Button("North")); add("South",new Button("South")); add("Center",new Button("Center")); } }

Panel

Panel merupakan container yang dapat menampung component lain didalamnya. Panel

mempunyai constructor Panel();

untuk menambah component pada panel digunakan method add()

Panel p = new Panel();

p.add(new Button(“Close”));

untuk menaruh panel pada Frame digunakan :

f.add(p);

Perhatikan contoh berikut :

Pada TestPanels.java

import java.awt.*;

public class TestPanels extends MyFrameWithExitHandling implements ActionListener {

private TextField tfNum;

private Button [] btnNum = new Button[10]; public TestPanels() {

setTitle("Test Panels");

setLayout(new BorderLayout(20,20));

Panel p1 = new Panel();

p1.setLayout(new GridLayout(3,4,3,3));

for(int i=0;i<btnNum.length;i++) {

p1.add(btnNum[i] = new Button(""+i));

btnNum[i].addActionListener(this); }

tfNum = new TextField();

add("Center",p1);

add("North",tfNum); }

public void actionPerformed(ActionEvent e) { String actionCommand = e.getActionCommand(); if(e.getSource() instanceof Button)

tfNum.setText(actionCommand); }

public static void main(String [] args) { TestPanels testPanels = new TestPanels(); testPanels.setSize(200,250);

testPanels.setVisible(true); }

}

Canvas

Merupakan UI Component yang dapat digunakan untuk menggambar graphics dan

menerima interaksi dari user.

untuk membuat canvas digunakan constructor canvas()

Canvas c = new Canvas();

c.setSize(50,50);

c.setBackground(Color.blue); add(c);

Perhatikan contoh berikut :

import java.awt.*;

import java.awt.event.*;

public class CanvasDemo extends MyFrameWithExitHandling { private MyCanvas c;

public static void main(String [] args) { CanvasDemo f = new CanvasDemo();

f.setSize(300,200); f.setVisible(true); } public CanvasDemo() { setTitle("Canvas Demo");

c = new MyCanvas("Welcome to Java"); c.setBackground(Color.yellow); c.setForeground(Color.black); setLayout(new BorderLayout(10,10)); add("Center",c); }

class MyCanvas extends Canvas implements MouseMotionListener {

private String message; private int x = 10; private int y = 10; public MyCanvas(String s) { message =s; this.addMouseMotionListener(this); repaint(); }

public void paint(Graphics g) { g.drawString(message,x,y); }

public void mouseMoved(MouseEvent e) { }

public void mouseDragged(MouseEvent e) { x = e.getX(); y = e.getY(); repaint(); } } }

pada contoh diatas dibuat suatu inner class MyCanvas yang melakukan implements

MouseMotionListener interface.

Color Class

Color class merupakan class yang digunakan untuk melakukan setting warna pada

component AWT.

Syntax Color :

Color c = new Color(r,g,b);

dimana r,g,b merupakan bilangan antara 0-255

Contoh :

Canvas myCanvas = new Canvas(); Color c = new Color(128,100,100); myCanvas.setBackground(c);

Pada Color class juga terdapat 13 konstanta standard :

black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white,

yellow)

contoh penggunaan :

Canvas myCanvas = new Canvas();

myCanvas.setBackground(Color.yellow);

Method repaint(), update() dan paint()

Pada pemrograman graphics ada 3 method yang menyebabkan graphics tampil yaitu :

public void repaint()

Method ini digunakan untuk melakukan penggambaran ulang. (Jangan melakukan

override pada method repaint());

public void update(Graphics g)

Method ini digunakan untuk melakukan pembersihan area graphics kemudian

menggambar ulang. Method update() dapat dioverride.

public void paint(Graphics g)

Method ini selalu dipanggil oleh java apabila suatu component akan ditampilkan atau

dalam melakukan penggambaran ulang sebaiknya method yang dipanggil adalah method

repaint() bukan method paint() ataupun update().

Graphics Class

Dibawah ini merupakan class-class yang digunakan untuk membuat bentuk geometri

pada graphics class.

Font dan FontMetrics class

Font digunakan untuk melakukan setting huruf/tulisan.

Syntaks Font :

Font myFont = new Font(name,style,size)

name :

TimesRoman, Courier, Helvetica, Symbol dan Dialog

Style :

Font.PLAIN, Font.BOLD, Font.ITALIC (sytle dapat dikombinasi dengan menambahkan

style seperti Font.BOLD+Font.ITALIC)

size :

besar dari font.

FontMetrics digunakan untuk menghitung besar panjang dan lebar suatu string.

FontMetrics dihitung berdasarkan attribute berikut :

Leading

: besar jarak antara baris text

Ascent

: tinggi character dari baseline ke atas

Descent

: jarak dari baseline ke bawah

Height

: jarak total dari leading,ascent dan descent

By

Untuk mengambil FontMetrics object dapat digunakan :

g.getFontMetrics(Font f); atau

g.getFontMetrics() //mengambil default font

selain itu dapat digunakan method :

public int getAscent(); public int getDescent(); public int getLeading(); public int getHeight();

public int stringWidth(String str);

Contoh :

Pada TestFontMetrics.java

import java.awt.*;

import java.awt.event.*;

public class TestFontMetrics extends MyFrameWithExitHandling { public static void main(String [] args) {

TestFontMetrics f = new TestFontMetrics(); f.setSize(300,200);

f.setVisible(true); }

public TestFontMetrics() {

setTitle(“Test Font Metrics”); }

public void paint(Graphics g) {

String message = “Welcome to Java”;

Font f = new Font(“Helvetica”,Font.Bold,20); g.setFont(f);

Descent Ascent

Baseline

FontMetrics fm = g.getFontMetrics(f); int w = fm.stringWidth(message); int h = fm.getAscent(); int x = (getSize().width-w)/2; int y = (getSize().height+h)/2; g.drawString(message,x,y); }

}

Drawing Lines

Method :

drawLine(x1,y1,x2,y2);

dimana x1,y1 adalah titik awal garis dan x2, y2 adalah titik akhir garis

Contoh :

Pada DrawLines.java

import java.awt.*;

class DrawLines extends MyFrameWithExitHandling { public static void main(String [] args) { DrawLines f = new DrawLines();

f.setSize(300,200); f.setVisible(true); } public DrawLines() { setTitle("Draw Lines"); }

public void paint(Graphics g) { for(int x=0;x<=300;x+=10) g.drawLine(x,0,x,200); } }

Drawing Rectangle

Method :

drawRect(x,y,w,h);

Mengambar kotak dengan titik awal x,y ,besar w dan panjang h

fillRect(x,y,w,h);

Menggambar kotak yang dapat diisi warna dengan titik awal x,y ,besar w dan panjang h

drawRoundRect(x,y,w,h,aw,ah);

Menggambar kotak dengan sudut bundar dengan titik awal x,y, besar w, panjang h, dan

besar sudut aw dan panjang sudut ah

fillRoundRect(x,y,w,h,aw,ah);

Menggambar kotak dapat diisi warna dengan sudut bundar dengan titik awal x,y, besar w,

panjang h, dan besar sudut aw dan panjang sudut ah

draw3DRect(x,y,w,h, raised);

Mengambar kotak 3D dengan titik awal x,y ,besar w, panjang h dan flag raised

(true/false)

fill3DRect(x,y,w,h, raised);

Mengambar kotak 3D yang dapat berisi warna dengan titik awal x,y ,besar w, panjang h

dan flag raised (true/false)

Contoh :

import java.awt.*;

class DrawRects extends MyFrameWithExitHandling { public static void main(String [] args) { DrawRects f = new DrawRects();

f.setVisible(true); }

public DrawRects() {

setTitle("Draw Rectangular"); }

public void paint(Graphics g) {

g.drawRect(30,30,100,100); g.drawRoundRect(140,30,100,100,60,30); g.setColor(Color.gray); g.fill3DRect(30,140,100,100,true); } }

Drawing Ovals

drawOval(x,y,w,h); fillOval(x,y,w,h);

Contoh :

import java.awt.*;

class DrawOvals extends MyFrameWithExitHandling { public static void main(String [] args) { DrawOvals f = new DrawOvals();

f.setSize(300,250); f.setVisible(true); } public DrawOvals() { setTitle("Draw Ovals"); }

public void paint(Graphics g) {

g.drawOval(30,30,100,60); g.drawOval(130,30,60,60); g.setColor(Color.gray); g.fillOval(10,130,100,60); } }

Drawing Arcs

drawArc(x,y,w,h,angle1,angle2); fillArc(x,y,w,h,angle1,angle2);

Contoh :

import java.awt.*;

class DrawArcs extends MyFrameWithExitHandling { public static void main(String [] args) { DrawArcs f = new DrawArcs();

f.setSize(250,300); f.setVisible(true); } public DrawArcs() { setTitle("Draw Arcs"); }

public void paint(Graphics g) {

g.drawArc(10,30,100,60,20,120); g.setColor(Color.gray);

g.fillArc(10,150,100,60,120,300);

} }

Drawing Polygon

drawPolygon(x,y,n); fillPolygon(x,y,n);

Contoh :

import java.awt.*;

class DrawAPolygon extends MyFrameWithExitHandling { public static void main(String [] args) {

DrawAPolygon f = new DrawRects(); f.setSize(200,250); f.setVisible(true); } public DrawAPolygon() { setTitle("Draw Polygon"); }

public void paint(Graphics g) {

Polygon p = new Polygon(); p.addPoint(10,30); p.addPoint(60,45); p.addPoint(35,55); p.addPoint(90,85); g.drawPolygon(p); } }