Creating Themes for BIRT

From ThemesWiki

Creating Themes for BIRT

Source Book

ISBN	978-1-847191-09-0
Publisher	Packt Publishing
Author(s)	John Ward

In this tutorial you will learn about how to create Styles and Themes that can be used to create a consistent appearance for your Reporting Projects. This becomes important later on when you have large Report Projects with a large number of reports, and you do not want to spend a whole lot of development time on formatting.

1 Styles, Themes, and Templates
2 Style Sheets
3 Creating Themes
4 Using External CSS Style Sheets
- 4.1 Importing CSS Files
- 4.2 Using CSS as a Resource
5 Templates
- 5.1 Building a Report from a Template
- 5.2 Creating a Template
6 Additional References
7 Source

[edit] Styles, Themes, and Templates

Imagine having a large report with lots of elements, and having to settle on either the default visual properties (which are very plain as we have seen), or having to manually edit the properties for each component. This can become time consuming. Libraries can help by allowing a developer to store commonly used elements, such as headers (which are already formatted) for later use. However, there is a much more efficient way to format reports, by using Style Sheets.

For information about top exam

Testking EX0-101 Testking 640-553 Testking 642-436 Testking 640-816 Testking 1Y0-A05

The goal of this tutorial is to look at how BIRT uses Style Sheets in Report Designs, and how Styles can be grouped in a Library to create Themes. This will allow you to have certain sets of Styles ready for use any time you develop a report, so that you (as a report developer) can focus strictly on the technical aspects of the report and do not have to worry about the tedious task of visual presentation.

We will also look at Templates in this tutorial. Templates are existing report layouts that can be used as a starting point for new reports. This is useful if you use a similar layout in all your reports; you can create a Template and build from that for each new report.

[edit] Style Sheets

BIRT being a web-based reporting environment takes a leaf from general web development toolkits by importing Style Sheets. However, BIRT Style Sheets function just slightly differently from regular Style Sheets.

We are going to add on to the Customer Orders report we have been working with, and will create some Styles that will be used in this report.

Open Customer Order.rptdesign.
Right-click on the getCustomerInformation Data Set and choose Insert in Layout. Modify the Table visually to look like the following figure:

Create a new Data Set called getCustomerOrders. Use the following query:

  select
  *
  from
  CLASSICMODELS.ORDERDETAILS,
  CLASSICMODELS.ORDERS
  where
  CLASSICMODELS.ORDERS.ORDERNUMBER = CLASSICMODELS.ORDERDETAILS.ORDERNUMBER
  And CLASSICMODELS.ORDERS.CUSTOMERNUMBER = ?

Link the Data Set Parameter to rprmCustomerID.
Save the Data Set, then right-click on it in the Data Explorer and choose Insert in Layout.
On the first column for ORDERNUMBER, select the column.
Under the Property Editor, select Advanced. Go to the Suppress duplicates option and change it to true.
In the Outline, right-click on Styles and choose New Style.... In the Dialog that follows, choose table-header from the Predefined Style drop-down box.
Under the Font section, use the following settings: Font: Sans Serif Color: White Size: Large Weight: Bold
Under the Background section, use the following settings: Background color: Black
Hit OK.

Now, when we run the report, we can see that the header line is formatted with a black background and white font.

[edit] Custom Style Sheets

In the previous example, we can see that we didn't even need to apply this Style to any elements; it was automatically set to the header of the order details Table. This would be the case for any Table that had the detail row populated with something. This is the case with any of the predefined Styles in BIRT. So next, let's look at a Custom-defined Style, and apply it to our customer information table.

Right-click on the Styles section of the outline, and create a new Style.
Under the Custom Style text box, enter CustomerHeaderInfo.
Under the Font section, enter the following information: Font: Sans Serif Color: White Size: Large Weight: Bold
Under the Background section, enter the following information: Background color: Gray
Under the Box section, enter 1|points for all sections. Under the Border section, enter the following info: Style (All): Solid Color (All): White Width (All): Thin
Hit OK and Save. Now, select the Table with the Customer Information, and select the first column:
Under the Property Editor|Styles, select CustomerHeaderInfo. The preview report will look like the following screenshot:
Right-click on the Styles section in the Property Editor, and create a new Custom Style called CustomerHeaderData.
Under Box, insert 1|points for all fields. Under Border, enter the following information: Style (Top) : Solid Style (Bottom) : Solid Color (All): Gray
Hit OK. Select the Customer Information Table, and select the second column.
Under the General Tab in the Property Editor, change the Style property to CustomerHeaderData.
The finished report will look like following screenshot:

[edit] Editing Style Sheets

So far, we have two Custom Styles and one predefined Style used in our report. However, we need to make a change. If you look at the previous example, the gray lines in the Data section of our header do not match the white lines of the Label section. Normally, such tedious visual elements are concerns for graphic designers; however, in our case this provides us the perfect excuse to look at editing Style Sheets.

In the following example, we will take a look at editing the column of our header information so that the lines are gray instead of white. Editing Style Sheets is a fairly trivial task; simply double-clicking on existing Styles will bring up the Style Editor.

In the Outline, under the Styles section, double-click on the CustomHeaderInfo Style.
Select the Border Section. Under the Top and Bottom colors, select Gray.

That was easy enough. But now, there is a small (few pixels) gap between the Label column and the Data column. Let's remove it.
Select CustomHeaderInfo|Border. Change the Left and Right line Style to No line style.
Repeat steps 1 through 3 for CustomHeaderData.

[edit] Alternating Row Colors Using Highlights

So far, our report is coming along nicely. However, the detail section leaves a little to be desired visually. It is hard to distinguish lines from each other, and it would be nice to have the first line of a new order to be of different color to distinguish it. Well, we are in luck. BIRT provides a very nice capability called a Highlight, which allows us to change formatting options based on a particular condition.

Highlighting can be applied in one of two ways: it can be applied either to an element directly, or in a Style. There is really no difference in editing a Style between the two. I will cover both methods.

First, let's look at applying the alternating row color through a Style.

Create a new Style called Detail Alternating Row Color. Select Highlights from the list of categories.
Click Add. Use the following condition: row.__rownum % 2. This is an Expression that will select every other row. We will discuss Expressions in more detail in the tutorial on Scripting. Set the operand to Equal to and value to 0. Also set the Background Color to Silver.
Hit OK and exit out of the Style Editor.
Select the Detail row for the getCustomerOrders Table either from the Visual Designer or from the Outline.
In the Property Editor, Select General. Under Styles, select Detail Alternating Row Color.

Now, when we run the report, we can see that the Detail row has the alternating colors we were looking for. We can easily apply this to any of the detail rows in our report.

[edit] Creating Themes

Using the power of Style Sheets and Libraries, we have the ability to apply general formatting to an entire Report Design using Themes. Themes provide a simple mechanism to apply a wide range of Styles to an entire Report Design, without the need to manually apply them.

In the following example, we will move the Styles we have created into our Library, and apply them to our report using a Theme.

Following the instructions from the last tutorial, copy and paste all of the Styles in this report into the ClassicCarsLibrary.rptlibrary file. All of the Styles will reside under the defaultTheme (under the Themes section).
Delete all of the Styles stored in the Customer Orders.rptdesign file. Right-click on Customer Orders.rptdesign under the Outline, and choose Refresh Library.
In the Library Explorer, right-click on ClassicCarsLibrary.rptlibrary, and choose Refresh.
Under the Property Editor, change the Themes drop-down to defaultTheme.
When you apply the Theme, you will see that the Detail Table header automatically applies the Style for the Table header.
Apply the remaining Custom Styles.

Now, you can create several different Themes by grouping Styles together in Libraries. Now, when developing reports, you can create several different overall looks that can be applied to reports by simply applying Themes using Libraries.

[edit] Using External CSS Style Sheets

A new feature in BIRT 2.2 is the ability to use external Style Sheets and simply link to them. This works out very well when report documents are embedded into existing Web Portals, by using the portal Style Sheets to keep a consistent look and feel. This creates a sense of uniformity in the overall site.

Let's say for instance, your graphics designer gives you a CSS file, and asks you to design your reports around it. There are two ways you can use CSS files in BIRT:

Importing CSS files
Using CSS as a resource

In the following examples, we are going to illustrate both scenarios. The following is the CSS Style Sheet we are going to use:

.page {
 background-color: #FFFFFF;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 24px;
 color: #336699;
}

.table-group-footer-1 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 24px;
 color: #333333;
 background-color: #FFFFCC;
}

.title {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 24px;
 line-height: 40px;
 background-color: #99CC00;
 color: #003333;
 font-weight: bolder;
}


.table-header {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 20px;
 background-color: #669900;
 color: #FFFF33;
}
.table-footer {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 line-height: 22px;
 color: #333333;
 background-color: #CCFF99;
}

[edit] Importing CSS Files

I will import this Style for use in a new BIRT report called Top Employees that will display the Employees based on associated customer sales. In the following example, I will show how to import an external CSS file into a BIRT Report Project.

Create a new report called Top Employees under the Classic Cars With Library project.
Import the dsClassicCars Data Source from the ClassicCarsLibrary.rptlibrary.

