| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN"> |
| <html> |
| |
| <head> |
| <title>BIRT Tutorial</title> |
| <link rel="stylesheet" href="../style/compose.css" type="text/css"> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| </head> |
| |
| <body> |
| |
| <p class="head">BIRT Tutorial</p> |
| <p class="subhead">Building a Table</p> |
| |
| <h1>Report Layout</h1> |
| |
| <p>Our customer listing report will display customer information in the form of |
| a table: just like an HTML table, with the added ability to iterate over report |
| data. The Grouped Listing template we chose earlier created the table for us, we |
| just need to fill in the details. Before we do, let's introduce the various BIRT |
| report items.</p> |
| |
| <h1>Report Items</h1> |
| <p> |
| BIRT provides a variety of report items for use when creating your report. |
| Report items appear in the Palette view. |
| Report items include: |
| <p> |
| <dl class="arrow-list"> |
| |
| <dt>Text</dt> |
| <dd>Text that can include HTML formatting and computed values. Used to create |
| headings, form letters, "mail-merge" effects, etc.</dd> |
| <dt>Label</dt> |
| <dd>Displays a simple piece of text such as "Customer Name".</dd> |
| |
| <dt>Data</dt> |
| <dd>Displays a database column or a computed value. Provides formatting.</dd> |
| |
| <dt>Image</dt> |
| <dd>Any kind of image supported by a web browser. Images can be embedded |
| in the report, or links to a file on your web server.</dd> |
| |
| <dt>Grid</dt> |
| <dd>Provides a tabular arrangement of report items, much like an HTML table.</dd> |
| |
| <dt>List</dt> |
| <dd>Presents data from a data set in any kind of format. Used when the layout for |
| each row is more sophisticated than a simple table row.</dd> |
| |
| <dt>Table</dt> |
| <dd>Presents data from a data set in the form of a table. Can contain grouping levels. |
| Like an HTML table that has a table row for each data set row.</dd> |
| <dt>Chart</dt> |
| <dd>Displays a business chart such as a pie chart, line chart, etc.</dd> |
| |
| </dl> |
| <p> |
| This tutorial will use all the elements except for List and Chart.<h1>Create the Table Detail</h1> |
| <p> |
| The New Report dialog created a starter report that contains a table item with |
| one level of grouping. If we'd chosen a blank report, we could create the table |
| simply by dragging it from the palette. |
| <p> |
| The next step is to add some content to the table. We'll start with the detail |
| band which repeats to display each row from our data set. Here's how: |
| |
| <ul> |
| <li>Display the Data Explorer if it's not already visible. |
| <li>Expand the Data Sets node of the tree. |
| <li>Expand the entry for the Customers data set that we created. This will display |
| the columns available from the data set. |
| <li>Select the CUSTOMERNAME column. |
| <li>Locate the detail band within the table. (It is has a gray "Detail" label.) |
| <li>Drag the CUSTOMERNAME column into the detail band cell second from the |
| left. Notice that the designer automatically adds the corresponding column header. |
| <li>Drag the PHONE column into the last cell in the detail band. |
| </ul> |
| |
| <h1>Create the State Group</h1> |
| <p> |
| We want our customer listing to be grouped by state, then city. |
| Using a group causes all |
| rows within the same state to appear together. |
| Let's create the group heading for states: |
| |
| <ul> |
| <li>Locate the group header row in your table. It has a light gray "Group |
| Header" label. |
| <li>Drag the STATE column into the leftmost cell within the Group Header row. |
| </ul> |
| |
| <h3>Creating Groups on your Own</h3> |
| |
| <p> |
| We are using the group created for us by the New Report dialog. If we'd started |
| by dragging the table from the palette, we'd create this first group as we'll |
| explain in the next section.</p> |
| <p> |
| You must bind (associate) the table to a data set |
| before you |
| can create a group. The binding happened automatically when we dropped the |
| first data set column into the table. However, if you build a table on your |
| own, you can use the Binding tab in the Property Editor to bind the table to |
| a data set. |
| </p> |
| |
| <h1>Create the City Group</h1> |
| <p> |
| Next, we'll create a city group within the state. This groups |
| customers first by state, then by city. |
| |
| <ul> |
| <li>Click on the table tab (as described above) to display the table scaffolding.<li> |
| Click on the row header for the state group header.<li>Choose Insert Group→Below. |
| The Group Properties dialog appears. |
| <li>Chose the CITY column in the Group On field. |
| <li>Click OK.</ul> |
| |
| <p>Notice that BIRT automatically inserted the a Data report item for the city |
| group. Hover the cursor over the "@expression" to see the actual expression: |
| row["CITY"].</p> |
| |
| <h1>Add a Table Column</h1> |
| We need another table column to display our group heading:<ul> |
| <li>Ensure the table |
| scaffolding appears. Click on the shaded column header for the first column. |
| <li>Choose Insert→Column to the Right from the context menu. |
| A new column appears. |
| <li>Move the CITY expression from (the expression in the first column of the |
| second group heder) the second column of the |
| second group header. |
| </ul> |
| |
| <h1>Create Column Headings</h1> |
| <p> |
| We're almost done with the basic setup of our table. We just need to refine our column headings. |
| BIRT added headings for us for each column we added to the table. |
| |
| <ul> |
| <li>Double-click on the first column header text to change it. Type "State" and |
| press Enter.<li>Drag a label from the palette into the second column heading, |
| type "City" and press Enter.<li>Change |
| the third column header to "Name".<li>Change the last column header to "Phone".</ul> |
| |
| </body> |
| </html> |
