我必须创建一个包含AjaxBootstrapTabbedPanel两个或多个选项卡的模式对话框。所有选项卡都属于同一个表单。每个选项卡都包含必需的输入字段、选择框或下拉选项。到目前为止，我没有使用自己的验证器，但这是未来的任务。
在选项卡之间切换时，我能够触发验证。
当我使用变体 A 和 B 之类的对话框时，我会从验证中获得适当的反馈。
变体 A
- 打开对话框
- 通过提交按钮关闭对话框立即导致反馈消息“请在字段中输入值...”
变体 B
- 打开对话框
- 切换到另一个选项卡而不填写初始选项卡上的必填字段也给出“请在...中输入一个值”
变体 C - 验证问题
但是以这种方式使用对话框不会产生反馈消息：
- 打开对话框
- 在初始选项卡上输入所有必需的值
- 不要在另一个选项卡上的必填字段中输入值
- 使用提交按钮关闭对话框：没有反馈信息！！, 但必须有一个或多个
BootstrapAjaxButton#onError()在变体 C 中，不打印该方法的日志输出。
我正在使用 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());
}
};
}
}
}
类扩展网页
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);
}
}
波乔
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>