5/24/2012 Pemograman Berorientasi Objek
Pembahasan JAVA Education Network Indonesia
Abstract Windowing Toolkit & Swing
• Abstract Windowing Toolkit (AWT) vs. Swing • AWT GUI Components
Pengenalan Pemrograman 2
– Dasar Window Classes – Graphics – AWT Components tambahan
jeni.jardiknas.org
Pembahasan • Layout Managers – FlowLayout Manager – BorderLayout Manager – GridLayout Manager – Panels dan Complex Layouts
• Swing GUI Components – Pengaturan Top-Level Containers – Sebuah contoh JFrame – Sebuah contoh JOptionPane
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
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
AWT GUI Components: 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
5/24/2012 Pemograman Berorientasi Objek
AWT GUI Components: 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
AWT GUI Components: Dasar class Window • Object Frame digunakan pada saat mendesain aplikasi berbasis GUI: 1 import java.awt.*; 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 }
AWT GUI Components: Graphics • Methods pada class Graphics (abstract) :
AWT GUI Components: Contoh Graphics 1 2 3 4 5 6 7 8
• Konstruktor class Color class:
9 10 11 12 13
AWT GUI Components: Contoh Graphics 14 15 16
17 18 19 20 21 22
/* perlu menggunakan Panel dalam Frame */ public static void main(String args[]) { Frame f = new Frame("Testing Graphics Panel"); GraphicPanel gp = new GraphicPanel(); f.add(gp); f.setSize(600, 300); f.setVisible(true); } }
import java.awt.*; public class GraphicPanel extends Panel { GraphicPanel() { setBackground(Color.black); } public void paint(Graphics g) { g.setColor(new Color(0,255,0)); //hijau g.setFont(new Font("Helvetica",Font.PLAIN,16)); g.drawString("Hello GUI World!", 30, 100); g.setColor(new Color(1.0f,0,0)); //merah g.fillRect(30, 100, 150, 10); } //bersambung...
Komponen AWT Lanjut • AWT controls – Komponen yang mengijinkan user untuk berinteraksi dengan aplikasi GUI – Merupakan subclass-subclass dari class komponen lain
2
5/24/2012 Pemograman Berorientasi Objek
AWT Components Lanjut: Contoh
AWT Components Lanjut: Contoh 1 2 3 4 5 6 7 8 9 10 11 12 13 14
import java.awt.*; class FrameWControls extends Frame { public static void main(String args[]) { FrameWControls fwc = new FrameWControls(); fwc.setLayout(new FlowLayout()); fwc.setSize(600, 600); fwc.add(new Button("Test Me!")); fwc.add(new Label("Labe")); fwc.add(new TextField()); CheckboxGroup cbg = new CheckboxGroup(); fwc.add(new Checkbox("chk1", cbg, true)); fwc.add(new Checkbox("chk2", cbg, false)); fwc.add(new Checkbox("chk3", cbg, false)); //bersambung...
16 17 18 19 20 21 22 23 24 25
• Definisi : – Menentukan posisi dan ukuran komponen dalam container – Mengatur layout komponen dalam container
• Beberapa layout managers dalam Java – FlowLayout – BorderLayout – GridLayout – GridBagLayout – CardLayout
Layout Managers: FlowLayout Manager • Default manager untuk class Panel dan subclass-subclass - nya
}
26 27
Layout Managers
List list = new List(3, false); list.add("MTV"); list.add("V"); fwc.add(list); Choice chooser = new Choice(); chooser.add("Avril"); chooser.add("Monica"); chooser.add("Britney"); fwc.add(chooser); fwc.add(new Scrollbar()); fwc.setVisible(true);
15
}
Layout Managers: 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
Layout Managers: FlowLayout Manager • Memiliki 3 konstruktor:
– Class Applet adalah subclass dari Panel
• Memposisikan komponen dari kiri ke kanan dan atas ke bawah, dimulai dari sudut kiri atas : – Menggunakan text editor
3
5/24/2012 Pemograman Berorientasi Objek
Layout Managers: FlowLayout Manager
Layout Managers: FlowLayout Manager 1
• Pokok : – Memberikan spasi antar komponen – Diukur dalam pixels
2 3 4
5
• Kemungkinan alignment: FlowLayout.LEFT FlowLayout.CENTER FlowLayout.RIGHT
6 7 8 9 10 11 12
Layout Managers: FlowLayout Manager • Contoh output:
import java.awt.*; class FlowLayoutDemo extends Frame { public static void main(String args[]) { FlowLayoutDemo fld = new FlowLayoutDemo(); fld.setLayout(new FlowLayout(FlowLayout.RIGHT,10, 10)); fld.add(new Button("ONE")); fld.add(new Button("TWO")); fld.add(new Button("THREE")); fld.setSize(100, 100); fld.setVisible(true); } }
Layout Managers: BorderLayout Manager • 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
Layout Managers: BorderLayout Manager • Memiliki dua constructors
– Parameters hgap dan vgap menunjukkan jarak antar komponen dalam container
Layout Managers: BorderLayout Manager • 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
5/24/2012 Pemograman Berorientasi Objek
Layout Managers: BorderLayout Manager import java.awt.*; class BorderLayoutDemo extends Frame { public static void main(String args[]) { BorderLayoutDemo bld = new BorderLayoutDemo(); bld.setLayout(new BorderLayout(10, 10)); bld.add(new Button("NORTH"), BorderLayout.NORTH); bld.add(new Button("SOUTH"), BorderLayout.SOUTH); bld.add(new Button("EAST"), BorderLayout.EAST); bld.add(new Button("WEST"), BorderLayout.WEST); bld.add(new Button("CENTER"), BorderLayout.CENTER); bld.setSize(200, 200); bld.setVisible(true); } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Layout Managers: GridLayout Manager
Layout Managers: BorderLayout Manager • Contoh output:
Setelah diatur ulang :
Layout Managers: GridLayout Manager
• Mirip dengan FlowLayout – Memposisikan komponen dari kiri ke kanan dan atas ke bawah – Dimulai dari sudut kiri atas
• Memiliki Constructor sebagai berikut:
• Memisahkan container menjadi baris dan kolom – Area memiliki ukuran yang sama – Tidak mengindahkan ukuran awal komponen yang diberikan
Layout Managers: GridLayout Manager 1 2 3 4 5 6 7 8 9 10 11 12 13 14
import java.awt.*; class GridLayoutDemo extends Frame { public static void main(String args[]) { GridLayoutDemo gld = new GridLayoutDemo(); gld.setLayout(new GridLayout(2, 3, 4, 4)); gld.add(new Button("ONE")); gld.add(new Button("TWO")); gld.add(new Button("THREE")); gld.add(new Button("FOUR")); gld.add(new Button("FIVE")); gld.setSize(200, 200); gld.setVisible(true); } }
Layout Managers: GridLayout Manager • Contoh output:
Setelah pengaturan ulang:
5
5/24/2012 Pemograman Berorientasi Objek
Panels dan Complex Layouts • Complex layouts – Dapat mengkombinsaikan layout manager yang berbeda : – Menggunakan Panels dalam satu waktu
Panels dan Complex Layouts import java.awt.*; class ComplexLayout extends Frame { public static void main(String args[]) { ComplexLayout cl = new ComplexLayout(); Panel panelNorth = new Panel(); Panel panelCenter = new Panel(); Panel panelSouth = new Panel(); /* North Panel */ //Panels menggunakan FlowLayout sebagai default panelNorth.add(new Button("ONE")); panelNorth.add(new Button("TWO")); panelNorth.add(new Button("THREE")); //bersambung...
1 2 3 4 5 6
• Selebihnya : – Panel adalah sebuah Container sekaligus Component – Dapat menggunakan Components dalam Panel – Dapat memasukkan sebuah Panel dalam sebuah Container
7 8 9
10 11 12 13
Panels dan Complex Layouts 14 15 16 17 18 19 20 21 22
23 24 25 26 27
/* Center Panel */ panelCenter.setLayout(new GridLayout(4,4)); panelCenter.add(new TextField("1st")); panelCenter.add(new TextField("2nd")); panelCenter.add(new TextField("3rd")); panelCenter.add(new TextField("4th")); /* South Panel */ panelSouth.setLayout(new BorderLayout()); panelSouth.add(new Checkbox("Choose me!"), BorderLayout.CENTER); panelSouth.add(new Checkbox("I'm here!"), BorderLayout.EAST); panelSouth.add(new Checkbox("Pick me!"), BorderLayout.WEST); //bersambung...
Panels dan Complex Layouts • Contoh output:
Panels dan Complex Layouts /* 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 } 28
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
5/24/2012 Pemograman Berorientasi Objek
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
Swing: Contoh JFrame 1 2 3 4 5 6 7 8 9 10 11 12 13
import javax.swing.*; import java.awt.*; class SwingDemo { JFrame frame; JPanel panel; JTextField textField; JButton button; Container contentPane; public static void main(String args[]) { SwingDemo sd = new SwingDemo(); sd.launchFrame(); } //bersambung...
void launchFrame() { /* inisialisasi */ frame = new JFrame("My First Swing Application"); panel = new JPanel(); textField = new JTextField("Default text"); button = new JButton("Click me!"); contentPane = frame.getContentPane(); //menambahkan komponen pada panel-FlowLayout panel.add(textField); panel.add(button); /* menambahkan komponen pada contentPane */ contentPane.add(panel, BorderLayout.CENTER); frame.pack(); //Ukuran frame berdasar komponen frame.setVisible(true); }
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
}
7
5/24/2012 Pemograman Berorientasi Objek
Swing: Contoh JFrame • 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
Swing: Contoh JFrame Example • Contoh output:
• 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14
import javax.swing.*; class JOptionPaneDemo { JOptionPane optionPane; void launchFrame() { optionPane = new JOptionPane(); String name = optionPane.showInputDialog( "Hi, what's your name?"); optionPane.showMessageDialog(null, "Nice to meet you, " + name + ".", "Greeting...",optionPane.PLAIN_MESSAGE); System.exit(0); } public static void main(String args[]) { 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
Swing: Contoh JFrame • Contoh output:
Kesimpulan • Layout Managers – FlowLayout Manager – BorderLayout Manager – GridLayout Manager – Membuat Complex Layouts • Komponen Swing GUI – Mengatur Top-Level Containers • Gunakan method getContentPane • Gunakan method add – JFrame, JOptionPane
8
