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 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.
3. For a sizable wizard, it is best to extract the view code from the wizard and use FXML with FXML controllers to handle interfacing UI views with model objects.
4. Current code uses a static reference to a model object (SurveyData) to hold information collected within the wizard. Rather than using a static singleton object, the wizard could be parameterized with a generic type parameter to indicate the model data type and a new instance of the model object could be passed into the wizard constructor and passed between the pages in the wizard. Or a dependency injection service such as Spring or Guice may be used to inject the model object into the FXML controllers which are attached to each page.

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 2

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());
      }
    });
  }