Question

我要创建一个模态对话框，其中包含带有两个或更多选项卡的AjaxBootstrapTabbedPanel。 所有标签属于同一表单。每个选项卡包含必需的输入字段，选择框或下拉选项。到现在，我不使用自己的验证器，但这是未来的任务。

我可以在标签之间切换时触发验证。

当我使用变体A和B这样的对话框时，我会从验证中获得适当的反馈。

变体A

打开对话框
通过提交按钮关闭对话框会立即生成反馈消息“请在字段中输入值...”

变体B

打开对话框
切换到另一个标签，而不填写初始标签给出的必填字段还请“请输入值......”

变体C - 验证问题

但是以这种方式使用对话框不会产生反馈信息：

打开对话框
在初始标签上输入所有必需的值
请勿在其他标签上的必填字段中输入值
使用提交按钮关闭diaolg：没有反馈消息!! ，但必须有一个或多个

在变体C中，不会打印方法BootstrapAjaxButton#onError()的日志记录输出。

我正在使用Wicket 7.6.0和Wicket-Bootstrap 0.10.11

模态对话框的类

public abstract class OwsDetailsDialog extends Modal<Ows>
{
    private static final long serialVersionUID = -8110788978602397064L;

    private BootstrapAjaxButton createOwsBtn;
    private BootstrapForm<Ows> owsForm;

    public OwsDetailsDialog(String id,
            IModel<Ows> owsModel)
    {
        super(id, owsModel);
        setOutputMarkupPlaceholderTag(true);
        setDefaultModel(owsModel);

        owsForm = new BootstrapForm<>("owsForm");
        owsForm.setOutputMarkupId(true);
        add(owsForm);

        List<ITab> tabs = createTabs(owsModel);
        MyAjaxTabbedPanel tabbedPanel = new MyAjaxTabbedPanel("tabbedPanel", tabs);
        owsForm.add(tabbedPanel);

        createOwsBtn = new BootstrapAjaxButton("submitOws",
                Model.of("Create"), Buttons.Type.Default)
        {
            @Override
            protected void onError(AjaxRequestTarget target, Form<?> form)
            {
                super.onError(target, form);
                target.add(form, tabbedPanel);
                System.out.println("onError() at form ID " + form.getId() + " target.getPage() "
                        + target.getPage());
            }

            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form)
            {
                super.onSubmit(target, form);
                System.out.println("click on create");
                createOws(target, owsModel);
            }
        };
        owsForm.add(createOwsBtn);

        BootstrapAjaxButton cancelBtn = new BootstrapAjaxButton("cancelOws",
                Model.of("Cancel"), Buttons.Type.Default)
        {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form)
            {
                super.onSubmit(target, form);
                cancel(target);
            }
        };
        cancelBtn.setDefaultFormProcessing(false);
        owsForm.add(cancelBtn);

        //FeedbackPanel feedbackOwsDialog = new FeedbackPanel("feedbackOwsDialog");
        //add(feedbackOwsDialog);
    }

    private List<ITab> createTabs(IModel<Ows> owsModel)
    {
        List<ITab> tabs = new ArrayList<>();

        tabs.add(new AbstractTab(Model.of("Data 1"))
        {
            private static final long serialVersionUID = -9107223557866453561L;

            @Override
            public WebMarkupContainer getPanel(String panelId)
            {
                return new OwsMainInfoContainer(panelId, owsModel);
            }
        });
        tabs.add(new AbstractTab(Model.of("Data 2"))
        {
            private static final long serialVersionUID = -7323530522820254738L;

            @Override
            public WebMarkupContainer getPanel(String panelId)
            {
                return new OwsSecondaryInfoContainer(panelId, owsModel);
            }
        });

        return tabs;
    }

    protected class OwsMainInfoContainer extends Panel
    {
        private static final long serialVersionUID = -2965824809083715016L;

        public OwsMainInfoContainer(
                String panelId, IModel<Ows> owsModel)
        {
            super(panelId, owsModel);
            add(new RequiredTextField<>("title"));
            add(new RequiredTextField<>("url"));

            List<OwsType> types = Arrays.asList(OwsType.values());

            DropDownChoice<OwsType> dropDownChoice = new DropDownChoice<>("category", types,
                    new ChoiceRenderer<OwsType>()
                    {
                        private static final long serialVersionUID = 8139757791037487164L;

                        @Override
                        public Object getDisplayValue(OwsType owsType)
                        {
                            return owsType.getName();
                        }
                    });

            add(dropDownChoice.setRequired(true));

            add(new FeedbackPanel("feedbackMain"));
        }
    }

    protected class OwsSecondaryInfoContainer extends Panel
    {
        private static final long serialVersionUID = -7396160769731997541L;

        public OwsSecondaryInfoContainer(
                String panelId, IModel<Ows> owsModel)
        {
            super(panelId, owsModel);
            add(new DateTextField("firstPublished"));
            add(new TextField<>("provider").setRequired(true));
            add(new TextField("price").setRequired(true));
            add(new FeedbackPanel("feedbackSecondary"));
        }
    }

    protected abstract void createOws(AjaxRequestTarget target
            , IModel<Ows> owsWithUtilDateIModel);

    protected abstract void cancel(AjaxRequestTarget target);

    // http://www.volkomenjuist.nl/blog/2009/12/01/ajaxtabbedpanel-store-state-when-switching-tabs/
    class MyAjaxTabbedPanel extends AjaxBootstrapTabbedPanel<ITab>
    {
        private static final long serialVersionUID = 1513951445901529991L;

        public MyAjaxTabbedPanel(String id, List<ITab> tabs)
        {
            super(id, tabs);
        }

        @Override
        protected WebMarkupContainer newLink(String linkId, final int index)
        {
            return new AjaxSubmitLink(linkId, owsForm)
            {
                private static final long serialVersionUID = 7049548660275591812L;

                @Override
                protected void onSubmit(AjaxRequestTarget target, Form<?> form)
                {
                    setSelectedTab(index);
                    if (target != null)
                    {
                        target.add(form);
                    }
                    onAjaxUpdate(target);
                    System.out.println("onSubmit() on target.getPage(): " + target.getPage());
                }

                @Override
                protected void onError(AjaxRequestTarget target, Form<?> form)
                {
                    MyAjaxTabbedPanel component = MyAjaxTabbedPanel.this;
                    target.add(component);
                    System.out.println("in onError() , target.add() on " + component.getId());
                }
            };
        }
    }
}

