[[411015]]

【51CTO.com快譯】1.概述

JavaFX是一個可被用于構建富互聯網應用(Rich Internet Applications，RIA)的Java庫。它通過提供一組圖形和媒體包，使開發人員能夠設計、創建、測試、調試、以及部署富客戶端的應用程序，并使之能夠在不同平臺上保持運行的一致性。

通過提供豐富的圖形用戶界面，JavaFX可以實現專用于動畫、2D和3D幾何、圖表、特殊效果、顏色漸變、圖形控件、以及多媒體(包括：音頻、視頻和圖像)的簡單操作結構與API。

2.JavaFX的主要特性

• 跨平臺兼容性：JavaFX可被用于Windows、Linux、以及MacOSX等主流桌面操作系統。
• Java庫：作為一個Java庫，JavaFX是由原生Java代碼編寫的類和接口所組成。
• FXML：它是一種基于XML的聲明性標記語言，可用于定義JavaFX應用的用戶接口結構。
• WebView：作為一個Web組件，它使用WebKitHTML技術在JavaFX應用程序中嵌入HTML內容。在WebView中運行的JavaScript可以實現與JavaAPI的相互調用。
• Swing互操作性：現有的Swing應用程序可以通過諸如嵌入式Web內容、以及豐富的圖形媒體等JavaFX功能，來實現更新。相比使用Swing，我們更容易使用JavaFX來創建豐富的內容。
• 各種內置的UI控件：JavaFX提供了開發全功能應用所需的各種主要UI控件。
• 類CSS樣式：JavaFX可以使用諸如CSS的標準Web技術，來進行外觀設計。同時，它通過提供類似CSS的樣式，來改進我們的應用設計。
• Canvas API：該API支持直接在由一個圖形元素組成的JavaFX場景區域內繪圖。
• 多點觸控支持：JavaFX針對底層平臺的功能，提供了對多點觸控操作的支持。
• 集成圖形庫：JavaFX提供了各種可用于2D和3D圖形的類。
• 圖形管道：JavaFX支持那些基于硬件加速圖形渲染管道(hardware-accelerated graphics rendering pipeline，或被稱為Prism)的圖形。也就是說，當與被支持的圖形卡或GPU一起使用時，它能夠提供流暢的圖形。如果系統不支持某個圖形卡，那么Prism則會被默認為軟件渲染棧。
• 自包含的應用部署模型：此類自包含應用包具有所有應用程序資源，以及Java和JavaFX運行時的私有副本。它們作為可安裝在本機軟件包被分發，并提供了與操作系統上本地應用相同的安裝和啟動體驗。

3.JavaFX的應用結構

如上圖所示，JavaFX使用一個劇院模型，來比喻圖形應用的建模。

舞臺(Stage)

• 舞臺代表了頂級容器或窗口。它包含JavaFX應用中的所有對象。
• 它是由JavaFX.stage.Stage類所定義的。
• 我們可以通過傳遞其尺寸(即：高度和寬度)，來指定舞臺的大小。
• 舞臺被分為內容區域和裝飾區域(即：標題欄和邊框)。

場景(Scene)

• 場景表示JavaFX應用程序的物理內容。它包含了所有單獨的控件或組件。
• 它是由JavaFX.scene.Scene類所定義的。
• 一個應用可以有多個場景，但在任何給定時間內，舞臺上只能顯示一個場景。
• 場景的大小可以通過將其尺寸(即：高度和寬度)、連同根節點一起，傳遞給其構造函數來指定。

場景圖(Scene Graph)

• 場景圖是表示場景內容的樹狀數據結構(分層)。所有可視組件，包括：控件、布局等，都是場景圖的一部分。
• 場景圖組件必須被附加到待顯示的場景中，并且必須被進一步附加到舞臺中，才能使得整個場景可見。

節點(Nodes)

• 節點是場景圖的視覺與圖形對象。
• 場景圖的節點是由JavaFX.scene.Node類所定義的。
• 一個節點可以包括：

1. 各種幾何或圖形對象：2D、3D。
2. 各種UI控件：Button、CheckBox、ChoiceBox、以及TextArea等。
3. 各種容器或布局板式：BorderPane、GridPane、以及FlowPane等。
4. 各種媒體元素：Audio、Video、以及Image對象。

• 節點有以下類型：

1. 根節點：是場景圖中的第一個節點。
2. 分支與父節點：諸如Group、Region、以及StackPane等，都帶有各種子節點。
3. 葉子節點：諸如Rectangle、Ellipse、Box、ImageView、以及MediaView等，都帶有各種子節點。

4.JavaFX的各個組件

JavaFX帶有大量內置的GUI組件，其中包括：按鈕、文本字段、表格、樹、菜單、圖表等。下面我們將重點討論一些主要的組件。

控件

• JavaFX控件是在JavaFX應用程序中，提供某種控制功能的JavaFX組件。
• 為了使控件可見，它必須被附加到某個場景對象的場景圖上。
• 控件通常會被嵌套在一些JavaFX布局組件中，這些組件管理著控件之間的布局。
• 一些常見的JavaFX控件包括：Button、CheckBox、Label、Menu、RadioButton、TableView、TextField、以及TreeView等。

