JavaFX Application

JavaFX 製作的 GUI application，因為以 java 實作，能夠跨平台運作。

application structure

Application (程式入口)
└── Stage (主視窗)
    └── Scene (場景)
        └── Scene Graph (節點樹)
            ├── Layouts (VBox, HBox, BorderPane, etc.)
            │   └── Controls (Button, Label, etc.)
            └── Other nodes (Canvas, WebView, etc.)

Scene (有一個 Root Node)
└── Root Node (Parent)
    ├── Branch Node (Parent)
    │   ├── Leaf Node (Control)
    │   └── Leaf Node (Shape)
    └── Branch Node (Group)
        └── Leaf Node (ImageView)

Stage

包含application內所有 objects，類別是 javafx.stage.Stage，primary stage 由 platform 建立，並以參數傳遞給 Application 的 start()

stage 有兩個參數決定位置：Width, Height，並分為 content area 與 decorations，呼叫show() 可顯示 stage 的 contents

Stage 是最上層的 container (window)，只有一個主要的 Stage，javafx 支援五種類型的 stages

• Primary Stage

  javafx runtime 產生的第一個初始 windows

  Main application window，由 star(Stage) 取得

  @Override
  public void start(Stage primaryStage) {
      primaryStage.setTitle("Primary Stage");
      primaryStage.show();
  }

• Secondary Stage

  可用來產生dialogs, tools, secondary views

  其他 window/dialog，以 new Stage() 產生

  Stage secondaryStage = new Stage();
  secondaryStage.setTitle("Secondary Stage");
  secondaryStage.show();

• Model Stage

  特殊的 secondary stage，會阻斷跟其他 window 的互動

  Blocking dialogs，new Stage() + initModality(..) 產生

  Stage modalStage = new Stage();
  modalStage.initModality(Modality.APPLICATION_MODAL);
  modalStage.setTitle("Modal Dialog");
  modalStage.showAndWait();  // blocks until closed

• Transparent Stage

  沒有 title bar, border, shadow，沒有 decorations 的 stage

  Custom UI, shaped windows，以 initStyle(StageStyle.TRANSPARENT) 產生

  Stage transparentStage = new Stage();
  transparentStage.initStyle(StageStyle.TRANSPARENT);
  transparentStage.setScene(new Scene(root, 300, 200));
  transparentStage.getScene().setFill(Color.TRANSPARENT);
  transparentStage.show();

• Undecorated/Utility

  Undecorated Stage: no title bar, no close/minimize/maximize buttons

  Utility Stage: styled like a small tool window (depends on OS), useful for small popups or tool palettes.

  Tool windows, splash screens，以 StageStyle.UNDECORATED/UTILITY 產生

  Stage undecoratedStage = new Stage();
  undecoratedStage.initStyle(StageStyle.UNDECORATED);
  undecoratedStage.show();
  
  Stage utilityStage = new Stage();
  utilityStage.initStyle(StageStyle.UTILITY);
  utilityStage.show();

Scene

scene 包含了 scene graph 所有內容，類別是 javafx.scene.Scene，每一個 scene object instance 只能加入一個唯一的 stage

Scene Graph and Nodes

scene graph 是樹狀結構，裡面是 scene 的內容， node 是 scene graph 裡面的 visual/graphical object

• Container (Parent)

  可包含子節點，用來排版，是 branch node 不是 leaf

  類別	說明
  Group	不處理排版，純粹容器
  Region	所有 layout class 基礎
  Pane	絕對位置排版
  VBox, HBox	垂直 / 水平排版容器
  BorderPane	上下左右中五區域排版
  StackPane	子節點重疊排列
  GridPane	表格式佈局
  AnchorPane	固定邊界排版（類似 CSS）

• Control (互動元件)

  是 leaf node，可直接跟 user 互動

  類別	說明
  Button	按鈕
  Label	顯示文字
  TextField	單行文字輸入
  TextArea	多行文字輸入
  CheckBox	核取框
  RadioButton	單選按鈕
  ComboBox	下拉選單
  ListView	清單顯示
  TableView	表格資料顯示
  TreeView	樹狀階層顯示
  Slider	拖拉式數值選擇器
  ProgressBar	進度條
  MenuBar	選單列
  TabPane	分頁容器

• Geometrical (graphical) 2D/3D object (Shape)

  leaf node，用在自訂 UI，或是繪圖功能

  類別	說明
  Rectangle	矩形
  Circle	圓形
  Ellipse	橢圓
  Line	線條
  Polygon	多邊形
  Polyline	折線
  Arc	弧形
  Path	任意路徑

• Media

  Audio/Video/Image

  類別	說明
  ImageView	顯示圖片
  MediaView	播放音訊或影片視訊
  Canvas	提供 2D 自訂繪圖區域
  WebView	嵌入網頁（HTML/CSS/JS）
  Text	顯示純文字（非 Control）

• Transform/特效用 node

  類別	說明
  SubScene	場景中的獨立子場景
  SnapshotView	拍攝其他節點的快照
  Group	提供無排版的節點群組
  Clip	裁剪圖形
  Effect (陰影等)	雖不是 Node，但可附加在 Node 上

Node 有三類

• Root Node

• Branch/Parent Node

  • Group

  • Region

  • WebView

• Leaf Node

Example

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class JavafxSample extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        //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 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 JavaFx Demo");

        //creating a Group object
        Group group = new Group( );
        //Retrieving the observable list object
        ObservableList list = group.getChildren();
        //Setting the text object as a node to the group object
        list.add(text);
        list.add(line);


        //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.ALICEBLUE);

        //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 --module-path /java/javafx-sdk-25.0.1/lib/ --add-modules javafx.controls JavafxSample

執行結果