2

を使用して、アップロードされた画像とその代替テキストをレンダリングする単純なパネルをコーディングしていListViewます。アップロードされた画像とデータベースからの代替テキストを表示できますが、を介して代替テキストを更新するソリューションが見つかりませんTextFields。

データを表示するためのモデルは次のとおりです。期待どおりに機能します。

this.listModel = new LoadableDetachableModel<Object>() {
    protected Object load() {
    ArrayList<SingleImage> images = SingleImageDao.getImagesByPageId(pageId);
    return images;
    }
};

そして、ここにsetListView()方法があります：

this.setListView(new ListView("imageListItem", this.listModel) {
    protected void populateItem(final ListItem item) {
    final SingleImage singleImage = (SingleImage) item.getModelObject();

    item.add(new AttributeModifier("id", singleImage.getId()));
    item.add(new Image("imageListItemImg",
        new ContextRelativeResource(uploadedImgDir
            + singleImage.getFileName())));

    final TextField altText = new TextField<String>("altText", new PropertyModel<String>(singleImage, "altText"));
    item.add(altText);
    }
});
this.listView.setReuseItems(true);

変更を保存するボタンもあります。

this.saveButton = new AjaxButton("saveButton") {
    @Override
    protected void onSubmit(AjaxRequestTarget target, Form form) {
    target.add(listContainer);
    }
};

listContainerをWebMarkupContainerラップするListViewです。altTextフィールドを更新する方法はありますか?

編集:トムは完全な Java クラスと HTML ページを要求しました。

Java クラス:

public class ImageListPanel extends Panel {
    private final String uploadedImgDir = "img//uploaded//";
    private int pageId;
    private IModel<?> listModel = null;
    private ListView<?> listView = null;
    private WebMarkupContainer imageListContainer = null;
    private WebMarkupContainer listContainer = null;
    private Form<?> actionButtons = null;
    private AjaxButton saveButton = null;

    public ImageListPanel(String id, final int pageId) {
        super(id);
        this.pageId = pageId;

        this.listModel = new LoadableDetachableModel<Object>() {
            protected Object load() {
                ArrayList<SingleImage> images = SingleImageDao.getImagesByPageId(pageId);
                return images;
            }
        };

        this.setListView(new ListView("imageListItem", this.listModel) {
            protected void populateItem(final ListItem item) {
                final SingleImage singleImage = (SingleImage) item.getModelObject();

                item.add(new AttributeModifier("id", singleImage.getId()));
                item.add(new Image("imageListItemImg",
                    new ContextRelativeResource(uploadedImgDir
                        + singleImage.getFileName())));
                final TextField altText = new TextField<String>("altText", new PropertyModel<String>(singleImage, "altText"));
                item.add(altText);
            }
        });

        this.listView.setReuseItems(true);

        this.imageListContainer = new WebMarkupContainer("imageListContainer");
        this.listContainer = new WebMarkupContainer("listContainer");
        this.setActionButtons(new Form<Void>("actionButtons"));
        this.saveButton = new AjaxButton("saveButton") {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                target.add(listContainer);
                listContainer.add(new AttributeModifier("class", "passive"));
            }
        };
        this.imageListContainer.setOutputMarkupId(true);
        this.listContainer.setOutputMarkupId(true);
        add(this.imageListContainer);
        this.imageListContainer.add(this.listContainer);
        this.listContainer.add(this.listView);
        this.listView.setOutputMarkupId(true);
        this.getActionButtons().setOutputMarkupId(true);
        this.getActionButtons().add(this.saveButton);
        this.imageListContainer.add(this.getActionButtons());
    }

    public int getPageId() {
        return pageId;
    }

    public void setPageId(int pageId) {
        this.pageId = pageId;
    }

    public WebMarkupContainer getListContainer() {
        return listContainer;
    }

    public void setListContainer(WebMarkupContainer listContainer) {
        this.listContainer = listContainer;
    }

    public ListView<?> getListView() {
        return listView;
    }

    public void setListView(ListView<?> listView) {
        this.listView = listView;
    }

    public Form<?> getActionButtons() {
        return actionButtons;
    }

    public void setActionButtons(Form<?> actionButtons) {
        this.actionButtons = actionButtons;
    }
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd"
    xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <wicket:panel>
        <div wicket:id="imageListContainer" id="image-list-container">
            <div wicket:id="listContainer" id="imagesContainer">
                <ul id="sortable">
                    <li wicket:id="imageListItem" class="img-list-item">
                        <img wicket:id="imageListItemImg" class="thumbnail" />
                        <input wicket:id="altText" class="altText" type="text" size="40" />
                    </li>
                </ul>
            </div>
            <form wicket:id="actionButtons">
                <p>
                    <input wicket:id="saveButton" id="saveButton" type="submit" value="Save" />
                </p>
            </form>
        </div>
    </wicket:panel>
</body>
</html>

編集 2:コードが更新され、ListView がフォーム内にラップされるようになりました。

Java クラス:

public class ImageListPanel extends Panel {
private final String uploadedImgDir = "img//uploaded//";
private int pageId;
private IModel<?> listModel = null;
private ListView<?> listView = null;
private WebMarkupContainer imageListContainer = null;
private WebMarkupContainer listContainer = null;

public ImageListPanel(String id, final int pageId) {
    super(id);
    this.pageId = pageId;

    this.listModel = new LoadableDetachableModel<Object>() {
        protected Object load() {
            ArrayList<SingleImage> images = SingleImageDao.getImagesByPageId(pageId);
            return images;
        }
    };

    this.setListView(new ListView("imageListItem", this.listModel) {
        protected void populateItem(final ListItem item) {
            final SingleImage singleImage = (SingleImage) item.getModelObject();

            item.add(new AttributeModifier("id", singleImage.getId()));
            item.add(new Image("imageListItemImg",
                new ContextRelativeResource(uploadedImgDir
                    + singleImage.getFileName())));
            final TextField altText = new TextField<String>("altText", new PropertyModel<String>(singleImage, "altText"));
            item.add(altText);
        }
    });

    this.listView.setReuseItems(true);
    Form formListView = new Form("formListView", this.listModel) {
        protected void onSubmit() {
            ArrayList<SingleImage> images = (ArrayList<SingleImage>) listModel.getObject();
            for (SingleImage singleImage : images) {
                System.out.println(singleImage.getAltText());
            }
        };
    };



    this.imageListContainer = new WebMarkupContainer("imageListContainer");
    this.listContainer = new WebMarkupContainer("listContainer");
    this.imageListContainer.setOutputMarkupId(true);
    this.listContainer.setOutputMarkupId(true);
    add(this.imageListContainer);
    this.imageListContainer.add(this.listContainer);
    //this.listContainer.add(this.listView);
    this.listContainer.add(formListView);
    formListView.add(this.listView);
    this.listView.setOutputMarkupId(true);
}

public int getPageId() {
    return pageId;
}

public void setPageId(int pageId) {
    this.pageId = pageId;
}

public WebMarkupContainer getListContainer() {
    return listContainer;
}

public void setListContainer(WebMarkupContainer listContainer) {
    this.listContainer = listContainer;
}

public ListView<?> getListView() {
    return listView;
}

public void setListView(ListView<?> listView) {
    this.listView = listView;
}

}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd"
    xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <wicket:panel>
        <div wicket:id="imageListContainer" id="image-list-container">
            <div wicket:id="listContainer" id="imagesContainer">

                <form wicket:id="formListView">
                    <ul id="sortable">
                        <li wicket:id="imageListItem" class="img-list-item">
                            <img wicket:id="imageListItemImg" class="thumbnail" />
                            <input wicket:id="altText" class="altText" type="text" size="40" />
                        </li>
                    </ul>
                </form>
                <input type="submit" value="submit" />
            </div>
        </div>
    </wicket:panel>
</body>
</html>
4

1 に答える 1

2

私の理解が正しければ、代替テキストを編集してデータベースに保存するためのテキスト フィールドを含む画像のリストを表示する必要があります。投稿したコードでは、次を変更する必要があります。

  • リスト全体をフォームで囲みます。現在、入力フィールドはフォームの一部ではないため、ユーザー入力をサーバー側の Wicket コードに投稿することはできません。あなたのセットアップでは、リストビュー全体が親パネルの代わりにフォームから追加されます。
  • form.onSubmit() を実装します。onSubmit() メソッドでは、singleImage.getAltText() を介して入力テキスト フィールドの値にアクセスし、データベースに保存できます。
于 2013-06-22T10:27:21.470 に答える