JavaFX Dialog (2)

除了前述以Alert類別的相關方法設定對話盒之外，亦可自訂訊息對話盒中的物件。首先自訂各類物件配置，接著以Alert類別的getDialogPane()方法取得對話盒的窗格，再以getDialogPane()的setContent()或setExpandableContent()方法將自訂物件置於對話盒中。

以下範例首先以TextArea建立文字區域，並以BorderPane配置文字區域，最後以getDialogPane()的setContent()或setExpandableContent()方法將自訂物件置於對話盒中：

// 自訂物件
String text = "...";

TextArea textArea = new TextArea(text);
textArea.setEditable(false);
textArea.setWrapText(true);

BorderPane borderpane = new BorderPane();
borderpane.setCenter(textArea);

Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("示範自訂訊息對話盒的內容。");
// 將自訂物件置於對話盒中
alert.getDialogPane().setExpandableContent(borderpane);            
alert.showAndWait();
...

【執行結果】

當剛開啟對話盒時，其自訂物件部份為收合狀態，並在左下角顯示「顯示詳細資訊」：

點選「顯示詳細資訊」，則展開自訂物件部份，並在左下角顯示「隱藏詳細資訊」：

以下範例首先以TextField與PasswordField分別建立文字欄位與密碼欄位，並以GridPane配置物件，最後以getDialogPane()的setContent()或setExpandableContent()方法將自訂物件置於對話盒中：

// 自訂物件
Label label1 = new Label("Username:");
Label label2 = new Label("Password:");

final TextField textfield = new TextField();
textfield.setText("");
textfield.setTooltip(new Tooltip("Username"));

final PasswordField passwordfield = new PasswordField();
passwordfield.setText("Athena");
passwordfield.setPrefColumnCount(15);
passwordfield.setPromptText("Please enter your password.");
passwordfield.setTooltip(new Tooltip("Password"));

GridPane gridpane = new GridPane();
gridpane.setAlignment(Pos.CENTER);
gridpane.setHgap(10);
gridpane.setVgap(10);
gridpane.setPadding(new Insets(5, 5, 5, 5));

gridpane.add(label1, 0, 0);
gridpane.add(label2, 0, 1);

gridpane.add(textfield, 1, 0);
gridpane.add(passwordfield, 1, 1);

Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("示範自訂訊息對話盒的內容。");
// 將自訂物件置於對話盒中
alert.getDialogPane().setExpandableContent(gridpane);            
alert.showAndWait();
...

【執行結果】

以下範例首先以ComboBox建立複合方塊與setCellFactory()方法設定其Cell Factory，並在Cell Factory中以Rectangle類別設定各選項項目的顏色，並以BorderPane配置複合方塊，最後以getDialogPane()的setContent()或setExpandableContent()方法將自訂物件置於對話盒中：

// 自訂物件
final ComboBox<Color> combobox = new ComboBox<>();

combobox.getItems().addAll(
  Color.RED, Color.GREEN, Color.BLUE, Color.AQUA, 
  Color.BLUEVIOLET, Color.CHOCOLATE, Color.DIMGRAY, 
  Color.FORESTGREEN, Color.GREENYELLOW, Color.INDIGO);

// select the last element
combobox.getSelectionModel().select(3);
combobox.setVisibleRowCount(5);
combobox.setEditable(false);
combobox.setPrefWidth(180);

// Cell Factory
combobox.setCellFactory(new Callback<ListView<Color>, 
  ListCell<Color>>() {
  @Override 
  public ListCell<Color> call(ListView<Color> param) {

    return new ListCell<Color>() 
    {
      {
        super.setPrefWidth(60);
      }    
      private final Rectangle rectangle;
      { 
        setContentDisplay(ContentDisplay.GRAPHIC_ONLY); 
        rectangle = new Rectangle(150, 15);
      }

      @Override 
      protected void updateItem(Color item, boolean empty) {
        super.updateItem(item, empty);

        if (item == null || empty) {
          setGraphic(null);
        } 
        else {
          rectangle.setFill(item);
          setGraphic(rectangle);
        }
      }
    };
  }
});

BorderPane borderpane = new BorderPane();
borderpane.setCenter(combobox);

Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("示範自訂訊息對話盒的內容。");
// 將自訂物件置於對話盒中
alert.getDialogPane().setExpandableContent(borderpane);            
alert.showAndWait();
...

【執行結果】

以下範例首先以Pagination建立分頁控制，並以BorderPane配置文字區域，最後以getDialogPane()的setContent()或setExpandableContent()方法將自訂物件置於對話盒中：

// 自訂物件
final Pagination pagination;
pagination = new Pagination();
pagination.setPageCount(14);
pagination.setCurrentPageIndex(0);
pagination.setMaxPageIndicatorCount(10);
pagination.setPageFactory((Integer pageIndex) -> {
  ImageView imageview = new ImageView(scene[pageIndex]);

  VBox vbox = new VBox();
  vbox.setAlignment(Pos.CENTER);
  vbox.getChildren().add(imageview);

  return vbox;
});

BorderPane borderpane = new BorderPane();
borderpane.setCenter(pagination);

Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("示範自訂訊息對話盒的內容。");
// 將自訂物件置於對話盒中
alert.getDialogPane().setExpandableContent(borderpane);            
alert.showAndWait();
...

【執行結果】

【參考資料】

[1] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html
[2] JavaFX：http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang