Modul Praktikum 7 Pemograman Berorientasi Objek 1. Judul : Grapichal User Interface (GUI) 2. Tujuan Percobaan : Diakhir praktikum, mahasiswa diharapkan mampu : Memahami persamaan dan perbedaan antara AWT dan Swing Perbedaan antara komponen dan kontainer. Mendesain aplikasi GUI menggunakan AWT. Mendesain aplikasi GUI menggunakan Swing. Menjelaskan tentang flow layout, border layout, dan grid layout dalam komponen GUI 3. Teori Singkat The Java Foundation Class (JFC), merupakan bagian penting dari Java SDK, yang termasuk dalam koleksi dari API dimana dapat mempermudah pengembangan aplikasi JAVA GUI. JFC termasuk diantara 5 bagian utama dari API yaitu AWT dan Swing. Tiga bagian yang lainnya dari API adalah Java2D, Accessibility, dan Drag dan Drop. Semua itu membantu pengembang dalam mendesain dan mengimplementasikan aplikasi visual yang lebih baik. AWT dan Swing menyediakan komponen GUI yang dapat digunakan dalam membuat aplikasi Java dan applet. Anda akan mempelajari applet pada bab berikutnya. Tidak seperti beberapa komponen AWT yang menggunakan native code, keseluruhan Swing ditulis menggunakan bahasa pemrograman Java. Swing menyediakan implementasi platform-independent dimana aplikasi yang dikembangkan dengan platform yang berbeda dapat memiliki tampilan yang sama. Begitu juga dengan AWT menjamin tampilan look and feel pada aplikasi yang dijalankan Modul Praktikum Pemrograman Berorientasi Objek D3 MI 59
pada dua mesin yang berbeda menjadi terlihat sama. Swing API dibangun dari beberapa API yang mengimplementasikan beberapa jenis bagian dari AWT. Kesimpulannya, komponen AWT dapat digunakan dengan komponen Swing. 3.1 Komponen GUI pada AWT a. Window Classes Fundamental Dalam mengembangkan aplikasi GUI, komponen GUI seperti tombol atau textfield diletakkan di dalam kontainer. Berikut ini adalah daftar dari beberapa kelas penting pada kontainer yang telah disediakan oleh AWT. Component Abstract Class untuk objek yang dapat ditampilkan pada console dan berinteraksi dengang user. Bagian utama dari semua kelas AWT. Container Abstract Subclass dari Component Class. Sebuah komponen yang dapat menampung komponen yang lainnya. Panel Turunan dari Container Class. Sebuah frame atau window tanpa titlebar, menubar tidak termasuk border. Superclass dari applet class. Window urunan dari Container class. Top level window, dimana berarti tidak bias dimasukkan dalam objek yang lainnya.tidak memiliki border dan menubar. Frame Turunan dari window class. Window dengan judul, menubar, border dan pengatur ukuran di pojok. Memiliki empat konstruktor, dua diantaranya memiliki penulisan seperti dibawah ini : Frame() Modul Praktikum Pemrograman Berorientasi Objek D3 MI 60
Frame(String title) Untuk mengatur ukuran window, menggunakan metode setsize. void setsize(int width, int height) mengubah ukuran komponen ini dengan width dan height sebagai parameter. void setsize(dimension d) mengubah ukuran dengan d.width dan d.height berdasar pada spesifikasi Dimension d. Default dari window adalah not visible atau tak tampak hingga Anda mengatur visibility menjadi true. Inilah syntax untuk metode setvisible. void setvisible(boolean b) b. Graphic Beberapa metode grafik ditemukan dalam Graphic class. Dibawah ini adalah daftar daribeberapa metode. drawline() drawpolyline() setcolor() fillrect() drawpolygon() getfont() drawrect() fillpolygon() setfont() clearrect() getcolor() drawstring() b. Graphic Berikut ini adalah daftar dari kontrol AWT. Kontrol adalah komponen seperti tombol atau textfield yang mengijinkan user untuk berinteraksi dengan aplikasi GUI. Berikut ini semua subkelas dari Components class. Label Button Choice TextField Modul Praktikum Pemrograman Berorientasi Objek D3 MI 61
Checkbox List TextArea CheckboxGroup Scrollbar 3.2 Layout Manager Posisi dan ukuran suatu komponen ditentukan oleh layout manager. Layout manager mengatur tampilan dari komponen di dalam kontainer. Berikut ini beberapa layout manager yang terdapat di dalam Java. 1. FlowLayout 2. BorderLayout 3. GridLayout 4. GridBagLayout 5. CardLayout Layout manager dapat diatur menggunakan metode setlayout dari Container class. Metode ini dapat ditulis sebagai berikut. void setlayout(layoutmanager mgr) Jika Anda memilih untuk tidak menggunakan layout manager, Anda dapat mengisi null sebagai argumen untuk metode ini. Tetapi selanjutnya, Anda akan mengatur posisi elemen secara manual dengan menggunakan metode setbounds dari Components class. public void setbounds(int x, int y, int width, int height) Metode ini mengatur posisi berdasarkan pada argumen x dan y, dan ukuran berdasarkan argumen width dan height. Hal ini akan cukup menyulitkan dan membosankan untuk aplikasi jika Anda memiliki beberapa objek komponen didalam objek kontainer. Anda akan memanggil metode ini untuk setiap komponen. Modul Praktikum Pemrograman Berorientasi Objek D3 MI 62
3.3 Komponen Swing Seperti pada package AWT, package dari Swing menyediakan banyak kelas untuk membuat aplikasi GUI. Package tersebut dapat ditemukan di javax.swing. Perbedaan utama antara keduanya adalah komponen Swing ditulis menyeluruh menggunakan Java mengingat yang belakangan tidak. Kesimpulannya, program GUI ditulis menggunakan banyak kelas dari package Swing yang mempunyai tampilan look and feel yang sama meski dijalankan pada beda paltform. Lebih dari itu, Swing menyediakan komponen yang lebih menarik seperti color chooser dan option pane. Nama dari komponen GUI milik Swing hampir sama persis dengan komponen GUI milik AWT. Perbedaan jelas terdapat pada penamaan komponen. Pada dasarnya, nama komponen Swing sama dengan nama komponen AWT tetapi dengan tambahan huruf J pada prefixnya. Sebagai contoh, satu komponen dalam AWT adalah button class. Sedangkan pada Swing, nama komponen tersebut menjadi Jbutton class. Berikut adalah daftar dari komponen Swing. JComponent Kelas induk untuk semua komponen Swing, tidak termasuk toplevel Container JButton Tombol push. Korespondesi pada button class dalam package AWT JCheckBox Item yang dapat dipilih atau tidak oleh pengguna. Korespondensi pada checkbox class dalam package AWT JFileChooser Mengijinkan pengguna untuk memilih sebuah file. Korespondensi pada filechooser class dalam package AWT JTextField Mengijinkan untuk mengedit text satu baris. Korespondensi pada textfield class dalam package AWT. Modul Praktikum Pemrograman Berorientasi Objek D3 MI 63
JFrame Turunan dan korepondensi pada frame class dalam package AWT tetapi keduanya sedikit tidak cocok dalam kaitannya dengan menambahkan komponen pada kontainer. Perlu mendapatkan content pane yang terbaru sebelum menambah sebuah komponen. JPanel Turunan Jcomponent. Kontainer class sederhana tetapi bukan toplevel. Korespondensi pada panel class dalam package AWT. JApplet Turunan dan korepondensi ke Applet class dalam package AWT. Juga sedikit tidak cocok dengan applet class dalam kaitannya dengan menambahkan komponen pada container JOptionPane Turunan Jcomponent. Disediakan untuk mempermudah menampilkan popup kotak dialog. JDialog Turunan dan korespondensi pada dialog class dalam package AWT. Biasanya digunakan untuk menginformasikan sesuatu kepada pengguna atau prompt pengguna untuk input. JColorChooser Turunan Jcomponent. Mengijinkan pengguna untuk memilih warna 4. Alat dan Bahan PC dengan sistem operasi Windows dan Java compiler. 5. Prosedur Percobaan 5.1 Penggunaan package awt a. frame sederhana Source-code Java dibawah ini mendemonstrasikan frame sederhana Modul Praktikum Pemrograman Berorientasi Objek D3 MI 64
sebagai penggunaan package awt. Ketiklah dan coba fahami hasilnya. 1. import java.awt.*; 2. public class SampleFrame extends Frame { 3. public static void main(string args[]) { 4. SampleFrame sf = new SampleFrame(); 5. sf.setsize(100, 100); //Coba hilangkan baris ini 6. sf.setvisible(true); //Coba hilangkan baris ini 7. } 8. } b. panel sederhana Source-code Java dibawah ini mendemonstrasikan panel sederhana sebagai penggunaan package awt. Ketiklah dan coba fahami hasilnya 1. import java.awt.*; 2. public class GraphicPanel extends Panel { 3. GraphicPanel(){ 4. setbackground(color.black); 5. } 6. 7. public void paint(graphics g) { 8. g.setcolor(new Color(0,255,0)); //green 9. g.setfont(new Font("Helvetica",Font.PLAIN,16)); 10. g.drawstring("hello GUI World!", 30, 100); 11. g.setcolor(new Color(1.0f,0,0)); //red 12. g.fillrect(30, 100, 150, 10); 13. } 14. 15. public static void main(string args[]) { 16. Frame f = new Frame("Testing Graphics Panel"); 17. GraphicPanel gp = new GraphicPanel(); 18. f.add(gp); 19. f.setsize(600, 300); 20. f.setvisible(true); 21. } 22. } c. Frame control sederhana Source-code Java dibawah ini mendemonstrasikan frame control Modul Praktikum Pemrograman Berorientasi Objek D3 MI 65
sederhana sebagai penggunaan package awt. Ketiklah dan coba fahami hasilnya 1. import java.awt.*; 2. class FrameWControls extends Frame { 3. public static void main(string args[]) { 4. FrameWControls fwc = new FrameWControls(); 5. fwc.setlayout(new FlowLayout()); 6. fwc.setsize(600, 600); 7. fwc.add(new Button( Tombol ); 8. fwc.add(new Label( Label )); 9. fwc.add(new TextField()); 10. CheckboxGroup cbg = new CheckboxGroup(); 11. fwc.add(new Checkbox("pilihan 1", cbg, true)); 12. fwc.add(new Checkbox("pilihan 2", cbg, false)); 13. fwc.add(new Checkbox("pilihan 3", cbg, false)); 14. List list = new List(3, false); 15. list.add("abc"); 16. list.add("cde"); 17. fwc.add(list); 18. Choice chooser = new Choice(); 19. chooser.add("uyil"); 20. chooser.add("upin"); 21. chooser.add("ipin"); 22. fwc.add(chooser); 23. fwc.add(new Scrollbar()); 24. fwc.setvisible(true); 25. } 26. } d. Border Layout Source-code Java dibawah ini mendemonstrasikan penggunaan BorderLayout dari package awt. Ketiklah dan coba fahami hasilnya 1. import java.awt.*; 2. class BorderLayoutDemo extends Frame { 3. public static void main(string args[]) { 4. BorderLayoutDemo bld = new BorderLayoutDemo(); 5. bld.setlayout(new BorderLayout(10, 10)); 6. bld.add(new Button("NORTH"), BorderLayout.NORTH); 7. bld.add(new Button("SOUTH"), BorderLayout.SOUTH); Modul Praktikum Pemrograman Berorientasi Objek D3 MI 66
8. bld.add(new Button("EAST"), BorderLayout.EAST); 9. bld.add(new Button("WEST"), BorderLayout.WEST); 10. bld.add(new Button("CENTER"), BorderLayout.CENTER); 11. bld.setsize(200, 200); 12. bld.setvisible(true); 13. } 14. } 5.2 Penggunaan package Swing Source-code Java dibawah ini mendemonstrasikan penggunaan package Swing. Ketiklah dan coba fahami hasilnya. a. Penggunaan frame, panel, container dan component 1. import javax.swing.*; 2. import java.awt.*; 3. class SwingDemo { 4. JFrame frame; 5. JPanel panel; 6. JTextField textfield; 7. JButton button; 8. Container contentpane; 9. void launchframe() { 10. /* initialization */ 11. Frame = new JFrame("Aplikasi Swing"); 12. panel = new JPanel(); 13. textfield = new JTextField("Ini adalah teks"); 14. button = new JButton("Tekan saya!"); 15. contentpane = frame.getcontentpane(); 16. /* + component ke panel gunakan FlowLayout */ panel.add(textfield); 17. panel.add(button); 18. /* + component ke contentpane BorderLayout */ 19. contentpane.add(panel, BorderLayout.CENTER); 20. frame.pack(); 21. frame.setvisible(true); 22. } 23. 24. public static void main(string args[]) { 25. SwingDemo sd = new SwingDemo(); Modul Praktikum Pemrograman Berorientasi Objek D3 MI 67
26. sd.launchframe(); 27. } 28. } b. Penggunaan JOptionPane 1. import javax.swing.*; 2. class JOptionPaneDemo { 3. JOptionPane optionpane; 4. void launchframe() { 5. optionpane = new JOptionPane(); 6. String name = optionpane.showinputdialog("hi, what's your name?"); 7. optionpane.showmessagedialog(null, "Nice to meet you, " + name + ".", "Greeting...", optionpane.plain_message); 8. System.exit(0); 9. } 10. public static void main(string args[]) { 11. new JOptionPaneDemo().launchFrame(); 12. } 13. } 6. Analisis Hasil Percobaan Tulislahlah masing-masing output yang dihasilkan dari semua percobaan di atas. Catat semua error yang muncul selama percobaan dan coba analisa mengapa error tersebut muncul dan bagaimana mengatasinya. Bandingkan output yang anda peroleh dengan praktikan lainnya. 7. Tugas Buatlah GUI tentang lampu lalu lintas seperti pada gambar dibawah ini. GUI tersebut harus mampu melakukan tindakan seperti berikut ini: Jika tombol (button) hijau diklik maka lampu berwama hijau akan menyala. Ketika tombol kuning diklik maka lampu berwama kuning yang menyala dan jika tombol merah diklik maka lampu yang berwarna merah (atas) akan menyala. Akhimya jika tombol exit diklik maka GUI akan tertutup (closed). Modul Praktikum Pemrograman Berorientasi Objek D3 MI 68
Modul Praktikum Pemrograman Berorientasi Objek D3 MI 69
Modul Praktikum Pemrograman Berorientasi Objek D3 MI 70