I have created a header class called StyledHeader. It has a styleName
property that mimics the base UIObject and is a space separated list
of class names. The header renders any parent content and then wraps
it in another div with the set of supplied classes. I also have a
similar class called StyledColumn that does the same for columns.
They are both generic and do not have specified types so they can be
extended. I'll paste them here as well as another extension
SortedHeader (based on the Expenses sample) that extends from
StyledHeader instead of Header. I hope someone finds it useful.
StyledHeader.java
---------------------------------------------------------------------------------------
public abstract class StyledHeader<H> extends Header<H>
{
/**
* {...@link SafeHtmlTemplates} for header rendering.
*/
interface Template extends SafeHtmlTemplates
{
@Template("<div class=\"{0}\">{1}</div>")
SafeHtml header(String classes, SafeHtml contents);
}
/** {...@link Template} instance. */
private static Template TEMPLATES = GWT.create(Template.class);
/** Style classes. */
private String styleName = "";
/**
* Construct a new StyledHeader.
*
* @param cell
* the {...@link Cell} responsible for rendering items in
the header
*/
public StyledHeader(Cell<H> cell)
{
super(cell);
}
/**
* Adds a style name to this object.
*/
public void addStyleName(String style)
{
styleName = StringUtils.addStyleName(styleName, style);
}
/**
* Removes a style name from this object.
*/
public void removeStyleName(String style)
{
styleName = StringUtils.removeStyleName(styleName, style);
}
/**
* Returns all of the object's style names, as a space-separated
list.
*
* @return the objects's space-separated style names
*/
public String getStyleName()
{
return styleName;
}
@Override
public void render(SafeHtmlBuilder sb)
{
/* create an html builder and render parent contents into it
*/
SafeHtmlBuilder contents = new SafeHtmlBuilder();
super.render(contents);
/* render wrapped contents */
sb.append(TEMPLATES.header(styleName, contents.toSafeHtml()));
}
}
StyledColumn.java
---------------------------------------------------------------------------------------
public abstract class StyledColumn<T, C> extends Column<T, C>
{
/**
* {...@link SafeHtmlTemplates} for header rendering.
*/
interface Template extends SafeHtmlTemplates
{
@Template("<div class=\"{0}\">{1}</div>")
SafeHtml cell(String classes, SafeHtml contents);
}
/** {...@link Template} instance. */
private static Template TEMPLATES = GWT.create(Template.class);
/** Style classes. */
private String styleName = "";
/**
* Construct a new StyleColumn with a given {...@link Cell}.
*
* @param cell
* the Cell used by this Column
*/
public StyledColumn(Cell<C> cell)
{
super(cell);
}
/**
* Adds a style name to this object.
*/
public void addStyleName(String style)
{
styleName = StringUtils.addStyleName(styleName, style);
}
/**
* Removes a style name from this object.
*/
public void removeStyleName(String style)
{
styleName = StringUtils.removeStyleName(styleName, style);
}
/**
* Returns all of the object's style names, as a space-separated
list.
*
* @return the objects's space-separated style names
*/
public String getStyleName()
{
return styleName;
}
@Override
public void render(T object, ProvidesKey<T> keyProvider,
SafeHtmlBuilder sb)
{
/* create an html builder and render parent contents into it
*/
SafeHtmlBuilder contents = new SafeHtmlBuilder();
super.render(object, keyProvider, contents);
/* render wrapped contents */
sb.append(TEMPLATES.cell(styleName, contents.toSafeHtml()));
}
}
SortableHeader.java
---------------------------------------------------------------------------------------
/**
* A {...@link Header} subclass that maintains sorting state and displays
an icon
* to indicate the sort direction.
*/
public class SortableHeader extends StyledHeader<String> {
/**
* {...@link SafeHtmlTemplates} for header rendering.
*/
interface Template extends SafeHtmlTemplates {
@Template("<div style=
\"position:relative;cursor:hand;cursor:pointer;"
+
"padding-right:{0}px;\">{1}<div>{2}</div></div>")
SafeHtml sorted(int imageWidth, SafeHtml arrow, SafeHtml
contents);
@Template("<div style=
\"position:relative;cursor:hand;cursor:pointer;"
+ "padding-right:{0}px;\"><div
style=
\"position:absolute;display:none;"
+
"\"></div><div>{1}</div></div>")
SafeHtml unsorted(int imageWidth, SafeHtml contents);
}
/**
* Sort direction image resources.
*/
public static interface Resources extends ClientBundle {
ImageResource downArrow();
ImageResource upArrow();
}
/** {...@link Template} instance. */
private static Template TEMPLATES = GWT.create(Template.class);
/** {...@link Resources} instance. */
private static final Resources RESOURCES =
GWT.create(Resources.class);
/** Sort images width. */
private static final int IMAGE_WIDTH = 16;
/** Html for down arrow (ascending sort) image. */
private static final SafeHtml DOWN_ARROW =
makeImage(RESOURCES.downArrow());
/** Html for up arrow (descending sort) image. */
private static final SafeHtml UP_ARROW =
makeImage(RESOURCES.upArrow());
/** If <code>true</code> the current sort is descending, otherwise
<code>false</code>. */
private boolean reverseSort = false;
/** If <code>true</code> the header's column is sorted, otherwise
<code>false</code> it is not. */
private boolean sorted = false;
/** Header text. */
private String text;
/**
* Creates html for the supplied {...@link ImageResource image
resource}.
*
* @param resource image resource
* @return safe html for image
*/
private static SafeHtml makeImage(ImageResource resource) {
AbstractImagePrototype proto =
AbstractImagePrototype.create(resource);
String html = proto.getHTML().replace("style='",
"style='position:absolute;right:0px;top:0px;");
return SafeHtmlUtils.fromTrustedString(html);
}
/**
* Creates a new SortableHeader with the given text.
*
* @param text header text
*/
SortableHeader(String text) {
super(new ClickableTextCell());
this.text = text;
}
@Override
public String getValue() {
return text;
}
@Override
public void render(SafeHtmlBuilder sb) {
/* create an html builder and render parent contents into it
*/
SafeHtmlBuilder contents = new SafeHtmlBuilder();
super.render(contents);
/* render sort template */
if (sorted) {
sb.append(TEMPLATES.sorted(IMAGE_WIDTH, reverseSort ?
DOWN_ARROW :
UP_ARROW, contents.toSafeHtml()));
} else {
sb.append(TEMPLATES.unsorted(IMAGE_WIDTH,
contents.toSafeHtml()));
}
}
public boolean getReverseSort() {
return reverseSort;
}
public void setReverseSort(boolean reverseSort) {
this.reverseSort = reverseSort;
}
public void setSorted(boolean sorted) {
this.sorted = sorted;
}
public void toggleReverseSort() {
this.reverseSort = !this.reverseSort;
}
}
Regards,
Dawson
On Nov 10, 3:33 am, István Szoboszlai <[email protected]> wrote:
> Hello,
>
> I would need 2 functions in the new GWT 2.1 CellTable.
>
> 1. Multiple <tr>-f for table header.
> 2. Custom style for <th> component in the header. As I have seen in the
> code, there is no easy way. The method createHeaders(boolean isFooter) is
> private and can not appand custom stylename to the <th> component. I would
> really need to set the with of each colum specificly.
>
> Does any of you know any simple ways to accomplish these?
>
> Anyways the new Cell based components rock! Thank you GWT developers :)
>
> Any help is much appreciated.
>
> Thanks
> - István Szoboszlai
> [email protected] | inepex.com
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
