JavaFX command link dialog - javafx

Question

I want to make dialog exactly the same as described in this tutorial http://code.makery.ch/blog/javafx-8-dialogs/.
Dialog is called "Command Link Dialog".
Unfortunately this tutorial is depracated since these dialogs are inside JDK 8u40.
Is there a simple way to make the same dialog using new JDK without ControlsFX?

Answer 1

First create your own button graphic that resembles the CommandLink. In my example I'm using FontAwesomeFX to create the green arrow icon:
GridPane graphicGrid = new GridPane();
graphicGrid.setHgap(5);
graphicGrid.setVgap(5);
// Create an icon using FontAwesomeFX.
Text icon = GlyphsDude.createIcon(FontAwesomeIcon.ARROW_RIGHT);
icon.setFill(Color.GREEN);
Label headerLabel = new Label("Go to the Circus");
headerLabel.setStyle("-fx-font-size: 1.5em;");
Label detailsLabel = new Label("Watch acrobats fly around and clowns, of course.");
graphicGrid.add(icon, 0, 0);
graphicGrid.add(headerLabel, 1, 0);
graphicGrid.add(detailsLabel, 1, 1);
Button button = new Button("", graphicGrid);
Then use the Custom Dialog example from the JavaFX dialogs tutorial to create your own custom dialog and fill it with the buttons you've created. Here's a complete example:
import de.jensd.fx.glyphs.GlyphsDude;
import de.jensd.fx.glyphs.fontawesome.FontAwesomeIcon;
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonType;
import javafx.scene.control.Dialog;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class MCVE extends Application {
#Override
public void start(Stage stage) {
Dialog dialog = new Dialog();
GridPane content = new GridPane();
content.setHgap(10);
content.setVgap(5);
Text headerIcon = GlyphsDude.createIcon(FontAwesomeIcon.INFO_CIRCLE, "3em");
headerIcon.setFill(Color.BLUE);
Label headerLabel = new Label("Where do you want to go?");
headerLabel.setStyle("-fx-font-size: 1.5em;");
CommandLink zooButton = new CommandLink("Go to the Zoo",
"Here you will see zebras, monkeys, lions, elephants, and maybe also an alligator.");
zooButton.setOnAction(e -> dialog.close());
CommandLink circusButton = new CommandLink("Go to the Circus",
"Watch acrobats fly around and clowns, of course.");
circusButton.setOnAction(e -> dialog.close());
CommandLink homeButton = new CommandLink("Stay Home", "Watch TV or play some board games with your siblings.");
// To enable closing of the dialog. We need to add a hidden close
// button. See this thread:
// http://stackoverflow.com/questions/32048348/javafx-scene-control-dialogr-wont-close-on-pressing-x
dialog.getDialogPane().getButtonTypes().add(ButtonType.CLOSE);
Node closeButton = dialog.getDialogPane().lookupButton(ButtonType.CLOSE);
closeButton.managedProperty().bind(closeButton.visibleProperty());
closeButton.setVisible(false);
content.add(headerIcon, 0, 0);
content.add(headerLabel, 1, 0);
content.add(zooButton, 1, 1);
content.add(circusButton, 1, 2);
content.add(homeButton, 1, 3);
dialog.getDialogPane().setContent(content);
dialog.showAndWait();
}
public static void main(String[] args) {
launch();
}
class CommandLink extends Button {
public CommandLink(String header, String text) {
GridPane graphicGrid = new GridPane();
graphicGrid.setHgap(5);
graphicGrid.setVgap(5);
// Create an icon using FontAwesome.
Text icon = GlyphsDude.createIcon(FontAwesomeIcon.ARROW_RIGHT);
icon.setFill(Color.GREEN);
Label btnHeaderLabel = new Label(header);
btnHeaderLabel.setStyle("-fx-font-size: 1.5em;");
Label detailsLabel = new Label(text);
graphicGrid.add(icon, 0, 0);
graphicGrid.add(btnHeaderLabel, 1, 0);
graphicGrid.add(detailsLabel, 1, 1);
setGraphic(graphicGrid);
}
}
}
And here's the result: A dialog that looks somewhat like the Command Link Dialog. You'll have to play around with styling yourself to make it perfect. There's also the possibility to use the Information Dialog from the official dialogs if you want the original information icon.