java - Wicket:通过 ListView 中的 TextFields 更新模型

Question

我正在编写一个简单的面板，该面板使用 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 是包装 ListView 的 WebMarkupContainer。关于如何更新 altText 字段有什么想法吗？

编辑: Tom 要求提供完整的 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 现在包装在 Form 内。

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>

Answer 1

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

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