PBO Lanjut Lecture 02 – Komponen Swing Dasar NIKO IBRAHIM , M IT U NIVERSITAS KRISTEN M ARANATH A
Review Materi Minggu Lalu Apa perbedaan antara AWT dengan SWING? Apa fungsi container class? Sebutkan contoh-contoh component Swing yang
merupakan turunan dari container class!
Tujuan Kuliah Hari Ini Mahasiswa memahami komponen-komponen yang
ada pada library Java Swing Mahasiswa membuat beberapa program aplikasi berbasis GUI yang terdiri dari objek-objek Swing
Materi Perkuliahan Komponen-komponen Swing Bagian 1 Button & Label Checkbox & Radiobutton List & Combo box Spinner Border Komponen-komponen Swing Bagian 2 Menu Pop-up Menu JScrollPane JSplitPane JTabbedPane Scrollbar & Slider Dialog JDesktop/JInternalFrame
JLabel Label biasa digunakan untuk: Menampilkan judul (caption) dari komponen lagin seperti textfield atau combo box Menampilkan pesan/informasi Menampilkan hasil penghitungan atau pencarian basis data Menampilkan gambar Kita dapat menentukan jenis huruf, ukuran, style (bold,
italic, underline) dan warna dari label tersebut. Contoh membuat label: JLabel judul = new JLabel(); judul.setText("Hello, World!"); atau JLabel judul = new JLabel("Hello, World!");
JButton Button merupakan komponen yang dapat di-klik
untuk melakukan konfirmasi sesuatu. Contoh membuat button: JButton tombolOK = new JButton(); tombolOK.setText("Click me!"); atau JButton tombolOK = new JButton("Click me!");
Memberikan Gambar pada Button & Label Kita dapat menambahkan sebuah gambar kepada
JLabel dan JButton dengan cara membuat dan menset objek ImageIcon pada label dan button tsb. Contoh membuat label bergambar: ImageIcon gambarUang = new ImageIcon("uang.png"); JLabel labelJudul = new JLabel(gambarUang); labelJudul.setText("Sistem Administrasi Keuangan");
Contoh membuat button bergambar: JButton okButton = new JButton("OK DECH"); okButton.setIcon(new ImageIcon("ok.png"));
Memberikan Teks HTML pada Label & Button Salah satu feature Swing adalah dapat menginterpretasi
teks HTML di dalam JLabel dan JButton Contoh: JButton htmlButton = new JButton( "S
MALL " +"CAPITALS"); String htmlTable= "" +"| One | Two |
" +"| Three | Four |
" +"
";
JButton htmlButton2 = new JButton(htmlTable);
JFrame JFrame merupakan komponen top-level bagi
aplikasi desktop. Frame berfungsi sebagai penampung komponen-komponen lainnya. Contoh: JFrame frameUtama = new JFrame(); frameUtama.setTitle("Menu Utama");
Kita dapat membuat sebuah class baru yang
memiliki sifat-sifat JFrame dengan cara melakukan proses inheritance (extends).
Latihan 1: HelloFrame.java Buatlah file HelloFrame.java
JPanel Panel adalah suatu container yang dirancang untuk menampung sekumpulan
komponen sedemikian rupa sehingga kumpulan tersebut dapat ditampilkan bersama-sama di dalam sebuah frame. Cara yang lazim dilakukan dalam menampilkan sekumpulan komponen kontrol seperti text field, label, dan button adalah dengan menambahkan komponen-komponen tersebut ke dalam sebuah panel, kemudian panel tersebut ditambahkan ke dalam sebuah frame. Contoh membuat panel: class HelloPanel extends JPanel{ public HelloPanel(){ // buat dan tambahkan beberapa komponen: JTextField input = new JTextField(); JButton tombol = new JButton(); this.add(input); this.add(tombol); } }
Kemudian, di dalam constructor class frame, kita buat objek panel tersebut
dan tambahkan ke dalam frame tersebut: this.add(new HelloPanel());
JFrame & JPanel Teknik Umum:
Buatlah sebuah JFrame untuk antarmuka aplikasi utama Lalu, buatlah JPanel Tempatkan semua komponen Swing di dalam JPanel tersebut Tempatkan JPanel ke dalam Jframe Buat objek Jframe di main method
Latihan 2: HelloFrame2.java import javax.swing.*; public class HelloFrame extends JFrame { /** Creates a new instance of HelloFrame */ public HelloFrame() { this.setSize(200,100); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setTitle("Hello World!"); HelloPanel panel1 = new HelloPanel(); this.add(panel1); this.setVisible(true); this.setLocationRelativeTo(null); // set location to the center } class HelloPanel extends JPanel{ public HelloPanel(){ // code to add components to the panel goes here JLabel label1 = new JLabel("Hello, this is label!"); this.add(label1); JButton button1 = new JButton("Click me!"); this.add(button1); } } public static void main(String[] args) { new HelloFrame(); // buat objek JFrame } }
Modifikasi Program HelloFrame.java Modifikasi program HelloFrame.java tersebut
sedemikian rupa sehingga Label dan Button memiliki Image seperti ditunjukkan gambar berikut:
Latihan 3: JButton & HTML Buatlah sebuah JFrame yang mengandung 2 buah
objek JButton yang berisi teks HTML sbb:
JCheckbox Checkbox adalah toggle switch yang diberi label.
Setiap kali kita menekan checkbox, maka statusnya akan berganti antara checked dan unchecked. Swing mengimplementasikan checkbox sebagai jenis khusus dari button. Contoh membuat checkbox: JCheckBox cbox1 = new JCheckBox("Sambal"); JCheckBox cbox2 = new JCheckBox("Saus Tomat"); JCheckBox cbox3 = new JCheckBox("Salad");
JRadioButton Radiobutton hampir menyerupai checkbox, tetapi
penggunaannya haruslah secara berkompok. Apabila kita menekan salah satu radio button di dalam suatu kelompok, maka secara otomatis akan menonaktifkan radio button yang lain. Radio button dapat dikelompokkan bersama dengan menggunakan objek dari class ButtonGroup. Contoh membuat dan mengelompokkan radio button: JRadioButton rb1 = new JRadioButton("Sapi"); JRadioButton rb2 = new JRadioButton("Ayam"); JRadioButton rb3 = new JRadioButton("Sayuran", true); ButtonGroup makananGroup = new ButtonGroup( ); makananGroup.add(rb1); makananGroup.add(rb2); makananGroup.add(rb3);
Latihan 4: PesanMakanan.java Buatlah sebuah program yang memiliki 3 buah JPanel.
JPanel1: berisi 3 buah JCheckbox JPanel2: berisi 3 buah JRadioButton (kelompokkan ke dalam 1 ButtonGroup) JPanel3: berisi sebuah Jbutton Ukuran Frame: 300x200 Beri layout sbb: frame.setLayout(new FlowLayout()); Untuk menggunakan layout, lakukan: import java.awt.*; (Layout akan banyak dibahas minggu depan)
Tempatkan ketiga JPanel tersebut ke dalam sebuah JFrame, sbb:
JList Dengan menggunakan List kita dapat memilih dari
sekumpulan pilihan. List dapat dikonfigurasi sedemikian rupa sehingga kita hanya dapat memilih satu pilihan atau dapat memilih beberapa pilihan sekaligus. Untuk memilih item di dalam List, kita dapat menggunakan kombinasi tombol mouse dengan tombol Control atau Shift pada keyboard. Contoh membuat List: String[ ] days = { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" }; JList list = new JList(days);
JComboBox Combo box merupakan campuran antara text field dengan list.
Combo box hanya menampilkan satu baris teks yang disertai tombol bertanda panah. Apabila kita menekan tombol panah tersebut, combo box akan membuka dan menampilkan daftar pilihan. Kita dapat memilih satu pilihan dengan cara menekan pilihan yang diinginkan. Setelah pilihan dibuat, combo box akan kembali menutup, daftar pilihan akan menghilang, dan pilihan yang baru akan ditampilkan di dalam text field. List dan Combo box memiliki kemiripan yaitu memiliki data model yang sama. Keduanya dapat menampung data model berupa sebuah array. Contoh membuat Combo box: String[ ] days = { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" }; JComboBox jcb = new JComboBox(days);
Contoh Penggunaan JComboBox & JList
Combo box List
Review: Array di Java Array adalah variabel yang yang dikelompokkan bersama dalam suatu
nama. Sama seperti variabel, array pun dibuat dengan cara menyebutkan tipe data dan nama array-nya. Perbedaannya adalah adanya penambahan tanda bracket [ dan ]. Array memiliki panjang yang fixed. Sekali didefinisikan, panjangnya akan tetap sama. Namun, suatu variabel array dapat di-reassign sedemikian rupa sehingga ia mengacu pada array baru yang memiliki panjang yg berbeda. Ada 4 tahap manipulasi array:
Array declaration Array creation Array initialization Array processing
Array Declaration: [ ] We can declare arrays for any type of information that can be stored as
a variable. Examples of declaring arrays: String[] students; // An array of String variables int[] values; // An array of integer variables boolean[] truthTable; // An array of boolean variables char[] grades; // An array of character variables We can also put the bracket after the variable name instead of the
variable type, although it is a less common style, for example: String students[]; So,
String[] students === String students[]
Array Creation: new To create an array, we need to use the new keyword and specify the
length of the array as following: String[] names; names = new String[10]; or we can combine the declaration and the creation into one statement: String[] names = new String[10];
Array Initialization: {…} One way to initialize the values in an array is to simply assign them one by
one: String[] days = new String[7]; days[0] = "Sunday"; days[1] = "Monday"; days[2] = "Tuesday"; days[3] = "Wednesday"; days[4] = "Thursday"; days[5] = "Friday"; days[6] = "Saturday"; Java has a shorthand way to create an array and initialize it with constant values: String[] days = { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" }; Here’s an example of an array initializer for an int array: int[] primes = { 2, 3, 5, 7, 11, 13, 17 }; An alternative way to code an initializer is like this: int[] primes = new int[] { 2, 3, 5, 7, 11, 13, 17 };
Pemrosesan Array: for loop One of the most common ways to process an array is with a for loop. An array has a length that we can use as a value in the termination
expression of a for loop. For example, here’s a for loop that prints the content of the arrays of days: Example: Days.java public class Days{ public static void main(String[] args){ String[] days = { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday" }; for (int i = 0; i < days.length; i++){ System.out.println(days[i]); } } }
Enhanced for loop (foreach) In addition to the standard for loop, Java 5.0 provides an enhanced
for loop that’s designed specifically for working with arrays and collections. It is sometimes called a foreach loop because it’s used to process each element in an array. Syntax: for (type variableName : arrayName){ // statements } Example (a variation of Days.java): for (String day: days){ System.out.println(day); } Short quiz: Try to change Days.java using foreach loop.
Latihan 5: JList & JComboBox Buatlah sebuah program bernama DaysLister yang berisikan
sebuah JComboBox, JList, dan JButton, sbb: Buat sebuah JFrame berukuran 200x200 Buat sebuah array sebagai model:
String[] days = { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };
Buatlah sebuah objek JPanel dan tambahkan semua komponen
JComboBox, JList, dan Jbutton kepada panel tsb:
Buat objek JComboBox dan masukkan model data “days”, set sebagai editable: JComboBox jcb = new JComboBox(days); jcb.setEditable(true);
Buat objek JList dan masukkan model data “days: JList list = new JList(days);
Buat sebuah JButton: JButton okButton = new JButton("OK");
Hasil DaysLister.java
Spinner Spinner sangat berguna untuk menampilkan sebuah nilai
sequence (urutan) seperti angka atau tanggal. Spinner memiliki kemiripan dengan Combo box karena menampilan sebuah nilai dalam suatu text field. Namun, spinner tidak menampilkan daftar pilihan melainkan memberikan sepasang tombol panah (atasbawah) untuk mengubah nilai yang tertera di dalam text field. Sama seperti combo box, spinner juga dapat dibuat menjadi editable, sehingga kita dapat secara langsung mengetikan nilai di dalam field-nya. Swing menyediakan 3 tipe dasar spinner, yang direpresentasikan melalui data model yang berbeda:
SpinnerListModel, SpinnerNumberModel, and SpinnerDateModel.
Latihan 6: Menggunakan SpinnerListModel SpinnerList.java Buatlah sebuah JFrame baru Buatlah sebuah Spinner yang menggunakan
SpinnerListModel berdasarkan sbb: String[] options = { "small","medium","large","huge" }; SpinnerListModel model = new SpinnerListModel( options ); JSpinner spinner = new JSpinner( model );
Agar ukuran frame mengikuti ukuran spinner, ketikkan
kode berikut: frame.pack();
Latihan 7: Menggunakan SpinnerNumberModel SpinnerNumber.java Buatlah sebuah program baru yang mirip dengan
latihan sebelumnya, tetapi kali ini kita akan menggunakan SpinnerNumberModel sbb: // siapkan beberapa numbers: double initial=5.0, min=0.0, max=10.0, increment=0.1; // buat model: SpinnerNumberModel model = new SpinnerNumberModel( initial, min, max, increment ); // buat objek spinner berdasarkan model tsb: JSpinner spinner = new JSpinner(model);
Borders Semua komponen Swing dapat memiliki dekorasi border. Untuk
memberikan dekorasi, kita cukup menggunakan method setBorder( ). Kita perlu memberikan implementasi dari interface Border sesuai dengan kebutuhan kita. Swing menyediakan banyak sekali implementasi Border di dalam package javax.swing.border. Untuk membuat Border, kita dapat melakukan 2 cara:
menggunakan class BorderFactory membuat objek berdasarkan class border
Contoh men-set border sebuah label menggunakan BorderFactory: JLabel labelTwo = new JLabel("I have an etched border."); labelTwo.setBorder(BorderFactory.createEtchedBorder( ));
Borders (cont.) Using Border’s Constructor (new) BorderFactory sangat mudah digunakan, tetapi tidak
menawarkan setiap option dari border yang digunakan. Misalnya, apabila kita ingin membuat sebuah raised EtchedBorder (default-nya adalah lowered), maka kita harus menggunakan constructor EtchedBorder. Contoh membuat objek EtchedBorder dengan option RAISED: JLabel labelTwo = new JLabel("I have a raised etched border."); labelTwo.setBorder( new EtchedBorder(EtchedBorder.RAISED) );
Jenis-jenis Border BevelBorder SoftBevelBorder EmptyBorder
EtchedBorder LineBorder MatteBorder TitledBorder CompoundBorder
Latihan 8: BorderTest.java Buatlah: BordersTest.java
STOP: Pastikan Anda sudah membuat program Latihan berikut 1.
2. 3. 4. 5. 6. 7.
8.
HelloFrame HelloFrame2 JButton + HTML JCheckbox & JRadioButton: PesanMakanan JComboBox: DayLister SpinnerList SpinnerNumber Borders
Congratulations! You’ve learnt… Swing Components:
ImageIcon pada JButton dan JLabel Check Box Radio Button Combo Box List Spinner Borders
Review: PenggunaanArray
Next… More Swing Components
MENU POP UP MENU JS CRO LLPANE JS PLI TPANE JTABBEDPAN E S CRO LLBAR / S LI DER DI ALO G DES K TOP PANE / INTERNAL FRAM E
JMenu
JMenuBar JMenu JMenuItem
JMenu adalah sebuah menu standar yang bersifat pull-
down. Menu dapat berisi menu lain yang disimpan sebagai submenu item. Hal ini memungkinkan kita membuat suatu struktur menu yang kompleks. Kita dapat menyimpan berbagai komponen di dalam menu (seperti checkbox, radiobutton, dll) Untuk menyimpan menu dalam bentuk horizontal bar, kita gunakan JMenuBar. Kita dapat meletakan JMenuBar di mana saja: top, bottom, atau middle.
Keyboard Access ( Alt & Ctrl) Kita dapat menggunakan keyboard untuk mengakses
menu. Ada 2 cara: 1. Mnemonics
Berupa satu karakter di dalam nama menu Untuk mengaksesnya, kita menekan tombol “Alt + karakter“ mnemonic-nya Menu items juga dapat memiliki mnemonics.
2. Accelerator Accelerator merupakan kombinasi keyboard untuk memilih menu item tanpa perlu ditunjukkan isi menu yang bersangkutan. Contoh: Ctrl-C biasa digunakan sebagai shortcut untuk menu Copy item di dalam menu Edit.
Latihan 9: DinnerMenu.java Buatlah program DinnerMenu yang memiliki
tampilan sbb:
JPopupMenu Pop up menu biasa disebut juga sebagai “context
menu” merupakan menu yang dapat muncul di mana saja tergantung posisi mouse. (Untuk windows, biasa diaktifkan menggunakan klik kanan) Cara pembuatannya mirip dengan JMenu biasa, tetapi kita tidak menempelkannya pada JMenuBar.
Latihan 10: ContextMenu.java Buatlah sebuah aplikasi yang mendemonstrasikan
penggunaan Pop Up Menu sbb:
JScrollPane JScrollPane merupakan suatu container yang dapat
menampung satu komponen. Dengan kata lain, JScrollPane berfungsi untuk membungkus suatu komponen lain. Secara default, apabila komponen yang dibungkusnya lebih besar dari JScrollPane itu sendiri, maka JScrollPane akan menyediakan scrollbars. Pada saat membuat JScrollPane, kita dapat menentukan kondisi untuk tampilan scrollbars-nya. Hal ini dikenal dengan nama “scrollbar display policy” yang berlaku untuk scrollbar horizontal maupun vertical.
Constants to specify the policy of scrollbars
Constants (options)
Description
HORIZONTAL_SCROLLBAR_AS_NEED Displays a scrollbar only if the wrapped ED component doesn't fit. VERTICAL_SCROLLBAR_AS_NEEDED HORIZONTAL_SCROLLBAR_ALWAYS VERTICAL_SCROLLBAR_ALWAYS
Always shows a scrollbar, regardless of the contained component's size.
HORIZONTAL_SCROLLBAR_NEVER VERTICAL_SCROLLBAR_NEVER
Never shows a scrollbar, even if the contained component won't fit. If you use this policy, you should provide some other way to manipulate the JScrollPane.
Latihan 11: ScrollPaneFrame.java Buatlah sebuah frame yang memiliki JScrollPane di
dalamnya dan menampilkan sebuah gambar sbb:
JSplitPane JSplitPane merupakan container khusus yang dapat
menampung dua komponen. Masing-masing komponen disimpan di dalam sub-pane tersendiri. Terdapat sebuah splliter bar yang berfungsi untuk mengubah ukuran kedua subpane tersebut.
Latihan 12: SplitPaneFrame.java Buatlah sebuah frame yang memiliki JSplitPane.
Masing-masing subpane diberikan gambar sbb:
JTabbedPane JTabbedPane merupakan container yang memiliki tab
berlabel. Setiap tab memiliki sebuah nama. Untuk menambahkan sebuah tab ke dalam JTabbedPane, kita tinggal gunakan method addTab(). Hati-hati: walaupun JTabbedPane hanya menunjukkan satu set komponen sekali waktu, tetap harus diketahui bahwa semua komponen di tab lainnya tetap “hidup” dan berada di memori.
Latihan 13: TabbedPaneFrame.java Buatlah sebuah frame yang memiliki JTabbedPane.
Lalu tambahkan 2 buah tab “Control” dan “Picture”
sbb:
JSlider & JScrollBar JSlider dan JScrollBar merupakan komponen Swing yang
mirip cara kerjanya. Kita dapat menentukan orientasinya: HORIZONTAL atau VERTICAL Kita dapat menentukan juga nilai minimum, maximum, dan initial. JSlider memiliki tick mark, yaitu garis yang menunjukan suatu nilai tertentu sepanjang slider. Ada 2 jenis tick mark: major dan minor, contoh: slider.setMajorTickSpacing(48); slider.setMinorTickSpacing(16); slider.setPaintTicks(true);
Latihan 14: Slippery.java Buatlah sebuah frame yang memiliki sebuah
JScrollBar dan JSlider sbb:
Dialog Dialog biasanya digunakan untuk menampilkan informasi kepada user
atau menanyakan sesuatu. Dialog dapat diakses dengan menggunakan static methods yang terdapat pada class JOptionPane. Terdapat beberapa variasi yang bisa dibuat yaitu: Jenis Dialog
Fungsi
Message dialog
Menampilkan suatu pesan kepada user, biasanya disertai dengan sebuah tombol OK
Confirmation Menanyakan sebuah pertanyaan dan menampilkan dialog tombol jawaban: Yes, No, dan Cancel Input dialog
Meminta user untuk memasukkan suatu String
Option dialogs
Tipe yang paling umum. Kita dapat menyimpan berbagai komponen di dalamnya.
Latihan15: ExerciseOptions.java Pada latihan ini kita akan menggunakan semua
variasi dari JOptionPane:
JOptionPane.showMessageDialog JOptionPane.showConfirmDialog JOptionPane.showInputDialog JOptionPane.showOptionDialog
Run: ExerciseOptions.java
showMessageDialog showConfirmDialog showInputDialog
showOptionDialog
Desktop Apabila kita menginginkan aplikasi windows di dalam
windows, kita dapat menggunakan JDesktopPane dan JInternalFrame. Internal frame ini dapat dipindahkan lokasinya (drag), di-resize, dijadikan icon, serta di-maximize. Internal frame ini sebenarnya merupakan suatu container seperti biasanya. Artinya kita dapat menyimpan berbagai komponen dan data di dalamnya.
Latihan 16: Desktop.java Pada latihan ini, Anda diminta membuat sebuah
JDesktopPane. Kemudian, Anda membuat 5 buah JInternalFrame sehingga menghasilkan antarmuka sbb:
Well Done!, You’ve learnt: JMenu & JMenuBar
JPopupMenu JScrollPane JSplitPane JTabbedPane JScrollBar & JSlider JOptionPane
JDesktopPane & JInternalFrame
STOP: pastikan Anda menyelesaikan latihan berikut: 1.
2. 3. 4. 5. 6. 7.
8.
JMenu: DinnerMenu.java JPopUpMenu: ContextMenu.java JScrollPane: ScrollPaneFrame.java JSplitPane: SplitPaneFrame.java JTabbedPane: TabbedPaneFrame.java JSlider /JScrollbar: Slippery.java JOptionPane: ExcerciseOptions.java JDesktop/JInternalFrame: Desktop.java
What on Next Week? LayoutManager:
FlowLayout GridLayout BorderLayout BoxLayout GridBagLayout
