PBO Lanjut Lecture 02 Komponen Swing Dasarsi.itmaranatha.org/.../article/173/Lecture02-Komponen_Dasar_Swing.pdf · JList Dengan ... Semua komponen Swing dapat memiliki dekorasi border.

N IK O IB R A H IM , M IT

U N IV E R S ITA S K R IS TE N M A R A N A TH A

PBO Lanjut Lecture 02 – Komponen Swing Dasar

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 men-set 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(

"<html>S<font size=-2>MALL<font size=+0> " +"C<font size=-2>APITALS");

String htmlTable= "<html><table border=1>"

+"<tr><td>One</td><td>Two</td></tr>"

+"<tr><td>Three</td><td>Four</td></tr>"

+"</table>";

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);



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

List

Combo box

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 (atas-bawah) 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. HelloFrame

2. HelloFrame2

3. JButton + HTML

4. JCheckbox & JRadioButton: PesanMakanan

5. JComboBox: DayLister

6. SpinnerList

7. SpinnerNumber

8. Borders

Congratulations!

You’ve learnt…

Swing Components: ImageIcon pada JButton dan JLabel

Check Box

Radio Button

Combo Box

List

Spinner

Borders

Review: PenggunaanArray

M ENU

P O P UP M ENU

JS CRO LLP ANE

JS P LI TP ANE

JTABBEDP AN E

S CRO LLBAR / S LI DER

DI ALO G

DES K TO P P ANE / I NTERNAL FRAM E

Next… More Swing Components

JMenu

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.

JMenuBar

JMenu

JMenuItem

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_NEEDED VERTICAL_SCROLLBAR_AS_NEEDED

Displays a scrollbar only if the wrapped component doesn't fit.

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 dialog

Menanyakan sebuah pertanyaan dan menampilkan 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. JMenu: DinnerMenu.java

2. JPopUpMenu: ContextMenu.java

3. JScrollPane: ScrollPaneFrame.java

4. JSplitPane: SplitPaneFrame.java

5. JTabbedPane: TabbedPaneFrame.java

6. JSlider /JScrollbar: Slippery.java

7. JOptionPane: ExcerciseOptions.java

8. JDesktop/JInternalFrame: Desktop.java

What on Next Week?

LayoutManager:

FlowLayout

GridLayout

BorderLayout

BoxLayout

GridBagLayout

PBO Lanjut Lecture 02 Komponen Swing Dasarsi.itmaranatha.org/.../article/173/Lecture02-Komponen_Dasar_Swing.pdf · JList Dengan ... Semua komponen Swing dapat memiliki dekorasi border.

Documents