Create wizard in JavaFX

Question

Is there any example how to create wizard in JavaFX?

For example to setup a program or for configuration. Can this be done with simple code or I need to create custom component?

Answer 1

Here's my solution, using ControlsFX Wizard classes, and FXML, with a non-modal wizard.

WizardView.fxml:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import org.controlsfx.dialog.*?>
<AnchorPane xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1"
        fx:controller="WizardController"
>
    <WizardPane fx:id="step1Pane" headerText="Step 1">
        <content>
            <Label text="Do action 1, then action 2."/>
            <ButtonBar>
                <buttons>
                    <Button text="Action 1" onAction="#displayScreenForAction1"/>
                </buttons>
            </ButtonBar>
        </content>
    </WizardPane>
    <WizardPane fx:id="step2Pane" headerText="Step 2">
        ...
    </WizardPane>
</AnchorPane>

NB: Would be better to use a Wizard instead of an Anchor, but this would require LinearFlow being a public type, which is not the case by now (it's an inner class of Wizard in Java 1.8.0_144).

WizardController.java:

public class WizardController {

    @FXML
    private WizardPane step1Pane;
    @FXML
    private WizardPane step2Pane;

    ...

    void show() {

        Wizard wizard = new Wizard();
        wizard.setFlow(new Wizard.LinearFlow(
                step1Pane,
                step2Pane,
                ...
        ));
        wizard.resultProperty().addListener((observable, oldValue, newValue) -> {
            wizardStage.close();
        });

        // show wizard and wait for response
        Stage wizardStage = new Stage();
        wizardStage.setTitle("... wizard");
        wizardStage.setScene(wizard.getScene());

        wizardStage.show();
    }
}

Application class:

public class WizardApp extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void init() throws Exception {
        super.init();
        ...
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(getClass().getResource("WizardView.fxml"));
        wizardController = loader.getController();
    }

    @FXML
    private void showWizard(ActionEvent actionEvent) {
        wizardController.show();
    }

}

Answer 2

Here is code for a sample wizard in JavaFX.

This code was a JavaFX 2.x conversion of a SWT based solution for java2s.

You could modify this code to use ControlsFX dialogs to get a more professional look to the wizard.

import javafx.application.Application;
import javafx.beans.property.*;
import javafx.beans.value.*;
import javafx.collections.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

import java.util.Stack;

/**
 * This class displays a survey using a wizard
 */
public class Survey extends Application {
    public static void main(String[] args) throws Exception {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        // configure and display the scene and stage.
        stage.setScene(new Scene(new SurveyWizard(stage), 400, 250));
        stage.show();
    }
}

/**
 * basic wizard infrastructure class
 */
class Wizard extends StackPane {
    private static final int UNDEFINED = -1;
    private ObservableList<WizardPage> pages = FXCollections.observableArrayList();
    private Stack<Integer> history = new Stack<>();
    private int curPageIdx = UNDEFINED;

    Wizard(WizardPage... nodes) {
        pages.addAll(nodes);
        navTo(0);
        setStyle("-fx-padding: 10; -fx-background-color: cornsilk;");
    }

    void nextPage() {
        if (hasNextPage()) {
            navTo(curPageIdx + 1);
        }
    }

    void priorPage() {
        if (hasPriorPage()) {
            navTo(history.pop(), false);
        }
    }

    boolean hasNextPage() {
        return (curPageIdx < pages.size() - 1);
    }

    boolean hasPriorPage() {
        return !history.isEmpty();
    }

    void navTo(int nextPageIdx, boolean pushHistory) {
        if (nextPageIdx < 0 || nextPageIdx >= pages.size()) return;
        if (curPageIdx != UNDEFINED) {
            if (pushHistory) {
                history.push(curPageIdx);
            }
        }

        WizardPage nextPage = pages.get(nextPageIdx);
        curPageIdx = nextPageIdx;
        getChildren().clear();
        getChildren().add(nextPage);
        nextPage.manageButtons();
    }

    void navTo(int nextPageIdx) {
        navTo(nextPageIdx, true);
    }

    void navTo(String id) {
        if (id == null) {
            return;
        }

        pages.stream()
                .filter(page -> id.equals(page.getId()))
                .findFirst()
                .ifPresent(page ->
                                navTo(pages.indexOf(page))
                );
    }

    public void finish() {
    }

    public void cancel() {
    }
}

/**
 * basic wizard page class
 */
abstract class WizardPage extends VBox {
    Button priorButton = new Button("_Previous");
    Button nextButton = new Button("N_ext");
    Button cancelButton = new Button("Cancel");
    Button finishButton = new Button("_Finish");

    WizardPage(String title) {
        Label label = new Label(title);
        label.setStyle("-fx-font-weight: bold; -fx-padding: 0 0 5 0;");
        setId(title);
        setSpacing(5);
        setStyle("-fx-padding:10; -fx-background-color: honeydew; -fx-border-color: derive(honeydew, -30%); -fx-border-width: 3;");

        Region spring = new Region();
        VBox.setVgrow(spring, Priority.ALWAYS);
        getChildren().addAll(getContent(), spring, getButtons());

        priorButton.setOnAction(event -> priorPage());
        nextButton.setOnAction(event -> nextPage());
        cancelButton.setOnAction(event -> getWizard().cancel());
        finishButton.setOnAction(event -> getWizard().finish());
    }

    HBox getButtons() {
        Region spring = new Region();
        HBox.setHgrow(spring, Priority.ALWAYS);
        HBox buttonBar = new HBox(5);
        cancelButton.setCancelButton(true);
        finishButton.setDefaultButton(true);
        buttonBar.getChildren().addAll(spring, priorButton, nextButton, cancelButton, finishButton);
        return buttonBar;
    }

    abstract Parent getContent();

    boolean hasNextPage() {
        return getWizard().hasNextPage();
    }

    boolean hasPriorPage() {
        return getWizard().hasPriorPage();
    }

    void nextPage() {
        getWizard().nextPage();
    }

    void priorPage() {
        getWizard().priorPage();
    }

    void navTo(String id) {
        getWizard().navTo(id);
    }

    Wizard getWizard() {
        return (Wizard) getParent();
    }

    public void manageButtons() {
        if (!hasPriorPage()) {
            priorButton.setDisable(true);
        }

        if (!hasNextPage()) {
            nextButton.setDisable(true);
        }
    }
}

/**
 * This class shows a satisfaction survey
 */
class SurveyWizard extends Wizard {
    Stage owner;

    public SurveyWizard(Stage owner) {
        super(new ComplaintsPage(), new MoreInformationPage(), new ThanksPage());
        this.owner = owner;
    }

    public void finish() {
        System.out.println("Had complaint? " + SurveyData.instance.hasComplaints.get());
        if (SurveyData.instance.hasComplaints.get()) {
            System.out.println("Complaints: " + 
                    (SurveyData.instance.complaints.get().isEmpty() 
                            ? "No Details" 
                            : "\n" + SurveyData.instance.complaints.get())
            );
        }
        owner.close();
    }

    public void cancel() {
        System.out.println("Cancelled");
        owner.close();
    }
}

/**
 * Simple placeholder class for the customer entered survey response.
 */
class SurveyData {
    BooleanProperty hasComplaints = new SimpleBooleanProperty();
    StringProperty complaints = new SimpleStringProperty();
    static SurveyData instance = new SurveyData();
}

/**
 * This class determines if the user has complaints.
 * If not, it jumps to the last page of the wizard.
 */
class ComplaintsPage extends WizardPage {
    private RadioButton yes;
    private RadioButton no;
    private ToggleGroup options = new ToggleGroup();

    public ComplaintsPage() {
        super("Complaints");

        nextButton.setDisable(true);
        finishButton.setDisable(true);
        yes.setToggleGroup(options);
        no.setToggleGroup(options);
        options.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {
            @Override
            public void changed(ObservableValue<? extends Toggle> observableValue, Toggle oldToggle, Toggle newToggle) {
                nextButton.setDisable(false);
                finishButton.setDisable(false);
            }
        });
    }

    Parent getContent() {
        yes = new RadioButton("Yes");
        no = new RadioButton("No");
        SurveyData.instance.hasComplaints.bind(yes.selectedProperty());
        return new VBox(
                5,
                new Label("Do you have complaints?"), yes, no
        );
    }

    void nextPage() {
        // If they have complaints, go to the normal next page
        if (options.getSelectedToggle().equals(yes)) {
            super.nextPage();
        } else {
            // No complaints? Short-circuit the rest of the pages
            navTo("Thanks");
        }
    }
}

