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 回答