Java富客戶端平臺JavaFX：創建框架實戰

作者：皮麗華 2011-12-31 09:16:39

JavaFX平臺是Java客戶端平臺的演進，用于幫助程序開發人員快速創建和部署富客戶端應用程序，實現跨平臺的一致性。JavaFX平臺基于Java技術，提供了一系列的圖表和多媒體API，用于簡化數據驅動的企業客戶端應用程序的開發。

2007年JavaOne大會上***對外發布JavaFX，時隔三年之后，2010年JavaOne大會重點強調了Oracle針對Java平臺的計劃。未來JavaFX希望在渲染方面具備通用的抽象能力，無論是針對Java 2D/OpenGL/Hospot VM框架或是Javascript/HTML5/Web瀏覽器框架，都可以使用同樣的API來實現。

JavaFX最早有兩個主要的組成部分：JavaFX腳本和JavaFX移動。JavaFX的核心是JavaFX腳本，它是一種聲明型的腳本語言。它與Java類保持了高度的交互性。JavaFX移動(JavaFX Mobile)，是用來為移動設備開發Java應用的平臺。然而，后來Oracle宣布了JavaFX腳本被廢棄，替換它的是一種新的Java API，用來構建JavaFX應用，當然，也可能從類似JRuby，Clojure，Scala和Groovy等語言中選取代替者。正當我猶豫是否將學習重心轉移到JavaFX上時，2011年JavaFX的發展前景給我注入了一種強心劑，讓我下定決心來好好學些JavaFX2.0。

2011年在JavaOne大會上，Oracle秉承一個理念，為了追求JavaFX的標準化，Oracle推出了JavaFX 2.0，為企業業務應用提供先進的Java用戶界面(UI)平臺，致力于把Java變成***的富客戶端平臺。未來預計將對JavaFX平臺實現開源，使其成為OpenJDK社區的新項目。

一、什么是JavaFX?

對于Java開發人員而言，JavaFX平臺具有以下優勢：

1、由于JavaFX平臺是用Java語言編寫的，Java開發人員可以充分利用他們已有的技能和工具來開發JavaFX應用程序。

2、由于Java被廣泛使用，有經驗的Java開發人員能夠快速高效地開發JavaFX應用程序。

3、通過使用服務器和客戶端平臺上的Java技術，JavaFX平臺通過減少業務解決方案的復雜性來減低了投資風險。

4、基于以上幾點優勢，開發費用也有所減低。

5、JavaFX平臺為廣大開發人員提供了開發框架和運行時環境，用于創建企業業務應用程序，同時支持Java實現跨平臺。

二、JavaFX現狀發展: JavaFX 2.0發布

在JavaOne 2011大會上，甲骨文在宣布推出Windows 平臺上的JavaFX 2.0版本的同時，也發布了Mac OS X平臺上的開發者預覽版JavaFX 2.0。

JavaFX 2.0 是 JavaFX 一個主要的升級版本，為下一代的 UI 平臺而設計，提供強大的基于Java 的UI 設計能力，可處理大規模數據驅動的商業邏輯。JavaFX 2.0 包含非常豐富的UI 控件、圖形和多媒體特性，可用于簡化可視化應用的開發，新增的 WebView 可直接在應用中嵌入網頁;另外 2.0 版本允許使用 FXML 進行 UI 定義，這是一個腳本化基于XML 的標識語言。

JavaTM SE 7 Update 2 包含了新的JVM，用來提高可靠性和性能，支持Oracle Solaris 11和Firefox 5以及更高版本。Java SE包含了JavaFX，Java JDK包含了JavaFX SDK以及JavaFX運行時環境。

本月初適用于Windows平臺上的JavaFX 2.1開發者預覽版可供下載，該版本包含了新的圖表和復合框控件。

三、如何創建應用程序框架

JavaFX應用程序都有一個相似的框架。Main()函數調用Launch()函數，Start()方法用于設置應用程序的UI設計。

如何使用NetBeans 7.1來創建JavaFX項目

1、下載安裝JavaFX 2.0 SDK。我安裝文件的默認路徑是C:\Program Files\Oracle\JavaFX 2.0 SDK、C:\Program Files\Oracle\JavaFX Runtime 2.0.

雖然通過命令行的方式可以運行JavaFX應用程序，但是我準備用NetBeans來構建我的***個程序。NetBeans 7.1 beta支持JavaFX 2.0，而JavaFX 2.0 SDK需要單獨下載。

我下載了NetBeans 7.1 beta所有版本，因為Java SE、JavaFX都能支持Groovy、Java EE、PHP以及C/C++來創建桌面、Web以及移動應用程序。目前的NetBeans IDE支持Windows、 Mac、Linux 以及 Oracle Solaris平臺。它支持Java平臺中的***規則和標準。而且，NetBeans IDE 7.1 Beta除了支持Java標準外，還支持JavaFX 2.0,并且對JavaFX 2.0應用程序可以進行完整的編譯、調試和監測。

2、在NetBeans 7.1中創建了一個新的JavaFX項目。創建項目有兩種方法。

“CTRL+SHIFT+N”

右鍵“項目”選項卡，選擇“新建項目”

注：***次在新安裝的NetBeans 7.1beta版本中創建JavaFX項目時需要激活。

3、一旦點擊“完成”按鈕創建完JavaFX項目后，就會生成三個文件。這些文件包括HelloJavaFX.java、Sample.java以及 Sample.fxml。

在項目上點擊“生成”按鈕后，就可以看到NetBeans 7.1 beta生成什么樣的文件。

在'dist'目錄下，可以使用JAR和JNLP文件來生成HTML文件。

四、如何使用內置的布局面板

JavaFX應用程序支持手動設置UI布局，可以為每個UI元素來設置合適的位置和大小屬性，而最簡單的方法是充分利用布局面板。JavaFX SDK提供了幾個布局容器類，稱之為面板，用于輕松創建和管理一些經典的布局，比如行、列、棧等。作為調整后的窗口，布局面板可以根據節點的屬性來靈活自動調整位置和大小。

使用JavaFX提供的布局面板如下：

1、BorderPane

BorderPane布局面板提供了五個區域來放置節點：上下左右中。圖1-1顯示了布局類型，可以用來創建邊框面板，可以靈活調整區域大小。

邊框面板可以用于創建頂部經典的工具條，底部狀態欄，左端導航欄面板，右邊額外信息，中間的工作區。

以下代碼為如何在每個區域里創建一個多邊形邊框面板

Example 1-1 Create a Border Pane  
 
BorderPane layout = new BorderPane();  
layout.setTop(new Rectangle(200, 50, Color.DARKCYAN));  
layout.setBottom(new Rectangle(200, 50, Color.DARKCYAN));  
layout.setCenter(new Rectangle(100, 100, Color.MEDIUMAQUAMARINE));  
layout.setLeft(new Rectangle(50, 100, Color.DARKTURQUOISE));  
layout.setRight(new Rectangle(50, 100, Color.DARKTURQUOISE));

2、Hbox

Hbox布局面板提供了一種簡單的方法來調整單行中的節點。

Padding屬性可以用來設置節點和Hbox面板之間的間距。Spacing屬性可以用來管理節點之間的距離。可以調整背景色來調整風格。

以下示例為使用Hbox面板來創建一個工具條，包含兩個按鈕

Example 1-2 Create an HBox Pane  
 
HBox hbox = new HBox();  
hbox.setPadding(new Insets(15, 12, 15, 12));  
hbox.setSpacing(10);  
hbox.setStyle("-fx-background-color: #336699");  
 
Button buttonCurrent = new Button("Current");  
buttonCurrent.setPrefSize(100, 20);  
 
Button buttonProjected = new Button("Projected");  
buttonProjected.setPrefSize(100, 20);  
hbox.getChildren().addAll(buttonCurrent, buttonProjected);  
 
BorderPane border = new BorderPane();  
border.setTop(hbox);

3、VBox

VBox布局面板與Hbox布局面板相似。Padding屬性可以用來調整節點和VBox面板邊緣的間距。Spacing屬性用于調整節點之間的間距。

Example 1-3 Create a VBox Pane  
 
VBox vbox = new VBox();  
vbox.setPadding(new Insets(10, 10, 10, 10));  
vbox.setSpacing(10);  
 
Text title = new Text("Data");  
title.setFont(Font.font("Amble CN", FontWeight.BOLD, 14));  
vbox.getChildren().add(title);  
 
Text options[] = new Text[] {  
new Text(" Sales"),  
new Text(" Marketing"),  
new Text(" Distribution"),  
new Text(" Costs")};  
 
for (int i=0; i<4; i++) {  
vbox.getChildren().add(options[i]);  
}  
 
border.setLeft(vbox); // Add to BorderPane from Example 1-2

4、GridPane

GridPane布局面板允許你創建一個靈活的網格，在行列中靈活調整節點的布局。

網格可以按照需要在單元格中靈活放置節點。網格面板適用于創建由行列組成的表格，圖1-8顯示了網格面板，包含了圖標、標題、副標題、文本和餅圖。gridLinesVisible屬性可以用來顯示網格線條，顯示行和列。

Example 1-5 Create a Grid Pane  
 
GridPane grid = new GridPane();  
grid.setHgap(10);  
grid.setVgap(10);  
grid.setPadding(new Insets(0, 0, 0, 10));  
 
// Category in column 2, row 1  
Text category = new Text("Sales:");  
category.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));  
grid.add(category, 1, 0);  
 
// Title in column 3, row 1  
Text chartTitle = new Text("Current Year");  
chartTitle.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));  
grid.add(chartTitle, 2, 0);  
 
// Subtitle in columns 2-3, row 2  
Text chartSubtitle = new Text("Goods and Services");  
grid.add(chartSubtitle, 1, 1, 2, 1);  
 
// House icon in column 1, rows 1-2  
ImageView imageHouse = new ImageView(  
new Image(LayoutSample.class.getResourceAsStream("graphics/house.png")));  
grid.add(imageHouse, 0, 0, 1, 2);  
 
// Left label in column 1 (bottom), row 3  
Text goodsPercent = new Text("Goods\n80%");  
GridPane.setValignment(goodsPercent, VPos.BOTTOM);  
grid.add(goodsPercent, 0, 2);  
 
// Chart in columns 2-3, row 3  
ImageView imageChart = new ImageView(  
new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));  
grid.add(imageChart, 1, 2, 2, 1);  
 
// Right label in column 4 (top), row 3  
Text servicesPercent = new Text("Services\n20%");  
GridPane.setValignment(servicesPercent, VPos.TOP);  
grid.add(servicesPercent, 3, 2);  
 
border.setCenter(grid); // Add to BorderPane from Example 1-2