PBO Lanjut Lecture 02 Komponen Swing Dasar N IKO IB R A H IM, M IT U N IV E R S ITA S K R IS TEN M A R A N A TH A

(1)

N I K O I B R A H I M , M I T

U N I V E R S I T A S K R I S T E N M A R A N A T H A

PBO Lanjut

(2)

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!

(3)

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

(4)

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

(5)

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

(6)

JButton

 Button merupakan komponen yang dapat di-klik untuk melakukan konfirmasi sesuatu.

 Contoh membuat button:

JButton tombolOK = new JButton(); tombolOK.setText("Click me!");

atau

(7)

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

(8)

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

(9)

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

(10)

Latihan 1

: HelloFrame.java

(11)

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:

(12)

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

(13)

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 }

(14)

Modifikasi Program HelloFrame.java

 Modifikasi program HelloFrame.java tersebut sedemikian rupa sehingga Label dan Button

(15)

Latihan 3

: JButton & HTML

 Buatlah sebuah JFrame yang mengandung 2 buah objek JButton yang berisi teks HTML sbb:

(16)

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

(17)

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

(18)

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)

(19)

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

(20)

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" };

(21)

Contoh Penggunaan

JComboBox & JList

List

(22)

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

(23)

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,

(24)

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:

(25)

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:

(26)

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

} } }

(27)

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

(28)

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:

(29)

(30)

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.

(31)

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:

(32)

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:

(33)

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

(34)

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

(35)

Jenis-jenis Border

 BevelBorder  SoftBevelBorder  EmptyBorder  EtchedBorder  LineBorder  MatteBorder  TitledBorder  CompoundBorder

(36)

Latihan 8

: BorderTest.java

(37)

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

(38)

Congratulations!

You’ve learnt…

 Swing Components:

 ImageIcon pada JButton dan JLabel  Check Box  Radio Button  Combo Box  List  Spinner  Borders  Review: PenggunaanArray

(39)

 M EN U  P O P U P M EN U  JS C R O LLP A N E  JS P LI TP A N E  JTA B B ED P A N E  S C R O LLB A R / S LI D ER  D I A LO G  D ES K TO P P A N E / I N TER N A L F R A M E

Next… More Swing

Components

(40)

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

(41)

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

(42)

Latihan 9:

DinnerMenu.java

 Buatlah program DinnerMenu yang memiliki tampilan sbb:

(43)

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,

(44)

Latihan 10:

ContextMenu.java

 Buatlah sebuah aplikasi yang mendemonstrasikan

(45)

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.

(46)

Constants to specify

the policy of scrollbars

Constants (options) Description

HORIZONTAL_SCROLLBAR_AS_NEED ED

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.

(47)

Latihan 11:

ScrollPaneFrame.java

 Buatlah sebuah frame yang memiliki JScrollPane di dalamnya dan menampilkan sebuah gambar sbb:

(48)

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

(49)

Latihan 12:

SplitPaneFrame.java

 Buatlah sebuah frame yang memiliki JSplitPane.  Masing-masing subpane diberikan gambar sbb:

(50)

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

(51)

Latihan 13:

TabbedPaneFrame.java

 Buatlah sebuah frame yang memiliki JTabbedPane.  Lalu tambahkan 2 buah tab “Control” dan “Picture”

(52)

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

(53)

Latihan 14:

Slippery.java

 Buatlah sebuah frame yang memiliki sebuah JScrollBar dan JSlider sbb:

(54)

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

(55)

Latihan15:

ExerciseOptions.java

 Pada latihan ini kita akan menggunakan semua variasi dari JOptionPane:

 JOptionPane.showMessageDialog  JOptionPane.showConfirmDialog  JOptionPane.showInputDialog  JOptionPane.showOptionDialog

(56)

Run: ExerciseOptions.java

showMessageDialog

showConfirmDialog

showInputDialog

(57)

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

(58)

Latihan 16:

Desktop.java

 Pada latihan ini, Anda diminta membuat sebuah

JDesktopPane.

 Kemudian, Anda membuat 5 buah JInternalFrame

(59)

Well Done!, You’ve learnt:

 JMenu & JMenuBar

 JPopupMenu

 JScrollPane  JSplitPane  JTabbedPane

 JScrollBar & JSlider  JOptionPane

(60)

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

(61)

What on Next Week?

 LayoutManager:  FlowLayout  GridLayout  BorderLayout  BoxLayout  GridBagLayout