JavaFX - 應用程式

上一頁
下一頁

正如我們已經學到的，JavaFX 是一個開源的免費軟體平臺，它允許使用者開發在各種裝置上都能一致執行的客戶端應用程式。使用 JavaFX，可以建立圖形使用者介面應用程式 (GUI) 以及網際網路或桌面應用程式。所有這些應用程式都將使用 Java 開發。

在本章中，我們將詳細討論 JavaFX 應用程式的結構，並學習透過示例建立 JavaFX 應用程式。

JavaFX 應用程式結構

通常，一個 JavaFX 應用程式將包含三個主要元件，即 **Stage、Scene** 和 **Nodes**，如下圖所示。

JavaFX Application Structure

Stage

Stage（視窗）包含 JavaFX 應用程式的所有物件。它由 **javafx.stage** 包中的 **Stage** 類表示。主 Stage 由平臺本身建立。建立的 Stage 物件作為引數傳遞給 **Application** 類的 **start()** 方法（下一節將解釋）。

Stage 有兩個引數決定其位置，即 **寬度** 和 **高度**。它分為內容區域和裝飾（標題欄和邊框）。

有五種可用的 Stage 型別：

  • 帶裝飾
  • 無裝飾
  • 透明
  • 統一
  • 實用

您必須呼叫 **show()** 方法以顯示 Stage 的內容。

Scene

Scene 表示 JavaFX 應用程式的物理內容。它包含場景圖的所有內容。**javafx.scene** 包中的 **Scene** 類表示 Scene 物件。在任何例項中，Scene 物件僅新增到一個 Stage 中。

您可以透過例項化 Scene 類來建立 Scene。您可以透過將 Scene 的尺寸（高度和寬度）以及 **根節點** 傳遞給其建構函式來選擇 Scene 的大小。

場景圖和節點

**場景圖** 是一種樹形資料結構（分層結構），表示 Scene 的內容。相反，**節點** 是場景圖中的一個視覺/圖形物件。

節點可能包括：

  • 幾何（圖形）物件（2D 和 3D），例如：圓形、矩形、多邊形等。

  • UI 控制元件，例如：按鈕、複選框、選擇框、文字區域等。

  • 容器（佈局面板），例如：BorderPane、GridPane、FlowPane 等。

  • 媒體元素，例如音訊、影片和影像物件。

**javafx.scene** 包中的 **Node** 類表示 JavaFX 中的節點，此類是所有節點的超類。

節點有三種類型：

  • **根節點** - 第一個場景圖稱為根節點。

  • **分支節點/父節點** - 帶有子節點的節點稱為分支/父節點。名為 **javafx.scene** 包中的 **Parent** 的抽象類是所有父節點的基類，這些父節點將是以下型別：

    • **Group** - Group 節點是一個集合節點，包含子節點列表。每當渲染 Group 節點時，都會按順序渲染其所有子節點。應用於 Group 的任何變換、效果狀態都將應用於所有子節點。

    • **Region** - 它是所有基於 JavaFX Node 的 UI 控制元件的基類，例如 Chart、Pane 和 Control。

    • **WebView** - 此節點管理 Web 引擎並顯示其內容。

  • **葉子節點** - 沒有子節點的節點稱為葉子節點。例如，Rectangle、Ellipse、Box、ImageView、MediaView 是葉子節點的示例。

必須將根節點傳遞給場景圖。如果將 Group 作為根傳遞，則所有節點都將被剪裁到 Scene，並且 Scene 大小的任何更改都不會影響 Scene 的佈局。

建立 JavaFX 應用程式

要建立 JavaFX 應用程式，您需要例項化 Application 類並實現其抽象方法 **start()**。在此方法中，我們將編寫 JavaFX 應用程式的程式碼。

Application 類

**javafx.application** 包中的 **Application** 類是 JavaFX 中應用程式的入口點。要建立 JavaFX 應用程式，您需要繼承此類並實現其抽象方法 **start()**。在此方法中，您需要編寫 JavaFX 圖形的全部程式碼。

在 **main** 方法中，您必須使用 **launch()** 方法啟動應用程式。此方法在內部呼叫 Application 類的 **start()** 方法，如下面的程式所示。

示例

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

在 **start()** 方法中，為了建立一個典型的 JavaFX 應用程式，您需要按照以下步驟操作：

  • 使用所需的節點準備場景圖。

  • 使用所需的尺寸準備 Scene，並將場景圖（場景圖的根節點）新增到其中。

  • 準備 Stage，並將 Scene 新增到 Stage，並顯示 Stage 的內容。

準備場景圖

根據您的應用程式，您需要使用所需的節點準備場景圖。由於根節點是第一個節點，因此您需要建立一個根節點。作為根節點，您可以從 **Group、Region 或 WebView** 中選擇。

**Group** - Group 節點由名為 **Group** 的類表示，該類屬於 **javafx.scene** 包，您可以透過例項化此類來建立 Group 節點，如下所示。

Group root = new Group();

**Group** 類的 **getChildren()** 方法為您提供了一個 **ObservableList** 類的物件，該物件儲存節點。我們可以檢索此物件並向其中新增節點，如下所示。

//Retrieving the observable list object 
ObservableList list = root.getChildren(); 
       
//Setting the text object as a node  
list.add(NodeObject);

我們也可以將 Node 物件新增到 Group 中，只需在例項化時將它們傳遞給 **Group** 類及其建構函式，如下所示。

Group root = new Group(NodeObject);

**Region** - 它是所有基於 JavaFX Node 的 UI 控制元件的基類，例如：

  • **Chart** - 此類是所有圖表的基類，它屬於 **javafx.scene.chart** 包。

    此類有兩個子類，它們是：**PieChart** 和 **XYChart**。這兩個類又分別有子類，例如 **AreaChart、BarChart、BubbleChart** 等，用於在 JavaFX 中繪製不同型別的 XY 平面圖表。

    您可以使用這些類將圖表嵌入到您的應用程式中。

  • **Pane** - Pane 是所有佈局面板的基類，例如 **AnchorPane、BorderPane、DialogPane** 等。此類屬於一個名為 **javafx.scene.layout** 的包。

    您可以使用這些類在應用程式中插入預定義的佈局。

  • 控制元件 - 它是使用者介面控制元件（例如手風琴、工具欄、選擇框、組合框基類、HTML 編輯器等）的基類。此類屬於包 **javafx.scene.control**。

    您可以使用這些類在應用程式中插入各種 UI 元素。

在 Group 中，您可以例項化上述任何類並將其用作根節點，如下面的程式所示。

示例

//Creating a Stack Pane 
StackPane pane = new StackPane();       
       
//Adding text area to the pane  
ObservableList list = pane.getChildren(); 
list.add(NodeObject);

**WebView** - 此節點管理 Web 引擎並顯示其內容。

以下是 JavaFX 節點類層次結構的圖。

WebView

準備場景

JavaFX 場景由包 **javafx.scene** 的 **Scene** 類表示。您可以透過例項化此類來建立場景，如下面的程式碼塊所示。

在例項化時，必須將根物件傳遞給場景類的建構函式。

Scene scene = new Scene(root);

您還可以傳遞兩個雙精度型別的引數，分別表示場景的高度和寬度，如下所示。

Scene scene = new Scene(root, 600, 300);

準備舞臺

這是任何 JavaFX 應用程式的容器，它為應用程式提供了一個視窗。它由包 **javafx.stage** 的 **Stage** 類表示。此類的物件作為 **Application** 類的 **start()** 方法的引數傳遞。

使用此物件，您可以在舞臺上執行各種操作。主要可以執行以下操作 -

  • 使用 **setTitle()** 方法設定舞臺的標題。

  • 使用 **setScene()** 方法將場景物件附加到舞臺。

  • 使用 **show()** 方法顯示場景的內容，如下所示。

//Setting the title to Stage. 
primaryStage.setTitle("Sample application"); 
       
//Setting the scene to Stage 
primaryStage.setScene(scene); 
       
//Displaying the stage 
primaryStage.show();

JavaFX 應用程式的生命週期

JavaFX Application 類有三個生命週期方法，它們是 -

  • start() - 入口點方法，其中應編寫 JavaFX 圖形程式碼。

  • stop() - 一個空方法，可以重寫，在這裡您可以編寫停止應用程式的邏輯。

  • init() - 一個空方法，可以重寫，但不能在此方法中建立舞臺或場景。

除此之外，它還提供了一個名為 **launch()** 的靜態方法來啟動 JavaFX 應用程式。

由於 **launch()** 方法是靜態的，因此您需要從靜態上下文（通常為主方法）呼叫它。每當啟動 JavaFX 應用程式時，將執行以下操作（按相同順序）。

  • 建立應用程式類的例項。

  • 呼叫 **init()** 方法。

  • 呼叫 **start()** 方法。

  • 啟動器等待應用程式完成並呼叫 **stop()** 方法。

終止 JavaFX 應用程式

當應用程式的最後一個視窗關閉時，JavaFX 應用程式將隱式終止。您可以透過將布林值“False”傳遞給靜態方法 **setImplicitExit()** 來關閉此行為（應從靜態上下文呼叫）。

您可以使用 **Platform.exit()** 或 **System.exit**(int) 方法顯式終止 JavaFX 應用程式。

示例 - 建立一個空視窗

本節將教您如何建立一個顯示空視窗的 JavaFX 示例應用程式。以下是步驟 -

步驟 1：建立類

建立一個 Java 類並繼承包 **javafx.application** 的 **Application** 類，並實現此類的 start() 方法，如下所示。

public class JavafxSample extends Application {  
   @Override     
   public void start(Stage primaryStage) throws Exception {      
   }    
}

步驟 2：建立 Group 物件

在 **start()** 方法中，透過例項化名為 Group 的類（屬於包 **javafx.scene**）來建立一個 Group 物件，如下所示。

Group root = new Group();

步驟 3：建立 Scene 物件

透過例項化名為 **Scene** 的類（屬於包 **javafx.scene**）來建立一個 Scene。為此類傳遞上一步建立的 Group 物件 **(root)**。

除了根物件之外，您還可以傳遞兩個雙精度型別的引數，分別表示螢幕的高度和寬度，以及 Group 類的物件，如下所示。

Scene scene = new Scene(root,600, 300);

步驟 4：設定舞臺的標題

您可以使用 **Stage** 類的 **setTitle()** 方法設定舞臺的標題。**primaryStage** 是一個 Stage 物件，作為引數傳遞給場景類的 start 方法。

使用 **primaryStage** 物件，將場景的標題設定為 **示例應用程式**，如下所示。

primaryStage.setTitle("Sample Application");

步驟 5：將 Scene 新增到 Stage

您可以使用名為 **Stage** 的類的 **setScene()** 方法將 Scene 物件新增到 Stage。使用此方法新增上一步準備的 Scene 物件，如下所示。

primaryStage.setScene(scene);

步驟 6：顯示 Stage 的內容

使用名為 **Stage** 類的 **show()** 方法顯示場景的內容，如下所示。

primaryStage.show();

步驟 7：啟動應用程式

透過從主方法呼叫 **Application** 類的靜態方法 **launch()** 來啟動 JavaFX 應用程式，如下所示。

public static void main(String args[]){   
   launch(args);      
}

以下程式生成一個空的 JavaFX 視窗。將此程式碼儲存在名為 **JavafxSample.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);     
   }         
}

使用以下命令從命令提示符編譯並執行儲存的 java 檔案。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxSample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxSample

輸出

執行後，上述程式將生成一個 JavaFX 視窗，如下所示。

Sample Application Plain

示例 - 繪製直線

在前面的示例中，我們已經看到了如何建立一個空舞臺，現在在這個示例中，讓我們嘗試使用 JavaFX 庫繪製一條直線。

繪製線條的此程式碼也遵循前面示例中提到的相同步驟。但是，差異出現在 start() 方法中，我們透過例項化名為 Group 的類（屬於包 javafx.scene）來建立一個 Group 物件。將使用 setter 方法建立的 Line（節點）物件作為引數傳遞給 Group 類的建構函式，以便將其新增到組中。

將此程式碼儲存在名為 **DrawingLine.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); 
   } 
}

使用以下命令從命令提示符編譯並執行儲存的 java 檔案。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls DrawingLine.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls DrawingLine

輸出

執行後，上述程式將生成一個 JavaFX 視窗，顯示一條直線，如下所示。

Drawing Line

示例 - 顯示文字

我們還可以將文字嵌入到 JavaFX 場景中。此示例演示如何在 JavaFX 中嵌入文字。將此程式碼儲存在名為 **DisplayingText.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); 
   } 
}

使用以下命令從命令提示符編譯並執行儲存的 java 檔案。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls DisplayingText.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls DisplayingText

輸出

執行後，上述程式將生成一個 JavaFX 視窗，顯示文字，如下所示。

JavaFX Window Displaying Text
列印頁面
上一頁
下一頁
廣告