2014年1月28日 星期二

JavaFX Flow Pane

Flow Pane

Flow Pane的類別為javafx.scene.layout.FlowPane,類似於Java AWT的Flow Layout。

Flow Pane依其配置方向 (Orientation),分為水平與垂直兩種方式,如同其名稱Flow (流動) 一般

以水平方向為例,Flow Pane將物件依序由左至右、由上至下配置,當物件配置超過容器寬度,則超過一列 (Row) 時,會依序自下一列開始配置。

以垂直方向為例,Flow Pane將物件依序由上至下、由左至右配置,當物件配置超過容器高度,則超過一行 (Column) 時,會依序自下一行開始配置。其預設配置方向為水平方向。

FlowPane類別的建構函式為:

  public FlowPane()
  public FlowPane(Orientation orientation)
  public FlowPane(double hgap, double vgap)
  public FlowPane(Orientation orientation, double hgap, double vgap)

其中參數hgapvgap分別設定物件間的水平垂直間距,單位為像素。參數orientation設定Flow Pane的配置方向,為以下的常數值:
  • Orientation.HORIZONTAL:水平方向。
  • Orientation.VERTICAL:垂直方向。
請參考以下範例,示範如何以Flow Pane配置按鈕物件,首先以setHgap()setVgap()方法分別設定Flow Pane中物件間的水平與垂直間距為5單位像素,接著以add()方法將按鈕物件加至Flow Pane之中,Flow Pane會將物件以預設的方式由左至右依序配置,當物件超過一列之配置時,會依序自下一列開始配置。


// 設定Button物件
Button button1 = new Button("OK");
Button button2 = new Button("Cancel");
Button button3 = new Button("Yes");
Button button4 = new Button("No");

// 設定FlowPane
FlowPane flowpane = new FlowPane();
// 設定FlowPane中物件間的水平間距
flowpane.setHgap(5);
// 設定FlowPane中物件間的垂直間距
flowpane.setVgap(5);

// 將Button物件加至FlowPane之中
flowpane.getChildren().add(button1);
flowpane.getChildren().add(button2);
flowpane.getChildren().add(button3);
flowpane.getChildren().add(button4);
...


【執行結果】

除了FlowPane類別之外,JavaFX並提供FlowPaneBuilder類別配置物件,與FlowPane類別一樣,FlowPaneBuilder類別依其配置方向,分為水平與垂直兩種方式,其預設配置方向為水平方向。以FlowPaneBuilder類別配置物件的程式架構如下,首先以create()方法建立FlowPaneBuilder的實體 (Instance),最後再以build()方法以FlowPaneBuilder物件建立Flow Pane的實體,其間以alignment()hgap()vgap()orientation()等方法分別設定物件的水平與垂直對齊方式、物件間的水平與垂直間距、配置方向等,再以children()方法將物件置於Flow Pane區域中:


FlowPane flowpane = FlowPaneBuilder.create()
  .alignment(...)
  .hgap(...)
  .vgap(...)
  .orientation(...)
  .children(...)
  .build()


請參考以下範例。


// 設定ImageView物件
ImageView images[] = new ImageView[9];

for (int i=0; i<9; i++) {
  // 讀取Java Archive檔案內的圖像檔案
  images[i] = new ImageView(new Image(
    FlowPaneDemo.class.getResourceAsStream(
    "images/Icon0"+i+".png")));
}

// 建立SceneBuilder的實體(Instance)
Scene scene = SceneBuilder.create()
  .width(220)
  .height(220)
  .root(
    // 建立FlowPaneBuilder的實體(Instance)
    FlowPaneBuilder.create()
      .alignment(Pos.CENTER)
      .hgap(5)
      .vgap(5)
      .orientation(Orientation.VERTICAL)
      .padding(new Insets(5, 0, 5, 0))
      .children(images)
      .build()
  )
  .build();

...


參考資料】

[1] 黃嘉輝,深入研究JavaFX 2。
[2] 黃嘉輝,深入研究Java Swing。
[5] JavaFX 2.2 API Specification.
[6] Java Platform, Standard Edition 7 API Specification.

© Chia-Hui Huang

沒有留言:

張貼留言