Dasar Perancangan Graphical User Interface

TI 1163 Pemrograman Berorientasi Objek

Dasar Perancangan

Graphical User Interface

Restyandito e-mail : [email protected] website : http://lecturer.ukdw.ac.id/~dito

Introduction

Introduction

GUI (Graphical User Interface), memungkinkan user untuk berinteraksi dengan komputer secara lebih baik. Î Pengguna berinteraksi dengan berbagai elemen grafis, seperti button, dialog box, menu, dsb.

TI1163 – Dasar Perancangan GUI

© Restyandito - 3

Introduction

© Restyandito - 4

Container (tempat), obyek yang dapat menapung komponen grafis dan tempat yang lebih kecil Contoh: frames, panels Component, obyek grafis yang berfungsi untuk menampilkan data, menerima masukan, atau menunjukkan suatu kondisi. Contoh: buttons, labels, text fields Event, obyek yang merepresentasikan suatu kejadian. Contoh: gerakan mouse, penekanan tombol Listener, suatu obyek yang ’menunggu’ suatu kejadian khusus dan akan bereaksi (melakukan sesuatu) jika kejadian tersebut terjadi.

Contoh: import java.awt.* ;

Import java.awt.event.* ; Import javax.swing.* ;

© Restyandito


Graphical Objects

JAVA menyediakan dua graphical library. AWT (Abstract Windows Toolkit) Swing


Sejak 1994 Sun Microsystem berupaya untuk membuat JAVA memiliki perangkat bergaya desktop dengan Toolkit JAVA yang dikenal sebagai AWT (Abstract Windowing Toolkit) Tahun 1997, muncul JFC (Java Foundation Class) untuk kepentingan pembuatan aplikasi Window yang merupakan pengembangan dari AWT. JFC mempunyai kode swing yang terdapat pada package yang disediakan pada JAVA SDK versi 1.2 ke atas (JAVA 2)

© Restyandito - 5


© Restyandito - 6

Dasar Perancangan GUI - 1


Graphical Objects

Graphical Objects Object

Frame Component Panel1

Panel2 Container JComponent

Window Hirarki turunan untuk JPanel dan JFrame

Frame

JPanel

JFrame


© Restyandito - 7


Container : Frame

© Restyandito - 8

Container : Frame

import javax.swing.*;

Beberapa method java.awt.Frame

