Set image on left side of dialog

Question

I created this very simple example for JavaFX alert dialog for JavaFX8u40.

public class MainApp extends Application
{
    public static void main(String[] args)
    {
        Application.launch(args);
    }

    private Stage stage;

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        Button create = new Button("Create Alert");
        create.setTooltip(new Tooltip("Create an Alert Dialog"));
        create.setOnAction(e ->
        {
            createAlert();
        });

        primaryStage.setScene(new Scene(create));
        primaryStage.show();

        stage = primaryStage;
    }

    protected Alert createAlert()
    {
        Alert alert = new Alert(AlertType.WARNING);
        Image image1 = new Image("http://www.mcaprojecttraining.com/images/java-big-icon.png");

        ImageView imageView = new ImageView(image1);

        alert.setGraphic(imageView);
        alert.initModality(Modality.APPLICATION_MODAL);
        alert.initOwner(stage);
        alert.getDialogPane().setContentText("Some text");

        alert.showAndWait()
            .filter(response -> response == ButtonType.OK)
            .ifPresent(response -> System.out.println("The alert was approved"));

        return alert;
    }

}

I'm interested how I can set the image on the left side of the dialog.

Did someone manage to change the side of the image?

Answer 1

If you have a look at how the header is constructed, you'll find a GridPane node to layout a Label on the left and a StackPane for the icon.

If you want to reverse the cells order by code, you can do it, but it will be overriden every time updateHeaderArea() is called.

My suggestion is using this public API:

dialogPane.setHeader(Node header);
dialogPane.setGraphic(Node graphic);

providing a header with an icon on the left and a label, and a null graphic.

Using the same approach as DialogPane, we could add another GridPane as header:

protected Alert createAlert(){
    Alert alert = new Alert(AlertType.WARNING);

    alert.initModality(Modality.APPLICATION_MODAL);
    alert.initOwner(stage);
    alert.getDialogPane().setContentText("Some text");

    DialogPane dialogPane = alert.getDialogPane();
    GridPane grid = new GridPane();
    ColumnConstraints graphicColumn = new ColumnConstraints();
    graphicColumn.setFillWidth(false);
    graphicColumn.setHgrow(Priority.NEVER);
    ColumnConstraints textColumn = new ColumnConstraints();
    textColumn.setFillWidth(true);
    textColumn.setHgrow(Priority.ALWAYS);
    grid.getColumnConstraints().setAll(graphicColumn, textColumn);
    grid.setPadding(new Insets(5));

    Image image1 = new Image("http://www.mcaprojecttraining.com/images/java-big-icon.png");
    ImageView imageView = new ImageView(image1);
    imageView.setFitWidth(64);
    imageView.setFitHeight(64);
    StackPane stackPane = new StackPane(imageView);
    stackPane.setAlignment(Pos.CENTER);
    grid.add(stackPane, 0, 0);

    Label headerLabel = new Label("Warning");
    headerLabel.setWrapText(true);
    headerLabel.setAlignment(Pos.CENTER_RIGHT);
    headerLabel.setMaxWidth(Double.MAX_VALUE);
    headerLabel.setMaxHeight(Double.MAX_VALUE);
    grid.add(headerLabel, 1, 0);

    dialogPane.setHeader(grid);
    dialogPane.setGraphic(null);

    alert.showAndWait()
        .filter(response -> response == ButtonType.OK)
        .ifPresent(response -> System.out.println("The alert was approved"));

    return alert;
}

And this is what you will see: