Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Pengenalan Pemrograman 2 Versi 2.0 Abstract windowing toolkit & swing.

Presentasi serupa


Presentasi berjudul: "Pengenalan Pemrograman 2 Versi 2.0 Abstract windowing toolkit & swing."— Transcript presentasi:

1 Pengenalan Pemrograman 2 Versi 2.0 Abstract windowing toolkit & swing

2 Pembahasan Abstract Windowing Toolkit (AWT) vs. Swing Komponen GUI pada AWT ◦Dasar Class Window ◦Graphics ◦Komponen AWT lanjut

3 Pembahasan Layout Manager ◦FlowLayout Manager ◦BorderLayout Manager ◦GridLayout Manager ◦Panel dan Tampilan kompleks Swing GUI Components ◦Pengaturan Top-Level Containers ◦Sebuah contoh JFrame ◦Sebuah contoh JOptionPane

4 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 Applet 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

5 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 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

6 AWT GUI Components: Dasar class Window Komponen GUI seperti buttons dan text fields diletakkan pada container.

7 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 (diset menjadi visible)

8 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 }

9 AWT GUI Components: Graphics Methods pada class Graphics (abstract) : Konstruktor class Color :

10 AWT GUI Components: Contoh Graphics 1 import java.awt.*; 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...

11 AWT GUI Components: 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 }

12 Komponen AWT Lanjut AWT controls ◦Komponen yang mengijinkan user untuk berinteraksi dengan aplikasi GUI ◦Merupakan subclass-subclass dari class komponen lain

13 Komponen AWT Lanjut: Contoh 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("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...

14 Komponen AWT 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 }

15 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

16 Layout Managers: Method 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 object Component  Perlu menggunakan method ini tiap object dipanggil

17 Layout Managers: FlowLayout Manager Default manager untuk class Panel dan subclass-subclass - nya ◦Class Applet adalah subclass dari Panel Memposisikan komponen dari kiri ke kanan dan atas ke bawah, dimulai dari sudut kiri atas : ◦Menggunakan text editor

18 Layout Managers: FlowLayout Manager Memiliki 3 konstruktor:

19 Layout Managers: FlowLayout Manager Gap : ◦Memberikan jarak antar komponen ◦Diukur dengan satuan pixel Kemungkinan alignment: FlowLayout.LEFT FlowLayout.CENTER FlowLayout.RIGHT

20 Layout Managers: FlowLayout Manager 1 import java.awt.*; 2 class FlowLayoutDemo extends Frame { 3 public static void main(String args[]) { 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 }

21 Layout Managers: FlowLayout Manager Contoh output:

22 Layout Managers: BorderLayout Manager Default layout untuk object Window dan subclass-suclass-nya ◦Termasuk Frame dan Dialog Membagi object 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

23 Layout Managers: BorderLayout Manager Memiliki dua konstruktor ◦Parameters hgap dan vgap menunjukkan jarak antar komponen dalam container

24 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

25 Layout Managers: BorderLayout Manager 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); 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 }

26 Layout Managers: BorderLayout Manager Contoh output: Setelah diatur ulang :

27 Layout Managers: GridLayout Manager Serupa dengan FlowLayout ◦Memposisikan komponen dari kiri ke kanan dan atas ke bawah ◦Dimulai dari sudut kiri atas Memisahkan container menjadi baris dan kolom ◦Area memiliki ukuran yang sama ◦Tidak mempedulikan ukuran sebenarnya dari komponen

28 Layout Managers: GridLayout Manager Memiliki Konstruktor sebagai berikut:

29 Layout Managers: GridLayout Manager 1 import java.awt.*; 2 class GridLayoutDemo extends Frame { 3 public static void main(String args[]) { 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 }

30 Layout Managers: GridLayout Manager Contoh output: Setelah pengaturan ulang:

31 Panel dan Tampilan Kompleks Tampilan kompleks ◦Dapat mengkombinsaikan layout manager yang berbeda ◦Menggunakan Panel dalam satu waktu Perlu diingat : ◦Panel adalah sebuah Container sekaligus Component ◦Dapat memasukkan Components ke dalam Panel ◦Dapat menambahkan Panel dalam sebuah Container

32 1 import java.awt.*; 2 class ComplexLayout extends Frame { 3 public static void main(String args[]) { 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... Panel dan Tampilan Kompleks

33 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... Panel dan Tampilan Kompleks

34 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 } Panel dan Tampilan Kompleks

35 Contoh output: Panel dan Tampilan Kompleks

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

37 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

38 Komponen Swing GUI

39

40 Swing: Pengaturan Top-Level Container Top-level containers dalam Swing umumnya tidak cocok dengan AWT ◦Dalam hal menambahkan komponen dalam container Menambahkan sebuah komponen dalam container: ◦Menggunakan content pane dari container  Gunakan method getContentPane ◦Menambahkan komponen dalam content pane  Masih menggunakan method add

41 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...

42 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 }

43 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 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

44 Swing: Contoh JFrame Contoh output:

45 Swing: Contoh JoptionPane 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 } 13 public static void main(String args[]) { 14 new JOptionPaneDemo().launchFrame(); }}

46 Swing: Contoh JOptionPane Contoh output:

47 Kesimpulan Abstract Windowing Toolkit (AWT) vs. Swing ◦Persamaan ◦Perbedaan Komponen AWT GUI ◦Class Window Dasar  Component, Container, Window, Frame, Panel ◦Graphics  Methods dan class Color ◦Komponen AWT Lanjut  Label, TextField, TextArea, Button, Checkbox, CheckboxGroup, Choice, List, Scrollbar

48 Kesimpulan Layout Managers ◦FlowLayout Manager ◦BorderLayout Manager ◦GridLayout Manager ◦Membuat Tampilan Kompleks Komponen Swing GUI ◦Mengatur Top-Level Containers  Gunakan method getContentPane  Gunakan method add ◦JFrame, JOptionPane


Download ppt "Pengenalan Pemrograman 2 Versi 2.0 Abstract windowing toolkit & swing."

Presentasi serupa


Iklan oleh Google