Java富客戶端平臺JavaFX：創(chuàng)建框架實(shí)戰(zhàn)
2007年JavaOne大會上***對外發(fā)布JavaFX，時隔三年之后，2010年JavaOne大會重點(diǎn)強(qiáng)調(diào)了Oracle針對Java平臺的計劃。未來JavaFX希望在渲染方面具備通用的抽象能力，無論是針對Java 2D/OpenGL/Hospot VM框架或是Javascript/HTML5/Web瀏覽器框架，都可以使用同樣的API來實(shí)現(xiàn)。
JavaFX最早有兩個主要的組成部分：JavaFX腳本和JavaFX移動。JavaFX的核心是JavaFX腳本，它是一種聲明型的腳本語言。它與Java類保持了高度的交互性。JavaFX移動(JavaFX Mobile)，是用來為移動設(shè)備開發(fā)Java應(yīng)用的平臺。然而，后來Oracle宣布了JavaFX腳本被廢棄，替換它的是一種新的Java API，用來構(gòu)建JavaFX應(yīng)用，當(dāng)然，也可能從類似JRuby，Clojure，Scala和Groovy等語言中選取代替者。正當(dāng)我猶豫是否將學(xué)習(xí)重心轉(zhuǎn)移到JavaFX上時，2011年JavaFX的發(fā)展前景給我注入了一種強(qiáng)心劑，讓我下定決心來好好學(xué)些JavaFX2.0。
2011年在JavaOne大會上，Oracle秉承一個理念，為了追求JavaFX的標(biāo)準(zhǔn)化，Oracle推出了JavaFX 2.0，為企業(yè)業(yè)務(wù)應(yīng)用提供先進(jìn)的Java用戶界面(UI)平臺，致力于把Java變成***的富客戶端平臺。未來預(yù)計將對JavaFX平臺實(shí)現(xiàn)開源，使其成為OpenJDK社區(qū)的新項(xiàng)目。
一、什么是JavaFX?
JavaFX平臺是Java客戶端平臺的演進(jìn)，用于幫助程序開發(fā)人員快速創(chuàng)建和部署富客戶端應(yīng)用程序，實(shí)現(xiàn)跨平臺的一致性。JavaFX平臺基于Java技術(shù)，提供了一系列的圖表和多媒體API，用于簡化數(shù)據(jù)驅(qū)動的企業(yè)客戶端應(yīng)用程序的開發(fā)。
對于Java開發(fā)人員而言，JavaFX平臺具有以下優(yōu)勢：
1、由于JavaFX平臺是用Java語言編寫的，Java開發(fā)人員可以充分利用他們已有的技能和工具來開發(fā)JavaFX應(yīng)用程序。
2、由于Java被廣泛使用，有經(jīng)驗(yàn)的Java開發(fā)人員能夠快速高效地開發(fā)JavaFX應(yīng)用程序。
3、通過使用服務(wù)器和客戶端平臺上的Java技術(shù)，JavaFX平臺通過減少業(yè)務(wù)解決方案的復(fù)雜性來減低了投資風(fēng)險。
4、基于以上幾點(diǎn)優(yōu)勢，開發(fā)費(fèi)用也有所減低。
5、JavaFX平臺為廣大開發(fā)人員提供了開發(fā)框架和運(yùn)行時環(huán)境，用于創(chuàng)建企業(yè)業(yè)務(wù)應(yīng)用程序，同時支持Java實(shí)現(xiàn)跨平臺。
二、JavaFX現(xiàn)狀發(fā)展: JavaFX 2.0發(fā)布
在JavaOne 2011大會上，甲骨文在宣布推出Windows 平臺上的JavaFX 2.0版本的同時，也發(fā)布了Mac OS X平臺上的開發(fā)者預(yù)覽版JavaFX 2.0。
JavaFX 2.0 是 JavaFX 一個主要的升級版本，為下一代的 UI 平臺而設(shè)計，提供強(qiáng)大的基于Java 的UI 設(shè)計能力，可處理大規(guī)模數(shù)據(jù)驅(qū)動的商業(yè)邏輯。JavaFX 2.0 包含非常豐富的UI 控件、圖形和多媒體特性，可用于簡化可視化應(yīng)用的開發(fā)，新增的 WebView 可直接在應(yīng)用中嵌入網(wǎng)頁;另外 2.0 版本允許使用 FXML 進(jìn)行 UI 定義，這是一個腳本化基于XML 的標(biāo)識語言。
JavaTM SE 7 Update 2 包含了新的JVM，用來提高可靠性和性能，支持Oracle Solaris 11和Firefox 5以及更高版本。Java SE包含了JavaFX，Java JDK包含了JavaFX SDK以及JavaFX運(yùn)行時環(huán)境。
本月初適用于Windows平臺上的JavaFX 2.1開發(fā)者預(yù)覽版可供下載，該版本包含了新的圖表和復(fù)合框控件。
三、如何創(chuàng)建應(yīng)用程序框架
JavaFX應(yīng)用程序都有一個相似的框架。Main()函數(shù)調(diào)用Launch()函數(shù)，Start()方法用于設(shè)置應(yīng)用程序的UI設(shè)計。
如何使用NetBeans 7.1來創(chuàng)建JavaFX項(xiàng)目
1、下載安裝JavaFX 2.0 SDK。我安裝文件的默認(rèn)路徑是C:\Program Files\Oracle\JavaFX 2.0 SDK、C:\Program Files\Oracle\JavaFX Runtime 2.0.
雖然通過命令行的方式可以運(yùn)行JavaFX應(yīng)用程序，但是我準(zhǔn)備用NetBeans來構(gòu)建我的***個程序。NetBeans 7.1 beta支持JavaFX 2.0，而JavaFX 2.0 SDK需要單獨(dú)下載。
我下載了NetBeans 7.1 beta所有版本，因?yàn)镴ava SE、JavaFX都能支持Groovy、Java EE、PHP以及C/C++來創(chuàng)建桌面、Web以及移動應(yīng)用程序。目前的NetBeans IDE支持Windows、 Mac、Linux 以及 Oracle Solaris平臺。它支持Java平臺中的***規(guī)則和標(biāo)準(zhǔn)。而且，NetBeans IDE 7.1 Beta除了支持Java標(biāo)準(zhǔn)外，還支持JavaFX 2.0,并且對JavaFX 2.0應(yīng)用程序可以進(jìn)行完整的編譯、調(diào)試和監(jiān)測。
2、在NetBeans 7.1中創(chuàng)建了一個新的JavaFX項(xiàng)目。創(chuàng)建項(xiàng)目有兩種方法。
“CTRL+SHIFT+N”
右鍵“項(xiàng)目”選項(xiàng)卡，選擇“新建項(xiàng)目”
注：***次在新安裝的NetBeans 7.1beta版本中創(chuàng)建JavaFX項(xiàng)目時需要激活。
3、一旦點(diǎn)擊“完成”按鈕創(chuàng)建完JavaFX項(xiàng)目后，就會生成三個文件。這些文件包括HelloJavaFX.java、Sample.java以及 Sample.fxml。
在項(xiàng)目上點(diǎn)擊“生成”按鈕后，就可以看到NetBeans 7.1 beta生成什么樣的文件。
在'dist'目錄下，可以使用JAR和JNLP文件來生成HTML文件。
四、如何使用內(nèi)置的布局面板
JavaFX應(yīng)用程序支持手動設(shè)置UI布局，可以為每個UI元素來設(shè)置合適的位置和大小屬性，而最簡單的方法是充分利用布局面板。JavaFX SDK提供了幾個布局容器類，稱之為面板，用于輕松創(chuàng)建和管理一些經(jīng)典的布局，比如行、列、棧等。作為調(diào)整后的窗口，布局面板可以根據(jù)節(jié)點(diǎn)的屬性來靈活自動調(diào)整位置和大小。
使用JavaFX提供的布局面板如下：
1、BorderPane
BorderPane布局面板提供了五個區(qū)域來放置節(jié)點(diǎn)：上下左右中。圖1-1顯示了布局類型，可以用來創(chuàng)建邊框面板，可以靈活調(diào)整區(qū)域大小。
邊框面板可以用于創(chuàng)建頂部經(jīng)典的工具條，底部狀態(tài)欄，左端導(dǎo)航欄面板，右邊額外信息，中間的工作區(qū)。
以下代碼為如何在每個區(qū)域里創(chuàng)建一個多邊形邊框面板
- 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布局面板提供了一種簡單的方法來調(diào)整單行中的節(jié)點(diǎn)。
Padding屬性可以用來設(shè)置節(jié)點(diǎn)和Hbox面板之間的間距。Spacing屬性可以用來管理節(jié)點(diǎn)之間的距離?？梢哉{(diào)整背景色來調(diào)整風(fēng)格。
以下示例為使用Hbox面板來創(chuàng)建一個工具條，包含兩個按鈕
- 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屬性可以用來調(diào)整節(jié)點(diǎn)和VBox面板邊緣的間距。Spacing屬性用于調(diào)整節(jié)點(diǎn)之間的間距。
- 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布局面板允許你創(chuàng)建一個靈活的網(wǎng)格，在行列中靈活調(diào)整節(jié)點(diǎn)的布局。
網(wǎng)格可以按照需要在單元格中靈活放置節(jié)點(diǎn)。網(wǎng)格面板適用于創(chuàng)建由行列組成的表格，圖1-8顯示了網(wǎng)格面板，包含了圖標(biāo)、標(biāo)題、副標(biāo)題、文本和餅圖。gridLinesVisible屬性可以用來顯示網(wǎng)格線條，顯示行和列。
- 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
五、JavaFX應(yīng)用程序成功示例演示
1、Ensemble
Ensemble提供了一系列的應(yīng)用程序來展示JavaFX的不同特征，比如動畫、圖表、以及控件。
2、Sales Dashboard
這是Henley汽車公司的一個客戶端-服務(wù)器模式的應(yīng)用程序。使用JavaDB，可以在EJB服務(wù)器上模擬汽車的銷售?？梢酝ㄟ^Derbu和web服務(wù)來獲取數(shù)據(jù)信息。通過混合使用FXML和JavaFX，客戶端可以掩飾各種不同的數(shù)據(jù)。
3、SwingInterop Sample
Swing應(yīng)用程序能夠顯示如何有效組合Swing和JavaFX。它可以使用JavaFX組件在一個選項(xiàng)卡中實(shí)現(xiàn)圖表和表單，再另一個選項(xiàng)卡中顯示由JavaFX實(shí)現(xiàn)的簡單瀏覽器。
原文鏈接：http://tech.it168.com/a2011/1230/1296/000001296796.shtml
【編輯推薦】
