FlexTable Styling

[Dan Casper]

I've found a couple of posts that seem to relate to the issue I'm
experiencing, but none that had a solution that made sense to me, so I
figure I'll ask my question and see where it goes.

I've got a FlexTable that I populate with various text entries and
widgets. For the text entries, I'd like to be able to define a style
so I can have uniform appearance across my pages. I believe the method
I'm wanting to call is myFlexTable.getColumnFormatter().setStyleName(0,
"myStyle") to format the first column in the table. This particular
method doesn't seem to do anything ... my styles are never reflected in
the table.

I've also tried using the getFlexCellFormatter() method to set the
style, and that also seems to have no effect.

I thought perhaps that the formatting would work better with an HTML
entry instead of a text entry, so I changed my table to
myFlexTable.setHTML(0, 0, "whatever text"); and then tried to apply the
style, and that also had no effect. I'm at a bit of a loss. I'm not
sure why I can't get the styles to apply to the FlexTable. I've been
able to do so with my StackPanels and TabPanels just fine.

Thanks for any input,

--Daniel

[mithrandir]

I think I better post a working example rather than explaining:

final FlexTable simFindingInfo = new FlexTable();
simFindingInfo.insertRow(0);

//set widgets in cells
simFindingInfo.setWidget(0, 0, widget1);
simFindingInfo.setWidget(0, 1, widget2);
.....

//layout
//first set table style
simFindingInfo.setStyleName("xx");

//set row style
simFindingInfo.getRowFormatter().setStyleName(0, "yy");

//set cell styles
final CellFormatter cf = simFindingInfo.getCellFormatter();
cf.addStyleName(0, 0, "zz");
cf.addStyleName(0, 1, "aa");

//then add table to some panel

--Daniel too :O)

[Dan Casper]

Still no dice on my side of things. This is a truncated version of the
code I'm using:

public Widget makeItemTable(final int item) {
itemTable[item] = new FlexTable();
//Row 1
itemTable[item].setHTML(0, 0, "a.");
itemTable[item].setText(0, 1, "Item Number: ");
itemNumber[item] = new TextBox();
itemNumber[item].setName("ItemNumber" + item);
itemTable[item].setWidget(0, 2, itemNumber[item]);
itemTable[item].setText(0, 4, "");
itemTable[item].setText(0, 5, "");
itemTable[item].getColumnFormatter().setWidth(0, "10");
itemTable[item].getColumnFormatter().setWidth(1, "125");
itemTable[item].getColumnFormatter().setWidth(2, "150");
itemTable[item].getColumnFormatter().setWidth(3, "150");
itemTable[item].getColumnFormatter().setWidth(4, "100");
itemTable[item].getColumnFormatter().setWidth(5, "200");

itemTable[item].setStyleName(".gwt-FlexTable");
itemTable[item].getColumnFormatter().setStyleName(0,
".gwt-FlexTable-Column");
return itemTable[item];
}

The code's a bit convoluted because I've got various arrays of widgets
that I use on demand to create the illusion of dynamic expandability,
but that part is all working properly. The getColumnFormatter() seems
to work fine for setting a width, but doesn't pick up styles at all.
I'm guessing it may be related to my having set up a function that
creates the tables on demand, but I don't see why that'd break the
styles.

Thanks for the suggestions. Ultimately, it's probably not a huge deal,
I'd just prefer it to have some styling for display purposes.
--Daniel

[Dan Casper]

For whatever reason, the period before the style I was attempting to
assign was what was preventing it from taking formats. I dropped it on
a whim, and my table formats. I don't have any idea why, but maybe it
will help someone else who's been fighting styles.

--Daniel

[Joel Webber]

The "." is special.  In CSS, it serves as a separator between element and class selectors, e.g.:

a.someClass { }

would only affect <a class='someClass> elements, whereas

.someClass { }

would affect all elements with this class name.  When you call UIObject.setClassName("someClass"), it sets the underlying element's class attribute, so you would not want to use a "." within it.  A bit confusing, I know, but I hope this helps a bit.

joel.