Thursday, April 27, 2006

Get Some Style

In general, I have been working on proof of concept technical details in my BIRT reports. I figured that if I could get it to work, someone else would make it look good (typical developer). At the MySql conference I had the opportunity to present to the MySql users about BIRT, and I wanted my reports to look good. Not only that I wanted to make them look good quickly.

So I have a simple tabular report that looks like this:


What I would like to do is format it to make it distinctive. I also want to do that in as few operations as possible. The slowest way that I could do it would be to go through the property editor setting properties on each of the controls.


Clearly the property editor works, but it involves a lot of mouse clicks. So the next approach would be to create Styles and apply the style to each row. This technique is significantly faster, but it is still not fast enough.

What I really want to do is just apply styles using Cascading Style Sheets. If you select the table element you will see that under Style one of the options is Import CSS. Seems like this would be a reasonable selection.

When you select this option, it brings you to a menu which has you select a CSS file and then gives you an option to select certain elements within the style sheet. Doing this will add style to your report as shown in the outline view.



Now if you do this, you can select each element (row, cell, etc.) and apply a style from your list of styles, but the styles that you import will not automatically be applied to your tables. This is because that the BIRT elements have standard names associated with each slot. In order for your style sheets to automatically be applied to elements in your report you have to use these standard names.

The only place I found this documented was in the PredefineStyle class of the model.metadata. I grabbed the JavaDoc comment here for your review:

BIRT defines a fixed set of predefined styles. These style correspond to certain report elements, or element slots. For example, there is a style * for chart, for list headers, for table footers and so on.


The set of predefined styles is part of the element design and is fixed
by the development team. Fixed properties of predefined styles includes the internal name and display name. However, the property values for the style are set in a design or template and are part of the design itself.

This class represents the invariant part of the predefined styles. It is used to create a style element within a new design.

Note that predefined styles are identified with an internal name of element name, slot name or their combination. For example, to select a list, use the "list" style. To select a list header, use the "list-header" style. Styles also
have a display name id which is used to get localized display name, but the internal name remains fixed across all locales. This ensures that a design created in one locale can be used in another.

So the way I read this, is if you use the invariant name of the pre-defined style than you do not need to go through the clicks of applying the style, your styles will be automatically adopted when you import the style. I tested this and when I used the appropriate names in my CSS, my report design changed from the unformatted text shown at the top of the screen to the following:

So I was able to do all of this in seven mouse clicks, I think that is getting really close. Now it is not perfect (don't shoot the messenger) but it is close.

The one major problem that I see with the current implementation is that you are not actually using the CSS when you do the import, instead you are making a copy of the CSS classes and id's into your report. This means that if you make a change to your CSS, that change will not be propogated to the reports. The only way to refresh your styles is to delete all of them and re-import the new styles.

It appears that the solution is to import the style into a library, then you should be able to use the library within your report. So far, I have not been able to get this to work, but it looks like there has been some on-going work in the 2.1 build that is aimed at addressing this. I will be testing the functionality in one of the next 2.1 builds and will report back if there are any changes.

If any one has had better luck with styles, please let me know.

Finally, in case you are unable to guess at the proper invariant style names, I have provided the names that I have used successfully.

.table-header
.table-detail
.table-footer
.table-group-header-1 (can be nested 1-9)
.table-group-footer-1 (can be nested 1-9)

Good luck,

Scott

13 comments:

Anonymous said...

hai

I am currently working on an application developed using java environment, with linux ES-4 as server and Websphere application server as processor licensee, kindly guide me how to install BIRT with the linux and WAS and how to genrate report dynamically from window system.

We have to generate multiple report

Jason Weathersby said...

You should be able to deploy the Web Viewer to this system as described on the BIRT site. You can build the report on Linux or Windows. There is a download for both. Getting the report should just be a URL.

Jason

Anonymous said...

Scott, i'm using now BIRT 2.1RC4 and it has an option to store styles in report library. It is available in library Outline as "Themes" item. You can copy styles into multiple themes in library. Then "use library" on some open report - theme dragged on Layout window will apply it's styles.

Anonymous said...

Piotr Czachur,

How do you do that???

I've been racking my brains playing with the Themes object in the library we are using and I can't seem to "copy" anything into it.

Please provide step by step instructions.

Jason Weathersby said...

create a new library.
select the outline view.
right click on themes and select new theme.
Right click on the new theme and select new style.

Copy the style to another theme by right clicking on the style and select copy. Right click on the target theme and select paste.

Anonymous said...

Hi,

Where can I get the source for org.eclipse.birt.report.servlet.ViewerServlet?

I am using Birt 2.1 and need to do some customization and also have the
ability to debug through the above class.

Thanks.

Jason Weathersby said...

The source for the viewer can be checked out. Look at the building BIRT page. When you have it checked out it is located in the birt_web/WEB-INF/classes/org/eclipse/birt/report/servlet directory/

Jason

Anonymous said...

In BIRT 2.2 I can use the predefined styles from a report template with no problem. I import the .css into themes/defaultTheme of the libray, then I make the report use the defaultTheme by dragging the defaultTheme from the libray explorer into the report. Thats all and works fine.

Unknown said...

"ROM_Styles_SPEC.pdf" will tell you how to use CSS.
please google it !

Anonymous said...

hi,
i am using latest eclipse birt 2.2
now as discussed in this page
i create rplibrary and themes in it using .css now when i use this in report and preview it shows including my rptlibrary styles
but when i tried publish on apache tomcat 5.5 try to show it can not be load,is there any settings remain in it?
what is issue?

Jason Weathersby said...

Where are you putting the library?
There is a setting in the web.xml for the resource folder. The library needs to be there or in the same directory as the report.

Jason

Anonymous said...

Is it possible to relate a css with a chart? So it could be possible to change the style (colors, labelfonts, size) by css.

Thanks

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards