Pages

Saturday, December 19, 2009

How to change default style sheets of table visualization of Google in GWT

I was really confused in this case. Style Sheets is a core part of the GUI components. So it should be related to the GUI. In google visualization model there is data source an the visualizer. First of all you have to put all the data in your data table. then you can use this single data table with all kind of visualizer from google. in special case you have to use data view which similar to the view concept in database. So we were talking about the styling of a table visualization to be more specific styling of a cell of the table. You will get this "how to" in lots of places for javascript. But I was looking for GWT.

Lets go step by step:

  1. You have to do this in data table.
    1. create the data table
      1. DataTable dt = DataTable.create();
        dt.addColumn(ColumnType.STRING, "Person");
        dt.addColumn(ColumnType.NUMBER, "Salary");
    2. Add few rows
      1. dt.addRows(5);
                dt.setValue(0, 0, "Iftee");
                dt.setValue(0, 1, 123);
                dt.setValue(1, 0, "Ove");
                dt.setValue(1, 1, 321); Look we have used the setvalue(...) here. But there is another function to that is setcell(....) which takes another two extra parameters.
      2. dt.setCell(2, 0, "test", "Hello test", getCellProp());
                dt.setCell(2, 1, 100, "$100", getCellProp());
      3. "Hello test" and "$100" is the formatted value of the for table. that means your underlying data table will contain "test" but the table will show "Hello test". Same for 100 and $100
      4. It take the last parameter a Properties object, which in fact a JavaScriptObject(JSO). So you cant create it on JAVA. You have to make a JSNI (Javascript Native Interface) function to get the JSO.
      5. Signature of the function is like  public native Properties getCellProp();
      6. The JavaScript implementation of this table visualization help me a lot to write the body of this JSNI function. it is like
        1.  /*-{
                  var cssClassNames = {'className': 'bigAndBoldClass'};
                return cssClassNames;
              }-*/; which is pure javascript. Here className is the property name and bigAndBoldClass is the property valu
      7. Now you will need to add a CSS to your GWT project write a class named bigAndBoldClas. ANd then include the CSS in the module
Now you can style any of the cells of your table

No comments:

Post a Comment