技術文章 / Java

JavaFX 架構

閲讀次數：29128 發表時間：2013/03/28

tags: Java JavaFX 教學

如果不要管JavaFX在2.0之前那些非常特殊而且已經消失的東西，JavaFX會是未來在Java技術中，用來開發桌面應用程式使用者介面的主要技術。就跟Java技術的變化差不多，Oracle現在也把它稱為JavaFX 2，它可以說是用來取代已經有點年紀，而且不太夠用的Swing和AWT。

Java對於桌面應用程式的使用者介面開發技術，好像一直不是很在意，AWT撐了好長一段時間後，Java技術終於推出Swing來加強AWT的不足，官方對於Swing的說法，是它擁有豐富的使用者介面元件和良好的設計架構，還有非常的輕量，也就是說它不會像AWT那麼笨重。不過Swing加AWT也撐得太久了，本來很豐富的元件，變得越來越簡陋；良好與輕量的特性，也變得有點過時了。

在2011年之前，也有很多Java技術人員接觸過JavaFX，不過結果通常是「再看看吧！先忙別的再說」。所以有不少人對於JavaFX的印象就這樣決定下來了，JavaFX 2出現後，大家也不是很在意。不過現在應該要花一些時間，開始認識這個新朋友！

JavaFX 2 platform讓Java技術開發人員，可以很容易建立使用者介面非常豐富與美觀的桌面應用程式，它採用Java程式設計技術，全新設計的架構，提供大量的畫面元件；尤其是全新設計的繪圖引擎，不論在2D或3D上的表現，都讓人非常滿意。JavaFX的架構會像這樣：

Scene Graph

在架構中最上層，也是開發人員會直接使用的JavaFX Scene Graph，雖然說法不太一樣，不過基本的架構跟以前差不多。在設計使用者介面的時候，開發人員會使用樹狀的架構來組合所有需要的元件。JavaFX把所有的元件稱為「node」，畫面最頂端的容器元件稱為「root」，可以用來放元件的容器稱為「parent」，像按鈕這類一般的元件稱為「leaf」：

在「javafx.scene」套件中的API，包含這些東西：

元件：一堆全新設計的元件，有2D和3D圖形、圖片、文字、控制項、圖表、多媒體、網頁瀏覽、群組和容器。
狀態：轉換元件的大小、位置或方向的API
效果：設定元件的陰影、透明度或顏色這類特殊效果的API

Graphics System

在JavaFX架構中負責繪製圖型的部份包含「Prism」和「Quantum Toolkit」，它們在底層執行繪製2D和3D圖型的工作：

Prism：這是JavaFX在應用程式畫面讓人覺得很滿意的主要技術之一，它是一個全新設計的繪圖引擎，同時支援軟體與硬體。使用JavaFX開發的應用程式，不論是一般的控制項元件，或是為畫面加入很多狀態控制與特殊效果，甚至包含複雜的3D繪圖，都可以利用軟體或硬體來完成流暢的繪製工作。Prism可以支援Windows平台的DirectX 9和DirectX 11，也支援在Mac、Linux平台的OpenGL；如果硬體不支援加強繪圖效能的功能，Prism也會自動切換為JRE內建的Java2D執行繪圖的工作。
Quantum Toolkit：它結合Prism和下面要討論的Glass Windowing Toolkit，讓開發人員可以使用JavaFX提供的API，輕鬆的完成複雜的應用程式畫面與繪圖工作，就可以擁有快速與流暢的效果。

Glass Windowing Toolkit

「Glass Windowing Toolkit」是繪圖引擎最底層的架構，它提供不同平台的原生服務，像是管理視窗、計時器和介面，讓JavaFX可以結合不同平台的作業系統。它也負責管理事件的控制，改良AWT元舊有的實作方式，採用作業系統提供的事件管理功能，而且結合事件控制與JavaFX應用程式的執行緒，可以大幅度提高使用者操作的反應，使用者在操作應用程式的時候，反應迅速又靈敏，在複雜的應用程式畫面或繪圖上更是明顯。

Media Engine

JavaFX架構中關於多媒體影音與圖片的功能，都在「javafx.scene.media」 API中提供，JvaFX支援各種影音的播放，包含MP3、AIEF和WAV聲音格式，還有FLV影片檔案。API提供的Media、MediaPlayer和MediaView，可以很容易的在應用程式中執行播放與控制影音的工作。這些多媒體引擎元件都在JavaFX 2經過重新設計，簡單、好用而且有更好的效率。

Web Engine

JavaFX提供一個全新的網頁瀏覽器元件，它可以讓開發人員在應用程式中使用WebEngine和WebView元件，使用者可以瀏覽與使用完整的網頁瀏覽功能。Web Engine使用WebKit為基礎，WebKit是一個開放的網頁瀏覽引擎，支援HTML5、CSS、JavaScript、DOM和SVG。Java技術開發人員可以很輕鬆的把一個具有完整功能的網頁瀏覽元件加到應用程式中，讓使用者在應用程式中直接瀏覽與操作網頁，不用再另外開啟瀏覽器：

UI Controls

在設計一個應用程式的使用者介面時，最基本也最常使用的控制項元件，在JavaFX 2中已經全面重新設計，而且加入很多以前沒有的元件。以前在Swing和AWT中已經有的控制項元件，JavaFX把它們全部翻新了，外觀比較好看一些，也加入許多新的控制與設定；雖然新加入的元件在其它技術平台已經很常見了，但是以前的Swing和AWT一直沒有提供，讓開發人員總覺得少了一些需要的元件，搭配使用這些元件，可以讓Java桌面應用程式的畫面，不會總是那麼簡單與樸素了。JavaFX的控制項元件都放在「javafx.scene.control」套件中：

