4

是否有任何示例如何在 JavaFX 中创建向导？

例如设置程序或配置。这可以用简单的代码完成还是我需要创建自定义组件？

4

4 回答 4

12

这是JavaFX 中的示例向导的代码。

此代码是基于 SWT 的 java2s 解决方案的 JavaFX 2.x 转换。

您可以修改此代码以使用ControlsFX 对话框来获得更专业的向导外观。

调查1 调查2 调查3

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

更新

此代码已更新为使用一些 JavaFX 8 功能。

进一步改进的建议

  1. JavaFX 8u40 中有更多关于对话框和警报的功能，可以在上述代码中使用，而不是当前代码使用的简单内置对话框系统。
  2. 当前代码对控件使用内联样式而不是外部样式表 - 这使得代码可以作为单个文件执行，但对于生产代码，建议使用外部样式表。
  3. 对于相当大的向导，最好从向导中提取视图代码，并使用 FXML 和 FXML 控制器来处理 UI 视图与模型对象的接口。
  4. 当前代码使用对模型对象 (SurveyData) 的静态引用来保存向导中收集的信息。与使用静态单例对象不同，可以使用通用类型参数对向导进行参数化以指示模型数据类型，并且可以将模型对象的新实例传递到向导构造函数中并在向导中的页面之间传递。或者，可以使用 Spring 或 Guice 等依赖注入服务将模型对象注入到附加到每个页面的 FXML 控制器中。

ControlsFX 向导

3rd 方 ControlsFX 库中的向导实现实现了上面详述的一些建议的增强功能，因此，对于许多人来说，与此答案中概述的简单示例相比，对于生产质量应用程序来说，这将是一个更好的解决方案。

于 2013-10-05T18:40:51.947 回答
3

使用http://fxexperience.com/controlsfx/库，以下代码适用于我。它为每个向导页面使用 fxml 文件。辅助函数 runWizard 然后加载资源并从中创建页面。当然，您可以修改ControlsFX 8.20.7 向导示例中概述的内容 - 让向导工作

运行向导的使用

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 依赖项 

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

runWizard 辅助函数 

/**
   * 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());
      }
    });
  }
于 2017-08-07T06:13:12.907 回答
2

这是我的解决方案，使用ControlsFX Wizard类和 FXML，以及非模态向导。

向导视图.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>

Wizard注意：使用 a而不是a 会更好Anchor，但这需要LinearFlow是一个公共类型，现在情况并非如此（它是 Java 1.8.0_144 中的内部类Wizard）。

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

应用类：

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

}

于 2017-10-18T21:35:26.530 回答
1

例如，DataFX 2 具有用于设计向导的流程 API。您可以通过视图列表/地图定义流程并共享数据模型。有关更多信息，请参阅此演示文稿：http ://de.slideshare.net/HendrikEbbers/datafx-javaone-2013

于 2013-11-04T09:57:15.250 回答