Fancy UI

All About Crazy IT Stuff

How to skin a GWT CellTable

with 20 comments

In this article I’m going to show you how to customize the look and feel of a CellTable using CSS and ClientBundle API of GWT. I assume that you already familiar with CSS and ClientBundle, if not visit : http://goo.gl/s8xfH.

Below the final look and feel of the table :

First you need to create a CSS file on you resources package, this file will override the default CSS classes used by GWT, here you put your custom CSS code to change the L&F of your table, visit http://goo.gl/nVbIu to get the list of all classes used to skin the CellTable.

@def selectionBorderWidth 2px;
.cellTableWidget {}
.cellTableFirstColumn {}
.cellTableLastColumn {}
.cellTableFooter {}
.cellTableHeader {}
.cellTableCell {}
.cellTableFirstColumnFooter {}
.cellTableFirstColumnHeader {}
.cellTableLastColumnFooter {}
.cellTableLastColumnHeader {}
.cellTableSortableHeader {}
.cellTableSortableHeader:hover {}
.cellTableSortedHeaderAscending {}
.cellTableSortedHeaderDescending {}
.cellTableEvenRow {}
.cellTableEvenRowCell {}
.cellTableOddRow {}
.cellTableOddRowCell {}
.cellTableHoveredRow {}
.cellTableHoveredRowCell {}
.cellTableKeyboardSelectedRow {}
.cellTableKeyboardSelectedRowCell {}
.cellTableSelectedRow {}
.cellTableSelectedRowCell {}
.cellTableKeyboardSelectedCell {}
@sprite .cellTableLoading {}

Now that you know all CSS classes, all you have to do is to put your custom CSS code, if you don’t redefine a certain CSS class it will use its default L&F.

Below the CSS code I wrote to achieve the L&F shown earlier :

.cellTableHeader {
padding: 0px;
color: #545454;
text-align: center;
font-size: 13px;
background-image: none;
background-color: #cfcfcf;
height: 25px;
vertical-align: middle;
font-weight: bold;
text-shadow: 0 1px 1px rgba(255,255,255,.7);
}
.cellTableFirstColumnHeader {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}
.cellTableLastColumnHeader {
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
}
.cellTableCell {
padding: 4px;
overflow: hidden;
font-size: 12px;
color: #454545;
}
.cellTableEvenRow {
background: #ffffff;
}
.cellTableOddRow {
background: #ECECEC;
}
.cellTableSelectedRow {
background: #628cd5;
}
.cellTableSelectedRowCell {
border: none;
}
.cellTableHoveredRow {
background: transparent;
}
.cellTableHoveredRowCell {
border: none;
}
.cellTableKeyboardSelectedRow {
background: #ffc;
}
.cellTableKeyboardSelectedRowCell {
border: none;
}
.cellTableKeyboardSelectedCell {
border: none;
}

After this we need to write our ClientBundle class that will use our custom CSS file and inject it to a given CellTable. This class must extend CellTable.Resources.

public interface TableRes extends CellTable.Resources {
@Source({CellTable.Style.DEFAULT_CSS, "org/test/resources/table.css"})
TableStyle cellTableStyle();

interface TableStyle extends CellTable.Style {}
}

Finally all we need to do now is to use this new L&F on a CellTable, on your UiBinder java class you need to write this :

public class TestUI extends Composite implements {

interface TestUIUiBinder extends UiBinder<Widget, TestUI> { }

...

//CellTable custom UI resource
private CellTable.Resources tableRes = GWT.create(TableRes.class);

//Create the CellTable with a custom L&F
@UiField(provided=true)
CellTable<Test> testTable = new CellTable<Test>(10, tableRes);

...
}

That’s all, you have now a fancy CellTable :-).

Advertisements

Written by imrabti

November 1, 2011 at 7:52 am

Posted in CSS, GWT

Tagged with , , , ,

20 Responses

