Thursday, November 3, 2011

Re: Dynamic row/cell colors in CellTable

Okay, I think I "solved" it though there is probably a better way, I'm
guessing. In my case I'm just trying to render a table; I do not need
dynamic coloring *after* the table is shown (e.g. I'm not rendering
stock prices which might be colored red or green as the price goes
down or up), so I just needed the colors while the table is being
created. Setting the colors on the rows don't seem to work because the
element count of the table is 0 until it's fully rendered.

The way I did it is to add two more members to the data type class,
foreColor and backColor. Then when I'm setting the columns, I use the
SafeHtmlBuilder to wrap the values in a div with a separate style tag.
Here's the code (based on the GWT CellTable example):

public class GWTCellTableColors implements EntryPoint
{
// A simple data type that represents a contact.
private static class Contact
{
private final String address;
private final String name;
private final String foreColor;
private final String backColor;

public Contact(String name, String address, String foreColor, String
backColor)
{
this.name = name;
this.address = address;
this.foreColor = foreColor;
this.backColor = backColor;
}
}

// The list of data to display.
private static List<Contact> CONTACTS = Arrays.asList(new
Contact("John",
"123 Fourth Road",
"FF0000",
"000000"),
new Contact("Mary",
"222 Lancer Lane",
"7cd24d",
"5200a4"),
new Contact("Zander",
"94 Road Street",
"7cd24d",
"5200a4"));

public void onModuleLoad()
{
final SafeHtmlCell coloredCell = new SafeHtmlCell();

// Create a CellTable.
CellTable<Contact> table = new CellTable<Contact>();

Column<Contact, SafeHtml> nameColumn = new Column<Contact,
SafeHtml>(coloredCell)
{

@Override
public SafeHtml getValue(Contact object)
{
SafeHtmlBuilder sb = new SafeHtmlBuilder();
sb.appendHtmlConstant("<div style='color: #" + object.foreColor
+ "; background-color: #"
+ object.backColor
+ ";'>");
sb.appendEscaped(object.name);
sb.appendHtmlConstant("</div>");

return sb.toSafeHtml();
}

};

// Make the name column sortable.
nameColumn.setSortable(true);

// Create address column.

Column<Contact, SafeHtml> addressColumn = new Column<Contact,
SafeHtml>(coloredCell)
{

@Override
public SafeHtml getValue(Contact object)
{
SafeHtmlBuilder sb = new SafeHtmlBuilder();
sb.appendHtmlConstant("<div style='color: #" + object.foreColor
+ "; background-color: #"
+ object.backColor
+ ";'>");
sb.appendEscaped(object.address);
sb.appendHtmlConstant("</div>");

return sb.toSafeHtml();
}

};

// Add the columns.
table.addColumn(nameColumn, "Name");
table.addColumn(addressColumn, "Address");

// Create a data provider.
ListDataProvider<Contact> dataProvider = new
ListDataProvider<Contact>();

// Connect the table to the data provider.
dataProvider.addDataDisplay(table);

// Add the data to the data provider, which automatically pushes it
to
// the
// widget.
List<Contact> list = dataProvider.getList();
for (Contact contact : CONTACTS)
{
list.add(contact);
}

// Add a ColumnSortEvent.ListHandler to connect sorting to the
// java.util.List.
ListHandler<Contact> columnSortHandler = new
ListHandler<Contact>(list);
columnSortHandler.setComparator(nameColumn, new
Comparator<Contact>()
{
public int compare(Contact o1, Contact o2)
{
if (o1 == o2)
{
return 0;
}

// Compare the name columns.
if (o1 != null)
{
return (o2 != null) ? o1.name.compareTo(o2.name) : 1;
}
return -1;
}

});
table.addColumnSortHandler(columnSortHandler);

// We know that the data is sorted alphabetically by default.
table.getColumnSortList().push(nameColumn);

// Add it to the root panel.
RootPanel.get().add(table);
}
}

Hope this helps anyone else who has this problem; I know it's probably
not the "right" way to do it, but it seems to be working so far for
me.

On Nov 3, 10:41 am, tachoknight <tachokni...@gmail.com> wrote:
> Hi all-
>
> I am trying to set the colors of a row in a CellTable dynamically,
> without CSS. The reason is that the user can choose the color that she
> wants to see the results in (hot pink text on red? Sure, no
> problem...) and I have found no way to do this; it's easy to to use a
> RowStyles class for when you need to dynamically set the row color,
> but it seems to only work by returning references to the existing CSS
> file; I want to return a string with an actual hex value.
>
> Thanks for any info!

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

No comments:

Post a Comment