使用經過編譯的 JavaFX Script 技術建立富 Internet 應用程式

 

By James L. Weaver, 2/29/08

JavaFX 系列技術目前包含兩種產品：JavaFX Script 和 JavaFX Mobile 平台。後者是面向行動電話和其他行動裝置的平台。本系列的 18 篇文章主要關注 JavaFX Script 程式設計語言，
這是一種簡單而優雅的指令碼編製語言，充分利用了 Java 平台的強大功能。進一步來講，這些系列文章涵蓋了經過編譯的 JavaFX
Script，它經曆了完整的開發週期。您可能已經瞭解到 JavaFX Script 有一個經過解釋的版本，它實質上充當編譯後版本的原型
JavaFX Script 是靜態類型並且完全物件導向。

您將看到，使用 JavaFX Script 可以輕鬆地開發響應性的富圖形化使用者介面（GUI）。它的一部分魅力在於，即使開發人員不具備深入的編程知識，他們也能夠開發出圖形內容來構成令人稱奇的使用者介面（UI）。

Java SE 6 Update N 是 Java Platform, Standard Edition 6 (Java SE 6) 的一些更新的名稱，通常簡寫為 6uN，它實現了最新版 JVM* 的部署，並顯著加快了 Java applets 和應用程式的啟動速度。再加上 JavaFX Script 被編譯為 JVM 位元組碼，因此可以為我們提供可快速部署、快速執行的圖形化富客戶機。

現在，您已經基本瞭解了 JavaFX 技術和 Java SE 6 Update N 的含義，讓我們來查看一些經過編譯的 JavaFX
Script 代碼，這些代碼要比典型的 Hello World 程式稍微複雜一些。通過這些代碼，您將可以體驗到建立包含 UI 組件和 2D
圖形的經過編譯的 JavaFX 程式是多麼簡單。 下一小節將展示如何編譯和運行樣本程式。

目錄

 

-	擷取 JavaFX Script 編譯器
-	編譯並運行 HelloCompiledJavaFX 程式
-	理解 HelloCompiledJavaFX 應用程式代碼
-	定義使用者介面的聲明性代碼
-	使用 Frame 類
-	建立字串字元
-	使用布局組件
-	處理事件並顯示訊息對話方塊
-	在畫布上繪製
-	定義字型
-	結束語
-	更多資訊

 

擷取 JavaFX Script 編譯器

在編譯和運行 JavaFX Script 程式之前，首先需要擷取最新版本的 JavaFX 編譯器。可通過以下步驟實現。注意：必須使用 JRE 5 或更高版本 編譯和運行 JavaFX Script 程式。

1. 下載 最新版本的編譯器。
2. 將 archive.zip 檔案解壓縮到系統中的一個目錄。
3. 設定 PATH 環境變數，使其包含解壓縮 archive.zip 檔案時使用的目錄的 archive/openjfx-compiler/dist/bin 子目錄。

編譯並運行 HelloCompiledJavaFX 程式

由於程式使用了一個 package 語句，原始碼必須位於目錄名和包名相同的目錄中。將程式儲存到 mypackage 目錄中名為 HelloCompiledJavaFX.fx 的檔案中。要編譯這個程式，將目前的目錄設定為 mypackage 目錄並執行 javafxc 命令指令碼，輸入以下命令：

javafxc HelloCompiledJavaFX.fx

 

要運行程式，訪問儲存包的目錄，並輸入以下命令：

javafx mypackage.HelloCompiledJavaFX

 

圖 1 展示了將出現的視窗。

圖 1：應用程式的主視窗

 

啟用 Click Me 按鈕後，應該可以看到 2 所示的對話方塊。

圖 2：訊息對話方塊

 

程式碼範例 1 展示了這個簡單 JavaFX Script 程式的原始碼。

程式碼範例 1

/* * HelloCompiledJavaFX.fx - A "Hello World" style, but slightly more * sophisticated, compiled JavaFX Script example * * Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com) * to serve as a compiled JavaFX Script example. */ 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!" // This string has a newline in the source code 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" } } } }

 

讓我們仔細檢驗一下這段原始碼。

理解 HelloCompiledJavaFX 應用程式代碼

和 Java 程式設計語言一樣，JavaFX 技術包含兩種類型的注釋：多行注釋和單行注釋。

• 多行注釋 的開頭是兩個 /* 字元，並使用相同的兩個字元結束，但是順序相反（*/）。開始字元和結束字元之間的任何內容都將忽略掉。程式碼範例 1 的開始部分展示了一個多行注釋的例子。
• 單行注釋 以兩個 // 字元開始，這兩個字元後的所有內容都將被忽略。範例程式碼 1 在接近中間的部分展示了一個單行注釋的例子，為方便查看，下面再一次展示了這個例子：

  // This string has a newline in the source code.

