欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Wicket生成ExtJS的组件(DateField)

程序员文章站 2022-07-15 14:42:41
...

一,组件代码

 

DateField.java

package dncsoft.wicket.datepicker;

import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import org.apache.wicket.markup.html.form.FormComponentPanel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.resource.IResourceStream;
import org.apache.wicket.util.resource.PackageResourceStream;
import org.apache.wicket.velocity.markup.html.VelocityPanel;

public class DateField extends FormComponentPanel<String> {

    private static final long serialVersionUID = 1L;
    private Map<String, Object> map = new HashMap<String, Object>();

    public DateField(final String id, IModel<String> model) {
        super(id, model);
        init();
    }

    private void init() {
        map.put("value", getModel().getObject());
        map.put("id", getInputName());
        map.put("target", getInputName() + random());

        add(new VelocityPanel("javascript", Model.ofMap(map)) {
            private static final long serialVersionUID = 1L;

            @Override
            protected IResourceStream getTemplateResource() {
                return new PackageResourceStream(DateField.class, "DateField.js");
            }
        });
    }

    private String random() {
        Random rnd = new Random(System.currentTimeMillis());
        return Integer.toString(rnd.nextInt());
    }

    @Override
    protected void convertInput() {
        super.convertInput();
        String str = this.getConvertedInput();

        map.put("value", str);
    }
}

 

DateField.html

<wicket:panel><wicket:fragment wicket:id="javascript"></wicket:fragment></wicket:panel>

 

DateField.js

<span id="${target}"></span><script type="text/javascript">
new Ext.form.DateField(
  {id:'${id}', 
    vtype:'daterange', 
    format:'Y/m/d', 
    allowBlank:false, 
    anchor:'32%', 
    value:'${value}'}).render('${target}');
</script>
 

二,Page代码

DatePickerPage.java

package dncsoft.wicket.page;

import dncsoft.wicket.datepicker.DateField;

import org.apache.wicket.IClusterable;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.CompoundPropertyModel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.PropertyModel;

public class DatePickerPage extends WebPage {

    private static final long serialVersionUID = 1L;

    private class MyFormData implements IClusterable {
        private static final long serialVersionUID = 1L;

        private String startDate = "2011-12-12";

        @SuppressWarnings("unused")
        public void setStartDate(String startDate) {
            this.startDate = startDate;
        }

        @SuppressWarnings("unused")
        public String getStartDate() {
            return startDate;
        }
    }

    private class MyForm extends Form<MyFormData> {
        private static final long serialVersionUID = 1L;

        public MyForm(String id, IModel<MyFormData> model) {
            super(id, model);
            add(new DateField("startDate", new PropertyModel<String>(model, "startDate")));
        }
    }

    public DatePickerPage() {
        MyFormData bean = new MyFormData();
        CompoundPropertyModel<MyFormData> model = new CompoundPropertyModel<MyFormData>(bean);
        MyForm form = new MyForm("form", model);

        add(form);
    }

}

 

DatePickerPage.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portal Example</title>
<link rel="stylesheet" type="text/css" href="/wicket/html/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/wicket/html/css/Portal.css" />
<script type="text/javascript" src="/wicket/html/js/ext-base.js"></script>
<script type="text/javascript" src="/wicket/html/js/ext-all.js"></script>
</head>
<body>

<div>
<form wicket:id="form">
<wicket:fragment wicket:id="startDate">[startDate]</wicket:fragment>
<input type="submit" value="set" />
</form>
</div>

</body>
</html>
 

 

 

// END

相关标签: Wicket ExtJS