Graphics Programming

Transkripsi

1 Pertemuan 5 Halaman 1/1 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 Font FontMetrics Container Button Window Frame Dialog FileDialog Label Object Color TextComponent TextField Graphics List TextArea Component Choice CheckBox CheckBoxGroup LayoutManager Canvas MenuComponent MenuItem Menu ScrollBar MenuBar Gambar 5.1. Hirarki AWT Class Component Container Window Frame Dialog 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. 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 :

2 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 User Interface Component (UI) UI UI UI Gambar 5.2a Component yang dapat diletakkan pada Frame Applet User Interface Component User Interface Component 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 public class MyFrame { public static void main (String [] args) { Frame f = new Frame( Test Frame ); f.setsize(400,300); 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.

3 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 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 List ItemEvent single click 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, Window WindowEvent deiconified, or closing Component added or remove from Container ContainerEvent container Component moved, resized, hidden Component ComponentEvent and shown 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 : 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()

4 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 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) MouseEvent MouseListener mousepressed(mouseevent e) mousereleased(mouseevent e) mouseentered(mouseevent e) mouseexited(mouseevent e) mouseclicked(mouseevent e) 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 public class MyFrameWithExitHandling extends Frame implements WindowListener{ MyFrameWithExitHandling f = new MyFrameWithExitHandling(); f.setsize(200,150); public MyFrameWithExitHandling() { super(); addwindowlistener(this); public MyFrameWithExitHandling(String ptitle) { super(ptitle); setsize(200,150); addwindowlistener(this); public void windowclosed(windowevent event) {

5 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 : public class MyFrameWithMouse extends MyFrameWithExitHandling implements MouseListener { private int x,y=0; (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) {

6 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"); 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 public class TestActionEvent extends MyFrameWithExitHandling implements ActionListener { private Button btnclose; (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.

7 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 Pada ShowFlowLayout.java public class ShowFlowLayout extends MyFrameWithExitHandling{ (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. Pada ShowGridLayout.java

8 Pertemuan 5 Halaman 8/8 public class ShowGridLayout extends MyFrameWithExitHandling { (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 public class ShowBorderLayout extends MyFrameWithExitHandling { (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")); merupakan container yang dapat menampung component lain didalamnya. mempunyai constructor (); untuk menambah component pada panel digunakan method add() p = new (); p.add(new Button( Close )); untuk menaruh panel pada Frame digunakan : f.add(p); Perhatikan contoh berikut : Pada Tests.java

9 Pertemuan 5 Halaman 9/9 public class Tests extends MyFrameWithExitHandling implements ActionListener { private TextField tfnum; private Button [] btnnum = new Button[10]; public Tests() { settitle("test s"); setlayout(new BorderLayout(20,20)); p1 = new (); 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); Tests tests = new Tests(); tests.setsize(200,250); tests.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 : public class CanvasDemo extends MyFrameWithExitHandling { private MyCanvas c; CanvasDemo f = new CanvasDemo(); f.setsize(300,200); 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);

10 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(); 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 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().

11 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 Baseline By Leading Ascent Descent 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); Pada TestFontMetrics.java public class TestFontMetrics extends MyFrameWithExitHandling { TestFontMetrics f = new TestFontMetrics(); f.setsize(300,200); public TestFontMetrics() { settitle( Test Font Metrics ); String message = Welcome to Java ; Font f = new Font( Helvetica,Font.Bold,20); g.setfont(f);

12 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 Pada DrawLines.java class DrawLines extends MyFrameWithExitHandling { DrawLines f = new DrawLines(); f.setsize(300,200); public DrawLines() { settitle("draw Lines"); 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) class DrawRects extends MyFrameWithExitHandling { DrawRects f = new DrawRects(); f.setsize(300,250);

13 Pertemuan 5 Halaman 13/13 public DrawRects() { settitle("draw Rectangular"); 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); class DrawOvals extends MyFrameWithExitHandling { DrawOvals f = new DrawOvals(); f.setsize(300,250); public DrawOvals() { settitle("draw Ovals"); 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); class DrawArcs extends MyFrameWithExitHandling { DrawArcs f = new DrawArcs(); f.setsize(250,300); public DrawArcs() { settitle("draw Arcs"); g.drawarc(10,30,100,60,20,120); g.setcolor(color.gray); g.fillarc(10,150,100,60,120,300);

14 Pertemuan 5 Halaman 14/14 Drawing Polygon drawpolygon(x,y,n); fillpolygon(x,y,n); class DrawAPolygon extends MyFrameWithExitHandling { DrawAPolygon f = new DrawRects(); f.setsize(200,250); public DrawAPolygon() { settitle("draw Polygon"); Polygon p = new Polygon(); p.addpoint(10,30); p.addpoint(60,45); p.addpoint(35,55); p.addpoint(90,85); g.drawpolygon(p);