JavaFX Border Pane

一般應用程式在處理物件配置的方式上，通常是以絕對座標定義其物件位置，以Microsoft Visual Basic為例，由於不需考慮跨平臺的差異性，因此各物件通常是以絕對座標定義其物件位置。由於Java需考慮各作業系統在定義座標系統的差異以及跨平臺的考量，因此在處理物件位置上，是以相對位置的方式處理，在Java AWT與Java Swing中稱為Layout Manager (配置管理員)，而在JavaFX則稱為Layout Pane (配置窗格或配置面板)。

Java AWT與Java Swing分別提供以下之Layout Manager類別：

• java.awt.BorderLayout
• java.awt.CardLayout
• java.awt.FlowLayout
• java.awt.GridBagLayout
• java.awt.GridLayout
• javax.swing.BoxLayout
• javax.swing.GroupLayout
• javax.swing.OverlayLayout
• javax.swing.SpringLayout

JavaFX類似於Java AWT與Java Swing，提供以下之Layout Pane類別，均繼承自javafx.scene.layout.Pane類別：

• javafx.scene.layout.AnchorPane
• javafx.scene.layout.BorderPane
• javafx.scene.layout.FlowPane
• javafx.scene.layout.GridPane
• javafx.scene.layout.HBox
• javafx.scene.layout.StackPane
• javafx.scene.layout.TilePane
• javafx.scene.layout.VBox

JavaFX與Java Swing最大的不同在於，JavaFX提供Layout Pane Builder，透過Builder類別可精簡程式，以下為Layout Pane Builder之相關類別：

• javafx.scene.layout.AnchorPaneBuilder
• javafx.scene.layout.BorderPaneBuilder
• javafx.scene.layout.FlowPaneBuilder
• javafx.scene.layout.GridPaneBuilder
• javafx.scene.layout.HBoxBuilder
• javafx.scene.layout.StackPaneBuilder
• javafx.scene.layout.TilePaneBuilder
• javafx.scene.layout.VBoxBuilder

Border Pane

Border Pane的類別為javafx.scene.layout.BorderPane，類似於Java AWT的Border Layout。

如同其名稱Border (邊界) 一般，Java AWT的Border Layout將容器分為東、南、西、北及中央五個區域，而JavaFX的Border Pane則將容器分為上、下、左、右及中央五個區域，每一區域只能置放一個物件，雖然名稱不同，但其相對位置是一樣的。

JavaFX的Border Pane則是以下列「方法」將物件置於Border Pane的上、下、左、右及中央五個區域之中：

• setTop()
• setBottom()
• setLeft()
• setRight()
• setCenter()

此外，Java AWT的Border Layout所配置的物件大小會因視窗或Java Applet大小的改變而有所變更，但JavaFX的Border Pane，則不論視窗或Java Applet的大小如何改變，其所配置的物件大小均維持不變。

請參考以下範例：

// 設定Button物件 Button button1 = new Button("Top"); Button button2 = new Button("Bottom"); Button button3 = new Button("Left"); Button button4 = new Button("Right"); Button button5 = new Button("Center"); // 設定BorderPane BorderPane borderpane = new BorderPane(); // 將Button物件置於BorderPane的上方區域 borderpane.setTop(button1); // 將Button物件置於BorderPane的下方區域 borderpane.setBottom(button2); // 將Button物件置於BorderPane的左方區域 borderpane.setLeft(button3); // 將Button物件置於BorderPane的右方區域 borderpane.setRight(button4); // 將Button物件置於BorderPane的中央區域 borderpane.setCenter(button5); // 設定BorderPane的對齊方式為水平與垂直方向均靠中央對齊 borderpane.setAlignment(button1, Pos.CENTER); borderpane.setAlignment(button2, Pos.CENTER); borderpane.setAlignment(button3, Pos.CENTER); borderpane.setAlignment(button4, Pos.CENTER); borderpane.setAlignment(button5, Pos.CENTER); // 設定Scene的Layout Pane為BorderPane Scene scene = new Scene(borderpane); // 設定Stage的標題 primaryStage.setTitle("Border Pane Demo"); // 設定Stage的寬度 primaryStage.setWidth(250); // 設定Stage的高度 primaryStage.setHeight(250); primaryStage.setScene(scene); primaryStage.setResizable(true); // 顯示Stage primaryStage.show(); ...

【執行結果】

除了BorderPane類別之外，JavaFX並提供BorderPaneBuilder類別配置物件，以BorderPaneBuilder配置物件的程式架構如下，首先以create()方法建立BorderPaneBuilder的實體 (Instance)，最後再以build()方法以BorderPaneBuilder物件建立Border Pane的實體，其間以top(), bottom(), left(), right(), center()等方法將物件置於Border Pane各區域中，各方法可為任意順序或省略：

BorderPane borderpane = BorderPaneBuilder.create()   .top(...)   .bottom(...)   .left(...)   .right(...)   .center(...)   .build();

請參考以下範例：

// 設定ImageView物件 ImageView images[] = new ImageView[5]; for (int i=0; i<5; i++) {   // 讀取Java Archive檔案內的圖像檔案   images[i] = new ImageView(new Image(     BorderPaneDemo.class.getResourceAsStream(     "images/Icon0"+i+".png"))); } // 建立SceneBuilder的實體 (Instance) Scene scene = SceneBuilder.create()   .width(250)   .height(250)   .root(     // 建立BorderPaneBuilder的實體 (Instance)     BorderPaneBuilder.create()       // 將ImageView物件置於BorderPane各區域中       .top(images[0])       .bottom(images[1])       .left(images[2])       .right(images[3])       .center(images[4])       // 以BorderPaneBuilder物件建立Border Pane的實體 (Instance)       .build()   )   .build(); // 設定Stage的標題 primaryStage.setTitle("Border Pane Demo"); primaryStage.setScene(scene); primaryStage.setResizable(true); // 顯示Stage primaryStage.show(); ...

【執行結果】

【參考資料】

[1] 黃嘉輝，深入研究JavaFX 2。

[2] 黃嘉輝，深入研究Java Swing。

[3] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html

[4] JavaFX：http://www.oracle.com/technetwork/java/javafx

[5] JavaFX 2.2 API Specification.

[6] Java Platform, Standard Edition 7 API Specification.

© Chia-Hui Huang