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的组件（DateField）

用asp实现无组件生成验证码的方法2种

利用node.js实现自动生成前端项目组件的方法详解

Angular使用cli生成自定义文件、组件的方法

在element-ui的el-tree组件中用render函数生成el-button

用asp实现无组件生成验证码的方法2种

在element-ui的el-tree组件中用render函数生成el-button的实例代码

Wicket生成ExtJS的组件（DateField）

Wicket生成ExtJS的组件（DateField）

详解Angular-cli生成组件修改css成less或sass的实例

通过npm或yarn自动生成vue组件的方法示例