Tutorial2
Course : Business Application
Development
Effective Period : July 2022
Basic Graphical User Interface
Session 6
Davy Hermanus
Learning Outcomes
• LO 4 EXPLAIN the right GUI concept
Learning Objectives
At the end of this session, the students will be able to :
– Demonstrate programming using a graphical user
interface java
– Explain basic GUI concept
•Introduction
•Layout Manager
•GUI Component
Contents
Outline
• Introduction
• AWT VS Swing VS JavaFX
• GUI Components
• Layout Manager
• Pembagian Kelas GUI
• Kelas-kelas GUI diklasifikasikan menjadi 3 kelompok.
• Pernyataan ini mengacu pada cara Java mengatur kelas-kelas
yang digunakan untuk membangun antarmuka pengguna grafis
(GUI). Biasanya, kelas-kelas ini dikelompokkan berdasarkan
fungsionalitas mereka, seperti kelas-kelas untuk elemen
antarmuka pengguna (seperti tombol dan kotak teks), kelas-
kelas untuk layout (yang mengontrol bagaimana elemen-
elemen ditempatkan dalam GUI), dan kelas-kelas untuk
mendengarkan dan menanggapi interaksi pengguna (seperti
klik mouse atau input keyboard).
Introduction
• JavaFx
• Previously, constructing Java GUI application was
using AWT and Swing (both still available in Java)
• The latest GUI Java desktop platform exist is JavaFx.
• JavaFX provides a multitouch support for touch-
enabled devices such as tablets and smart phones.
• JavaFX has a built-in 2D, 3D, animation support, and
video and audio playback
Kapan Menggunakan AWT atau Swing:
1. Kemampatan Kode: Jika Anda memelihara atau memperbarui aplikasi lama yang sudah
ditulis menggunakan AWT atau Swing, bisa lebih efisien untuk terus mengembangkan
dengan toolkit yang sama daripada menulis ulang dengan JavaFX.
2. Ketersediaan Library Eksternal: Beberapa library khusus mungkin hanya tersedia atau
lebih kompatibel dengan AWT atau Swing.
3. Persyaratan Sistem: Aplikasi yang ditargetkan untuk berjalan pada sistem dengan versi
Java sebelum JavaFX diperkenalkan (sebelum Java 8) mungkin memerlukan AWT atau
Swing.
4. Kompleksitas Rendah: Untuk GUI yang sangat sederhana atau untuk tujuan
pembelajaran dasar tentang GUI di Java, Swing dapat menjadi pilihan yang baik karena
memiliki sejarah yang panjang dalam pengajaran dan banyak dokumentasi yang tersedia.
5. Integrasi dengan IDE atau Tools: Beberapa alat pengembangan mungkin memiliki
dukungan yang lebih baik untuk Swing dibandingkan JavaFX, meskipun trennya bergerak
menuju dukungan yang lebih baik untuk JavaFX.
Kapan Menggunakan JavaFX
1. Aplikasi Baru: Untuk aplikasi baru, JavaFX adalah pilihan yang lebih baik karena memiliki fitur
lebih modern seperti dukungan media, grafis 3D, dan animasi yang lebih baik.
2. Desain yang Lebih Bersih dan Terpisah: FXML di JavaFX memungkinkan pemisahan desain UI
dari logika aplikasi, yang membuat kode lebih rapi dan mempermudah kolaborasi antara desainer UI
dan pengembang.
3. Styling dengan CSS: JavaFX memungkinkan Anda untuk menggunakan CSS untuk styling
komponen GUI, yang memberikan fleksibilitas lebih dalam desain tampilan.
4. Pembangunan Aplikasi yang Lebih Kompleks: JavaFX menyediakan struktur yang lebih baik
untuk aplikasi yang kompleks dan memberikan performa yang lebih baik untuk animasi dan aplikasi
yang intensif grafis.
5. Multi-Touch Support: JavaFX memiliki dukungan bawaan untuk perangkat sentuh, membuatnya
pilihan yang baik untuk aplikasi yang mungkin perlu beroperasi pada tablet atau layar sentuh lainnya.
6. Aplikasi Multiplatform: JavaFX bekerja baik dengan paket Java seperti GraalVM dan Gluon
Substrate, yang memungkinkan konversi aplikasi menjadi native apps pada platform seperti iOS dan
Android.
Aturan Umum Penggunaan
• Sebagai aturan umum, untuk proyek baru dengan persyaratan
UI yang kompleks atau yang membutuhkan fitur terkini,
JavaFX adalah pilihan yang lebih baik. Namun, untuk
perawatan kode lama atau dalam konteks pendidikan dasar,
Swing mungkin masih relevan. AWT sekarang sebagian besar
usang dan umumnya hanya digunakan dalam situasi yang
sangat spesifik atau legacy.
Introduction
• JAVA GUI (Graphical User Interface)
• It is used to develop GUI programs using layout
panes, buttons, labels, text fields, colors, fonts,
images, image views, and shapes
JavaFx
• JavaFx always render th
components inside
scene.
• For application to be ab
to render, the program
need to include Stage
class.
Penjelasan
• Stage: Ini adalah wadah tingkat atas untuk aplikasi JavaFX. Anda dapat menganggapnya
sebagai bingkai utama aplikasi atau jendela luar di mana semua konten lain ditampilkan.
Setiap aplikasi JavaFX memiliki setidaknya satu stage.
• Scene: Stage berisi sebuah Scene, yang merupakan wadah untuk semua konten visual dalam
aplikasi JavaFX. Konten ini bisa termasuk grafis, UI controls, dan layout panes.
• Node: Ini adalah elemen dasar untuk membangun aplikasi JavaFX; semua elemen grafis yang
ditampilkan dalam Scene adalah Node. Ini termasuk Shape, ImageView, dan Controls.
• Parent: Kelas abstrak untuk semua node yang bisa memiliki child nodes. Misalnya, sebuah
Group adalah Parent karena bisa memiliki banyak Node sebagai anak-anak.
• Shape: Ini termasuk objek-objek seperti Line, Circle, Ellipse, Rectangle, Arc, Polygon,
Polyline, dan Text. Mereka adalah subclass dari Node yang digunakan untuk menggambar
bentuk di layar.
• ImageView: Digunakan untuk menampilkan gambar.
• Control: Komponen-komponen UI seperti Label, TextField, Button, CheckBox, RadioButton,
dan TextArea adalah subclass dari Control. Mereka adalah elemen-elemen interaktif yang
memungkinkan pengguna untuk melakukan tindakan seperti input dan seleksi.
Penjelasan
• Group: Ini adalah kelas yang dapat berisi sekumpulan node. Node dalam Group
akan mengikuti transformasi yang sama, seperti translate atau rotate.
• Pane: Ini adalah superclass untuk semua layout panes di JavaFX, seperti HBox dan
VBox yang mengatur node secara horizontal dan vertikal, serta FlowPane,
GridPane, BorderPane, dan StackPane yang masing-masing menawarkan cara
berbeda untuk layout nodes.
• FlowPane, GridPane, BorderPane, HBox, VBox, StackPane: Ini adalah
berbagai jenis layout managers yang mengatur node dalam Scene. Mereka
memberikan struktur untuk tata letak UI, memungkinkan pengembang untuk
merancang UI yang kompleks dan responsif.
• Diagram dalam slide tersebut tampaknya memberikan visualisasi hierarki dan
hubungan antara berbagai kelas dan komponen di JavaFX, menunjukkan
bagaimana Stage berisi Scene, yang pada gilirannya bisa mengandung berbagai
Node, termasuk Controls dan Shapes, serta menggunakan berbagai Pane untuk
mengatur layout mereka.
Java GUI API (1)
• GUI Classes are classified into 3 groups
1. Container Classes
Example : Stage, Scene,
2. Component Classes
Example : Button, TextInputControl, ComboBox,
ListCell, RadioButton, Menu and MenuBar are
subclasses from Scene.
3. Helper Classes
Example : Color, Shape, Font and WebView
Java GUI API (2)
• Stage
• It is implemented by using [Link] class
• Uppermost levels of the container to handle component GUI
• Method :
– setMaxHeight(height) Adjust the frame height size
– setMaxWidth(width) Adjust the frame height size
– show() display stage and scene inside it.
– setResizable(boolean) set window to be resizable or not
– Many more (can be found in:
[Link]
/[Link]
)
Java GUI API (3)
• Stage and Scene
import [Link];
import [Link].*;
import [Link];
import [Link].*;
public class Main extends Application{
@Override
public void start(Stage primaryStage) {
[Link]("MyJavaFX"); // Set the stage title
[Link](); // Display the stage
}
public static void main(String[] args) {
[Link](args);
}
}
• Fitur Utama Aplikasi Pengelolaan Buku:
1. Tambah Buku: Fungsi untuk memasukkan detail buku baru ke dalam sistem.
2. Hapus Buku: Kemampuan untuk menghapus entri buku dari sistem.
3. Cari Buku: Fungsi pencarian untuk menemukan buku berdasarkan judul atau penulis.
4. Tampilkan Daftar Buku: Sebuah area yang menampilkan daftar buku yang saat ini tersimpan dalam
sistem.
• Komponen GUI dan Struktur:
• Menu Bar: Untuk navigasi seperti File, Edit, View, Help.
• Form Tambah Buku: Menggunakan TextField untuk judul, penulis, dan tahun; Button untuk submit.
• List View: Untuk menampilkan buku yang ada dalam format daftar.
• Dialog Konfirmasi: Untuk konfirmasi penghapusan buku.
• Kotak Pencarian: TextField dan Button untuk mencari buku.
• Status Bar: Untuk menampilkan status operasi saat ini (misal, "Buku berhasil ditambahkan").
• Teknologi yang Bisa Digunakan:
• JavaFX: Untuk membuat GUI aplikasi.
• SQLite: Sebagai sistem basis data ringan untuk menyimpan data buku.
• Maven atau Gradle: Untuk manajemen dependensi dan build sistem.
Java GUI API (4)
• Add components to the scene
• GUI components in JavaFx also called Node (if you
get confused when googling JavaFx components, you
can search JavaFx Node).
• To add a Node, we need to include that Node into
scene as a constructor
• Example :
– We add a button to the scene first:
• Create Object button
Button bt = new Button(“Ok");
• Add Button into the scene with specific size
Scene scene = new Scene(bt, 150, 150);
– After that we set the scene for such stage using
setScene:
[Link](scene);
Java GUI API (5)
• Code include Button to scene
import [Link];
import [Link].*;
import [Link];
import [Link].*;
public class Main extends Application{
@Override
public void start(Stage primaryStage) {
Button bt = new Button("OK");
[Link]("MyJavaFX"); // Set the stage title
Scene scene = new Scene(bt, 150, 150);
[Link](scene);
[Link](); // Display the stage
}
public static void main(String[] args) {
[Link](args);
}
Layout Manager (1)
• To set the display on the container components
• As mentioned previously, we can add component
directly to scene. However, we are only able to add only
one component to stage.
• Therefore, we need to compile several component into
one component, this can be done using layout manager
• There are 3 basic layout manager:
1. FlowPane
2. GridPane
3. BorderPane
Layout Manager (2)
• FlowPane
• FlowPane arranges the nodes in the pane
horizontally from left to right, or vertically from top
to bottom, in the order in which they were added.
• When one row or one column is filled, a new row or
column is started.
Layout Manager (2)
• FlowPane
• The program creates a FlowPane (line 13) and sets its
padding property with an Insets object (line 14).
• An Insets object specifies the size of the border of a
pane.
• The constructor Insets (11, 12, 13, 14) creates an
Insets with the border sizes for top (11), right (12),
bottom (13), and left (14) in pixels.
Layout
Manager (3)
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class Main extends Application{
@Override
public void start(Stage primaryStage) {
FlowPane pane = new FlowPane();
[Link](new Insets(11, 12, 13, 14));
[Link](5);
[Link](5);
// Place nodes in the pane
Code - Flow Layout
[Link]().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
[Link](1);
[Link]().addAll(tfMi, new Label("Last Name:"),
new TextField());
// Create a scene and place it in the stage
Scene scene = new Scene(pane, 200, 250);
[Link]("ShowFlowPane"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
}
Layout Manager (4)
• GridPane
• Each component (or node) is placed by matrix grid
position
• When we add new component, use .add method and
specify the grid position.
Layout Manager (5)
• Code – GridPane
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class Main extends Application{
@Override
public void start(Stage primaryStage) {
Button bt = new Button("Submit");
GridPane pane = new GridPane();
[Link](new Label("Username"), 0, 0);
[Link](new TextField(), 1, 0);
[Link](new Label("Password"), 0, 1);
[Link](new TextField(), 1, 1);
[Link](bt, 1, 2);
[Link](new Insets(11.5, 12.5, 13.5, 14.5));
Scene scene = new Scene(pane);
[Link](scene);
[Link](100);
[Link](300);
[Link]("Grid Pane");
[Link](); // Display the stage
}
public static void main(String[] args) {
[Link](args);
}
}
Layout Manager (6)
• BorderPane
• In border layout, there are 5 areas contain in it
1. Right
2. Bottom
3. Top
4. Center
5. Left
Border Pane
• Keistimewaan: Pembagian layar terbatas
• BorderPane adalah jenis layout manager di JavaFX yang membagi layar
menjadi lima area: top, right, bottom, left, dan center. Setiap area dapat
berisi hanya satu komponen, seperti label, tombol, atau sub-panel.
BorderPane sangat berguna untuk desain aplikasi yang membutuhkan
penataan yang sangat struktural, seperti menempatkan menu navigasi di
bagian atas atau samping, konten utama di tengah, dan informasi status
atau tambahan di bagian bawah.
• Komponen yang ditempatkan di area tengah BorderPane dapat
memperluas untuk mengisi ruang yang tersedia, yang membuatnya ideal
untuk bagian utama aplikasi di mana konten interaktif atau informasi
ditampilkan. Contoh penggunaan ini mungkin termasuk editor teks,
tampilan tabel, atau antarmuka pengguna kompleks lainnya.
Layout Manager (7)
• Code – BorderPane
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class Main extends Application{
@Override
public void start(Stage primaryStage) {
Button bt = new Button("OK");
BorderPane pane = new BorderPane();
[Link](new Label("Top"));
[Link](new Label("Right"));
[Link](new Label("Left"));
[Link](bt);
Scene scene = new Scene(pane);
[Link](scene);
[Link](300);
[Link](300);
[Link](); // Display the stage
}
public static void main(String[] args) {
[Link](args);
}
}
HBox and VBox
• Single Pane for Vertical or Horizontal
• When we talked about flowpane, nodes or
components inside it will be placed horizontally or
vertically in multiple way (can be multiple rows or
multiple columns)
• HBox is layout container that only able to hold 1
row of nodes
• Vbox is layout container that only able to hold 1
column of nodes
• You can initialize HBox and VBox without parameter.
• If you initialize with Parameter value such as
Hbox(15), than it serve as horizontal gap. If VBox(15)
that the VBox instance will have vertical gap of 15
between node
HBOX dan VBOX
• Kegunaannya
• HBox and VBox
• Single Pane for Vertical or Horizontal
• HBox dan VBox adalah layout containers yang memudahkan penataan
komponen secara horizontal atau vertikal:
• HBox menyusun komponen-komponen secara horizontal dalam satu baris.
• VBox menyusun komponen-komponen secara vertikal dalam satu kolom.
• Keduanya sangat berguna untuk menata komponen-komponen GUI dengan
cara yang teratur dan konsisten, menjaga jarak dan penjajaran yang seragam
antara elemen-elemen UI. Misalnya, Anda bisa menggunakan VBox untuk
membuat tumpukan tombol atau form field yang satu di atas yang lain, atau
HBox untuk menyusun tombol-tombol secara sejajar dalam satu baris
HBox and VBox
• Code
@Override
public void start(Stage s) {
HBox hb = new HBox(15);
VBox vb = new VBox(15);
Text t1 = new Text("Text in HBox");
Text t2 = new Text("Text 2 in HBox");
[Link]().addAll(t1,t2);
[Link](new Insets(15, 5, 5, 5));
[Link]().add(new Label("Courses"));
Label[] courses = {new Label("ISYS6197"), new Label("COMP6178")};
for (Label course: courses) {
[Link](course, new Insets(0, 0, 0, 15));
[Link]().add(course);
}
BorderPane bp = new BorderPane();
[Link](hb);
[Link](vb);
Scene sc = new Scene(bp);
[Link](sc);
[Link]("HBox and VBox");
[Link]();
}
Tutorial1
Tutorial2
Tutorial3
Tutorial4
Tutorial5
Tutorial6
Tutorial7
Reference
• Introduction to Java Programming. 12ed. Liang. 2020. Chapter
14
• JavaFX 18 Documentation:
• [Link]
• JavaFX 19 Documentation: [Link]
• JavaFX 17 Documentation: [Link]
Bina Nusantara