布局

• JavaFX布局是一些包含了其他組件的組件。也就是說，布局組件管理著那些嵌套在自身的組件布局。
• JavaFX布局組件有時也被稱為父組件，畢竟它們包含著子組件。同時，布局組件是JavaFX類JavaFX.scene.Parent的子類。
• 為了可見，布局組件必須被附加到某個場景對象的場景圖之中。
• 我們可以在其他布局組件中嵌套布局組件。這對于實現特定的布局是非常實用的。
• 常見的JavaFX布局包括： Group、Pane、HBox、VBox、BorderPane、StackPane、以及GridPane等。

圖表(Charts)

JavaFX帶有一組內置的即用型圖表組件，用戶可避免每次在需要基本圖表時，不得不從頭開始編寫圖表。

2D/3D圖形(2D/3D Graphics)

JavaFX包含了可以讓用戶在屏幕上輕松地繪制2D/3D圖形的功能。

音頻(Audio)

用戶能夠輕松地在JavaFX應用中播放音頻。該功能對于游戲和教育類的應用是非常實用的。

視頻(Video)

用戶同樣也能夠輕松地在JavaFX應用中播放視頻。該功能對于流媒體應用、游戲、以及教育類應用同樣非常實用。

網頁視圖(WebView)

JavaFX包含了一個基于WebKitHTML技術的WebView組件。該組件能夠使用HTML和CSS，來顯示各種網頁。

5.如何使用JavaFX來構建GUI應用

在此，我們將創建一個簡單的JavaFX應用。如下圖所示，該應用由加載GIF、加載文本、十字關閉按鈕控件、以及背景所組成。如果您想獲得并研究其源代碼，請參見--https://gist.github.com/mansi7babbar/c0547010ab91c17f515c1fd4677cc4a2。

[[411017]]

下面，讓我們來一起討論構建該JavaFX應用程序的具體步驟：

設置入口點：

• 我們從JavaFX.application.Application處擴展一個JavaFX GUI程序。
• 它是JavaFX應用的入口點。

定義啟動方法：

• JavaFXSeeder類繼承了Application類，并實現了其抽象方法start()。
• 在此方法中，我們將為JavaFX圖形編寫整個代碼。

設定場景：

• 通過指定場景圖的root(其類型為JavaFX.scene.Group)，來分配JavaFX.scene.Scene。
• 我們還可以傳遞兩個double類型的參數，以表示場景的高度和寬度。

設置舞臺：

• 首先設置JavaFX.stage.Stage對象，并使用setTitle()方法來設置舞臺的標題，以及使用setScene()方法將場景附加到舞臺上。
• 使用show()方法顯示場景的內容。
• 平臺自行創建primaryStage舞臺對象，并作為參數，傳遞給場景類的開始方法。
• 設置舞臺的寬度、高度、任務欄圖標、以及舞臺風格。
• 通過調用舞臺對象的setAlwaysOnTop()，將當前的應用設置到其他應用之上。

設置外部布局：

• 在此，我們使用JavaFX.scene.layout.StackPane作為頂級布局節點，以便將其子節點布局在一個從后向前的棧(back-to-front stack)中。
• 我們可以為該StackPane分配一個唯一的ID和尺寸數值。
• 我們也可以使用setOnMousePressed()和setOnMouseDragged()兩個事件來處理程序，并在外部布局上添加鼠標拖動事件。
• 使用setAlignment()設置布局在屏幕上的具體位置。

設置內部布局：

• 外部布局節點具有三個子節點，即：Image、JavaFX.scene.layout.HBox和JavaFX.scene.layout.VBox。
• HBox將其內容節點水平排列在一行中。VBox將其內容節點垂直排列在單個列中。
• 我們可以將各個節點添加到同一個布局控件中。其中，getChildren().add()可用于單個節點，而getChildren().addAll()則適用于多個節點。

設置控件：

• JavaFX在JavaFX.scene.control包中提供了大量控件(或組件)。
• 構造一個Button控件，將其放置在窗口的右上角，然后通過setOnAction()方法，將JavaFX.event.EventHandler添加到Button上。
• 我們可以通過實例化這個類，以將JavaFX.scene.shape.Text嵌入一個JavaFX場景中，然后可以設置文本的字體、顏色、以及位置等要素。
• 我們可以通過實例化JavaFX.scene.image.Image類，在JavaFX中加載一個圖像。在完成加載后，我們可以通過實例化ImageView類，來設置圖像的視圖，并將圖像傳遞給其構造函數。

啟動程序：

• 在main()方法中，我們必須使用launch()方法來啟動應用程序。
• 該方法會在內部調用Application類的start()方法。

6.小結

在上文中，我們既討論了JavaFX的工作原理、關鍵特性和強大功能，又研究了JavaFX的應用結構，以及如何將場景、舞臺、場景圖和節點，構建成為圖形應用。我們還通過創建了一個簡單的JavaFX應用程序，來展示了由JavaFX提供的大量內置GUI組件。

原文標題：JavaFX—OverviewwithHands-on，作者：MansiBabbar

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】