Layout

用來決定畫面上元件位置與大小的「Layout containers」，一直都是採用比較靈活的設計方式，讓開發人員可以設計應用程式需要的畫面。JavaFX把Swing和AWT的容器元件都改了名稱，也加入一些新的元件，相關的API都在「javafx.scene.layout」套件中：

BorderPane：跟以前的BorderLayout一樣，可以把容器切割為上、下、左、右和中央五個區域；不過以前是使用東、南、西、北的方向來區分，例如「BorderLayout.NORTH」表示上面的區域；新的BorderPane使用「setTop」將元件放到上面的區域，「setLeft」放到左邊的區域，這樣的作法好像會比較自然一些。
GridPane：跟以前的GridLayout一樣，把容器平均切割為像是2乘3的區域
FlowPane：跟以前的FlowLayout一樣，加入容器的元件依照由左往右、由上往下的順序排列
TilePane：讓元件可以使用比較靈活的方式加入容器中，可以指定佔用的區塊大小
StackPane：可以在一個容器中放置多個元件，所有的元件成為一個堆疊，用來組合一些元件的時候很好用
AnchorPane：使用容器的相對位置來決定元件放置的地方，搭配Scene Builder畫面設計工具程式，可以很容易設計應用程式的畫面
HBox與VBox：把多個元件放在一個水平或垂直的區塊，可以設定元件之間的間隔，如果用在組合多個按鈕提供應用程式的功能操作時，會比使用其它layout簡單很多。

Cascading Style Sheets

越來越複雜的網頁內容，讓網頁設計人員採用這種「CSS」技術，把網頁內容和外觀的設計分開，如果網頁的內容不變，只想要執行顏色或字型這類的修改，那就只要修改搭配的CSS檔案就可以了，這樣的設計方式在網頁設計已經流行很久了，它也真的是一種不錯的設計方式。

JavaFX在1.2的時候就已經加入CSS的設計概念，一直到JavaFX 2，它把CSS的技術帶入桌面應用程式的使用者介面設計，「JavaFX CSS」的概念跟網頁設計一樣，把應用程式畫面內容與外觀的設計分開，你可以為畫面指定一個決定它外觀的CSS檔，讓外觀看起來完全不一樣。使用這樣的設計方式，一個應用程式想要讓不同的使用者可以有不同的外觀，變成是一件很輕鬆的工作了：

螢幕快照 2013-03-08 下午5.29.56

JavaFX CSS是根據W3C CSS 2.1的規格製作的，JavaFX所有的元件，包含控制項與容器，都可以套用CSS改變元件的外觀。

Transformations與Visual Effects

現在的應用程式不再只是專注在功能性，兩個功能類似的應用程式，大家當然會選擇畫面比較好看，而且有一點動畫特效的那一個。JavaFX scene graph中所有的元件，都可以使用「javafx.scene.tranform」套件中的API，為元件加入一些轉換的效果：

translate：移動元件到相對的位置
scale：改變元件的大小
rotate：旋轉元件
affine：搭配其它轉換效果，執行線性的2D與3D的轉換效果

需要設定元件特殊效果的時候，可以使用「javafx.scene.effect」套件中的API，讓應用程式的畫面看起來美觀與活潑一些：

Shadow：可以讓元件在畫面中呈現外部或內部的陰影
Gaussian Blur：讓元件呈現模糊的外觀，可以用來製作淡入或淡出的效果
Reflection：設定元件產生倒影的效果
Sepia Tone：調整元件的色調，像是加強一張照片的暖色調或是冷色調，也可以把採色照片調整為黑白照片

FXML

使用Java技術設計應用程式需要的畫面，應該都會讓你想到很大一堆程式碼，就算使用一些現有的輔助工具，使用拖拉的方式來設計畫面，最後產生的東西也還是一堆程式碼。這樣的情況，對開發人員在製作或是維護應用程式的畫面時，都會是很沉重的負擔。一個像這樣簡單的畫面：

這個畫面使用BorderPane來執行畫面的配置，在畫面上方放一個Label元件，在畫面的中央放一個Button元件。如果使用傳統程式設計的方法來製作它的話，看起來會像這樣：

BorderPane border = new BorderPane();
Label topPaneText = new Label("Label - TOP");
border.setTop(topPaneText);
Button centerPaneButton = new Button("Button - CENTER");
border.setCenter(centerPaneButton);

JavaFX除了使用Java程式設計技術來設計它的架構外，也發明一些新東西，設計應用程式畫面的全新技術「FXML」就是其中一種。把應用程式的商業邏輯與畫面分開，建立不同的程式元件負責各自的工作，是一般很常見的設計方式，例如MVC設計模式。JavaFX徹底的把畫面再切割為使用者介面邏輯與畫面元件，使用者介面的操作與資料的控制，還是要使用程式碼來完成；可是畫面的設計可以使用XML格式的FXML來設計，上面的畫面使用FXML技術製作的話會像這樣：

<BorderPane> <!-- 使用與元件相同的標籤名稱 -->
    <top> <!-- 上方區域 -->
        <Label text="Label - TOP"/>
    </top>
    <center> <!-- 中央區域 -->
        <Button text="Button - CENTER"/>
    </center>
</BorderPane>

Deployment

在使用JavaFX完成一個應用程式以後，你可以讓它在桌面或瀏覽器中運作：