Create a new Data Set called topEmployees using the following query:

  select
  EMPLOYEES.EMPLOYEENUMBER,
  EMPLOYEES.LASTNAME,
  EMPLOYEES.FIRSTNAME,
  ORDERDETAILS.PRICEEACH
  from
  EMPLOYEES,
  CUSTOMERS,
  ORDERS,
  ORDERDETAILS
  where
  CUSTOMERS.CUSTOMERNUMBER = ORDERS.CUSTOMERNUMBER
  and CUSTOMERS.SALESREPEMPLOYEENUMBER = EMPLOYEES.EMPLOYEENUMBER
  and ORDERDETAILS.ORDERNUMBER = ORDERS.ORDERNUMBER
  and ORDERS.ORDERDATE between ? and ?

Create two date parameters startDate and endDate and link them to the two Data Set Parameters in topEmployees.
Insert the topEmployees Data Set into the Report Design by right-clicking on it and choosing Insert in Layout under the Data Explorer.
Create a Grouping on EmployeeNumber in the Table, and call it employeeNumberGrouping. The following screenshot is the Table after the Grouping has been created.
In the Table Properties, click on the Binding tab, and then click on the Add Aggregation... button.
Create an aggregation on the PRICEEACH field and set it on the employeeNumberGrouping. We are going to sum the PRICEEACH field into a new field called totalEmployeeSales.
Hit OK. Create a second aggregation called totalSales. This is just like the totalEmployeeSales, except that it is on the Table instead of on the employeeNumberGrouping.
In the Outline, Delete the Row under Groups|Header.
"Drag and drop" all of the data elements from the Table|Detail|Row|Cells into the Table|Group|Footers|Cells.
Delete the Detail Row from the Table. Double-click on the PRICEEACH field to enter the edit Dialog. Enter the function Dialog and change the Expression to Available Column Binding|Table|totalEmployeeSales.
Insert a new data element into the cell in the Table Footer Row (last column), and set the Expression to row["totalSales"]. This will display the total overall sales as specified in the aggregation in the report.
Click on the Table Header Row, and change the text alignment to Left.
Click on the Header Label for PRICEEACH and change it to Employee Sales.
Click on the last column and change the text alignment to Right. As this is a currency field, we want this to be right justified, which is normal for accounting-related reporting.
In the data elements for totalEmployeeSales and totalSales, change the Format Number|Format As value to Currency.
Select the Master Page tab in the Report Designer. Drag a Label over to the Header, and enter Top Employees.
Now, we need to import the Style Sheet. I have it saved as topEmployees.css. From the Outline, right-click on Styles and choose Import CSS Style....
From the Dialog, navigate to where the CSS file is saved and select it. For the list of Styles to be imported, click on Select All.
Hit OK. You will see that all of the predefined Styles get applied automatically.
TITLE which is one of the Styles defined in the CSS is a Custom Style and will not automatically be applied. We need to apply it manually to the Label in the Master Page. Select the Label under Master Page, and in the Property Editor, under styles, select title.
Preview the Report.

It is important to note: when creating External Style Sheets, as long as the Style name corresponds to the BIRT element name and preceeds it with a dot, it will be applied automatically. In the previous example, everything except TITLE was applied automatically because there is no BIRT element called TITLE. A list of BIRT predefined Style elements is available in the BIRT Style Editor, under the Pre-Defined drop-down list. It is a matter of preference whether you choose to use the predefined Styles. If you choose to use predefined Styles, the Style will apply to all elements in a report unless explicitly overridden.

[edit] Using CSS as a Resource

Another option is 642-825 70-270 640-863 220-702 to import the CSS Style as a Report Project resource, and use the file in your resource folder.

Delete the Styles in the Top Employees report.
From either the File menu or the Navigator, right-click and select Import.... In the Import Dialog, select General|File System.
Navigate to the directory containing the CSS file. Then, from the file selection list, select the CSS file.
Make sure the Into folder option contains your project name.
The CSS file is now part of your project resources. From the Outline, right-click on Styles, and choose Use CSS File.... From the Use CSS Dialog, click on the Browse... button for File Name.
You will see two Tree View nodes, with the Resource Folder able to be expanded. Expand the Resource Folder and select the topEmployees.css file.
A list of Styles will show up under the Available styles. Just click OK as there is no option to select individual styles.
The styles that are pre-defined BIRT element names get automatically applied. Go ahead and apply the Custom Style of title to the Master Page Header section.

You might notice that the Styles section of the Outline is a little different. Rather than displaying the Styles themselves when using a resource it shows the CSS file name, and when you right-click on the file name, you have the option to Reload. This allows users to make changes to the external CSS file and reload them into the BIRT report without having to re-import.

