Question

我正在编写一个简单的面板，使用ListView呈现上传的图像及其替代文字。我能够显示上传的图像以及来自数据库的alt文本，但我找不到通过TextFields更新alt文本的解决方案。

这是用于呈现数据的模型，按预期工作：

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的{{1}}。有关如何更新ListView字段的任何想法吗？

编辑： Tom要求提供完整的Java类和HTML页面。

Java类：

altText

HTML：

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;
    }
}

编辑2：更新了代码，ListView现在包含在表单中。

Java类：

<!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>

}

HTML：

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;
}

Answer 1

如果我理解正确，您希望显示每个带有文本字段的图像列表，以编辑其alt文本并将其存储在数据库中。在您发布的代码中，您必须更改以下内容：

用表单包围整个列表。目前，输入字段不是表单的一部分，因此用户输入不能发布到服务器端Wicket代码。在您的设置中，将添加整个列表视图，而不是父面板。
实现form.onSubmit（）。在onSubmit（） - 方法中，您可以通过singleImage.getAltText（）访问输入文本字段的值并存储在数据库中。

Wicket：通过ListView中的TextFields更新模型

1 个答案: