JavaFX - Aplikasi
Pada bab ini, kita akan membahas struktur aplikasi JavaFX secara detail dan juga belajar membuat aplikasi JavaFX dengan contohnya.
Struktur Aplikasi JavaFX
Secara umum, aplikasi JavaFX memiliki tiga komponen utama yaitu Stage, Scene dan Nodes seperti yang ditunjukkan pada diagram berikut.
Tahap
Dekor (jendela) berisi semua objek aplikasi JavaFX. Itu diwakili olehStage kelas paket javafx.stage. Panggung utama dibuat oleh platform itu sendiri. Objek panggung yang dibuat diteruskan sebagai argumen kestart() metode dari Application kelas (dijelaskan di bagian selanjutnya).
Dekor memiliki dua parameter yang menentukan posisinya yaitu Width dan Height. Ini dibagi sebagai Area Konten dan Dekorasi (Bar Judul dan Batas).
Ada lima jenis tahapan yang tersedia -
- Decorated
- Undecorated
- Transparent
- Unified
- Utility
Anda harus menelepon show() metode untuk menampilkan isi panggung.
Tempat kejadian
Adegan merepresentasikan konten fisik dari aplikasi JavaFX. Ini berisi semua konten grafik adegan. KelasScene dari paket javafx.scenemewakili objek adegan. Misalnya, objek adegan hanya ditambahkan ke satu panggung.
Anda dapat membuat adegan dengan membuat instance Kelas Scene. Anda dapat memilih ukuran pemandangan dengan meneruskan dimensinya (tinggi dan lebar) bersama denganroot node ke konstruktornya.
Grafik Pemandangan dan Node
SEBUAH scene graphadalah struktur data seperti pohon (hierarki) yang mewakili isi dari sebuah adegan. Sebaliknya, anode adalah objek visual / grafis dari grafik pemandangan.
Node mungkin termasuk -
Objek geometris (Grafis) (2D dan 3D) seperti - Lingkaran, Persegi Panjang, Poligon, dll.
Kontrol UI seperti - Tombol, Kotak Centang, Kotak Pilihan, Area Teks, dll.
Container (Layout Panes) seperti Border Pane, Grid Pane, Flow Pane, dll.
Elemen media seperti Audio, Video dan Objek Gambar.
Itu Node Kelas paket javafx.scene mewakili sebuah node di JavaFX, kelas ini adalah kelas super dari semua node.
Seperti yang telah dibahas sebelumnya, node terdiri dari tiga jenis -
Root Node - Grafik Pemandangan pertama dikenal sebagai node Root.
Branch Node/Parent Node- Simpul dengan simpul anak dikenal sebagai simpul cabang / induk. Kelas abstrak bernamaParent dari paket javafx.scene adalah kelas dasar dari semua node induk, dan node induk tersebut akan menjadi tipe berikut -
Group- Node grup adalah node kolektif yang berisi daftar node anak. Setiap kali node grup dirender, semua node turunannya dirender secara berurutan. Setiap transformasi, status efek yang diterapkan pada grup akan diterapkan ke semua node turunan.
Region - Ini adalah kelas dasar dari semua Kontrol UI berbasis JavaFX Node, seperti Chart, Pane dan Control.
WebView - Node ini mengelola mesin web dan menampilkan isinya.
Leaf Node- Node tanpa node turunan dikenal sebagai node daun. Misalnya, Rectangle, Ellipse, Box, ImageView, MediaView adalah contoh node daun.
Ini wajib untuk melewatkan simpul akar ke grafik pemandangan. Jika Grup diteruskan sebagai root, semua node akan dipotong ke tempat kejadian dan perubahan apa pun dalam ukuran pemandangan tidak akan memengaruhi tata letak pemandangan.
Membuat Aplikasi JavaFX
Untuk membuat aplikasi JavaFX, Anda perlu membuat instance kelas Aplikasi dan mengimplementasikan metode abstraknya start(). Dalam metode ini, kami akan menulis kode untuk Aplikasi JavaFX.
Kelas Aplikasi
Itu Application kelas paket javafx.applicationadalah titik masuk aplikasi di JavaFX. Untuk membuat aplikasi JavaFX, Anda perlu mewarisi kelas ini dan mengimplementasikan metode abstraknyastart(). Dalam metode ini, Anda perlu menulis seluruh kode untuk grafik JavaFX
Dalam main metode, Anda harus meluncurkan aplikasi menggunakan launch()metode. Metode ini secara internal memanggilstart() metode kelas Aplikasi seperti yang ditunjukkan pada program berikut.
public class JavafxSample extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
/*
Code for JavaFX application.
(Stage, scene, scene graph)
*/
}
public static void main(String args[]){
launch(args);
}
}
Dalam start() metode, untuk membuat aplikasi JavaFX yang khas, Anda harus mengikuti langkah-langkah yang diberikan di bawah ini -
Siapkan grafik adegan dengan node yang dibutuhkan.
Siapkan Scene dengan dimensi yang diperlukan dan tambahkan grafik scene (node root grafik scene) ke dalamnya.
Siapkan panggung dan tambahkan adegan ke panggung dan tampilkan isi panggung.
Mempersiapkan Grafik Pemandangan
Sesuai aplikasi Anda, Anda perlu menyiapkan grafik adegan dengan node yang diperlukan. Karena simpul akar adalah simpul pertama, Anda perlu membuat simpul akar. Sebagai simpul akar, Anda dapat memilih dariGroup, Region or WebView.
Group - Node grup diwakili oleh kelas bernama Group yang termasuk dalam paket javafx.scene, Anda dapat membuat node Grup dengan membuat instance kelas ini seperti yang ditunjukkan di bawah ini.
Group root = new Group();
Itu getChildren() metode dari Group kelas memberi Anda objek dari ObservableListkelas yang menyimpan node. Kita dapat mengambil objek ini dan menambahkan node padanya seperti yang ditunjukkan di bawah ini.
//Retrieving the observable list object
ObservableList list = root.getChildren();
//Setting the text object as a node
list.add(NodeObject);
Kita juga bisa menambahkan objek Node ke grup, hanya dengan meneruskannya ke Group kelas dan konstruktornya pada saat pembuatan, seperti yang ditunjukkan di bawah ini.
Group root = new Group(NodeObject);
Region - Ini adalah kelas Basis dari semua Kontrol UI berbasis Node JavaFX, seperti -
Chart - Kelas ini adalah kelas dasar dari semua grafik dan termasuk dalam paket javafx.scene.chart.
Kelas ini memiliki dua sub kelas, yaitu - PieChart dan XYChart. Keduanya pada gilirannya memiliki subclass sepertiAreaChart, BarChart, BubbleChart, dll. digunakan untuk menggambar berbagai jenis XY-Plane Charts di JavaFX.
Anda dapat menggunakan kelas-kelas ini untuk menyematkan bagan di aplikasi Anda.
Pane - Panel adalah kelas dasar dari semua panel tata letak seperti AnchorPane, BorderPane, DialogPane, dll. Kelas ini termasuk dalam paket yang disebut - javafx.scene.layout.
Anda dapat menggunakan kelas-kelas ini untuk menyisipkan tata letak yang telah ditentukan sebelumnya dalam aplikasi Anda.
Control - Ini adalah kelas dasar dari kontrol Antarmuka Pengguna seperti Accordion, ButtonBar, ChoiceBox, ComboBoxBase, HTMLEditor, etc. This class belongs to the package javafx.scene.control.
Anda dapat menggunakan kelas-kelas ini untuk memasukkan berbagai elemen UI dalam aplikasi Anda.
Dalam Grup, Anda dapat membuat instance kelas yang disebutkan di atas dan menggunakannya sebagai node root, seperti yang ditunjukkan dalam program berikut.
//Creating a Stack Pane
StackPane pane = new StackPane();
//Adding text area to the pane
ObservableList list = pane.getChildren();
list.add(NodeObject);
WebView - Node ini mengelola mesin web dan menampilkan isinya.
Berikut ini adalah diagram yang mewakili hierarki kelas node JavaFX.
Mempersiapkan Adegan
Adegan JavaFX diwakili oleh Scene kelas paket javafx.scene. Anda dapat membuat Scene dengan membuat instance kelas ini seperti yang ditunjukkan pada blok cod berikut.
Saat membuat instance, objek root harus diteruskan ke konstruktor kelas scene.
Scene scene = new Scene(root);
Anda juga bisa melewatkan dua parameter tipe ganda yang mewakili tinggi dan lebar pemandangan seperti yang ditunjukkan di bawah ini.
Scene scene = new Scene(root, 600, 300);
Mempersiapkan Panggung
Ini adalah wadah dari aplikasi JavaFX dan menyediakan jendela untuk aplikasi tersebut. Itu diwakili olehStage kelas paket javafx.stage. Objek kelas ini diteruskan sebagai parameter daristart() metode dari Application kelas.
Dengan menggunakan objek ini, Anda dapat melakukan berbagai operasi di atas panggung. Terutama Anda dapat melakukan yang berikut -
Tetapkan judul untuk panggung menggunakan metode setTitle().
Lampirkan objek adegan ke panggung menggunakan setScene() metode.
Tampilkan konten adegan menggunakan show() metode seperti yang ditunjukkan di bawah ini.
//Setting the title to Stage.
primaryStage.setTitle("Sample application");
//Setting the scene to Stage
primaryStage.setScene(scene);
//Displaying the stage
primaryStage.show();
Siklus Hidup Aplikasi JavaFX
Kelas Aplikasi JavaFX memiliki tiga metode siklus hidup, yaitu -
start() - Metode titik masuk tempat kode grafis JavaFX akan ditulis.
stop() - Metode kosong yang dapat diganti, di sini Anda dapat menulis logika untuk menghentikan aplikasi.
init() - Metode kosong yang dapat diganti, tetapi Anda tidak dapat membuat panggung atau adegan dalam metode ini.
Selain itu, ini menyediakan metode statis bernama launch() untuk meluncurkan aplikasi JavaFX.
Sejak launch()metode statis, Anda perlu memanggilnya dari konteks statis (umumnya utama). Setiap kali aplikasi JavaFX diluncurkan, tindakan berikut akan dilakukan (dalam urutan yang sama).
Sebuah instance dari kelas aplikasi dibuat.
Init() metode disebut.
Itu start() metode disebut.
Peluncur menunggu aplikasi selesai dan memanggil stop() metode.
Mengakhiri Aplikasi JavaFX
Saat jendela terakhir aplikasi ditutup, aplikasi JavaFX dihentikan secara implisit. Anda dapat menonaktifkan perilaku ini dengan meneruskan nilai Boolean "False" ke metode statis setImplicitExit() (harus dipanggil dari konteks statis).
Anda dapat menghentikan aplikasi JavaFX secara eksplisit menggunakan metode Platform.exit() atau System.exit(int).
Contoh 1 - Membuat Jendela Kosong
Bagian ini mengajarkan Anda cara membuat aplikasi contoh JavaFX yang menampilkan jendela kosong. Berikut langkah-langkahnya -
Langkah 1: Membuat Kelas
Buat kelas Java dan warisi Application kelas paket javafx.application dan menerapkan metode start () kelas ini sebagai berikut.
public class JavafxSample extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}
Langkah 2: Membuat Objek Grup
Dalam start() metode membuat objek grup dengan membuat instance kelas bernama Grup, yang termasuk dalam paket javafx.scene, sebagai berikut.
Group root = new Group();
Langkah 3: Membuat Objek Pemandangan
Buat Scene dengan membuat instance kelas bernama Scene yang termasuk dalam paket javafx.scene. Ke kelas ini, teruskan objek Grup(root), dibuat di langkah sebelumnya.
Selain objek root, Anda juga dapat mengirimkan dua parameter ganda yang mewakili tinggi dan lebar layar bersama dengan objek kelas Grup sebagai berikut.
Scene scene = new Scene(root,600, 300);
Langkah 4: Mengatur Judul Panggung
Anda dapat mengatur judul ke panggung menggunakan setTitle() metode dari Stagekelas. ItuprimaryStage adalah objek Tahap yang diteruskan ke metode awal kelas adegan, sebagai parameter.
Menggunakan primaryStage objek, tetapkan judul adegan sebagai Sample Application seperti gambar dibawah.
primaryStage.setTitle("Sample Application");
Langkah 5: Menambahkan Scene ke Panggung
Anda bisa menambahkan objek Scene ke panggung menggunakan metode ini setScene() dari kelas bernama Stage. Tambahkan objek Scene yang disiapkan pada langkah sebelumnya menggunakan metode ini seperti yang ditunjukkan di bawah ini.
primaryStage.setScene(scene);
Langkah 6: Menampilkan Isi Panggung
Tampilkan konten adegan menggunakan metode bernama show() dari Stage kelas sebagai berikut.
primaryStage.show();
Langkah 7: Meluncurkan Aplikasi
Luncurkan aplikasi JavaFX dengan memanggil metode statis launch() dari Application kelas dari metode utama sebagai berikut.
public static void main(String args[]){
launch(args);
}
Contoh
Program berikut menghasilkan jendela JavaFX kosong. Simpan kode ini dalam file dengan namaJavafxSample.java
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class JavafxSample extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
//creating a Group object
Group group = new Group();
//Creating a Scene by passing the group object, height and width
Scene scene = new Scene(group ,600, 300);
//setting color to the scene
scene.setFill(Color.BROWN);
//Setting the title to Stage.
primaryStage.setTitle("Sample Application");
//Adding the scene to Stage
primaryStage.setScene(scene);
//Displaying the contents of the stage
primaryStage.show();
}
public static void main(String args[]){
launch(args);
}
}
Kompilasi dan jalankan file java yang disimpan dari command prompt menggunakan perintah berikut.
javac JavafxSample.java
java JavafxSample
Saat menjalankan, program di atas menghasilkan jendela JavaFX seperti yang ditunjukkan di bawah ini.
Contoh 2 - Menggambar Garis Lurus
Pada contoh sebelumnya, kita telah melihat cara membuat stage kosong, sekarang dalam contoh ini mari kita coba menggambar garis lurus menggunakan library JavaFX.
Berikut langkah-langkahnya -
Langkah 1: Membuat Kelas
Buat kelas Java dan warisi Application kelas paket javafx.application dan menerapkan start() metode kelas ini sebagai berikut.
public class DrawingLine extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}
Langkah 2: Membuat Garis
Anda dapat membuat baris di JavaFX dengan membuat instance kelas bernama Line yang termasuk dalam sebuah paket javafx.scene.shape, buat instance kelas ini sebagai berikut.
//Creating a line object
Line line = new Line();
Langkah 3: Mengatur Properti ke Garis
Tentukan koordinat untuk menggambar garis pada bidang XY dengan menyetel propertinya startX, startY, endX dan endY, menggunakan metode penyetel masing-masing seperti yang ditunjukkan pada blok kode berikut.
line.setStartX(100.0);
line.setStartY(150.0);
line.setEndX(500.0);
line.setEndY(150.0);
Langkah 4: Membuat Objek Grup
Dalam metode start () buat objek grup dengan membuat instance kelas bernama Grup, yang termasuk dalam paket javafx.scene.
Lewati objek Line (node), yang dibuat pada langkah sebelumnya, sebagai parameter ke konstruktor kelas Grup, untuk menambahkannya ke grup sebagai berikut -
Group root = new Group(line);
Langkah 5: Membuat Objek Pemandangan
Buat Scene dengan membuat instance kelas bernama Scene yang termasuk dalam paket javafx.scene. Ke kelas ini, teruskan objek Grup(root) yang dibuat di langkah sebelumnya.
Selain objek root, Anda juga dapat mengirimkan dua parameter ganda yang mewakili tinggi dan lebar layar bersama dengan objek kelas Grup sebagai berikut.
Scene scene = new Scene(group ,600, 300);
Langkah 6: Mengatur Judul Panggung
Anda dapat mengatur judul ke panggung menggunakan setTitle() metode dari Stagekelas. ItuprimaryStage adalah objek Tahap yang diteruskan ke metode awal kelas adegan, sebagai parameter.
Menggunakan primaryStage objek, tetapkan judul adegan sebagai Sample Application sebagai berikut.
primaryStage.setTitle("Sample Application");
Langkah 7: Menambahkan Scene ke Panggung
Anda bisa menambahkan objek Scene ke panggung menggunakan metode ini setScene() dari kelas bernama Stage. Tambahkan objek Scene yang disiapkan pada langkah sebelumnya menggunakan metode ini sebagai berikut.
primaryStage.setScene(scene);
Langkah 8: Menampilkan Isi Panggung
Tampilkan konten adegan menggunakan metode bernama show() dari Stage kelas sebagai berikut.
primaryStage.show();
Langkah 9: Meluncurkan Aplikasi
Luncurkan aplikasi JavaFX dengan memanggil metode statis launch() dari Application kelas dari metode utama sebagai berikut.
public static void main(String args[]){
launch(args);
}
Contoh
Program berikut menunjukkan bagaimana membuat garis lurus menggunakan JavaFX. Simpan kode ini dalam file dengan namaJavafxSample.java.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
public class DrawingLine extends Application{
@Override
public void start(Stage stage) {
//Creating a line object
Line line = new Line();
//Setting the properties to a line
line.setStartX(100.0);
line.setStartY(150.0);
line.setEndX(500.0);
line.setEndY(150.0);
//Creating a Group
Group root = new Group(line);
//Creating a Scene
Scene scene = new Scene(root, 600, 300);
//Setting title to the scene
stage.setTitle("Sample application");
//Adding the scene to the stage
stage.setScene(scene);
//Displaying the contents of a scene
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
Kompilasi dan jalankan file java yang disimpan dari command prompt menggunakan perintah berikut.
javac DrawingLine.java
java DrawingLine
Saat menjalankan, program di atas menghasilkan jendela JavaFX yang menampilkan garis lurus seperti yang ditunjukkan di bawah ini.
Contoh 3 - Menampilkan Teks
Kami juga dapat menyematkan teks di scene JavaFX. Contoh ini menunjukkan cara menyematkan teks di JavaFX.
Berikut langkah-langkahnya -
Langkah 1: Membuat Kelas
Buat Kelas Java dan warisi Application kelas paket javafx.application dan menerapkan start() metode kelas ini sebagai berikut.
public class DrawingLine extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}
Langkah 2: Menyematkan Teks
Anda dapat menyematkan teks ke dalam scene JavaFX dengan membuat instance kelas bernama Text yang termasuk dalam sebuah paket javafx.scene.shape, buat instance kelas ini.
Anda dapat membuat instance kelas ini dengan mengirimkan teks untuk disematkan, dalam format String. Atau, Anda dapat membuat objek teks menggunakan konstruktor default seperti yang ditunjukkan di bawah ini.
//Creating a Text object
Text text = new Text();
Langkah 3: Mengatur Font
Anda dapat mengatur font ke teks menggunakan setFont() metode dari Textkelas. Metode ini menerima objek font sebagai parameter. Atur font dari teks yang diberikan menjadi 45 seperti yang ditunjukkan di bawah ini.
//Setting font to the text
text.setFont(new Font(45));
Langkah 4: Mengatur Posisi Teks
Anda dapat menyetel posisi teks pada bidang XY dengan menyetel koordinat X, Y menggunakan metode penyetel masing-masing setX() dan setY() sebagai berikut.
//setting the position of the text
text.setX(50);
text.setY(150);
Langkah 5: Mengatur teks yang akan ditambahkan
Anda dapat menyetel teks yang akan ditambahkan menggunakan metode setText () dari kelas Teks. Metode ini menerima parameter string yang mewakili teks yang akan ditambahkan.
text.setText("Welcome to Tutorialspoint");
Langkah 6: Membuat Objek Grup
Dalam start() metode, buat objek grup dengan membuat instance kelas bernama Grup, yang termasuk dalam paket javafx.scene.
Meneruskan objek Teks (node), yang dibuat pada langkah sebelumnya, sebagai parameter ke konstruktor kelas Grup, untuk menambahkannya ke grup sebagai berikut -
Group root = new Group(text)
Langkah 7: Membuat Objek Pemandangan
Buat Scene dengan membuat instance kelas bernama Scene yang termasuk dalam paket javafx.scene. Ke kelas ini, teruskan objek Grup(root), dibuat di langkah sebelumnya.
Selain objek root, Anda juga dapat mengirimkan dua parameter ganda yang mewakili tinggi dan lebar layar bersama dengan objek kelas Grup sebagai berikut.
Scene scene = new Scene(group ,600, 300);
Langkah 8: Mengatur Judul Panggung
Anda dapat mengatur judul ke panggung menggunakan setTitle() metode dari Stagekelas. ItuprimaryStage adalah objek Tahap yang diteruskan ke metode awal kelas adegan, sebagai parameter.
Menggunakan primaryStage objek, tetapkan judul adegan sebagai Sample Application seperti gambar dibawah.
primaryStage.setTitle("Sample Application");
Langkah 9: Menambahkan Scene ke Panggung
Anda bisa menambahkan objek Scene ke panggung menggunakan metode ini setScene() dari kelas bernama Stage. Tambahkan objek Scene yang disiapkan pada langkah sebelumnya menggunakan metode ini sebagai berikut.
primaryStage.setScene(scene);
Langkah 10: Menampilkan Isi Panggung
Tampilkan konten adegan menggunakan metode bernama show() dari Stage kelas sebagai berikut.
primaryStage.show();
Langkah 11: Meluncurkan Aplikasi
Luncurkan aplikasi JavaFX dengan memanggil metode statis launch() dari Application kelas dari metode utama sebagai berikut.
public static void main(String args[]){
launch(args);
}
Contoh
Berikut adalah program untuk menampilkan teks menggunakan JavaFX. Simpan kode ini dalam file dengan namaDisplayingText.java.
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class DisplayingText extends Application {
@Override
public void start(Stage stage) {
//Creating a Text object
Text text = new Text();
//Setting font to the text
text.setFont(new Font(45));
//setting the position of the text
text.setX(50);
text.setY(150);
//Setting the text to be added.
text.setText("Welcome to Tutorialspoint");
//Creating a Group object
Group root = new Group();
//Retrieving the observable list object
ObservableList list = root.getChildren();
//Setting the text object as a node to the group object
list.add(text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Sample Application");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
Kompilasi dan jalankan file java yang disimpan dari command prompt menggunakan perintah berikut.
javac DisplayingText.java
java DisplayingText
Saat menjalankan, program di atas menghasilkan jendela JavaFX yang menampilkan teks seperti yang ditunjukkan di bawah ini.