This devshare submission qualifies for BIRT Style Contest

Hello everyone,
      Just think how awesome would be a birt report if it can dynamically change the style according to various factors like

• Time of the Day
• A particular Day ( say Christmas or NewYear)
• According to a Report Parameter

         An easy approach to this is using BeforeFactory Method ... Letme explain a  typical Example.(I am using birt 3.2.22, some features may not work in older versions) 

I have a report parameter, say TotalScore . Some element in my report should change the color intensity according to the parameter value...say yellow when its below 10 
and move to Red once the TotalScore approach 100.... I have designed something like that and its attached with this submission

Another thing which i have done was providing different styles to the report according to some variables which can store either a date or a particular time of the day...

To make it more clear lets put it in this way.. my style should vary according to the time of the day.. say morning one style, afternoon one and so on...
this can also be done with the same approach

I am not soo good in the styling and also we have a limitation to the CSS which can be used.. i have two styles in my code on which you can play around to create more 
styles..

All elements can be given styles(table-detail,table-header,grid etc)


Now coming to the detail..

In the XML Source you can add one tag which is like

"<method name="beforeFactory"><![CDATA[ ]]></method>"

in the CDATA section you can write your javascript code...
we can use reportContext.getDesignHandle() method to get the design handle
and after that you can call methods like addCss() with the handle to dynanically add styles to your report


eg :
dh = reportContext.getDesignHandle();
if ( params["myParam"] == "hello"){
dh.addCss("style2.css");}
else{
dh.addCss("style1.css");
}
       this will check the value of report parameter "myParam" and add stylesheet style2.css or style1.css to the report

each of them are external stylesheet and you can define styles for your component in these stylesheets..
In the attachments i have two sample stylesheets which adds styles to table(table detail,header and footer) and a chart
you can define styles to other components also


Another appraoch of dynamic styling is by creating some predefined styles in birt itself and changing the properties on dynamically...
this can be achieved using designHandle

reportContext.getDesignHandle().findStyle("table-header").setProperty("backgroundColor", "#4c5dfa");

this code will get the designHandle and it will look up for the style defined on element table-header and it will set the property background color to some color.. You can set 

properties like background images etc to make your report more interesting
Using java script you can change the values according to your parameters and apply dynamically

This is also done in my report which is attached
 to make it simple my report is very generic and i have included all features in a single report...i have used one variable and one report parameter.. the variable can be initialised to the current date and in the method we can check for date and apply the style 
accoridngly

eg : 
if ( vars["DateVar"] == ){

dh = reportContext.getDesignHandle();dh.addCss("christmas.css");}

you can use native java script method to set date in date variable
you can use native java script method to get the time of the day and set styles accordingly
eg:use this javascript to set variable

(new Date()).getHours()

and now you can check this in the code

eg:
dh = reportContext.getDesignHandle();

if ( vars["TimeVar"] < 12){      

 dh.addCss("morning.css");

}

else{//afternoon

dh.addCss("afternoon.css");}

And now try this... an interesting styling done with javascript

we have three parameters min,max and valuejust paste the below code in before factory method and see the magic (create one table in your design and create a custom predifined style for table-header)

 var diff = getNormalizedDiff(params["min"].value, params["max"].value, params["value"].value);

 var color = getColor(diff);

 reportContext.getDesignHandle().findStyle("table-header").setProperty("backgroundColor", '#'+color);  

function getNormalizedDiff(min, max, value) {
  var median = (min + max) / 2;   var diff = value-median;
           var normalizedDiff = (diff/median);
           return normalizedDiff;
       }
       function getColorComponent(val) {

     var hexColor = val.toString(16); 

         if(hexColor.length == 1) { 

             hexColor = "0" + hexColor;   

       } 

         return hexColor;   

   }
       function getColor(diff) { 

                    if(diff > 0){   

          var increase = Math.round(diff * 255); 

            var colorComponent = getColorComponent(255 - increase); 

            return colorComponent + "FF" + colorComponent;     

     }

else { 

            var decrease = Math.round(-diff * 255);     

        var colorComponent = getColorComponent(255 - decrease);   

          return "FF" + colorComponent + colorComponent; 

         }
       }

we get different colors for different parameter values...

Now its your turn ...You can play around and explore all possibilities...
Any clarrification let me know....

Arjun