Example: New way to do headings in datatable
I had a situation where I wanted a datatable to have different style headings than the standard. It seems there is very little control over this, other than creating a new theme. The trouble there is that the theme applies to all tables, while I just want one table different.
In particular, I wanted much smaller fonts, and a more standard look where the headings look like the rest of the data, except that the colors are different, and maybe the headings are in bold. However, this example will allow a great degree of control over headings.
The basic idea is not to use the built in headings at all. Instead, add a second rowgroup that will act as the headings. Then all the control that you have over the contents and style of data rows will be available to control these "headings".
Disclaimer: I haven't tried this with pagination turned on, since this didn't apply in my case.
Anyway, start with a table that works the way you want. Go into the table layout, and delete all the headings, so that the entire heading row dissappears.
Now add a row group to the table. The way I did it was to right click on the table in the outline, and select add row group. It will go to the bottom of the table. If you want the headings on top, drag the new rowgroup above the old one in the outline (or in the .jsp file). Don't worry that the design view didn't change. If it bothers you, you can right click in the design view, choose refresh, and the new rows will go on top.
Now all you need is a data provider for these rows. Of course, you don't want to use a real data provider that hits the database (although that would work, if it returned one row).
Take a look at the data that is displayed in the design window. It contains 5 rows of static data. If it only returned one, we could use that, but alas, there's no way to adjust this.
However, we can make our own defaultTableDataProvider. Start with the one provided in the source .zip files. It's in:
creator_install/rave2.0/docs/webui-src.zip.
This file contains a lot of source, which is a must read. The code we need is in DefaultTableDataProvider.java.
We need to add this to the project, with a different name (of course). I did this by adding an empty .java file name TitleTableDataProvider.java (right click on the project in the files view, select add empty java file), and cutting and pasting all the code. You'll need to change the class name and constructor to TitleTableDataProvider. You'll also see a loop with a counter set to 5. You should change this to 1 (unless you want multiple rows of headings). You don't actually need to touch anything else.
Now you have to create an instance of the dataprovider on the page. This is easily done with the following lines of code:
private TitleTableDataProvider titleTableDataProvider=new TitleTableDataProvider();
public TitleTableDataProvider getTitleTableDataProvider() {
return titleTableDataProvider;
}
public void setTitleTableDataProvider(TitleTableDataProvider dtdp) {
this.titleTableDataProvider = dtdp;
}
Now you're ready to use the provider. Look in your outline, under the page you're working on, and you should see: titleTableDataProvider, thanks to the magic of creator.
Go into the table layout for the rowgroup that will contain the headings, and change the provider to titleTableDataProvider. You should see the number of rows for the headings shrink to 1. Now for each column, set the value expression to be the heading you want. When you're done, you should see the table with your headings in the first row.
Now you can modify the style/class how you like. If you want to modify the background of the cells, the place to do this is in the tablecolumns under the new rowgroup. Adding this as a style works fine. If you put this in a class, don't forget to add !important, or the tablecolumn's class will win the class war.
If you want to change the font, this should be done in the static text for each column.
-
Some thoughts:
1) I don't know if this use of Sun's code violates their copyright notice, but it might. Perhaps a developer or someone can confirm/deny it. If it does, and Sun doesn't give permission, then I guess you could look at their code, close your eyes, count to 10, and rewrite it your own way.
2) You only need one TitleTableDataProvider.java, since it doesn't matter what data it returns. You will need to create an instance of it in any page that uses it. Alternately, you could instantiate it once in the session bean.
3) You could put dropdowns, pictures, or other stuff in the headings. I haven't tried it, but there's no reason it shouldn't work, since the heading row is effectively the same as any other.
4) Instead of using the dataprovider for headings, you could use this same approach, but have the TableDataProvider return actual data. You could then use the DataTable for data that didn't come from a DB.
5) There might be an easier way of creating a TableDataProvider. Perhaps one can be made from an array, in which case that would be the way to go, but I'm only a newbie, so I can only tell you what worked for me.
