Using displaying images when using CheckBoxListView

[SuperSloMo]

I am working on an application that is very similar to the ImageChooser/AdvancedListView demo. I would like to associate checkboxes with each of the images so that if a user clicks on an image itself, the image's metadata is displayed in a pane, and if the user checks the boxes of one or more images and clicks on a "Download" button, the checked images are downloaded to the user's computer.

In the source code for the ListView and AdvancedListView demos, a Javascript native function called getTemplate is used to indicate how the image and its name should be displayed in the ListView. In the source code for the CheckBoxListView demo, there is no getTemplate function, and the images are not displayed in the ListView. Is there a way to use both the CheckBoxListView and the getTemplate function to display images with checkboxes, or is there no way to access the checkboxes that are generated by CheckboxListView in the getTemplate function's Javascript code in the way that {name} and {path} are accessed?

If CheckBoxListView and the getTemplate technique can not be used together, what would be the right way to use getTemplate to display an image, its name and a checkbox in ListView and be able to detect which images' checkboxes are checked when the user clicks on the Download button? Thanks.

[sven]

You can set an own template on the CheckBoxListView too. Just make sure you also render a checkbox in the template.

[SuperSloMo]

Thanks. If I add an <input type="checkbox" ... /> tag to the getTemplate function's return string, what attributes in the tag do I have to use to make it all work correctly with a CheckBoxListView? And I assume I should put it like this:


private native String getTemplate() /*-{
return ['<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<input type="checkbox" .... />',
'<div class="thumb"><img src="{file}" title="{name}"></div>',
'<span class="x-editable">{name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'].join("");
}-*/;

Is that right?

[sven]

Take a look at the default template. Something like
<input class="x-view-item-checkbox" type="checkbox" />