Graphics Programming

Pertemuan 5

Halaman 1/1

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 AWTEvent

Applet Panel

Font

Container Frame Window Button

FileDialog Dialog

FontMetrics Label Object

Color

TextField TextComponent

Graphics List

TextArea

Choice Component CheckBox CheckBoxGroup LayoutManager Canvas MenuComponent

MenuItem

ScrollBar

MenuBar

Menu

Gambar 5.1. Hirarki AWT Class Component Container Window Frame Dialog Panel Applet Graphics Color Font FontMetrics

Superclass dari semua AWT User Interfaces class Digunakan untuk menampung Component-Component dari AWT. merupakan top-level window atau dasar untuk meletakkan Component Merupakan dasar untuk meletakkan Component User Interface pada aplikasi Java berbentuk grafik Digunakan untuk membuat window sementara / pop up Window Container yang tidak nampak. digunakan untuk menampung Component User Interface Subclass dari Panel. Digunakan untuk membuat Applet Abstract class yang menyediakan fungsi graphics Berhubungan dengan warna untuk component Digunakan untuk mengambarkan String pada graphics Abstract class yang digunakan untuk mengambil properties dari font yang digunakan

untuk mempergunakan AWT class kita harus melakukan import contoh : import java.awt.*; Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 2/2

Contoh component yang diletakkan pada Frame dan Applet dapat dilihat pada Gambar 5.2a dan Gambar 5.2b

Frame

Pull Down Menus

Panel User Interface Component (UI)

Panel Panel UI

Panel UI

Panel UI

Gambar 5.2a Component yang dapat diletakkan pada Frame Applet Panel User Interface Component

Panel

Panel User Interface Component

Panel

User Interface Component

User Interface Component

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.

Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 3/3

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 ActionEvent

ContainerEvent

AdjustmentEvent

FocusEvent MouseEvent

EventObject

AWTEvent

ComponentEvent

InputEvent KeyEvent

ItemEvent

PaintEvent

TextEvent

WindowEvent

Gambar 5.3. Hirarki AWT Events User Action

Source Object

Clicked on a button Change text Pressed return on a text field Double-clicked on a list item Selected or deselected an item with a single click Selected or deselected an item Selected or deselected an item Selected a menu item Moved the scroll bar Window open, closed, iconified, deiconified, or closing Component added or remove from container Component moved, resized, hidden and shown Component gained or lost focus Key released or pressed Mouse movement

Event Type Generated

Button TextComponent TextField List List

ActionEvent TextEvent ActionEvent ActionEvent ItemEvent

Choice CheckBox MenuItem Scrollbar Window

ItemEvent ItemEvent ActionEvent AdjustmentEvent WindowEvent

Container

ContainerEvent

Component

ComponentEvent

Component Component Component

FocusEvent KeyEvent MouseEvent

Tabel 5.1. Tabel User Action dan Source object beserta Eventnya. JDK event handling bekerja sebagai berikut : User Action

Event Object

Source Object Register a listener object

Listener Object Event Handler

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() Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 4/4

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 ItemEvent WindowEvent

ActionListener ItemListener WindowListener

ContainerEvent

ContainerListener

ComponentEvent

ComponentListener

FocusEvent

FocusListener

TextEvent KeyEvent

TextListener KeyListener

MouseEvent

MouseListener

MouseMotionListener AdjustmentEvent

AdjustmentListener

actionPerformed(ActionEvent e) itemStateChanged(ItemEvent e) windowClosing(WindowEvent e) windowOpened(WindowEvent e) windowIconified(WindowEvent e) windowDeiconified(WindowEvent e) windowClosed(WindowEvent e) windowActivated(WindowEvent e) windowDeactivated(WindowEvent e) componentAdded(ContainerEvent e) componentRemoved(ContainerEvent e) componentMoved(ComponentEvent e) componentHidden(ComponentEvent e) componentResized(ComponentEvent e) componentShown(ComponentEvent e) focusGained(FocusEvent e) focusLost(FocusEvent e) textValueChanged(TextEvent e) keyPressed(KeyEvent e) keyReleased((KeyEvent e) keyTyped(KeyEvent e) mousePressed(MouseEvent e) mouseReleased(MouseEvent e) mouseEntered(MouseEvent e) mouseExited(MouseEvent e) mouseClicked(MouseEvent e) mouseDragged(MouseEvent e) mouseMoved(MouseEvent e) 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) { } Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 5/5

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) { } Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 6/6

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 ActionListener interface. Perhatikan contoh berikut :

dilakukan

implementasi

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.

Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 7/7

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.*; import java.awt.event.*; Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 8/8

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.*; import java.awt.event.*; Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 9/9

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
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); } Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 10/10

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 ditampilkan ulang. Method ini dipanggil oleh method update() ataupun method repaint(). Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 11/11

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 Leading Baseline

By

Ascent Descent

Untuk mengambil FontMetrics object dapat digunakan : g.getFontMetrics(Font f); atau g.getFontMetrics() //mengambil default font selain itu dapat digunakan method : public public public public public

int int int int int

getAscent(); getDescent(); getLeading(); getHeight(); 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); Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 12/12

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.setSize(300,250); Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 13/13

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); } }

Bahasa Pemrograman I

Graphics Programming

Pertemuan 5

Halaman 14/14

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); } }

Bahasa Pemrograman I

Graphics Programming