Wicket 下实现 Checkin 和 Checkout 日期的连动

Shrimpy 的推荐果然不虚, Wicket 确实是一个实现 Presentation Layer 的好框架。靠着 Wicket,整个 HTML 的静态代码和 Java 的动态代码可以完全分割开来。静态代码用 HTML 文件保存,动态代码使用 Java 格式, Wicket 自身便做将 HTML 和 Java 在后台绑定的工作——整个思路有点像 ASP.net,一个 C# 文件对应一个页面——关键是, Wicket 还能实现 AJAX 功能。相当地帅。

用着顺手,便在最近的项目中向老板推荐了 Wicket。于是,一个带薪尝试 Wicket 的机会便产生了……

不过,作为一个新的框架,相关资料实在是太少了……整个项目过程,一半靠 Wicket Example,一半靠 Google。

这个 Checkin 和 Checkout 日期连动的代码,就是靠着瞎蒙鼓捣出来的。很多网站的搜索都需要实现当前日期,起始日期和结束日期的连动,以保证当前日期>起始日期>结束日期。放出代码来供大家参考,如果有其他好思路,也请赐教。

HTML 部分代码
<?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>
        <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>
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(
                this, "selectedCheckInDate"), new StyleDateConverter("S-", true));
        final DateTextField checkOutDate = new DateTextField("checkOutDate", new PropertyModel(
                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"));
    }
}
以及一张效果图
Related Date Pickers
Related Date Pickers