Materi PMBO Bab 2 Kelas XII RPL: Merancang User Interface Part 3
.jpeg "Materi PMBO Bab 2 Kelas XII RPL: Merancang User Interface Part 3")
.jpeg)
E. Merancang User Interface dengan Library Java
User interface pada Java menerapkan GUI (Graphical User U Interface), yaitu jenis user interface yang menerapkan metode interaksi pada peranti elektronik secara grafis (bukan berupa teks) antara pengguna dan komputer. Konsep dasar pada Java GUI adalah API (Application Programming interface). Java GUI API terdiri atas dua komponen, yaitu sebagai berikut.
1. AWT (Abstract Windows Toolkit).
2. Swing atau JFC (Java Foundation Class).
Berikut adalah penjelasan mendetail tentang dua komponen GUI pada Java tersebut.
1. Komponen AWT (Abstract Windowing Toolkit)
Abstract Windowing Toolkit (AWT) adalah tampilan dasar dari setiap target platform (Windows, Macintosh, dan Solaris) atau berdiri sesuai dengan mekanisme sebuah platform. AWT terdiri atas banyak widget grafik yang dapat ditambahkan dan diatur dalam tampilan, seperti button, checkbox, radio button, menu, list, canvas, textfield, scroll panel, dan panel.
Semua komponen GUI nonmenu memiliki class yang diturunkan dari class java.awt.Component. Adapun komponen menu diturunkan dari class java.awt. ComponentMenu. Kelebihan AWT adalah didukung oleh browser versi lama dan baru, karena package ini telah diimplementasikan sejak lama. Sementara itu, kekurangan AWT adalah bersifat heavyweight dan opaque (tidak transparan).
Desain user interface dengan AWT terdiri atas dua bagian penting, yaitu containers dan components. Components adalah entitas GUI dasar, seperti button, label, dan textfield. Adapun containers adalah komponen yang dapat berisi komponen AWT lainnya, seperti frame dan panel. Containers digunakan untuk menahan komponen dalam tata letak tertentu. Contoh dari containers adalah FlowLayout atau GridLayout.
Bagian-bagian AWT dapat dilihat pada gambar berikut.
a. AWT Container
Container dalam AWT Java adalah bagian terpenting dalam pembuatan user interface. Hal ini dikarenakan, di dalam container terdapat frame dan panel, serta beberapa bagian lainnya. Pada bagian ini, semua component dari AWT akan dipasangkan.
Cara deklarasi container dalam Java adalah sebagai berikut.
public class MyGUIProgram extends Frame {
//Private variables
......
//Constructor to setup the GUI components public MyGUIProgram () {
......
//methods
......
......
//The entry main () method
public static void main (String [] args) {
//Invoke the constructor (to setup the GUI) by allocating
an instance
new MyGUIProgram ();
}
}
Bagian-bagian AWT Containers dapat dilihat pada gambar berikut.
b. Library Class AWT Components
Adalah bagian-bagian yang dapat dipasang atau ditempelkan dalam sebuah lembar kerja (frame). Komponen-komponen AWT adalah sebagai berikut.
1). java.awt.Button
Komponen ini berupa tombol yang jika ditekan akan mengerjakan instruksi tertentu. Untuk membuatnya, perhatikan kode program berikut.
1. import java.awt.*;
2. public class ButtonExample1 {
3. public static void main (String[] args) {
4. Frame f = new Frame ("LATIHAN MENGGUNAKAN BUTTON 1");
5. Button b = new Button ("Tekan Di Sini");
6. b.setBounds (50, 100, 80, 30);
7. f.add (b);
8. f.setSize (200, 200);
9. f.setLayout (null);
10. f.setVisible (true);
11. }
12. }
Penjelasan kode program tersebut adalah sebagai berikut.
a) import java.awt.*;
Melakukan import library java.awt.
b) Frame f = new Frame("LATIHAN MENGGUNAKAN BUTTON 1");
Membuat frame dengan nama variabel f dan memberikan judul teks pada frame "LATIHAN MENGGUNAKAN BUTTON",
c) Button b =new Button("Tekan Di sini");
Membuat sebuah button atau tombol dengan judul tombol "Tekan Di sini".
d) b.setBounds (50,100,80,30);
Menentukan posisi dari tombol beserta ukuran panjang dan lebarnya.
e) f.add(b);
Menambahkan tombol yang sudah diatur lebar dan panjangnya, serta posisinya ke dalam frame.
f) f.setSize(200,200);
f.setLayout(null);
f.setVisible(true);
Menentukan layout dan ukuran frame.
Hasil kompilasi kode program adalah sebagai berikut.
Versi JStudio
a). Kode program.
b). Hasil kompilasi kode program.
Anda juga dapat membuat tombol sederhana tanpa menguraikan ukuran tombol serta layout tampilan frame. Untuk melakukannya, perhatikan kode program berikut.
1. import java.awt.Frame;
2. import java.awt.Button;
3. public class ButtonOk {
4. public static void main (String[] a) {
5. Frame f = new Frame ("My Ok Button");
6. Button b = new Button ("OK");
7. f.add(b);
8. f.pack();
9. f.setVisible(true);
10. }
11. }
Penjelasan kode program tersebut adalah sebagai berikut
a). import java.awt.Frame;
import java.awt.Button;
Melakukan import frame dan button.
b). Frame f = new Frame ("My OK Button");
Button b = new Button ("OK");
f.add (b);
f.pack ();
f.setVisible (true);
Melakukan pembuatan frame dan menambahkan tombol pada frame, tanpa menguraikan ukuran tombol dan layout frame.
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
a). Kode program.
b). Hasil kompilasi kode program.
2). java.awt.CheckBox
Komponen ini berupa tombol berbentuk kotak yang dapat diberi input berupa tanda check atau centang. Untuk membuatnya, perhatikan kode program berikut.
1. import java.awt.*;
2.
3. public class CheckboxExample {
4. public static void main (String args[]) {
5. Frame f = new Frame ("Checkbox Example");
6. Checkbox checkbox1 = new Checkbox ("C++");
7. checkbox1.setBounds (100, 100, 50, 50);
8. Checkbox checkbox2 = new Checkbox (":Java", true);
9. checkbox2.setBounds (100, 150, 50, 50);
10. f.add (checkbox1);
11. f.add (checkbox2);
12. f.setSize (400, 400);
13. f.setLayout (null);
14. f.setVisible (true);
15. }
16. }
Penjelasan kode program tersebut adalah sebagai berikut.
a). Frame f = new Frame ("Checkbox Example");
Melakukan pembuatan frame.
b). Checkbox checkbox1 = new Checkbox ("C++");
checkbox1.setBounds (100, 100, 50, 50);
Membuat checkbox dan menentukan posisi serta panjang dan lebar checkbox dengan label checkbox "C++".
c). Checkbox checkbox2 = new Checkbox ("Java", true);
checkbox2.setBounds (100, 150, 50, 50);
Membuat checkbox dan menentukan posisi serta panjang dan lebar checkbox dengan label checkbox "Java".
d). f.add (checkbox1);
f.add (checkbox2);
Menambahkan checkbox ke dalam frame.
e). f.setSize (400, 400);
f.setLayout (null);
f.setVisible (true);
Menentukan ukuran serta layout frame yang akan ditampilkan.
Hasil kompilasi kode program tersebut sebagai berikut.
Versi JStudio
a). Kode program.
b). Hasil kompilasi kode program.
3). java.awt.Choice
Komponen ini akan menampilkan menu yang terdiri atas beberapa pilihan. Untuk membuatnya, perhatikan kode program berikut.
1. import java.awt.*;
2.
3. public class ChoiceExample {
4. public static void main (String args []) {
5. Frame f = new Frame ();
6. Choice c = new Choice ();
7. c.setBounds (30, 50, 70, 50);
8. c.add ("SOTO");
9. c.add ("BAKSO");
10. c.add ("GUDEG");
11. c.add ("SATE");
12. c.add ("LOTEK");
13. f.add (c);
14. f.setSize (100, 100);
15. f.setLayout (null);
16. f.setVisible (true);
17. }
18. }
Penjelasan kode program tersebut adalah sebagai berikut.
a). Frame f = new Frame ();
Choice c = new Choice ();
Proses pembuatan frame dan komponen choice atau pilihan.
b). c.setBounds (30, 50, 70, 50);
c.add ("SOTO");
c.add ("BAKSO");
c.add ("GUDEG");
c.add ("SATE");
c.add ("LOTEK");
Menentukan posisi serta lebar dan panjang komponen choice, serta menambahkan isi pilihan yang akan digunakan, yaitu "SOTO", "BAKSO", "GUDEG", "SATE", dan "LOTEK".
c). f.add (c);
f.setSize (100, 100);
f.setLayout (null);
f.setVisible (true);
Menambahkan komponen choice pada frame dan menentukan layout frame.
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
a). Kode program.
b). Hasil kompilasi kode program.
4). java.awt.Label
Komponen ini akan meletakkan teks statis yang tidak dapat diedit. Untuk membuatnya, perhatikan kode program berikut.
1. import java.awt.*;
2.
3. class LabelExample {
4. public static void main (String args []) {
5. Frame f = new Frame ("Label Example");
6. Label 11, 12;
7. 11 = new Label ("First Label.");
8. 11.setBounds (50, 100, 100, 30);
9. 12 = new Label ("Second Label.");
10. 12.setBounds (50, 150, 100, 30);
11. f.add (11);
12. f.add (12);
13. f.setSize (200, 200);
14. f.setLayout (null);
15. f.setVisible (true);
16. }
17. }
Penjelasan kode program tersebut adalah sebagai berikut.
a). Frame f = new Frame ("Label Example");
Membuat frame dengan judul frame "Label Example".
b). Label 11, 12;
11 = new Label ("First Label.");
11.setBounds (50, 100, 100, 30);
12 = new Label ("Second Label.");
12.setBounds (50, 150, 100, 30);
Membuat dua buah label dengan nama variabel label 11 dan 12 serta menentukan posisi dan layout label.
c). f.add (11);
f.add (12);
Menambahkan label ke dalam frame.
d). f.setSize (200, 200);
f.setLayout (null);
f.setVisible (true);
Menentukan layout frame.
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
a). Kode program.
b). Hasil kompilasi kode program.
5). java.awt.List
Komponen ini akan menyajikan beberapa pilihan teks dalam satu daftar yang dapat di-scroll (gulung). Untuk membuatnya, perhatikan kode program berikut.
1. import java.awt.*;
2.
3. public class LisatExam {
4. public static void main (String args []) {
5. Frame f = new Frame ();
6. List L = new List ();
7. L.setBounds (30, 50, 70, 50);
8. L.add ("SOTO");
9. L.add ("BAKSO");
10. L.add ("GUDEG");
11. L.add ("SATE");
12. L.add ("LOTEK");
13. f.add (L);
14. f.setSize (100, 200);
15. f.setLayout (null);
16. f.setVisible (true);
17. }
18. }
Penjelasan kode program tersebut adalah sebagai berikut.
a). Frame f = new Frame ();
List L = new List ();
Membuat frame dan membuat komponen list.
b). L.setBounds (30, 50, 70, 50);
Mengatur posisi dan ukuran list.
c). L.add ("SOTO");
L.add ("BAKSO");
L.add ("GUDEG");
L.add ("SATE");
L.add ("LOTEK");
Menambahkan pilihan pada komponen list, yaitu "SOTO", "BAKSO", "GUDEG", "SATE", "LOTEK".
d). f.add (L);
Menambahkan komponen list pada frame.
e). f.setSize (100, 200);
f.setLayout (null);
f.setVisible (true);
Mengatur posisi dan lebar frame.
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
a). Kode program.
b). Hasil kompilasi kode program.
6). java.awt.Scrollbar
Komponen ini digunakan untuk membuat scrollbar horizontal dan vertikal. Untuk membuatnya, perhatikan kode program berikut.
1. import java.awt.*;
2.
3. class ScrollbarExample {
4. public static void main (String args[]) {
5. Frame f = new Frame ("Scrollbar Example");
6. Scrollbar s = new Scrollbar ();
7. s.setBounds (50, 70, 20, 100);
8. f.add (s);
9. f.setSize (300, 200);
10. f.setLayout (null);
11. f.setVisible (true);
12. }
13. }
Penjelasan kode program tersebut adalah sebagai berikut.
a). Frame f = new Frame ("Scrollbar Example");
Membuat frame baru dengan judul frame "Scrollbar Example".
b). Scrollbar s = new Scrollbar ();
Membuat komponen scrollbar yang merupakan objek baru dari library AWT scrollbar.
c). s.setBounds (50, 70, 20, 100);
Menentukan posisi dan ukuran scrollbar.
d). f.add (s);
f.setSize (300, 200);
f.setLayout (null);
f.setVisible (true);
Menambahkan komponen scrollbar pada frame dan menentukan layout frame.
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
a). Kode program.
b). Hasil kompilasi kode program.
7). java.awt.TextArea
Komponen ini akan menampilkan teks multi-line yang dapat diedit. Untuk membuatnya, perhatikan kode program berikut.
1. import java.awt.*;
2.
3. public class TextAreaExample {
4. public static void main (String args []) {
5. Frame f = new Frame ();
6. TextArea area = new TextArea ("SELAMAT BELAJAR JAVA AWT");
7. area.setBounds (10, 30, 300, 300);
8. f.add (area);
9. f.setSize (400, 400);
10. f.setLayout (null);
11. f.setVisible (true);
12. }
13. }
Penjelasan kode program tersebut adalah sebagai berikut.
a). Frame f = new Frame ();
TextArea area = new TextArea
("SELAMAT BELAJAR JAVA AWT");
Membuat frame dan menyiapkan komponen text area dengan isi teks "SELAMAT BELAJAR JAVA AWT".
b). area.setBounds (10, 30, 300, 300);
Menentukan layout dan ukuran text area.
c). f.add (area);
f.setSize (400, 400);
f.setLayout (null);
f.setVisible (true);
Menambahkan komponen text area ke dalam frame dan mengatur layout serta ukuran frame.
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
a). Kode program.
b). Hasil kompilasi kode program.
2. Desain Komponen Swing
Library Swing sebenarnya mempunyai tampilan hampir sama dengan AWT, tetapi sifat dari komponen Swing adalah independent karena dapat digunakan dalam berbagai macam platform sistem operasi. Komponen-komponen Swing, antara lain sebagai berikut.
a. JButton
JButton merupakan bagian dari Swing yang digunakan untuk membuat sebuah tombol yang dapat disisipi dengan sebuah label judul di dalamnya. Untuk membuatnya, perhatikan kode program berikut.
1. import javax.swing.*;
2.
3. public class ButtonExample {
4. public static void main (String [] args) {
5. JFrame f = new JFrame ("Button Example");
6. JButton b = new JButton ("Click Here");
7. b.setBounds (50, 100, 95, 30);
8. f.add (b);
9. f.setSize (400, 400);
10. f.setLayout (null);
11. f.setVisible (true);
12. }
13. }
Penjelasan kode program tersebut adalah sebagai berikut.
1). import javax.swing.*;
Proses import komponen Swing dari library javax.swing. Hal ini yang membedakan AWT dengan Swing, yaitu library yang di-import oleh kode program.
2). JFrame f = new JFrame ("Button Example");
JButton b = new JButton ("Click Here");
Melakukan pembuatan objek baru berupa frame dengan judul "Button Example" dan pembuatan objek tombol dengan label "Click Here".
3. b.setBounds (50, 100, 95, 30);
Mengatur posisi dan ukuran tombol.
4. f.add (b);
f.setSize (400, 400);
f.setLayout (null);
f.setVisible (true);
Menambahkan komponen tombol ke dalam frame serta mengatur ukuran dan layout frame. Cara melakukannya sama dengan pengaturan ukuran dan layout frame pada komponen AWT.
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
1). Kode program.
2). Hasil kompilasi kode program.
b. JLabel
JLabel adalah komponen class yang digunakan untuk menempatkan label pada frame. Untuk membuatnya, perhatikan kode program berikut.
1. import javax.swing.*;
2.
3. public class LAT2 {
4. public static void main (String [] args) {
5. {
6. JFrame f = new JFrame ("Label Example");
7. JLabel 11, 12;
8. 11 = new JLabel ("First Label.");
9. 11.setBounds (50, 50, 100, 30);
10. 12 = new JLabel ("Second Label.");
11. 12.setBounds (50, 100, 100, 30);
12. f.add (11);
13. f.add (12);
14. f.setSize (300, 300);
15. f.setLayout (null);
16. f.setVisible (true);
17. }
18. }
19. }
Penjelasan kode program tersebut adalah sebagai berikut.
1). import javax.swing.*;
Proses import komponen package Swing dari library javax.swing.
2). JFrame f = new JFrame ("Label Example");
Melakukan pembuatan objek baru berupa frame dengan judul frame "Label Example".
3). JLabel 11, 12;
Membuat variabel 11 dan 12 yang bertipe label.
4). 11 = new JLabel ("First Label.");
11.setBounds (50, 50, 100, 30);
Melakukan pembuatan objek baru berupa label dengan judul label "First Label" serta mengatur posisi dan ukuran label.
5). 12 = new JLabel ("Second Label.");
12.setBounds (50, 100, 100, 30);
Melakukan pembuatan objek baru berupa label dengan judul label "Second Label" serta mengatur posisi dan ukuran label.
6). f.add (11);
f.add (12);
f.setSize (300, 300);
f.setLayout (null);
f.setVisible (true);
Menambahkan komponen label ke dalam frame serta mengatur layout dan tata letak frame.
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
1). Kode program.
c. JTextField
JTextField adalah sebuah komponen class yang digunakan untuk mengolah sebuah teks. Untuk membuatnya, perhatikan kode program berikut.
1. import javax.swing.*;
2.
3. public class TextFieldExample {
4. public static void main (String args []) {
5. JFrame f = new JFrame ("TextField Example");
6. JTextField t1, t2;
7. t1 = new JTextField ("Welcome to Text SWING");
8. t1.setBounds (50, 100, 200, 30);
9. t2 = new JTextField ("SWING Tutorial");
10. t2.setBounds (50, 150, 200, 30);
11. f.add (t1);
12. f.add (t2);
13. f.setSize (400, 400);
14. f.setLayout (null);
15. f.setVisible (true);
16. }
17. }
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
1). Kode program.
2). Hasil kompilasi kode program.
d. JCheckBox
JCheckBox adalah komponen class yang digunakan untuk membuat checkbox. Komponen ini dapat digunakan untuk membuat input nilai dengan tipe true atau false. Untuk membuatnya, perhatikan kode program berikut.
1. import javax.swing.*;
2.
3. public class CheckBoxExample1 {
4. public static void main (String args []) {
5. JFrame = new JFrame ("CheckBox Example");
6. JCheckBox checkBox1 = new JCheckBox ("C++");
7. checkBox1.setBounds (100, 100, 50, 50);
8. JCheckBox checkBox2 = new JCheckBox ("Java", true);
9. checkBox2.setBounds (100, 150, 50, 50);
10. f.add (checkBox1);
11. f.add (checkBox2);
12. f.setSize (400, 400);
13. f.setLayout (null);
14. f.setVisible (true);
15. }
16. }
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
1). Kode program.
2). Hasil kompilasi kode program.
e. JOptionPane
JOptionPane adalah komponen class yang dapat digunakan untuk menampilkan kotak dialog, kotak pesan atau message box, serta membuat sebuah input nilai dalam bentuk tampilan interaktif. Untuk membuatnya, perhatikan kode program berikut.
1. import javax.swing.*;
2.
3. public class OptionPaneExample {
4. public static void main (String [] args) {
5. JFrame f = new JFrame ();
6. JOptionPane.showMessageDialog (f, "Hello, INI DIALOG BOX PAKAI JOptionPane.");
7. }
8. }
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
1). Kode program.
2). Hasil kompilasi kode program.
f. Java ScrollBar
Java ScrollBar adalah komponen class yang digunakan untuk menampilkan scrollbar. Untuk membuatnya, perhatikan kode program berikut.
1. import javax.swing.*;
2.
3. public class ScrollBarExample1 {
4. public static void main (String args [] ) {
5. JFrame f = new JFrame ("Scrollbar Example");
6. JScrollBar s = new JScrollBar ();
7. s.setBounds (100, 100, 50, 100);
8. f.add (s);
9. f.setSize (400, 400);
10. f.setLayout (null);
11. f.setVisible (true);
12. }
13. }
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
1). Kode program.
2). Hasil kompilasi kode program.
g. Java JComboBox
Java JComboBox adalah komponen Swing yang digunakan untuk menampilkan combo box. Untuk membuatnya, perhatikan kode program berikut.
1. import javax.swing.*;
2.
3. public class ComboBoxExample {
4.
5. public static void main (String [] args) {
6. JFrame f = new JFrame ("ComboBox Example");
7. String country [] = {"SOLO", "JOGJA", "INGGRIS", "BANTUL", "REMBANG"};
8. JComboBox cb = new JComboBox (country);
9. cb.setBounds (50, 50, 90, 20);
10. f.add (cb);
11. f.setLayout (null);
12. f.setSize (400, 500);
13. f.setVisible (true);
14. }
15. }
Hasil kompilasi kode program tersebut adalah sebagai berikut.
Versi JStudio
1). Kode program.
2). Hasil kompilasi kode program.