[edit] Templates

Templates are pre-designed report layouts. We have been using Templates throughout the entire book, when we create the Blank report. We will expand out and take a look at using Templates to set up for the detail reports we will build in the next tutorial.

[edit] Building a Report from a Template

Templates, for the most part, take the nasty work out of having to re-create the same layout over and over again. For instance, in this book, we have constantly dragged over a single Data Set into the Report Designer to create a single listing report. With Templates, we could either use the existing, canned Listing Report Template or build our own and save the effort for more complex tasks. It's as simple as creating a new report, using a Template, and following the Cheat Sheets.

In this example, we are going to use a Grouped Listing Report Template to create a simple Employee Sales Detail Report that we will use as a target for a Drill-Down report, which will be explained in the next tutorial.

Create a new report called Employee Sales Details Report.rptdesign. In the New Report Template screen, choose Grouped Listing Report. 2. When the Report Design opens, the Cheat Sheet is open on the right-hand side. It lays out a series of steps for creating a basic report. As we already have the Data Source created in our Library, go ahead and add the Data Source from the Library, and click on the Click to skip option for the Data Source hint.

For the Data Set, click on the Click to Perform option. Call the Data Set Get Employee Sales, and use the following query:

  select
  EMPLOYEES.EMPLOYEENUMBER,
  EMPLOYEES.LASTNAME || , || EMPLOYEES.FIRSTNAME name,
  ORDERDETAILS.PRICEEACH sales,
  ORDERS.ORDERDATE
  from
  EMPLOYEES,
  CUSTOMERS,
  ORDERS,
  ORDERDETAILS
  where
  ORDERS.ORDERNUMBER = ORDERDETAILS.ORDERNUMBER
  and EMPLOYEES.EMPLOYEENUMBER = CUSTOMERS.SALESREPEMPLOYEENUMBER
  and ORDERS.CUSTOMERNUMBER = CUSTOMERS.CUSTOMERNUMBER
  and ORDERS.ORDERDATE between ? and ?

Create two Report Parameters called startDate and endDate, and bind them to the Data Set Parameters. For startDate, use the Default value of 2005-01-01, and for endDate, use the Default value of 2005-04-01.
When back at the Cheat Sheet, click on Click to Complete for the Data Set.
For the Edit Date Binding Cheat Sheet, drag the fields over as in the following figure. Make the Group Header Row have a Silver Background, and bold the text.
Group by EmployeeNumber. Select the column with the Name/[OrderDate] fields, and choose Suppress duplicates. Select the Group Header Row, and under the Property Editor, choose the Bookmark tab. Use the following expression:
```
  row["EMPLOYEENUMBER"] 
```

Now we have built a report from a Template. Using other Templates is very similar, where a Cheat Sheet can be used.

[edit] Creating a Template

Creating Templates can be done in two different ways. One is to create a Template from the New option under the File menu; the other is to convert an existing report into a Template.

Open any existing report file.
Go to File|Register Template with New Report Wizard....
Follow the Wizard to create a new Template. Not much to it! Now, let's take a look at creating a new Template from scratch.
Go to File|New|Template. Call the Template myNewTemplate.rpttemplate.
Under Display Name, use My First Template. Under Description, type Testing a Template.
If you have an image, associate one with your Template.

Now we have a new Template to create reports from. Create any sort of layout you would like, and save. When you want to use this Template, simply open it and save it as a Report Design. If you'd like this to show up in the New Report Wizard, do the same thing as done previously with an existing report, and go to File|Register Template with New Report Wizard....

So, what about the Cheat Sheets we saw in the canned Templates? Well, Cheat Sheets are simply XML files that explain the steps that are installed as Eclipse Plug-ins. Describing how to do so is beyond the scope of this book; however, it is possible to create new Cheat Sheets if you are familiar with the process. So, let's say we wanted to associate the My First Report Template Cheat Sheet with the Template we just created. Under the Report Properties, we would put in the plug-in class under the Cheat sheet Property. The Dev2Dev article Building Cheat Sheets in Eclipse provides a good tutorial on building Cheat Sheets at http://dev2dev.bea.com/pub/a/2006/08/eclipse-cheat-sheets.html.

[edit] Additional References

For instructions on Installing BIRT, click here

[edit] Source

The source of this content is Chapter 8: Styles, Themes, and Templates of Practical Data Analysis and Reporting with BIRT by John Ward (Packt Publishing, 2008). logo design by Kevin Josh 2010

Executive Editor Sean Lopez own : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes and criar sites

And Like The Global Information Network and Global Information Network

Retrieved from "http://www.themeswiki.com/Creating_Themes_for_BIRT"

Categories: Open Source | Java