Java開發筆記（一百三十六）JavaFX的窗格

雖然Java自誕生之初就推出了AWT，緊接着第二版又推出升級後的Swing，打算在桌面開發這塊大展拳腳；但是後來Java在服務器開發上大放異彩，在桌面開發上反而停滯不前，可謂失之J2SE收之J2EE。至於手機開發方向的J2ME，也由於安卓的異軍突起而逐漸凋零，儘管安卓開發仍以Java語言爲主，但谷歌公司卻轉去擁抱Kotlin，導致手機端的Java天下朝不保夕。爲今之計，既然服務器開發的Java霸主地位牢不可撼，只能在桌面開發這邊攻城略地了。不過原先的AWT與Swing實在太古老，難堪大用，惟有另搞一套桌面組件才行。JavaFX即是這些桌面組件中最優秀的一個，本來它要做爲插件添加到Eclipse中，而後才能在Eclipse裏面編寫JavaFX程序。如今Java8的開發包集成了JavaFX，只要Eclipse指定採用Java8來編譯，那麼無需額外添加其它插件，Java代碼便可正常調用JavaFX的內部方法，就像訪問AWT與Swing那樣。
JavaFX的程序入口與Swing有所不一樣，它的主程序由Application類派生而來，還要重寫派生類的start方法，在該方法中添加具體的界面操做代碼。好比下面即是個最簡單的JavaFX程序代碼：

//演示簡單的JavaFX程序
//JavaFX程序的入口類繼承自Application
public class TestHello extends Application {

	public static void main(String[] args) {
		launch(args); // 啓動JavaFX應用，接下來會跳到start方法
	}

	@Override
	public void start(Stage stage) { // 應用程序開始運行
		stage.setTitle("Hello World"); // 設置舞臺的標題
		Group group = new Group(); // 建立一個小組
		Scene scene = new Scene(group, 400, 100, Color.WHITE); // 建立一個場景
		stage.setScene(scene); // 設置舞臺的場景
		stage.setResizable(false); // 設置舞臺的尺寸是否容許變化
		stage.show(); // 顯示舞臺。至關於JFrame的setVisible(true)
	}
}

運行上面的測試代碼，彈出以下圖所示的程序界面，可見窗口左上角的標題爲「Hello World」。

看這界面風格，跟AWT和Swing相比沒什麼區別，仍是原來熟悉的味道。只是控件名稱都變了，例如：窗口JFrame替換爲舞臺Stage，面板JPanel替換爲場景Scene等等。而窗口大小、窗口背景這些屬性也改成由場景指定了，舞臺的經常使用方法只剩下setTitle（設置標題）、setScene（設置場景）、setResizable（是否容許改變舞臺尺寸）、show（顯示舞臺）這些。對於窗口右上角的叉號按鈕，JavaFX默認它的單擊動做會自動關閉窗口，因此無需單獨設置叉號按鈕的單擊監聽器。

除了新來的舞臺和場景控件，AWT原先的佈局控件也被換成了窗格控件，例如：流式佈局FlowLayout替換爲流式窗格FlowPane，網格佈局GridLayout替換爲網格窗格GridPane，邊界佈局BorderLayout替換爲邊界窗格BorderPane等等。這三種窗格，除了擁有共同的對齊方式設置方法setAlignment以外，給窗格添加內部控件的方式截然不同，分別說明以下：
一、若想給流式窗格FlowPane添加控件，則需先調用getChildren方法得到該窗格的節點清單對象，再調用清單對象的add方法，往節點清單中加入新的控件節點。
二、若想給網格窗格GridPane添加控件，則直接調用窗格對象的add方法便可。
三、若想給邊界窗格BorderPane添加控件，則要調用不一樣的方法往五個方位添加控件，這些方法分別是：setTop方法可在窗格的上方添加控件，setBottom方法可在窗格的下方添加控件，setLeft方法可在窗格的左邊添加控件，setRight方法可在窗格的右邊添加控件，setCenter方法可在窗格的中間位置添加控件。
具體到編碼實現上，首先看下面的流式窗格代碼片斷：

	// 獲取採用流式窗格的場景
	private static Scene getFlowPane() {
		FlowPane pane = new FlowPane(); // 建立一個流式窗格
		pane.setAlignment(Pos.CENTER_LEFT); // 設置對齊方式爲靠左對齊
		// pane.setHgap(20); // 設置水平方向上的空白距離
		// pane.setVgap(50); // 設置垂直方向上的空白距離
		pane.getChildren().add(new Button("第一個按鈕")); // 在窗格上添加一個按鈕
		pane.getChildren().add(new Button("第二個按鈕")); // 在窗格上添加一個按鈕
		pane.getChildren().add(new Button("第三個按鈕")); // 在窗格上添加一個按鈕
		pane.getChildren().add(new Button("第四個按鈕")); // 在窗格上添加一個按鈕
		pane.getChildren().add(new Button("第五個按鈕")); // 在窗格上添加一個按鈕
		Scene scene = new Scene(pane, 400, 150); // 建立一個採用流式窗格的場景
		return scene;
	}

 

運行包含以上代碼的JavaFX應用程序，彈出以下圖所示的窗口界面，可見五個按鈕仍然從左往右排列，一列塞不下了就另起一列。

接着看下面的網格窗格代碼片斷，準備往五行單列的網格中添加五個按鈕：

	// 獲取採用網格窗格的場景
	private static Scene getGridPane() {
		GridPane pane = new GridPane(); // 建立一個網格窗格
		pane.setAlignment(Pos.CENTER); // 設置對齊方式爲居中對齊
		pane.add(new Button("第一個按鈕"), 1, 0); // 在窗格的第0行第1列添加一個按鈕
		pane.add(new Button("第二個按鈕"), 1, 1); // 在窗格的第1行第1列添加一個按鈕
		pane.add(new Button("第三個按鈕"), 1, 2); // 在窗格的第2行第1列添加一個按鈕
		pane.add(new Button("第四個按鈕"), 1, 3); // 在窗格的第3行第1列添加一個按鈕
		pane.add(new Button("第五個按鈕"), 1, 4); // 在窗格的第4行第1列添加一個按鈕
		Scene scene = new Scene(pane, 400, 150); // 建立一個採用網格窗格的場景
		return scene;
	}

 

運行包含以上代碼的JavaFX應用程序，彈出以下圖所示的窗口界面，可見五個按鈕從上往下排列，組成一個五行單列的網格佈局。

再來看下面的邊界窗格代碼片斷，分別在上、下、左、右、中間五個位置添加按鈕：

	// 獲取採用邊界窗格的場景
	private static Scene getBorderPane() {
		// 放在各方向上的節點，它們的默認對齊方式分別以下：
		// 上邊: Pos.TOP_LEFT，下邊: Pos.BOTTOM_LEFT，左邊: Pos.TOP_LEFT，右邊: Pos.TOP_RIGHT，中央: Pos.CENTER
		BorderPane pane = new BorderPane(); // 建立一個邊界窗格
		pane.setTop(new Button("上方的按鈕")); // 在窗格的上方添加按鈕
		pane.setBottom(new Button("下方的按鈕")); // 在窗格的下方添加按鈕
		pane.setLeft(new Button("左邊的按鈕")); // 在窗格的左邊添加按鈕
		pane.setRight(new Button("右邊的按鈕")); // 在窗格的右邊添加按鈕
		pane.setCenter(new Button("中間的按鈕")); // 在窗格的中間位置添加按鈕
		Scene scene = new Scene(pane, 400, 150); // 建立一個採用邊界窗格的場景
		return scene;
	}

 

運行包含以上代碼的JavaFX應用程序，彈出以下圖所示的窗口界面，可見五個按鈕果真散落到了指定的方位。

 



更多Java技術文章參見《Java開發筆記（序）章節目錄》