创建Wicket组件嵌入Textfield及其FeedbackPanel

Question

我写这段代码：

Java文件：

TextField<String> input1 = (TextField<String>) new TextField<>("input1", Model.of("")).add(new UrlValidator());
TextField<String> input2 = (TextField<String>) new TextField<>("input2", Model.of("")).add(new UrlValidator());
add(new Form<>("form").add(
    new FeedbackPanel("feedbackInput1").setFilter(new ComponentFeedbackMessageFilter(input1)),
    new FeedbackPanel("feedbackInput2").setFilter(new ComponentFeedbackMessageFilter(input2)),
    input1,
    input2
));

模板文件：

<form wicket:id="form">
    <!-- first -->
    <div>
        <wicket:panel wicket:id="feedbackInput1" />
        <label for="input1">Input 1:
            <input type="text" wicket:id="input1" id="input1" />
        </label>
    </div>
    <!-- second -->
    <div>
        <wicket:panel wicket:id="feedbackInput2" />
        <label for="input2">Input 2: 
            <input type="text" wicket:id="input2" id="input2" />
        </label>
    </div>

        <div>
            <button type="submit">Submit</button>
        </div>
    </form>

为了避免冗余，我想创建一个组件(例如: TextFieldWithFeedback)，我可以这样使用：

Java文件：

TextField<String> input1 = (TextField<String>) new TextField<>("input1", Model.of("")).add(new UrlValidator());
TextField<String> input2 = (TextField<String>) new TextField<>("input2", Model.of("")).add(new UrlValidator());
add(new Form<>("form").add(
    new TextFieldWithFeedback("input1", "Input 1: ", input1),
    new TextFieldWithFeedback("input2", "Input 2: ", input2)
));

模板文件：

<form wicket:id="form">
    <!-- first -->
    <div wicket:id="input1" />
    <!-- second -->
    <div wicket:id="input2" />
</form>

我想创建一个Wicket组件来管理一个TextField及其feedbackPanel，我该如何做呢？

Answer 1

查找FormComponent类。你可以这样做：

public class FeedbackTextField<T> extends FormComponent<T> {

    public FeedbackTextField(String id) {
         this(id, null);
    }

    public FeedbackTextField(String id, IModel<T> model) {
         super(id, model);

         TextField<T> tf = new TextField<T>("tx");
         add(tf);
         add(new FeedbackPanel("fb").setFilter(new ComponentFeedbackMessageFilter(tf))); 
    }
}

FormComponent的工作方式类似于一个面板，因此您也需要为该类添加自己的html文件。然后可以将此组件添加到窗体中。

form.add(new FeedbackTextField<String>("input1", Model.of("")));