Question

所以这不是一个非常普遍的问题，但我希望有些人可以给我一些关于架构的指示，以便我可以构建以下可重用的wicket组件。

这是草图上的粗略草图：

https://skitch.com/cmagnollay/8sn2s/multitextform

我知道，画得好吗？基本上，这个formcomponent（我认为这是正确使用的类）将用于在表单上添加用户定义的输入数量。当用户点击TextInputField旁边的 - 按钮时，它会删除该inputField。当他们点击+按钮时，会添加一个新的空白字段。显然，当用户单击按钮时，组件将需要使用AJAX来更新组件，但我的问题是如何构建它。这是一堂课吗？两个（一个用于整个组件，一个用于带有 - 按钮的输入字段），我应该使用哪些类来执行此操作？我希望该对象尽可能通用以促进重用。以下是我到目前为止的情况：

public class MultiTextInput<T> extends FormComponent<List<T>>
{
    private static final long serialVersionUID = 1L;

    private final String removeInputButtonName = "removeInputButton";
    private final String addInputButtonIdName = "addInputButton";

    private int numInputs = 1;
    private List<TextField<T>> inputFieldList = new ArrayList<TextField<T>>();

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

        inputFieldList.add(new TextField<T>("input1", model));

        add(inputFieldList.get(0));
        addAddInputFieldMarkup();
    }

    /**
     * Adds an "add" button.
     */
    private void addAddInputFieldMarkup()
    {
        Button addInputButton = new Button(this.addInputButtonIdName + numInputs);
        addInputButton.add(new AjaxFormComponentUpdatingBehavior("onclick"){

            private static final long serialVersionUID = 1L;

            @Override
            protected void onUpdate(AjaxRequestTarget target) 
            {
                numInputs++;

                inputFieldList.add(new TextField<T>("input" + numInputs));

                target.add(MultiTextInput.this);
            }

        });
    }

    /**
     * Adds a "remove" button.
     */
    private void addRemoveInputFieldMarkup()
    {
        Button removeInputButton = new Button(this.removeInputButtonName + numInputs);
        removeInputButton.add(new AjaxFormComponentUpdatingBehavior("onclick"){

            private static final long serialVersionUID = 1L;

            @Override
            protected void onUpdate(AjaxRequestTarget arg0)
            {
                // TODO Auto-generated method stub

            }

        });
    }


}

正如我所说，我只是习惯于考虑制作Wicket组件。我对OO有很多经验，但对wicket并不特别。感谢您的帮助和指导！

Answer 1

我想实现所需行为的最简单方法是使用List支持的ListView。只需在按下添加/删除按钮后重新加载。

这是一个代码涂鸦（未经测试）

public abstract class MultiTextPanel<T> extends Panel {

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

    final Form<ArrayList<T>> multiTextForm = new Form<ArrayList<T>>("multiTextForm", model);
    add(multiTextForm);

    final ListView<T> listView = new ListView<T>("listView", model) {

        @Override
        protected void populateItem(final ListItem<T> item) {
            // TODO Auto-generated method stub
            TextField<T> textField = new TextField<T>("textField", item.getModel());
            add(textField);

            AjaxSubmitLink removeButton = new AjaxSubmitLink("removeButton", multiTextForm) {

                @Override
                protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
                    multiTextForm.getModelObject().remove(item.getModelObject());
                    target.addComponent(multiTextForm);
                }

                @Override
                protected void onError(AjaxRequestTarget target, Form<?> form) {
                    //errors should be ignored, we shoudlnt validate in our form, so this shouldnt happen anyway
                    multiTextForm.getModelObject().remove(item.getModelObject());
                    target.addComponent(multiTextForm);
                }

            };              
            add(removeButton);

        }

    };
    add(listView);

    AjaxSubmitLink addButton = new AjaxSubmitLink("addButton", multiTextForm) {

        @Override
        protected void onError(AjaxRequestTarget target, Form<?> form) {
            //errors should be ignored, we shoudlnt validate in our form, so this shouldnt happen anyway
            multiTextForm.getModelObject().add(createNewT());
            target.addComponent(multiTextForm);
        }

        @Override
        protected void onSubmit(AjaxRequestTarget target, Form form) {
            multiTextForm.getModelObject().add(createNewT());
            target.addComponent(multiTextForm);
        }
    };
    add(addButton);



}

public abstract T createNewT();}

基本的HTML：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en" lang="en">
<wicket:panel>
    <form wicket:id="multiTextForm">
        <wicket:container wicket:id="listView">
            <input type="text" wicket:id="textField" />
            <a wicket:id="removeButton">-</a>
        </wicket:container>
    </form>
    <a wicket:id="addButton">+</a>
</wicket:panel>

我对此做的唯一特殊事情就是在ListView周围放置一个表单，这样我们就可以在我们创建的Panel中提交（在这个阶段很可能不需要验证）应该以保存屏幕的形式完成。

此实现的缺点是您将始终重新加载完整的表单，因此会产生大量开销。只添加/删除了1行，但重新渲染了n（ - / +）1。

构建可重用的Wicket组件

1 个答案: