2

したがって、これはあまり一般的な質問ではありませんが、次の再利用可能な改札コンポーネントを構築できるように、アーキテクチャに関するいくつかのポインタを教えてくれる人がいることを期待していました。

これがskitchのラフスケッチです：

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

私は知っています、素晴らしい絵ですよね？したがって、基本的に、このフォームコンポーネント（これは使用するのに適切なクラスだと思います）を使用して、ユーザー定義の数の入力をフォームに追加します。ユーザーがTextInputFieldの横にある-ボタンを押すと、そのinputFieldが削除されます。+ボタンを押すと、新しい空白のフィールドが追加されます。明らかに、ユーザーがボタンをクリックしたときにコンポーネントがAJAXを使用してコンポーネントを更新する必要がありますが、私の問題はこれをどのように構成するかです。これは1つのクラスですか？2つ（1つはコンポーネント全体用、もう1つは-ボタン付きの入力フィールド用）、これを行うにはどのクラスを使用する必要がありますか？再利用を促進するために、オブジェクトをできるだけ一般的にしたいと思います。これが私がこれまでに持っているものです：

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について多くの経験がありますが、特に改札についてはそうではありません。助けと指示をありがとう！

4

1 に答える 1

1

目的の動作を実装する最も簡単な方法は、リストに基づく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>

これで私が行った唯一の特別なことは、リストビューの周りにフォームを配置して、作成したパネル内に送信できるようにすることです（検証はこの段階では必要ない可能性が高いため、次のフォームで行う必要があります。画面を保存します）。

この実装の欠点は、常に完全なフォームをリロードするため、多くのオーバーヘッドが発生することです。1行のみが追加/削除されますが、n（-/ +）1が再レンダリングされます。

于 2012-04-26T21:06:37.663 に答える