扩展WebPage的类

public class MyPage extends WebPage
{
    private static final long serialVersionUID = 6826446949682313116L;

    public MyPage()
    {
        Form<Void> form = new Form<Void>("buttonForm");
        add(form);
        form.setOutputMarkupId(true);


        OwsDetailsDialog owsDialog = new OwsDetailsDialog("owsDialog"
                , new CompoundPropertyModel<Ows>(new Ows()))
        {
            @Override
            protected void createOws(AjaxRequestTarget target,
                    IModel<Ows> model)
            {
                Ows ows = model.getObject();
                System.out.println("object: "+ ows);
                close(target);
            }

            @Override
            protected void cancel(AjaxRequestTarget target)
            {
                System.out.println("click auf abbrechen");
                close(target);
            }
        };
        add(owsDialog);

        BootstrapAjaxButton createOwsButton = new BootstrapAjaxButton("createOwsButton",
                Model.of("OWS neu"), Buttons.Type.Default)
        {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form)
            {
                super.onSubmit(target, form);
                owsDialog.setDefaultModelObject(new Ows());
                target.add(owsDialog);
                TabbedPanel tabbedPanel = (TabbedPanel) owsDialog.get("owsForm:tabbedPanel");
                tabbedPanel.setSelectedTab(0);
                owsDialog.show(target);
            }
        };

        form.add(createOwsButton);
    }
}

POJO

package example.tryOut.ows;

import java.util.Date;

public class Ows
{
    private Integer index=0;
    private String title = "";
    private String provider = "";
    private String url = "";
    private OwsType category;
    private Date firstPublished =null;
    private Double price=0.0;

    public Integer getIndex()
    {
        return index;
    }

    public void setIndex(Integer index)
    {
        this.index = index;
    }

    public String getTitle()
    {
        return title;
    }

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

    public String getProvider()
    {
        return provider;
    }

    public void setProvider(String provider)
    {
        this.provider = provider;
    }

    public String getUrl()
    {
        return url;
    }

    public void setUrl(String url)
    {
        this.url = url;
    }

    public OwsType getCategory()
    {
        return category;
    }

    public void setCategory(OwsType category)
    {
        this.category = category;
    }

    public Date getFirstPublished()
    {
        return firstPublished;
    }

    public void setFirstPublished(Date firstPublished)
    {
        this.firstPublished = firstPublished;
    }

    public Double getPrice()
    {
        return price;
    }

    public void setPrice(Double price)
    {
        this.price = price;
    }

    @Override
    public String toString()
    {
        return "Ows{" +
                "index=" + index +
                ", title='" + title + '\'' +
                ", provider='" + provider + '\'' +
                ", url='" + url + '\'' +
                ", category=" + category +
                ", firstPublished=" + firstPublished +
                ", price=" + price +
                '}';
    }
}

标记

页

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<form wicket:id="buttonForm">
    <button wicket:id="createOwsButton"></button>
</form>
<div wicket:id="owsDialog"></div>
</body>
</html>

对话

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<wicket:extend>
    <form wicket:id="owsForm">
        <div wicket:id="tabbedPanel" class="container" style="width: inherit"></div>
        <button type="submit" wicket:id="submitOws" class="btn btn-main">Anlegen</button>
        <button type="reset" wicket:id="cancelOws" class="btn btn-main">Abbrechen</button>
    </form>
</wicket:extend>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="UTF-8">
</head>
<body>

<wicket:panel>
    <div class="form-group">
        <label wicket:for="url">URL</label>
        <div class="controls">
            <input type="text" wicket:id="url" class="form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label wicket:for="title">Title</label>
        <div class="controls">
            <input type="text" wicket:id="title" class="form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label wicket:for="category">OWS Category</label>
        <div class="controls">
            <select wicket:id="category">
                <option value="">dummy1</option>
                <option value="">dummy2</option>
            </select>
        </div>
    </div>

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

</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<wicket:panel>
    <div class="form-group">
        <label wicket:for="price">Price</label>
        <div class="controls">
            <input type="text" wicket:id="price" class="form-control"/>
        </div>
    </div>

    <div class="form-group">
        <label wicket:for="provider">Provider</label>
        <div class="controls">
            <input type="text" wicket:id="provider" class="form-control"/>
        </div>
    </div>

    <div class="form-group">
        <label wicket:for="firstPublished">First published</label>
        <div class="controls">
            <input type="date" wicket:id="firstPublished" class="form-control"/>
        </div>
    </div>

    <div wicket:id="feedbackSecondary"></div>
</wicket:panel>
</body>
</html>

Wicket Modal对话框，AjaxBootstrapTabbedPanel中的表单验证

变体A

变体B

变体C - 验证问题

模态对话框的类

扩展WebPage的类

POJO

标记

页

对话

0 个答案: