[[411015]]

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

JavaFX是一個(gè)可被用于構(gòu)建富互聯(lián)網(wǎng)應(yīng)用(Rich Internet Applications，RIA)的Java庫(kù)。它通過提供一組圖形和媒體包，使開發(fā)人員能夠設(shè)計(jì)、創(chuàng)建、測(cè)試、調(diào)試、以及部署富客戶端的應(yīng)用程序，并使之能夠在不同平臺(tái)上保持運(yùn)行的一致性。

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

2.JavaFX的主要特性

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

3.JavaFX的應(yīng)用結(jié)構(gòu)

如上圖所示，JavaFX使用一個(gè)劇院模型，來比喻圖形應(yīng)用的建模。

舞臺(tái)(Stage)

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

場(chǎng)景(Scene)

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

場(chǎng)景圖(Scene Graph)

• 場(chǎng)景圖是表示場(chǎng)景內(nèi)容的樹狀數(shù)據(jù)結(jié)構(gòu)(分層)。所有可視組件，包括：控件、布局等，都是場(chǎng)景圖的一部分。
• 場(chǎng)景圖組件必須被附加到待顯示的場(chǎng)景中，并且必須被進(jìn)一步附加到舞臺(tái)中，才能使得整個(gè)場(chǎng)景可見。

節(jié)點(diǎn)(Nodes)

• 節(jié)點(diǎn)是場(chǎng)景圖的視覺與圖形對(duì)象。
• 場(chǎng)景圖的節(jié)點(diǎn)是由JavaFX.scene.Node類所定義的。
• 一個(gè)節(jié)點(diǎn)可以包括：

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

• 節(jié)點(diǎn)有以下類型：

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

4.JavaFX的各個(gè)組件

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

控件

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

布局

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

圖表(Charts)

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

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

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

音頻(Audio)

用戶能夠輕松地在JavaFX應(yīng)用中播放音頻。該功能對(duì)于游戲和教育類的應(yīng)用是非常實(shí)用的。

視頻(Video)

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

網(wǎng)頁(yè)視圖(WebView)

JavaFX包含了一個(gè)基于WebKitHTML技術(shù)的WebView組件。該組件能夠使用HTML和CSS，來顯示各種網(wǎng)頁(yè)。

5.如何使用JavaFX來構(gòu)建GUI應(yīng)用

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

[[411017]]

下面，讓我們來一起討論構(gòu)建該JavaFX應(yīng)用程序的具體步驟：

設(shè)置入口點(diǎn)：

• 我們從JavaFX.application.Application處擴(kuò)展一個(gè)JavaFX GUI程序。
• 它是JavaFX應(yīng)用的入口點(diǎn)。

定義啟動(dòng)方法：

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

設(shè)定場(chǎng)景：

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

設(shè)置舞臺(tái)：

• 首先設(shè)置JavaFX.stage.Stage對(duì)象，并使用setTitle()方法來設(shè)置舞臺(tái)的標(biāo)題，以及使用setScene()方法將場(chǎng)景附加到舞臺(tái)上。
• 使用show()方法顯示場(chǎng)景的內(nèi)容。
• 平臺(tái)自行創(chuàng)建primaryStage舞臺(tái)對(duì)象，并作為參數(shù)，傳遞給場(chǎng)景類的開始方法。
• 設(shè)置舞臺(tái)的寬度、高度、任務(wù)欄圖標(biāo)、以及舞臺(tái)風(fēng)格。
• 通過調(diào)用舞臺(tái)對(duì)象的setAlwaysOnTop()，將當(dāng)前的應(yīng)用設(shè)置到其他應(yīng)用之上。

設(shè)置外部布局：

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

設(shè)置內(nèi)部布局：

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

設(shè)置控件：

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

啟動(dòng)程序：

• 在main()方法中，我們必須使用launch()方法來啟動(dòng)應(yīng)用程序。
• 該方法會(huì)在內(nèi)部調(diào)用Application類的start()方法。

6.小結(jié)

在上文中，我們既討論了JavaFX的工作原理、關(guān)鍵特性和強(qiáng)大功能，又研究了JavaFX的應(yīng)用結(jié)構(gòu)，以及如何將場(chǎng)景、舞臺(tái)、場(chǎng)景圖和節(jié)點(diǎn)，構(gòu)建成為圖形應(yīng)用。我們還通過創(chuàng)建了一個(gè)簡(jiǎn)單的JavaFX應(yīng)用程序，來展示了由JavaFX提供的大量?jī)?nèi)置GUI組件。

原文標(biāo)題：JavaFX—OverviewwithHands-on，作者：MansiBabbar

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】