How can I add an image column to a table in wicket framework?
Question
I want to add a column containing images in each cell of a table in wicket framework. I make the table in a java class and have a createColumns() method as the following:
private List<IColumn> createColumns() {
List<IColumn> columns = new ArrayList<IColumn>();
// Create the columns that will be displayed, second param is the sort
// order
// Use column position for aggregate functions
// Otherwise the query uses column aliases so these need to match here
columns.add(new PropertyColumn(new Model("Status"), "code") {
private static final long serialVersionUID = 1L;
@Override
public void populateItem(Item item, String componentId, IModel model) {
Object[] values = ((ArrayWrapper) model.getObject()).getArray();
setStatus((Integer) values[0]);
item.add(new Image(componentId, new ResourceReference(this.getClass(), getStatus())));
}
});
columns.add(new PropertyColumn(new Model("First"), "2", "array[1]"));
columns.add(new PropertyColumn(new Model("Last"), "3", "array[2]"));
columns.add(new PropertyColumn(new Model("Sender"), "sender",
"array[4]"));
columns.add(new PropertyColumn(new Model("Receiver"), "receiver",
"array[5]"));
columns.add(new HeaderlessColumn() {
private static final long serialVersionUID = 1L;
public void populateItem(Item cellItem, String componentId,
IModel rowModel) {
cellItem.add(new ActionPanel(componentId, rowModel));
};
});
return columns;
}
The html file is simply as the following:
<html xmlns:wicket="http://wicket.sourceforge.net/">
<body>
<wicket:extend>
<table align="center" wicket:id="results"></table>
</wicket:extend>
</body>
</html>
But I get an exception which is:
org.apache.wicket.markup.MarkupException: Component cell must be applied to a tag of type 'img', not '' (line 0, column 0)
And it's related to the lines that I make the column for image. Can anyone help me how I can make it?
2 answers
solution1
5 2011-09-29 08:34:06
Use an AbstractColumn instead of a PropertyColumn . PropertyColumn is suitable if you only need to specify a property name, as you would do with a PropertyModel .
From this discussion in the Wicket users list, DataTable outputs this markup:
<tbody>
<tr wicket:id="rows">
<td wicket:id="cells">
<span wicket:id="cell">[cell]</span>
</td>
</tr>
</tbody>
Note that IColumn implements ICellPopulator , and it is ICellPopulator#populateItem() that is overriden in AbstractColumn .
So, whatever you come up with in populateItem should be ok if associated with a <span> in markup. PropertyColumn might be doing it with a Label, and you should be fine adding a custom Panel or WebMarkupContainer which will contain your Image .
This is a slightly related question: How do you make a link inside a PropertyColumn in Wicket?
solution2
1 ACCPTED 2011-10-05 09:33:40
The code in CreateColumns method is as the following:
columns.add(new PropertyColumn(new Model("Status"), "code") {
private static final long serialVersionUID = 1L;
@Override
public void populateItem(Item item, String componentId, IModel model) {
Object[] values = ((ArrayWrapper) model.getObject()).getArray();
setStatus((Integer) values[0]);
item.add(new ImagePanel(componentId, new ResourceReference(SearchResults.class, getStatus())));
}
});
And this is the ImagePanel:
public class ImagePanel extends Panel {
private static final long serialVersionUID = 1L;
/**
* @param id
*/
public ImagePanel(String id, ResourceReference image) {
super(id);
add(new Image("status", image));
}
}
The html code for the panel is:
<html xmlns:wicket="http://wicket.sourceforge.net/">
<body>
<wicket:panel>
<img wicket:id="status"/>
</wicket:panel>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.