我的Wicket TabbedPanel不保留表单字段值

如何解决我的Wicket TabbedPanel不保留表单字段值

我是使用Apache Wicket的新手。我正在创建一个面板，以在网站上添加文章。我的文章编辑面板由TabbedPanel组成：第一个标签用于编辑，第二个标签用于预览文章。

如果在编辑器中输入了一些文本（文本区域）后，我切换到预览并返回到编辑器，则文本区域为空。

以下是带有TabbedPanel的面板代码的一部分：

public AddArticlePanel(String id,ArticleEdit articleEdit) {
        super(id);

        final List<AbstractTab> tabList = new ArrayList<>();
        tabList.add(new AbstractTab(new Model<String>("Editor")) {
            @Override
            public WebMarkupContainer getPanel(String panelId) {
                return new ArticleEditorPanel(panelId,articleEdit);
            }
        });
        tabList.add(new AbstractTab(new Model<String>("Preview")) {
            @Override
            public WebMarkupContainer getPanel(String panelId) {
                return new ArticlePreviewPanel(panelId,articleEdit);
            }
        });
        tabs = new TabbedPanel<AbstractTab>("tabs",tabList);

        final SubmitLink submitButton = new SubmitLink("submit") {
            @Override
            public void onSubmit() {
                // Todo
            }
        };

        addArticleForm = new Form<ArticleEdit>("add-article-form",new Model<ArticleEdit>(articleEdit));
        addArticleForm.add(tabs);
        addArticleForm.add(submitButton);
        add(addArticleForm);
    }

以下是编辑器面板的HTML：

<wicket:panel>
        <div wicket:id="Feedback"></div>

        <div class="fields">
            <label for="title">Title</label>
            <input type="text" name="title" wicket:id="title">
        </div>
        <div class="fields">
            <label for="text">Text</label>
            <textarea class="notab" name="text" wicket:id="text"></textarea>
        </div>
        <div class="fields">
            <label for="keywords">Keywords</label>
            <input type="text" name="keywords" wicket:id="keywords">
        </div>
</wicket:panel>

此编辑器面板的代码：

public ArticleEditorPanel(String id,ArticleEdit articleEdit) {
        super(id);

        final FeedbackPanel FeedbackPanel = new FeedbackPanel("Feedback");

        title = new TextField<String>("title",new PropertyModel<String>(articleEdit,"title"));
        title.setrequired(true);

        text = new TextArea<String>("text","text"));
        text.setrequired(true);

        keywords = new TextField<String>("keywords","keywords"));
        keywords.setrequired(true);

        add(title);
        add(text);
        add(keywords);
        add(FeedbackPanel);
    }

最后，ArticleEdit类的源代码：

public class ArticleEdit implements Serializable {

    private String title;

    private String text;

    private String keywords;

    private String preview;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getKeywords() {
        return keywords;
    }

    public void setKeywords(String keywords) {
        this.keywords = keywords;
    }

    public String getPreview() {
        return preview;
    }

    public void setPreview(String preview) {
        this.preview = preview;
    }
}

为什么开箱即用？我的错误在哪里？

谢谢您的帮助。

解决方法

在导航到“预览”选项卡之前，不要从“编辑”选项卡保存状态。

通过单击“预览”链接，浏览器将向服务器发出新请求，Wicket将重新呈现整个页面，因此在表单字段中输入的所有数据都将丢失。

您可以通过将AjaxFormComponentUpdatingBehavior添加到表单字段来轻松保存数据。例如，对于title字段：

title = new TextField<String>("title",new PropertyModel<String>(articleEdit,"title"));
title.setRequired(true);
title.add(new AjaxFormComponentUpdatingBehavior("change") {
    @Override public void onUpdate(AjaxRequestTarget target) {}
    @Override public void onError(AjaxRequestTarget target) {
         target.add(feedbackPanel);
    }
});