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.