/**
 * This page gathers more information about the complaint
 */
class MoreInformationPage extends WizardPage {
    public MoreInformationPage() {
        super("More Info");
    }

    Parent getContent() {
        TextArea textArea = new TextArea();
        textArea.setWrapText(true);
        textArea.setPromptText("Tell me what's wrong Dave...");
        nextButton.setDisable(true);
        textArea.textProperty().addListener((observableValue, oldValue, newValue) -> {
            nextButton.setDisable(newValue.isEmpty());
        });
        SurveyData.instance.complaints.bind(textArea.textProperty());
        return new VBox(
                5,
                new Label("Please enter your complaints."),
                textArea
        );
    }
}

/**
 * This page thanks the user for taking the survey
 */
class ThanksPage extends WizardPage {
    public ThanksPage() {
        super("Thanks");
    }

    Parent getContent() {
        StackPane stack = new StackPane(
                new Label("Thanks!")
        );
        VBox.setVgrow(stack, Priority.ALWAYS);
        return stack;
    }
}

Update

This code was updated to use some JavaFX 8 features.

Suggestions for further enhancements

1. There are further facilities in JavaFX 8u40 around dialogs and alerts which could be used in the above code rather than the simple in-built dialog system the current code is using.
2. The current code uses in-line styles for controls rather than external stylesheets - this makes the code executable as a single file, but for production code it is advisable to use external style sheets.

ControlsFX Wizard

The Wizard implementation in the 3rd party ControlsFX library implements some of the suggested enhancements detailed above, so, for many people will be a better solution for a production quality application than the simple example outlined in this answer.

Answer 3

DataFX 2 has a flow API to design wizards, for example. You can define a flow through a list / map of views and share a data model. For more information see this presentation: http://de.slideshare.net/HendrikEbbers/datafx-javaone-2013

Answer 4

Using the http://fxexperience.com/controlsfx/ library the following code works for me. It uses fxml files for each wizard page. The helper function runWizard then loads the resources and creates pages from it. Of course you can modifiy the content as outlined in ControlsFX 8.20.7 Wizard examples - getting Wizards to work

Usage of runWizard

String[] pageNames = { "page1","page2","page3" };
Platform.runLater(() ->{
  try {
    runWizard(I18n.get(I18n.WELCOME),"/com/bitplan/demo/",pageNames);
  } catch (Exception e) {
    ErrorHandler.handle(e)
  }
});

ControlsFX Maven dependency

    <!-- https://mvnrepository.com/artifact/org.controlsfx/controlsfx -->
    <dependency>
        <groupId>org.controlsfx</groupId>
        <artifactId>controlsfx</artifactId>
        <version>8.40.12</version>
    </dependency>

runWizard helper function

/**
   * run the wizard with the given title
   * @param title - of the wizard
   * @param resourcePath - where to load the fxml files from
   * @param pageNames - without .fxml extenion
   * @throws Exception - e.g. IOException
   */
  public void runWizard(String title,String resourcePath,String ...pageNames) throws Exception {
    Wizard wizard = new Wizard();
    wizard.setTitle(title);

    WizardPane[] pages = new WizardPane[pageNames.length];
    int i = 0;
    for (String pageName : pageNames) {
      Parent root = FXMLLoader.load(getClass()
          .getResource(resourcePath + pageName + ".fxml"));
      WizardPane page = new WizardPane();
      page.setHeaderText(I18n.get(pageName));
      page.setContent(root);
      pages[i++] = page;
    }
    wizard.setFlow(new LinearFlow(pages));
    wizard.showAndWait().ifPresent(result -> {
      if (result == ButtonType.FINISH) {
        System.out
            .println("Wizard finished, settings: " + wizard.getSettings());
      }
    });
  }