Task 14:Now that the report displays the correct data and layout, you can turn your attention to improving the report’s appearance. You perform the following tasks in this section:
Highlight the customer names
4 Select General from the list under Properties. Property Editor displays the general formatting properties of the data element.Edit the column headings
When you insert a data set field in a table, BIRT Report Designer automatically adds a label with the data set field name in the header row. Often, data set field names are not in a form that is appropriate for reports, and need to be changed.
Figure 13-30
Figure 13-31Change the date formats
When you insert a data element of date data type, BIRT Report Designer displays dates according to your system’s locale setting. BIRT Report Designer provides many different date formats that you can select if you do not want to use the default format. In this procedure, you create a style that changes the format of ORDERDATE and PAYMENTDATE values from Jun 3, 2005 to 6/3/05.
3 Choose Element->Style->New Style from the main menu. New Style displays the properties you can set for a style, as shown in Figure 13‑32.
Figure 13-32
4 For Custom Style, type the following name:
6 Choose the m/d/yy format from the drop-down list, as shown in Figure 13‑33. The values in the drop-down list dynamically update with the current date.
Figure 13-33
Figure 13-34
2 Right-click the selected element, then choose Style->Apply Style->Date_data.
9 Preview the report. The dates have changed from Mar 18, 2003 format to 3/18/03 format, as shown in Figure 13‑35.
Figure 13-35Change the number formats
When you insert a data element of integer data type, BIRT Report Designer displays numbers according to your system’s locale setting. BIRT Report Designer provides many different number formats that you can select if you do not want to use the default format. In this procedure, you create a style that changes the amount values format from 48425.69 to $48,425.69.
3 Choose Element->Style->New Style from the main menu. New Style displays properties in the general category.
4 For Custom Style, type the following name:Figure 13‑36 shows the specified currency format.
Figure 13-36
7 Choose OK to save the style. The Currency_data style is applied to the [AMOUNT] data element, as indicated by the element’s Style property in Property Editor.
Figure 13-37Increase the vertical space between elements
In this procedure, you increase the space between each customer name and the lines before and after it. To adjust the vertical space between elements, you can use any of the following techniques:
n Increase the top or bottom padding or margins of elements.
n Organize the elements in a grid and adjust the heights of the grid rows.
n Organize the elements in a grid and use empty rows with specified heights to provide space between elements.Padding and margins property values can yield different results in different web browsers. Using a grid to format the layout is easier and provides more predictable results. In this procedure, you use the third technique.
2 Place the [CUSTOMERNAME] data element in the grid that contains the two tables by completing the following steps:
1 Select the grid. Hover the mouse pointer over the bottom left corner until you see the Grid tab, then choose the tab. Guide cells appear at the top and left of the selected grid.
2 Right-click the guide cell on the left of the grid’s first row, then choose Insert->Row->Above, as shown in Figure 13‑38.
Figure 13-38
3 Move the [CUSTOMERNAME] data element from its current location to the first cell of the new grid row. Figure 13‑39 shows the [CUSTOMERNAME] data element in the new location.
Figure 13-39
3 Using the procedures for adding a row that were described earlier, complete the following tasks:
n Add a new grid row above the row that contains the [CUSTOMERNAME] data element.
n Add a new grid row below the row that contains the {CUSTOMERNAME] data element.
Figure 13-40
5 In General properties, set the row’s height to 0.2 in, as shown in Figure 13‑41.
Figure 13-41
6 Select the third row in the grid, and set its height to 0.1 in. The report design should look like the one shown in Figure 13‑42.The custom row heights provide the exact amount of space you need between elements. If you prefer to work with a unit of measurement other than inches, you can select mm, points, or even pixels for very precise sizing control.
Figure 13-42
7 Preview the report. There is more space above and below the customer name. The report should look like the one shown in Figure 13‑43.
Figure 13-43 Report preview showing added spaceIncrease the horizontal space between the Orders and Payments tables
In this procedure, you increase the space between the Orders and Payments tables. As with vertical spacing, you can adjust the horizontal space between elements in the following ways:
n Increase the left or right padding or margins of elements.
n Organize the elements in a grid and adjust the widths of the grid columns.
n Organize the elements in a grid and add empty columns using specified widths to provide space between elements.Again, padding and margins property values can yield different results in different web browsers. Using a grid to format the layout is easier and provides more predictable results. In this procedure, you use the third technique.
2 Select the grid. Hover the mouse pointer over the bottom left corner until you see the Grid tab, then choose the tab.Guide cells appear at the top and left of the selected grid.
3 Right-click the guide cell above the first column, then choose Insert->Column to the Right, as shown in Figure 13‑44.
Figure 13-44
4 Select the column that you just added, and use Property Editor to set the column width to 0.4 in, as shown in Figure 13‑45.
Figure 13-45
5 Preview the report. There is more space between the Orders and Payments tables, as shown in Figure 13‑46.
Figure 13-46 Report preview showing added space between tablesAdd borders around the tables
In this procedure, you add a box around the Orders and Payments tables to clearly identify them as two separate subreports.
2 Select the Orders table. Hover the mouse pointer over the bottom left corner until you see the Table tab, then choose the tab. Guide cells appear at the top and left of the selected table.
Figure 13-47
Figure 13-48Increase the space between the table borders and contents
The top and left borders of the tables are too close to the table content. In this procedure, you increase the space between the top and left borders and the content.
2 Select the first cell in the group header row of the Orders table. Be careful to select the cell, as shown in Figure 13‑49, and not the data element in the cell.
Figure 13-49 The title bar of Property Editor shows the type of the element that you selected. Verify that it displays the following text:
3 Choose the Padding properties in Property Editor, then set Top and Left to 6 points. Use the default values for Bottom and Right. Figure 13‑50 shows these property settings.
Figure 13-50 In the layout editor, extra space appears at the top and left of the cell, as shown in Figure 13‑51.
Figure 13-51
4 In the Orders table, select the other cells that contain elements, and set the Top and Left padding properties to 6 points.
5 Similarly, in the Payments table, select all the cells that contain elements, and set the Top and Left padding properties to 6 points.
Figure 13-52
(c) Copyright Actuate Corporation 2008 |