GWT (Cell Widgets): CheckBoxes with Labels in CellList - gwt

Question

I want to build a CheckBox List like...
|===========|
| x label0 |
| x label1 |
| x label2 |
|===========|
...using CellList and I've done the following:
final List<Boolean> checks = Arrays.asList(true, false, true, true, false);
final CheckboxCell checkboxCell = new CheckboxCell();
final CellList<Boolean> checkBoxCellList = new CellList<Boolean(checkboxCell);
checkBoxCellList.setRowData(checks);
...so I get:
|=======|
| x |
| x |
| x |
|=======|
But how can I supply not only the value of a CheckBox (Boolean) but also its
label like it's possible with
CheckBox#setText("label0")
CheckBox#setValue(true)
?

Answer 1

I have done a similar thing for CellTable. So maybe SOMETHING like this will work. You need to provide your own render() method. So in the render() method below, you can add whatever you want.
Column<MyJSONObject, String> selectCheckBoxColumn =
new Column<MyJSONObject, String>(new MyCheckBoxCell()) {
#Override
public String getValue(MyJSONObject object) {
return object.getInternalId() + SEPERATOR + "true";
}
};
MyCellTable.addColumn(selectCheckBoxColumn, "Display title");
.....
.....
.....
private class MyCheckBoxCell extends AbstractCell<String> {
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
// ##############################################
String[] values = value.split(SEPERATOR);
// NOW values[0] contains the string value
// AND values[1] contains the boolean value
// ##############################################
sb.appendHtmlConstant("<input type='checkbox' name='" + htmlDOMId1 + "'" +
" id='" + htmlDOMId1 + "'" +
" value='" + value + "'" +
"></input>");
}
}

Answer 2

I know this question is old but I've just done this, so thought I would provide an answer anyway.
A CellList can only hold a vertical list of a single cell type. If you want to have a Checkbox in there, along with some other data, you need to build a custom cell and extend CompositeCell, which will combine and render multiple cells inside a single cell. You can see this in action here in the GWT Showcase (the innermost cell in the CellTree).
So your code should look something like this:
// first make a list of HasCell type - MyClass is the type of object being displayed in the CellList (could be String for simple labels)
List<HasCell<MyClass, ?>> hasCells = new ArrayList<HasCell<MyClass, ?>>();
// then add your checkbox cell to it
hasCells.add(new HasCell<MyClass, Boolean>()
{
private CheckboxCell cell = new CheckboxCell(true, false);
public Cell<Boolean> getCell()
{
return cell;
}
public FieldUpdater<MyClass, Boolean> getFieldUpdater()
{
return null;
}
#Override
public Boolean getValue(MyClass object)
{
return selectionModel.isSelected(object);
}
});
// then add your TextCell
hasCells.add(new HasCell<MyClass, MyClass>()
{
private TextCell cell = new TextCell(myString);
#Override
public Cell<MyClass> getCell()
{
return cell;
}
public FieldUpdater<MyClass, MyClass> getFieldUpdater()
{
return null;
}
public MyClass getValue(MyClass object)
{
return object;
}
});
// now construct the actual composite cell using the list (hasCells)
Cell<MyClass> myClassCell = new CompositeCell<MyClass>(hasCells)
{
#Override
public void render(Context context, MyClass value, SafeHtmlBuilder sb)
{
sb.appendHtmlConstant("<table><tbody><tr>");
super.render(context, value, sb);
sb.appendHtmlConstant("</tr></tbody></table>");
}
#Override
protected Element getContainerElement(Element parent)
{
// Return the first TR element in the table.
return parent.getFirstChildElement().getFirstChildElement().getFirstChildElement();
}
#Override
protected <X> void render(Context context, MyClass value, SafeHtmlBuilder sb, HasCell<MyClass, X> hasCell)
{
// this renders each of the cells inside the composite cell in a new table cell
Cell<X> cell = hasCell.getCell();
sb.appendHtmlConstant("<td>");
cell.render(context, hasCell.getValue(value), sb);
sb.appendHtmlConstant("</td>");
}
};
// then make the actual cellList, passing the composite cell
myList = new CellList<MyClass>(myClassCell);
// add selectionModel, making sure to pass in a checkBoxManager as a second parameter, or the selectionModel will not work
myList.setSelectionModel(selectionModel, DefaultSelectionEventManager.<MyClass> createCheckboxManager());
// construct a dataProvider for dynamic editing of the list (alternative to list.setRowData())
dataProvider = new ListDataProvider<MyClass>(data);
// associate the dataProvider with the CellList
dataProvider.addDataDisplay(myList);

Answer 3

The easiest way to do this is to use a CellTable and dont add column headings (so it looks like a CellList)
Have a column for the checkbox (using CheckBoxCell) and have a column for your other data.
This is the cleanest way. No mucking around with your own custom cells with html-checkboxes inside of them.
This also works well with things like having a MultiSelectionModel on the cell table to get the values of the checkboxes.

Answer 4

A GWT book I'm reading has an example of this, except the author uses a vertical panel with checkboxes in the panel. With a little styling, you have a listbox look