JavaFX Script 編譯版打造富互聯網應用 (RIA) 入門

JavaFX 技術概覽

• JavaFX Script：靜態型別、純物件導向腳本語言，編譯為 JVM 位元碼，充分利用 Java 平台威力。
• JavaFX Mobile：面向行動裝置平台（本文不涉及）。
• Java SE 6 Update N (6uN)：最新 JVM 部署技術，大幅加速 Applet/應用程式啟動。

結合編譯版 JavaFX Script + 6uN = 快速部署、高效能執行的圖形富客戶端。

環境準備

1. 需 JRE 5+。
2. 下載最新 JavaFX Compiler（openjfx-compiler）。
3. 解壓 archive.zip，將 archive/openjfx-compiler/dist/bin 加入 PATH。

HelloCompiledJavaFX 範例

目錄結構

源碼含 package mypackage;，須置於 mypackage/ 目錄下，檔名 HelloCompiledJavaFX.fx。

編譯與執行

cd mypackage
javafxc HelloCompiledJavaFX.fx   # 編譯
javafx mypackage.HelloCompiledJavaFX  # 執行

執行畫面

點擊 "Click Me" 彈出對話框：

完整源碼

package mypackage;
import javafx.ui.*;
import javafx.ui.canvas.*;

Frame {
    title: "Hello Rich Internet Applications!"
    width: 550
    height: 200
    background: Color.WHITE
    visible: true
    content:
    BorderPanel {
        top:
        FlowPanel {
            content:
            Button {
                text: "Click Me"
                action: function():Void {
                    MessageDialog {
                        title: "JavaFX Script Rocks!"
                        message: "JavaFX Script is Simple, Elegant,
                            and Leverages the Power of Java"
                        visible: true
                    }
                }
            }
        }
        center:
        Canvas {
            content:
            Text {
                font: Font {
                    faceName: "Sans Serif"
                    style: FontStyle.BOLD
                    size: 24
                }
                x: 20
                y: 40
                stroke: Color.BLUE
                fill: Color.BLUE
                content: "JavaFX Script Makes RIA Development Easy"
            }
        }
    }
}

代碼深度解析

註解與 Package/Import

• 支援 /* ... */ 多行與 // 單行註解，語法同 Java。
• package 對應目錄結構，建議以反轉網域名開頭（如 com.company.module）。
• import 使用 * 萬用字元或具體類別（如 import javafx.ui.Frame;）。

宣告式 UI 語法

核心優勢：以**單一巢狀表達式**描述完整 UI 包含結構，自動實例化物件並賦值屬性。

Font {
    faceName: "Sans Serif"
    style: FontStyle.BOLD
    size: 24
}

: 代表「將右側運算式賦值給左側屬性」。

核心 UI 類別

• Frame：頂層視窗，屬性 title, width, height, background, visible, content。
• BorderPanel：對應 Java BorderLayout，區域 top, left, right, bottom, center。邊緣區域自適應大小，中心佔剩餘空間。
• FlowPanel：對應 FlowLayout，元件左至右排列，自動換行，保持原始大小。
• Button：按鈕，text 顯示文字，action 綁定匿名函數處理點擊事件。
• MessageDialog：模態對話框，title, message, visible。
• Canvas：繪圖容器，content 放置 2D 圖形節點。
• Text：2D 文字圖形，x, y 位置，font, stroke, fill, content 樣式。
• Font：字體描述，faceName, style, size。

字串處理

• 雙引號定義字串，原始碼換行即為字串換行（如 message 範例）。
• 亦支援單引號。

事件處理

將匿名函數賦值給 action 屬性，用戶觸發時執行：

Button {
    action: function():Void {
        MessageDialog { ... visible: true }
    }
}

總結

• JavaFX Script 以簡潔宣告式語法輕鬆構建跨平台富 GUI。
• Java SE 6uN 解決部署速度與跨平台一致性。
• 靜態型別 + 純 OO，代碼健壯可維護。
• 註解、Package、Import 與 Java 一致，學習曲線平緩。
• 立即下載編譯器體驗 RIA 開發新境界。