class FramePertamaku extends JFrame { public FramePertamaku() { setTitle( "Frame Pertama“ ); setSize( 300 , 200 ); } }

void setResizable (boolean b)

menentukan apakah user dapat merubah ukuran frame void setTitle(String s)

mengatur teks pada title bar

public class Frameku { public static void main (String args[ ] ) { FramePertamaku coba = new FramePertamaku(); coba.show(); } } TI1163 – Dasar Perancangan GUI

void setIconImage(Image image)

gambar yang digunakan sebagai icon dari frame

© Restyandito - 9


Component : Text

© Restyandito - 10

Component : Text

import java.awt.*;

public static void main(String[ ] args) { WindowText coba = new WindowText();

public class WindowText extends Frame {

coba.setSize(500, 300); coba.setLocation(200, 100); coba.setTitle("Window Text”); coba.show();

public void paint(Graphics g) { setSize(300, 200); setTitle(getClass().getName()); Font f = new Font( "Monospaced“ , Font.BOLD, 16); g.setFont(f); g.drawString( "Hello ...“ , 10 , 100); g.drawString( "Salam kenal dari Frame ...“ , 30 ,120);

} }

}


© Restyandito

© Restyandito - 11


© Restyandito - 12



Component : Text

Component : Label

Beberapa method java.awt.Font Font (String name, int style, int size)

mengatur jenis font, format font (PLAIN,BOLD,ITALIC) dan ukuran font. String getFontName() mengetahui String getFamily() mengetahui

nama font face

jenis keluarga font


© Restyandito - 13

Component : Label


© Restyandito - 14

Component : TextField

import javax.swing.*; import java.awt.*; import java.awt.event.*; public class KomponenLabelBerformat { public static void main(String[ ] args) { JFrame frame = new JFrame("Membuat Label"); JLabel label = new JLabel("Pemrograman Berorientasi Obyek"); label.setForeground(Color.yellow); label.setBackground(Color.blue); label.setOpaque(true); label.setFont(new Font("SansSerif", Font.BOLD, 14)); frame.getContentPane().add(label); frame.pack(); frame.setVisible(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } TI1163 – Dasar Perancangan GUI

import javax.swing.*; import java.awt.*; import java.awt.event.*; public class KomponenLabel { public static void main(String[ ] args) { JFrame frame = new JFrame("Membuat Label"); JLabel label = new JLabel("Pemrograman Berorientasi Obyek"); frame.getContentPane().add(label); frame.pack(); frame.setVisible(true); frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); } }

© Restyandito - 15

import javax.swing.*; import java.awt.*; import java.awt.event.*; public class TeksField { public static void main(String[ ] args) { JFrame frame = new JFrame("Membuat TeksField"); JLabel label = new JLabel("Nama :"); JTextField textField = new JTextField(20); frame.getContentPane().setLayout(new FlowLayout()); frame.getContentPane().add(label); frame.getContentPane().add(textField); frame.pack(); frame.setVisible(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } TI1163 – Dasar Perancangan GUI

Component

© Restyandito - 16

Event dan Listener

Beberapa obyek ContentPanel, yaitu : JPasswordField, JTextArea, JButton, JRadioButton, JCheckBox, JComboBox.

Event-Listener interface

<>

ActionListener <>

ComponentListener <>

EventListener

<>

TextListener <>

WindowListener

<>

MouseListener


© Restyandito

© Restyandito - 17


<>

MouseMotionListener

© Restyandito - 18



Event dan Listener.

Event dan Listener. class FrameMendengar extends Jframe { public FrameMendengar() { setTitle("HelloWorld dengan listener"); setSize(300, 200); addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } } ); Container contentPane = getContentPane(); contentPane.add(new HelloPanel()); } }

import java.awt.*; import java.awt.event.*; import javax.swing.*; class HelloPanel extends Jpanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.drawString("Hello ...", 75, 100); g.drawString("Frame dengan listener", 75, 120); } }


public class HelloFrame { public static void main(String[ ] args) { JFrame frame = new FrameMendengar(); frame.show(); } } © Restyandito - 19

Event dan Listener

© Restyandito - 20

Event dan Listener

WindowListener interface memiliki 7 method, yaitu windowActivated, windowClosed, windowClosing, windowDeactivated, windowDeiconified, windowIconified, windowOpened.



© Restyandito - 21

Event dan Listener

import java.awt.*; import java.awt.event.*; import javax.swing.*; class FrameKedua extends JFrame { public FrameKedua() { setTitle("Frame Keduaku di Tengah"); addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } });


© Restyandito - 22

Event dan Listener

Toolkit tk = Toolkit.getDefaultToolkit(); Dimension d = tk.getScreenSize(); int panjangLayar = d.height; int lebarLayar = d.width; setSize(panjangLayar / 2, lebarLayar / 2); setLocation(panjangLayar / 4,lebarLayar / 4); Image gambar = tk.getImage("icon01.jpg"); setIconImage(gambar); } } public class ProgramFrame2 { public static void main(String[ ]args) { JFrame frame = new FrameKedua(); frame.show(); } } TI1163 – Dasar Perancangan GUI

© Restyandito

© Restyandito - 23


© Restyandito - 24



Menggambar Grafik. import java.awt.*; import java.awt.event.*; import javax.swing.*; class DrawRectPanel extends Jpanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.setColor(Color.blue); g.drawRect(10, 10, 80, 30); g.drawRoundRect(100, 10, 80, 30, 15, 15); int thickness = 4; for (int i = 0; i <= thickness; i++) g.draw3DRect(200 - i, 10 - i, 80 + 2 * i, 30 + 2 * i, true); for (int i = 0; i < thickness; i++) g.draw3DRect(200 - i, 50 - i, 80 + 2 * i, 30 + 2 * i, false); g.drawOval(10, 100, 80, 30); } } TI1163 – Dasar Perancangan GUI

Menggambar Grafik. class DrawRectFrame extends Jframe { public DrawRectFrame() { setTitle("DrawRect"); setSize(300, 200); addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } } ); Container contentPane = getContentPane(); contentPane.add(new DrawRectPanel()); } } public class DrawRect { public static void main(String[ ] args) { JFrame frame = new DrawRectFrame(); frame.show(); } }

© Restyandito - 25


© Restyandito - 26

Referensi • Garrido, Jose M., Object Oriented Programming: From Problem Solving to Java, Charles River Media Inc., 2003. hal 261-302 • Deitel H.M., Java How To Program, Prentice Hall, 2003. hal 569-750 • Hortsmann, Cay S., Core Java : Volume 1Fundamentals, Sun Microsystems Press, 1999. hal 259-372


© Restyandito

The End terima kasih

© Restyandito - 27


Dasar Perancangan Graphical User Interface

Recommend Documents