Pembahasan JAVA Education Network Indonesia Abstract Windowing Toolkit & Swing Pengenalan Pemrograman 2 Abstract Windowing Toolkit (AWT) vs. Swing AWT GUI Components Dasar Window Classes Graphics AWT Components tambahan jeni.jardiknas.org Pembahasan Layout Managers GridLayout Manager Swing GUI Components Pengaturan Top-Level Containers Sebuah contoh JFrame Sebuah contoh JOptionPane Abstract Windowing Toolkit (AWT) vs. Swing Persamaan : Tools yang disediakan Java untuk membangun aplikasi GUI Menyediakan komponen GUI yang dapat digunakan dalam membuat aplikasi Java dan Applets Java Foundation Classes (JFCs) Bagian penting dari Java SDK Sekumpulan API yang menyederhanakan pembuatan aplikasi Java GUI Terdiri dari lima APIs utama AWT Swing Java2D Accessibility Drag and Drop Abstract Windowing Toolkit (AWT) vs. Swing AWT Beberapa komponen AWT menggunakan native code Platform-dependent Memastikan elemen Look and Feel dari aplikasi pada mesin yang berbeda dapat dibandingkan Dasar class Window Komponen GUI seperti buttons dan text fields diletakkan pada container. Swing Ditulis menggunakan Java seluruhnya Platform-independent Memastikan aplikasi yang dibangun pada platform yang berbeda akan memiliki tampilan yang sama Dibangun dengan beberapa API yang mengimplementasikan beberapa bagian AWT Dapat digunakan bersama AWT 1
Method dari class Window Class Mengatur ukuran window : void setsize(int width, int height) void setsize(dimension d) Dimension d memiliki width dan height seperti pada fields Sebuah window secara default statusnya adalah not visible. Atur visibility window : void setvisible(boolean b) jika b bernilai true, window akan ditampilkan Dasar class Window Object Frame digunakan pada saat mendesain aplikasi berbasis GUI: 2 /* Mencoba tombol pada Frame */ 3 public class SampleFrame extends Frame { 4 public static void main(string args[]) { 5 SampleFrame sf = new SampleFrame(); 6 sf.setsize(100, 100); //coba dihilangkan 7 sf.setvisible(true); //coba dihilangkan 8 } 9 } Graphics Methods pada class Graphics (abstract) : Konstruktor class Color class: Contoh Graphics 2 public class GraphicPanel extends Panel { 3 GraphicPanel() { 4 setbackground(color.black); 5 } 6 public void paint(graphics g) { 7 g.setcolor(new Color(0,255,0)); //hijau 8 g.setfont(new Font("Helvetica",Font.PLAIN,16)); 9 g.drawstring("hello GUI World!", 30, 100); 10 g.setcolor(new Color(1.0f,0,0)); //merah 11 g.fillrect(30, 100, 150, 10); 12 } 13 //bersambung... Contoh Graphics 14 /* perlu menggunakan Panel dalam Frame */ 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 } Komponen AWT Lanjut AWT controls Komponen yang mengijinkan user untuk berinteraksi dengan aplikasi GUI Merupakan subclass-subclass dari class komponen lain 2
AWT Components Lanjut: Contoh 2 class FrameWControls extends Frame { 4 FrameWControls fwc = new FrameWControls(); 5 fwc.setlayout(new FlowLayout()); 6 fwc.setsize(600, 600); 7 fwc.add(new Button("Test Me!")); 8 fwc.add(new Label("Labe")); 9 fwc.add(new TextField()); 10 CheckboxGroup cbg = new CheckboxGroup(); 11 fwc.add(new Checkbox("chk1", cbg, true)); 12 fwc.add(new Checkbox("chk2", cbg, false)); 13 fwc.add(new Checkbox("chk3", cbg, false)); 14 //bersambung... AWT Components Lanjut: Contoh 15 List list = new List(3, false); 16 list.add("mtv"); 17 list.add("v"); 18 fwc.add(list); 19 Choice chooser = new Choice(); 20 chooser.add("avril"); 21 chooser.add("monica"); 22 chooser.add("britney"); 23 fwc.add(chooser); 24 fwc.add(new Scrollbar()); 25 fwc.setvisible(true); 26 } 27 } Layout Managers Definisi : Menentukan posisi dan ukuran komponen dalam container Mengatur layout komponen dalam container Beberapa layout managers dalam Java FlowLayout BorderLayout GridLayout GridBagLayout CardLayout Methods Mengatur layout manager: void setlayout(layoutmanager mgr) Dapat berupa null, tidak menggunakan layout manager Jika tidak ada layout manager yang digunakan, posisikan tiap elemen secara manual public void setbounds(int x, int y, int width, int height) Method dari class Component Lebih sulit dan melelahkan jika menggunakan banyak komponen Perlu menggunakan method ini tiap komponen dipanggil Default manager untuk class Panel dan subclass-subclass - nya Class Applet adalah subclass dari Panel Memiliki 3 konstruktor: Memposisikan komponen dari kiri ke kanan dan atas ke bawah, dimulai dari sudut kiri atas : Menggunakan text editor 3
Pokok : Memberikan spasi antar komponen Diukur dalam pixels Kemungkinan alignment: FlowLayout.LEFT FlowLayout.CENTER FlowLayout.RIGHT 2 class FlowLayoutDemo extends Frame { 4 FlowLayoutDemo fld = new FlowLayoutDemo(); 5 fld.setlayout(new FlowLayout(FlowLayout.RIGHT,10, 10)); 6 fld.add(new Button("ONE")); 7 fld.add(new Button("TWO")); 8 fld.add(new Button("THREE")); 9 fld.setsize(100, 100); 10 fld.setvisible(true); 11 } 12 } Default layout untuk object Window dan subclass-suclass-nya Termasuk Frame dan Dialog Membagi Container menjadi lima bagian dimana object Component digunakan North - membentang horizontal South - membentang horizontal East - teratur vertikal West - teratur vertikal Center - teratur dalam dua arah Memiliki dua constructors Parameters hgap dan vgap menunjukkan jarak antar komponen dalam container Menambahkan komponen pada area tertentu : Gunakan method add dan berikan dua argumen : Komponen yang akan ditambahkan Area tempat komponen akan diletakkan Hanya satu komponen dapat diletakkan dalam satu area Area yang diperbolehkan: BorderLayout.NORTH BorderLayout.SOUTH BorderLayout.EAST BorderLayout.WEST BorderLayout.CENTER 4
2 class BorderLayoutDemo extends Frame { 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); 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 } Setelah diatur ulang : GridLayout Manager Mirip dengan FlowLayout Memposisikan komponen dari kiri ke kanan dan atas ke bawah Dimulai dari sudut kiri atas GridLayout Manager Memiliki Constructor sebagai berikut: Memisahkan container menjadi baris dan kolom Area memiliki ukuran yang sama Tidak mengindahkan ukuran awal komponen yang diberikan GridLayout Manager 2 class GridLayoutDemo extends Frame { 4 GridLayoutDemo gld = new GridLayoutDemo(); 5 gld.setlayout(new GridLayout(2, 3, 4, 4)); 6 gld.add(new Button("ONE")); 7 gld.add(new Button("TWO")); 8 gld.add(new Button("THREE")); 9 gld.add(new Button("FOUR")); 10 gld.add(new Button("FIVE")); 11 gld.setsize(200, 200); 12 gld.setvisible(true); 13 } 14 } Contoh output: GridLayout Manager Setelah pengaturan ulang: 5
Complex layouts Dapat mengkombinsaikan layout manager yang berbeda : Menggunakan Panels dalam satu waktu Selebihnya : Panel adalah sebuah Container sekaligus Component Dapat menggunakan Components dalam Panel Dapat memasukkan sebuah Panel dalam sebuah Container 2 class ComplexLayout extends Frame { 4 ComplexLayout cl = new ComplexLayout(); 5 Panel panelnorth = new Panel(); 6 Panel panelcenter = new Panel(); 7 Panel panelsouth = new Panel(); 8 /* North Panel */ 9 //Panels menggunakan FlowLayout sebagai default 10 panelnorth.add(new Button("ONE")); 11 panelnorth.add(new Button("TWO")); 12 panelnorth.add(new Button("THREE")); 13 //bersambung... 14 /* Center Panel */ 15 panelcenter.setlayout(new GridLayout(4,4)); 16 panelcenter.add(new TextField("1st")); 17 panelcenter.add(new TextField("2nd")); 18 panelcenter.add(new TextField("3rd")); 19 panelcenter.add(new TextField("4th")); 20 /* South Panel */ 21 panelsouth.setlayout(new BorderLayout()); 22 panelsouth.add(new Checkbox("Choose me!"), BorderLayout.CENTER); 23 panelsouth.add(new Checkbox("I'm here!"), 24 BorderLayout.EAST); 25 panelsouth.add(new Checkbox("Pick me!"), 26 BorderLayout.WEST); 27 //bersambung... 28 /* memasukkanpanels dalam container Frame */ 29 //Frame menggunakan BorderLayout secara default 30 cl.add(panelnorth, BorderLayout.NORTH); 31 cl.add(panelcenter, BorderLayout.CENTER); 32 cl.add(panelsouth, BorderLayout.SOUTH); 33 cl.setsize(300,300); 34 cl.setvisible(true); 35 } 36} Komponen Swing GUI Teletak pada package javax.swing Seluruhnya ditulis dalam Java Memiliki Look and Feel yang sama meskipun dijalankan pada platform yang berbeda Menyediakan komponen yang lebih menarik Color chooser Option pane 6
Komponen Swing GUI Komponen Swing GUI Nama dari komponen Swing GUI hampir menyerupai AWT Nama dari komponen AWT namun diawali dengan J Contoh: AWT: Button class Pada komponen Swing : JButton class Komponen Swing GUI Swing: PengaturanTop-Level Containers Top-level containers dalam Swing umumnya tidak cocok dengan AWT Dala hal menambahkan komponen dalam container Menambahkan sebuah component dalam container: Menggunakan content pane dari container Gunakan method getcontentpane Menambahkan komponent dalam content pane Masih menggunakan method add Swing: Contoh JFrame 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 public static void main(string args[]) { 10 SwingDemo sd = new SwingDemo(); 11 sd.launchframe(); 12 } 13 //bersambung... Swing: Contoh JFrame 14 void launchframe() { 15 /* inisialisasi */ 16 frame = new JFrame("My First Swing Application"); 17 panel = new JPanel(); 18 textfield = new JTextField("Default text"); 19 button = new JButton("Click me!"); 20 contentpane = frame.getcontentpane(); 21 //menambahkan komponen pada panel-flowlayout 22 panel.add(textfield); 23 panel.add(button); 24 /* menambahkan komponen pada contentpane */ 25 contentpane.add(panel, BorderLayout.CENTER); 26 frame.pack(); //Ukuran frame berdasar komponen 27 frame.setvisible(true); 28 } 29 } 7
Swing: Contoh JFrame Swing: Contoh JFrame Example Package java.awt tetap di-import Layout Manager yang digunakan terletak pada package ini Memberikan judul Frame dan membungkus komponen dalam Frame dapat digunakan pula pada Frame AWT Konvensi Pemrograman : Deklarasikan komponen sebagai field : Sebuah method launchframe terdifinisi: Inisialisasi dan menambahkan components Tidak lagi hanya meng-extend class Frame Kelebihan : teratur dan lebih mudah untuk menambahkan kode event handling Swing: Contoh JoptionPane Swing: Contoh JFrame 1 import javax.swing.*; 2 class JOptionPaneDemo { 3 JOptionPane optionpane; 4 void launchframe() { 5 optionpane = new JOptionPane(); 6 String name = optionpane.showinputdialog( 7 "Hi, what's your name?"); 8 optionpane.showmessagedialog(null, 9 "Nice to meet you, " + name + ".", 10 "Greeting...",optionPane.PLAIN_MESSAGE); 11 System.exit(0); 12 } 1 14 new JOptionPaneDemo().launchFrame(); } } Kesimpulan Abstract Windowing Toolkit (AWT) vs. Swing Persamaan Perbedaan Komponen AWT GUI Window Classes Dasar Component, Container, Window, Frame, Panel Graphics Methods dan class Color Komponen AWT Lanjut Label, TextField, TextArea, Button, Checkbox, CheckboxGroup, Choice, List, Scrollbar Kesimpulan Layout Managers GridLayout Manager Membuat Complex Layouts Komponen Swing GUI Mengatur Top-Level Containers Gunakan method getcontentpane Gunakan method add JFrame, JOptionPane 8