Subscribe to comments with RSS.

  1. This post was helpful for me. Thanks!

    Justin

    December 15, 2011 at 3:23 am

  2. Very nice, I’ll definitely use this!

    You wouldn’t happen to have some blogpost planned on animations in gwt by any chance… 🙂

    Pete

    December 22, 2011 at 5:39 pm

  3. I have no knowledge about animations in GWT, but I have planned to discover how to use them.

    imrabti

    December 22, 2011 at 8:46 pm

  4. How were you able to add the filter row in the cell table?

    AK

    December 23, 2011 at 9:22 pm

    • It is not a filter ROW, it is a form to add new entries to the table. I Used the footer of the CellTable that’s it.

      imrabti

      December 25, 2011 at 9:54 am

  5. Good example. Clearly explained.

    Mike

    January 10, 2012 at 5:36 am

  6. Hi,
    I am using the similar example as explained above but my one celltable column contains Imagecell for uploading image from dialog box to column, so it works if I won’t right (provided=true) but now my custom stylesheet won’t work.
    If I again write (provided=true) custom stylesheet works but imagecell column won’t.
    I don’t know what’s the relation in behavior, can anyone help for how to get both working.

    Smit

    April 20, 2012 at 7:25 am

    • This is weird, I use ‘provided’ to construct the table with custom CSS resources.
      If you inspect the ImageCell column using Chrome inspector is it empty ?
      Perhaps there is an issue in Z-Index overlay ?

      imrabti

      April 20, 2012 at 9:36 am

  7. Hi, I am trying out this article,

    The style isn’t working at all. The cell table still come default style can you please provide a sample project with this style..

    Sibusiso

    April 23, 2012 at 9:10 am

    • Yes, I’ll try to add to this article a working example.

      imrabti

      April 27, 2012 at 10:02 am

  8. I can use my own css style but not working at all (for example the border of the cell is always sky-blue). Can you share a sample?

    Thanks 🙂

    javvarcar

    May 8, 2012 at 11:12 pm

  9. […] think that the approach I should take should be more similar to https://crazygui.wordpress.com/2011/11/01/how-to-skin-a-gwt-celltable/. Adapting their code to a CellBrowser instead of a CellTable I’m […]

  10. Hello,

    Thank you for this detailed example. How to do if I have different tables with different styles?

    John Tset

    June 11, 2012 at 2:05 pm

  11. I saw your own css file is located at org/test/resources/table.css. What if my css file is put in WAR file which is the same level as src files. For example, my interface file is put in myproject/src/org/test/javafile. my table.css is put in myproject/war/table.css. How can I write the file path for this?

    Joey

    July 9, 2012 at 1:04 am

    • Because of the ClientBundle the css files have to be on Classpath, you can’t put them on the WAR.

      You can put them on the resource file inside main if you use MAVEN.

      imrabti

      July 9, 2012 at 8:37 am

  12. Nice stuff man!…. It can be little more customised but this can help out for a start.

    Vamsi Abishek

    August 17, 2012 at 5:43 pm

  13. Thank you so much… This stuff helped me a lot. and I want to apply my own images for the simple pager instead of the simple buttons that gwt has given defaultly… Please send me regarding info…

    Siddarth

    March 5, 2013 at 10:10 am

  14. Was this CellTable created using UiRenderer?

    I’ve seen your post
    https://crazygui.wordpress.com/2012/11/26/writing-custom-cellrenderer-using-the-declarative-new-gwt-2-5-uirenderer/
    and I liked it very much.

    I was wondering if it’s possible to implement a UiRenderer for creating a CellTable like this one.

    D. Reinert

    May 9, 2013 at 12:39 pm

    • No it is a different tutorial, to demonstrate how to use UiRenderer.

      imrabti

      May 9, 2013 at 4:38 pm

      • Will you post one? I really would like to learn how to build a CellTable or DataGrid using UiRenderer!

        D. Reinert

        May 9, 2013 at 4:47 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: