CSS in library not overloaded in report

Hello everyone, 
 
I'm facing a problem when trying to use CSS in library/rptdesign: 
 
- I have a library with already designed objets, I use a CSS called for instance "default_blue.css" and custom styles are defined in this CSS and used/applied on the library's objects. 
 
- I use this library's objects in a .rtpdesign but I dont want to use the "default_blue.css" but the "default_orange.css" . So I imagine by importing the "default_orange.css" in the rptdesign, it should overwrite the styles defined in "default_blue.css" (of course, styles defined in default_blue and default_orange have the same names). 
 
- When I generate the report, only styles in "default_blue.css" (so the one in my library ) are applied , not the one in "default_orange.css" . 
 
Is it normal ? Do I have to do something to overwrite styles in the css of the library by my styles in the css of the rptdesign ? 
 
I'm trying to use this exemple : <a class='bbc_url' href='http://www.birt-exchange.org/org/devshare/designing-birt-reports/1466-styling-report-and-script-to-change-default-chart-palette/'>http://www.birt-exchange.org/org/devshare/designing-birt-reports/1466-styling-report-and-script-to-change-default-chart-palette/</a> 
 
but when scripting in the rptdesign "before factory" : 
 
1) In this exemple, I imported the default_orange.css file in my report ( so it appears in the Outline) 
<pre class='_prettyXprint _lang-auto _linenums:0'>
dh = reportContext.getDesignHandle();
dh.addCss(default_orange.css);
}</pre>
 
OR 
 
2) In this exemple I have did not import the CSS file in the rptdesign but my CSS file is in my resources folder, in a folder called CSS : 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
dh = reportContext.getDesignHandle();
dh.addCss(CSS/default_orange.css);
}</pre>
 
Thanks in advance. 
 
Regards, 
 
Edit : I'm using BIRT 2.6.2

Find more posts tagged with

Comments

mwilliams

Can you create a simple example showing all you've done to get this to work and zip it up and post it in here? A sample report, a sample library, and the two sample css files? Thanks!

egau

Hello,

Thanks and sorry for the late answer, I was waiting for mail I could have wait for a long time due to birt non-spam policy.

So OK, I ll make an exemple and attach it to the post.

Regards,

egau

double post

egau

Please find attached an exemple.

As you will see, I did not try to script anything because it didn't work. I added the orange.css file to my report manually but my objective is to :

- developp object in my library with a css file ( it doesnt matter which on because the only thing that will change are colors)

- use objects in my rptdesign and at the runtime, change the CSS file to apply, using a report parameter for exemple. ( all CSS will be placed in a resource folder)

Thanks in advance.

Regards,

mwilliams

Add a second theme to your library and add the other css file to it. Then, in your report's beforeFactory method, put this code: 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
importPackage (Packages.org.eclipse.birt.report.model.api);

lh = reportContext.getDesignHandle().getAllLibraries().get(0);
theme1 = lh.getThemes().get(0);
theme2 = lh.getThemes().get(1);

if (params["myStyle"].value == "orange"){
lh.setTheme(theme2);
}
else{
lh.setTheme(theme1);
}
</pre>

egau

Ok thanks, I will try that.

Regards,

egau

it works , thanks ! 
 
My problem now is that I will have for exemple 20 library, with lot of objects, I will also have for instance 5 themes (5 css files). So it means I will be obliged to add my 5 themes (using css) to all my libraries, then copy the script in all my rptdesign. 
 
If I want to add a new theme (new css file so), I ll have to add this theme to all my libraries and modify the script to manage the new theme. Not really user friendly, more over if I want other people to be able to add their own themes

. So the best solution is to have only one place ( library ) with all themes and one default theme in all library. 
 
I tried to separate things : my object is in a library using only 1 default theme ( blue for exemple, so I can see the effect and apply styles) and I created a new library "theme.rptlibrary" , then in my rptdesign, I tried 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
lh = reportContext.getDesignHandle().getLibrary("theme");
theme1 = lh.getThemes().get(0);
theme2 = lh.getThemes().get(1);

if (params["myStyle"].value == "orange"){
lh.setTheme(theme2);
}
else{
lh.setTheme(theme1);
}</pre>
 
But it doesn't work. 
 
Is it possible to manage theme with their names, not with "get(0)" "get(1)" etc... ? 
 
If you have any suggestion regarding my goal. 
 
Thanks

mwilliams

I don't see a function called "getTheme()" anywhere, so the slot handle might be the only way to access the themes. You could probably iterate through the list of themes and then check for the name. I'll take another look and let you know if I find anything.

mwilliams

Sorry for the delay, but you can find a specific theme in a library with the following:

reportContext.getDesignHandle().findLibrary("myLibrary.rptlibrary").findTheme("myTheme");

egau

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="101296" data-time="1337880194" data-date="24 May 2012 - 10:23 AM">
Sorry for the delay, but you can find a specific theme in a library with the following: 
 
reportContext.getDesignHandle().findLibrary("myLibrary.rptlibrary").findTheme("myTheme"); </blockquote>
 
 
Thanks ! I ll try that, I ll keep you updated. 
 
Regards,

egau

Hello, 
 
