Dasar Perancangan Graphical User Interface Restyandito e-mail : dito@ukdw.ac.id website : http://lecturer.ukdw.ac.id/~dito 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. 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) TI1163 Dasar Perancangan GUI Restyandito - 3 TI1163 Dasar Perancangan GUI Restyandito - 4 JAVA menyediakan dua graphical library. AWT (Abstract Windows Toolkit) Swing Contoh: import java.awt.* ; Import java.awt.event.* ; Import javax.swing.* ; 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. TI1163 Dasar Perancangan GUI Restyandito - 5 TI1163 Dasar Perancangan GUI Restyandito - 6 Restyandito Dasar Perancangan GUI - 1
Frame Panel1 Panel2 Object Component Container JPanel JComponent Window Frame Hirarki turunan untuk JPanel dan JFrame JFrame TI1163 Dasar Perancangan GUI Restyandito - 7 TI1163 Dasar Perancangan GUI Restyandito - 8 Container : Frame class FramePertamaku extends JFrame { public FramePertamaku() { settitle( "Frame Pertama ); setsize( 300, 200 ); public class Frameku { public static void main (String args[ ] ) { FramePertamaku coba = new FramePertamaku(); coba.show(); Container : Frame Beberapa method java.awt.frame void setresizable (boolean b) menentukan apakah user dapat merubah ukuran frame void settitle(string s) mengatur teks pada title bar void seticonimage(image image) gambar yang digunakan sebagai icon dari frame TI1163 Dasar Perancangan GUI Restyandito - 9 TI1163 Dasar Perancangan GUI Restyandito - 10 public class WindowText extends Frame { public void paint(graphics g) { 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); WindowText coba = new WindowText(); coba.setsize(500, 300); coba.setlocation(200, 100); coba.settitle("window Text ); coba.show(); TI1163 Dasar Perancangan GUI Restyandito - 11 TI1163 Dasar Perancangan GUI Restyandito - 12 Restyandito Dasar Perancangan GUI - 2
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 nama font face String getfamily() mengetahui jenis keluarga font Component : Label public class KomponenLabel { JFrame frame = new JFrame("Membuat Label"); JLabel label = new JLabel("Pemrograman Berorientasi Obyek"); frame.setdefaultcloseoperation (JFrame.EXIT_ON_CLOSE); TI1163 Dasar Perancangan GUI Restyandito - 13 TI1163 Dasar Perancangan GUI Restyandito - 14 Component : Label public class KomponenLabelBerformat { 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.setdefaultcloseoperation(jframe.exit_on_close); TI1163 Dasar Perancangan GUI Restyandito - 15 Field public class TeksField { JFrame frame = new JFrame("Membuat TeksField"); JLabel label = new JLabel("Nama :"); JTextField textfield = new JTextField(20); frame.getcontentpane().setlayout(new FlowLayout()); frame.getcontentpane().add(textfield); frame.setdefaultcloseoperation(jframe.exit_on_close); TI1163 Dasar Perancangan GUI Restyandito - 16 Component Beberapa obyek ContentPanel, yaitu : JPasswordField, JTextArea, JButton, JRadioButton, JCheckBox, JComboBox. Event-Listener interface EventListener ActionListener ComponentListener TextListener WindowListener MouseListener MouseMotionListener TI1163 Dasar Perancangan GUI Restyandito - 17 TI1163 Dasar Perancangan GUI Restyandito - 18 Restyandito Dasar Perancangan GUI - 3
. class HelloPanel extends Jpanel { public void paintcomponent(graphics g) { super.paintcomponent(g); g.drawstring("hello...", 75, 100); g.drawstring("frame dengan listener", 75, 120); TI1163 Dasar Perancangan GUI Restyandito - 19. class FrameMendengar extends Jframe { public FrameMendengar() { settitle("helloworld dengan listener"); System.exit(0); ); Container contentpane = getcontentpane(); contentpane.add(new HelloPanel()); public class HelloFrame { JFrame frame = new FrameMendengar(); TI1163 Dasar Perancangan GUI Restyandito - 20 WindowListener interface memiliki 7 method, yaitu windowactivated, windowclosed, windowclosing, windowdeactivated, windowdeiconified, windowiconified, windowopened. class FrameKedua extends JFrame { public FrameKedua() { settitle("frame Keduaku di Tengah"); System.exit(0); ); TI1163 Dasar Perancangan GUI Restyandito - 21 TI1163 Dasar Perancangan GUI Restyandito - 22 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(); TI1163 Dasar Perancangan GUI Restyandito - 23 TI1163 Dasar Perancangan GUI Restyandito - 24 Restyandito Dasar Perancangan GUI - 4
Menggambar Grafik. 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 Restyandito - 25 Menggambar Grafik. class DrawRectFrame extends Jframe { public DrawRectFrame() { settitle("drawrect"); System.exit(0); ); Container contentpane = getcontentpane(); contentpane.add(new DrawRectPanel()); public class DrawRect { JFrame frame = new DrawRectFrame(); TI1163 Dasar Perancangan GUI 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 1- Fundamentals, Sun Microsystems Press, 1999. hal 259-372 The End terima kasih TI1163 Dasar Perancangan GUI Restyandito - 27 Restyandito Dasar Perancangan GUI - 5