和 Java 技術相同，package 聲明類似檔案系統中的檔案夾。它提供了一種按照邏輯組織應用程式的原始碼檔案的方法。本例中的包為 mypackage，它表示 HelloCompiledJavaFX.fx 原始碼位於名為 mypackage 的檔案夾中。包名可能由多個節點群組成。例如，com.sun.foo 這個包名表示原始碼檔案位於名為 foo 的檔案夾中，後者位於名為 sun 的檔案夾，而 sun 檔案夾又位於 com 檔案夾中。注意，包名通常以開發該應用程式的公司或組織的網域名稱開頭 —— 使用相反的順序，以頂級網域名稱開頭，例如 com 或 org。包的聲明為可選內容，除了最平常的應用程式以外，其他程式應該使用包聲明，這是一項最佳實務。如果使用包聲明，那麼包聲明語句必須位於原始碼的頂部，並且不能包含空白和注釋。

繼續利用您的 Java 程式設計語言知識，您將看到 JavaFX Script 語言也包含了 import 語句。JavaFX 程式通常使用由 JavaFX 代碼（以及一些 Java 代碼）組成的庫。在本例中，每個匯入語句表示某些 JavaFX 類的位置或包，HelloCompiledJavaFX.fx 檔案其餘部分的代碼將依賴這些類把組件和圖形輸出到螢幕。匯入語句可以使用星號 (*) 作為結束，表示程式可能使用了包中的任何一個類。一個替代方法是具體指定正在使用的每個類，如下面的樣本所示：

import javafx.ui.Frame;

 

除了最平常的應用程式外，其他應用程式都應該通過 package 聲明組織它們的原始碼。 對於具有不同 package 語句的原始碼檔案，將使用 import 語句表示包含在其中的類的使用。

定義使用者介面的聲明性代碼

JavaFX
技術的一個令人興奮的特性就是它能夠以一種簡單、一致、強大的聲明性文法表示圖形化使用者介面（GUI）。宣告式程式設計由單一的運算式組成，而過程性編程由多
個連續執行的運算式組成。JavaFX Script 同時支援這兩種類型的編程，但是，在任何可能的情況下使用聲明性文法是一項最佳實務。

程式碼範例 1 中的多數應用程式範例都是聲明性的：由單個運算式組成。聲明性運算式首先定義一個 Frame 對象，後跟一個開啟的花括弧，在程式的最後一行以一個匹配的花括弧結束。中間嵌套的內容是 Frame 對象的屬性，包括分配了 BorderPanel 布局組件的 content 屬性，BorderPanel 是由 Java 平台的 BorderLayout 管理的一個 GUI 組件。content 屬性中嵌套了 BorderPanel 組件的 top 和 center 屬性，這兩個屬性分別分配了一個 FlowPanel 布局組件和一個 Canvas 組件。這種嵌套將一直繼續下去，直到完全表達了 UI 的包含結構。

聲明性代碼將自動建立運算式中的每個 JavaFX 類的執行個體 —— 也稱為對象。它還向新執行個體的屬性分配值。例如，查看建立 Font 類執行個體的代碼：

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

 

這些代碼建立了 JavaFX Font 類的執行個體並將值 Sans Serif 分配給新 Font 執行個體的 faceName 屬性。它還將 FontStyle.BOLD 常量（靜態屬性）的值分配給 style 屬性，將 24 分配給 size 屬性。注意，每個屬性名稱後都緊跟一個冒號 (:)，這在 JavaFX 聲明性文法中表示 “將右側的運算式值分配給左側的屬性”。這些概念對於這個程式中的其他類也是同樣的道理：Frame、BorderPanel、FlowPanel、Button、MessageDialog、Canvas 和 Text。讓我們分別查看一下這些類。

使用 Frame 類

Frame 表示一個 GUI 視窗，它具有自己的邊界並且可以在其中包含其他的 GUI 組件。

與大多數類一樣，Frame 類具有一組屬性。如程式碼範例 1 所示，Frame 組件的屬性集包含以下幾種：

• title 顯示在視窗的標題列。
• height 和 width 屬性以像素為單位，可以確定視窗的初始大小。
• background 屬性指定 Frame 的背景顏色。
• visible 屬性控制 Frame 對象是否顯示在螢幕中。
• content 屬性定義 Frame 對象的內容。在本例中，Frame 對象將包含一個 BorderPanel 布局組件，後者又包含了其他組件。

建立字串字元

JavaFX 技術提供了若干資料類型，其中之一就是 String，它由零個或多個字串組成。如下面的 Frame 對象的 title 屬性所示，String 字元的定義方式為使用雙引號將一組字元括起：

title: "Hello Rich Internet Applications!"

 

要向字串嵌入分行符號，只需要在新行中繼續字串即可，下面來自樣本中的代碼顯示了這一點：

message: "JavaFX Script is Simple, Elegant, and Leverages the Power of Java"

 

另外，您還可以選擇使用單引號將 String 字元括起。

使用布局組件

JavaFX Script 的一個令人矚目的特性就是它能夠使用簡單的聲明性代碼錶示一個 GUI 以及其中的布局。這是因為 JavaFX
Script 使用了布局組件（一些 UI 組件），而不會要求您建立布局管理器的執行個體並將其與 UI 組件相關聯，後者正是 Java
技術的做法。圖 3 示範了這個應用程式中使用的布局策略。

圖 3：確定了布局組件的主視窗

 

比較圖 3 與程式碼範例 1 中的原始碼，您將發現使用 JavaFX 技術定義複雜的跨平台 UI 是多麼簡單。BorderPanel 布局組件的行為與由 Java BorderLayout 管理器管理的 Java UI 容器的行為相同：UI 組件可以關聯到 top、left、right、bottom 和 center 屬性。上、下、左、右地區只會佔用放置各自組件所需的空間，而中心地區則佔有剩餘的空間。與 Java BorderLayout 管理器相同，放置在 BorderPanel 中的組件將被放大到適合所放置地區的大小。

類似地，FlowPanel 與 Java FlowLayout 管理下的 Java UI 容器的行為相同：它允許其中的組件從左側移動到右側，如果需要的話還可以包含在 FlowPanel 內。與 Java FlowLayout 管理器相同，放置在 FlowPanel 中的組件將保持它們的預設大小，而不會向 BorderPanel 中的組件那樣被放大。

處理事件並顯示訊息對話方塊

看一下下面的這個聲明性代碼塊，它首先對 Button 類進行執行個體化：

Button { text: "Click Me" action: function():Void { MessageDialog { title: "JavaFX Script Rocks!" // This string has a newline in the source code message: "JavaFX Script is Simple, Elegant, and Leverages the Power of Java" visible: true } } }

 

當使用者啟用這個按鈕時，將調用分配給 action 屬性的匿名函數，在本例中這樣做將建立一個 MessageDialog 類的執行個體。由於 visible 屬性為真，新的 MessageDialog 執行個體將顯示在螢幕中，並具有相應的標題和訊息， 4 所示，為方便起見，它重複了圖 1 的螢幕：

圖 3：確定了布局組件的主視窗

 

圖 4：訊息對話方塊

 

注意，對話方塊中的訊息被分為兩行顯示，這是由將訊息分配給屬性的方式決定的，如 建立字串字元 一節所述。

在畫布上繪製

現在查看與 Canvas 有關的代碼，需要注意 Canvas 被分配給 BorderPanel 的中心地區。您在前面已經看到，聲明性代碼用於在 UI 包含結構中表示組件。現在將使用聲明性代碼在 Canvas 中繪製 2D 圖形。您將使用 Text 類在 Canvas 上繪製文本，這是 JavaFX Script 提供的一個 2D 圖形類。x 和 y 屬性工作表示文本的左上方的顯示位置，以像素為單位。Text 類的 content 屬性包含將要繪製的字串，而 font 屬性指定將要繪製的文本的外觀。

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" } }

 

定義字型

最後，在前面的程式碼片段中，在定義應用程式 UI 的聲明性指令碼的最內層，您會看到一個 Font 類。該類用於指定 Text 對象的外觀特徵，將使用到 faceName、style 和 size 屬性。

結束語

在本文中，您學習了以下內容：

• JavaFX Script 可以輕鬆地開發響應性的跨平台富 GUI，而 Java SE 6 Update N 將解決跨平台問題並提高部署速度。
• JavaFX Script 使您能夠通過簡單的聲明性文法表示複雜的跨平台 GUI。您可以輕鬆地表示 GUI 組件、布局組件和 2D 圖形。
• JavaFX Script 是靜態類型並且完全物件導向。
• JavaFX Script 注釋以及 package 和 import 語句與 Java 程式設計語言完全相同。
• 分配給屬性的匿名函數負責處理事件，如 Button 類的 action 屬性所示。
• 可以下載並使用最新版的 JavaFX Script 編譯器編譯並運行您的 JavaFX Script 程式。

* 在本網站中，術語 JAVA 虛擬機器或 JVM 表示 Java 平台上的虛擬機器。

更多資訊

• JavaFX Technology at a Glance
• Java SE 6 Update N Early Access
• Java SE 6 Update N New Plug-In
• Java SE 6 Update N Java Quick Starter (JQS)
• 下載 JRE 5 或更高版本
• 下載 最新的編譯器版本
• James Weaver 的部落格將協助您成為 JavaFXpert

關於作者

James L. (Jim) Weaver 是 LAT, Inc. 的 CTO 並且是一名 Java Champion。他是一名作家、演講家，並且提供 Java 和 JavaFX 技術方面的培訓和諮詢服務。他的最新著作是 JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-Side Applications。他還經常在一個致力於協助讀者成為“JavaFX 專家”的 部落格 上發表文章。