I can't say if the script you gave to me, works, I ll do it after what I'm doing now : I'now refactoring lots of libraries and reports so that they use CSS files. it works fine UNTIL this situation : 
 
 
- I've created a library called "theme.rptlibrary" : each theme = 1 CSS ( Css are link to a theme by using "Use Css File" 
 
- I design objects in a "object.rptlibrary", I want to see how they ll look like (of course) so I use the library "theme.rptlibrary" in "object.rptlibrary" and pre-defined style ( as label, text,chart ,table-hearder...) are automatically applied, then I apply custom style that I defined in the CSS on my object. 
 
- Finally, I import objects in a rptdesign and , to be able to change theme, I also use "theme.rptlibrary" in this report. When I change the theme in my rptdesign, all the pre-defined style are changed BUT customs styles stay unchanged ( so like they are in my library ) 
 
Is it a bug ? Is it a normal behaviour that only predefined styles are overloaded and not customs one in my rptdesign ? 
 
You will find attached an exemple , in the rptdesgin , you can change theme ( orange or blue ) but the row in the middle, where I applied a custom style, never changes :-( 
 
Thanks in advance, 
 
Regards

mwilliams

Weirdly enough, I had almost this same question asked recently. Here's a link to that thread: 
 
<a class='bbc_url' href='http://www.birt-exchange.org/org/forum/index.php/topic/25515-dynamic-theme-for-the-libraries/'>http://www.birt-exchange.org/org/forum/index.php/topic/25515-dynamic-theme-for-the-libraries/</a> 
 
However, the solution in that thread doesn't seem to be working in your report, even though it's the same version. In your report, if I set the theme for the report, rather than setting it in the library, it seems to work correctly. You might try this and see if it works for you. 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
importPackage (Packages.org.eclipse.birt.report.model.api);

lh = reportContext.getDesignHandle().findLibrary("resources/theme.rptlibrary");
bt = lh.findTheme("blueTheme");
ot = lh.findTheme("orangeTheme");
if (params["Theme"].value == "Orange"){
reportContext.getDesignHandle().setProperty("theme",ot);
}
else{
reportContext.getDesignHandle().setProperty("theme",bt);
}
</pre>

egau

Well thanks but it gives me the same result , only pre-defined style are overloaded, the custom one stay the same as it is defined in the library, even with the script. 
 
It looks to be a bug , isn't it ? 
 
Is my custom style correctly defined ? ( I guess yes becaues BIRT uses it , but maybe I missed something..) 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>.title-back-and-fore {
background-color : rgb(255,128,0);
font-family : 'DejaVu Sans';
font-weight : bold;
color : #FFFFFF;
}</pre>
 
Regards

egau

I also tried it on BIRT 3.7 , it doesn't work.

Regards,

mwilliams

Maybe I'm missing something. Can you show me screenshots of what outputs you'd like to see with the different parameter options, if the above styles are applied correctly? I think it's working for me, but maybe I'm not noticing something or misunderstanding what you're wanting to happen. Thanks!

egau

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="103212" data-time="1339712510" data-date="14 June 2012 - 03:21 PM">
Maybe I'm missing something. Can you show me screenshots of what outputs you'd like to see with the different parameter options, if the above styles are applied correctly? I think it's working for me, but maybe I'm not noticing something or misunderstanding what you're wanting to happen. Thanks! </blockquote>
 
 
You ll find attached 3 screenshot : 
 
blue.png = what should happen when I select blue in report template theme ( no matter what theme is choosen in the library where I designed objets 
 
orange.png = what should happen when I select orange in report template theme ( no matter what theme is choosen in the library where I designed objets 
 
whathappen_default_blue = is what happen when I select the Orange theme in my report and when in the object.library the theme is set to blue. As you can see, only pre-defined style are overloaded, not the custom one. 
 
whathappen_default_orange = is what happen when I select the Blue theme in my report and when in the object.library the theme is set to orange. As you can see, only pre-defined style are overloaded, not the custom one.

egau

mwilliams

Ok. Try this out. This code grabs the theme from the report and from the theme library instance used by the objects library and sets the theme for the objects library and for the report. Not sure why you have to do it both ways, but it throws errors if you don't grab both. 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
importPackage (Packages.org.eclipse.birt.report.model.api);

lh = reportContext.getDesignHandle().findLibrary("resources/theme.rptlibrary");
lh2 = reportContext.getDesignHandle().findLibrary("resources/objects.rptlibrary");
lh3 = lh2.findLibrary("resources/theme.rptlibrary");
bt = lh.findTheme("blueTheme");
bt2 = lh3.findTheme("blueTheme");
ot = lh.findTheme("orangeTheme");
ot2 = lh3.findTheme("orangeTheme");
if (params["Theme"].value == "Orange"){
lh2.setTheme(ot2);
reportContext.getDesignHandle().setProperty("theme",ot);
}
else{
lh2.setTheme(bt2);
reportContext.getDesignHandle().setProperty("theme",bt);
}
</pre>

egau

Well thanks !

It seem to work now, really weird indeed. The only problem now is that I can only see the result of theme after running it. When I change it in the General Properties, only the pre-defined styles are changed.

But let's say it's ok with that !

Regards,