tag:blogger.com,1999:blog-38822392.post-3031412292360263662008-08-20T00:25:00.002+10:002008-11-08T18:11:47.965+11:002008-11-08T18:11:47.965+11:00Wicket 下实现 Checkin 和 Checkout 日期的连动<p>Shrimpy 的推荐果然不虚， Wicket 确实是一个实现 Presentation Layer 的好框架。靠着 Wicket，整个 HTML 的静态代码和 Java 的动态代码可以完全分割开来。静态代码用 HTML 文件保存，动态代码使用 Java 格式， Wicket 自身便做将 HTML 和 Java 在后台绑定的工作——整个思路有点像 ASP.net，一个 C# 文件对应一个页面——关键是， Wicket 还能实现 AJAX 功能。相当地帅。</p><p>用着顺手，便在最近的项目中向老板推荐了 Wicket。于是，一个带薪尝试 Wicket 的机会便产生了……</p><p>不过，作为一个新的框架，相关资料实在是太少了……整个项目过程，一半靠 <a href="http://www.wicket-library.com/wicket-examples/">Wicket Example</a>，一半靠 Google。</p><p>这个 Checkin 和 Checkout 日期连动的代码，就是靠着瞎蒙鼓捣出来的。很多网站的搜索都需要实现当前日期，起始日期和结束日期的连动，以保证当前日期>起始日期>结束日期。放出代码来供大家参考，如果有其他好思路，也请不吝赐教。</p><p>HTML 部分代码</p><pre name="code" class="xml"><?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.sourceforge.net/">
<head>
<title>Related Date Pickers</title>
</head>
<body>
<center><h1><span wicket:id="message">message will be here</span></h1></center>
<br/><br/>
<form wicket:id="dateForm">
<table align="center" id="dateForm">
<tr><td><input type="text" readonly="readonly" wicket:id="checkInDate" /></td></tr>
<tr><td><input type="text" readonly="readonly" wicket:id="checkOutDate" /></td></tr>
<tr></tr>
<tr><td align="center"><input type="submit" value="Submit" /></td></tr>
</table>
</form>
<div align="center" id="feedbackPanel">
<span wicket:id="feedback"/>
</div>
</body>
</html>
</pre><p>Java 部分代码</p><pre name="code" class="java">package info.liangz.RelatedDatePickers;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Map;
import org.apache.wicket.PageParameters;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
import org.apache.wicket.datetime.StyleDateConverter;
import org.apache.wicket.datetime.markup.html.form.DateTextField;
import org.apache.wicket.extensions.yui.calendar.DatePicker;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.PropertyModel;
/**
* Homepage
*/
public class RelatedDatePickers extends WebPage {
private static final long serialVersionUID = 1L;
private Date selectedCheckInDate, selectedCheckOutDate;
private static final SimpleDateFormat format = new SimpleDateFormat("MM/dd/yyyy");
/**
* Constructor that is invoked when page is invoked without a session.
*
* @param parameters
* Page parameters
*/
public RelatedDatePickers(final PageParameters parameters) {
final DateTextField checkInDate = new DateTextField("checkInDate", new PropertyModel<date>(
this, "selectedCheckInDate"), new StyleDateConverter("S-", true));
final DateTextField checkOutDate = new DateTextField("checkOutDate", new PropertyModel<date>(
this, "selectedCheckOutDate"), new StyleDateConverter("S-", true));
add(new Label("message", "Related Date Pickers"));
Form<?> form = new Form("dateForm") {
@Override
protected void onSubmit() {
info("Checkin Date is: " + selectedCheckInDate +
" & Checkout Date is: " + selectedCheckOutDate);
}
};
add(form);
form.add(checkInDate);
checkInDate.setRequired(true);
checkInDate.add(new DatePicker() {
@Override
protected void configure(Map widgetProperties) {
Date date;
if (selectedCheckInDate != null) {
date = selectedCheckInDate;
} else {
date = new Date();
}
// set minimal date
widgetProperties.put("mindate", format.format(date));
super.configure(widgetProperties);
}
});
checkInDate.add(new AjaxFormComponentUpdatingBehavior("onchange") {
@Override
protected void onUpdate(AjaxRequestTarget target) {
target.addComponent(checkOutDate);
}
});
form.add(checkOutDate);
checkOutDate.setRequired(true);
checkOutDate.add(new DatePicker() {
@Override
protected void configure(Map widgetProperties) {
Date date;
if (selectedCheckInDate != null) {
Calendar cal = Calendar.getInstance();
cal.setTime(selectedCheckInDate);
cal.add(Calendar.DATE, 1);
date = cal.getTime();
} else {
date = new Date();
}
// set minimal date
widgetProperties.put("mindate", format.format(date));
super.configure(widgetProperties);
}
});
checkOutDate.setOutputMarkupId(true);
add(new FeedbackPanel("feedback"));
}
}
</pre><p>以及一张效果图</p><p class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_SF8en_GdErQ/SKrXhF3R0II/AAAAAAAAHds/MZUQIfLrpdI/s1600-h/Related+Date+Pickers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_SF8en_GdErQ/SKrXhF3R0II/AAAAAAAAHds/nKvxuQCh-dY/s320-R/Related+Date+Pickers.png" /></a></p>Liang Zhao@Bloggerhttp://www.blogger.com/profile/01431844262421179754noreply@blogger.com4