2014年1月25日 星期六

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。
[5] JavaFX 2.2 API Specification.
[6] Java Platform, Standard Edition 7 API Specification.

© Chia-Hui Huang

沒有留言:

張貼留言