tutorial/basic/script12.html - gerrit/www.eclipse.org/birt - Git at Google

 <!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">Using a Grid</p>

 <h1>Create a Grid</h1>
 <p>
 Let's add a heading to our report.
 Our report heading will use the classic "left/center/right" layout: a logo on the
 left, the report title in the center, and the run date on the right.
 <p>
 The easiest way to create such a layout is to use a grid. A grid is like an
 HTML table, it tells BIRT the desired layout, and BIRT does the work to make it
 happen. In this case, we want a one-row grid with three columns each 1/3 the
 width of the page.

 <ul>
 <li>Drag a Grid item from the palette into your report above your table. The
 Insert Grid dialog appears.
 <li>Choose 3 columns and 2 rows.<li>Click OK.</ul>

 <h1>Row Properties</h1>
 We want the contents of the header to be top-aligned. And we'll use the second
 row as a spacer between the header proper and the report body:<ul>
 <li>Select the entire first row.<li>In the General page of the Property Editor,
 set the vertical alignment to Top.<li>Select the second row.
 <li>In the General page of the Property Editor, set the height to 0.25 in.</ul>

 <h1>Column Properties</h1>
 <p>We want each of the three columns to be 1/3 the width of the page, and we
 want them to be left, center and right aligned:</p>

 <ul>
 <li>Select the first column header.
 <li>Switch to the General tab in the Property Editor. Notice that the width
 is unset. As in HTML,
 if the column width is not set, BIRT will size the column to its content.
 <li>Set the column widths to 33%. Do this by typing "33" in the width field,
 then selecting "%" from the adjacent pull-down.<li>Select the middle column.<li>
 Repeat the step above to set the width to 33%.<li>In the General page of the Property Editor,
 set the text alignment to Center.
 <li>Select the rightmost column.<li>Repeat the step above to set the width to
 33%.<li>In the General page of the Property Editor,
 set the text alignment to Right.
 </ul>

 <h1>Insert an Image</h1>
 <p>
 Next, let's add the company logo to the heading. We'll link to an image on the
 BIRT web site:<ul>
 <li>Drag an Image item from the palette into the left-most cell of your grid.
 <li>The Image Builder dialog appears.
 <li>Ensure that the URL radio button is selected.
 <li>Enter the following URL: http://www.eclipse.org/birt/tutorial/basic/multichip-4.jpg.
 <li>Click the Preview button to ensure that the URL is correct.
 <li>Click Insert to add the image to your report.
 </ul>

 <p>You can also embed an image from your local disk. Embedding the image copies
 the image into the report design. Using a URL is more efficient.</p>

 <h1>Insert the Run Date</h1>
 <p>
 Next, let's display the current date in the right-most cell in the heading. <ul>
 <li>Drag a Data item from the Palette into the right-most cell of your grid.
 <li>The expression builder will appear.
 <li>Type &quot;new Date( )&quot; (without the quotes) to display the current date.
 <li>Click OK.
 <li>Set the date format. Select the Format DateTime page within the Property Editor.
 <li>Choose the date format that looks like this: May 12, 2005. (The actual date
 will be today's date.) This is the BIRT "Medium Date"  date format.
 </ul>
 <p>
 BIRT uses Java formatting (based on Microsoft Excel) for dates, numbers and
 strings. In
 addition, BIRT adds a number of specialized, locale-aware date formats
 described in the <a href="/birt/ref/ROM_Styles_SPEC.pdf">ROM Styles Specification</a>. <p>

 <pre></pre></body>
 </html>
	<!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">Using a Grid</p>

	<h1>Create a Grid</h1>
	<p>
	Let's add a heading to our report.
	Our report heading will use the classic "left/center/right" layout: a logo on the
	left, the report title in the center, and the run date on the right.
	<p>
	The easiest way to create such a layout is to use a grid. A grid is like an
	HTML table, it tells BIRT the desired layout, and BIRT does the work to make it
	happen. In this case, we want a one-row grid with three columns each 1/3 the
	width of the page.

	<ul>
	<li>Drag a Grid item from the palette into your report above your table. The
	Insert Grid dialog appears.
	<li>Choose 3 columns and 2 rows.<li>Click OK.</ul>

	<h1>Row Properties</h1>
	We want the contents of the header to be top-aligned. And we'll use the second
	row as a spacer between the header proper and the report body:<ul>
	<li>Select the entire first row.<li>In the General page of the Property Editor,
	set the vertical alignment to Top.<li>Select the second row.
	<li>In the General page of the Property Editor, set the height to 0.25 in.</ul>

	<h1>Column Properties</h1>
	<p>We want each of the three columns to be 1/3 the width of the page, and we
	want them to be left, center and right aligned:</p>

	<ul>
	<li>Select the first column header.
	<li>Switch to the General tab in the Property Editor. Notice that the width
	is unset. As in HTML,
	if the column width is not set, BIRT will size the column to its content.
	<li>Set the column widths to 33%. Do this by typing "33" in the width field,
	then selecting "%" from the adjacent pull-down.<li>Select the middle column.<li>
	Repeat the step above to set the width to 33%.<li>In the General page of the Property Editor,
	set the text alignment to Center.
	<li>Select the rightmost column.<li>Repeat the step above to set the width to
	33%.<li>In the General page of the Property Editor,
	set the text alignment to Right.
	</ul>

	<h1>Insert an Image</h1>
	<p>
	Next, let's add the company logo to the heading. We'll link to an image on the
	BIRT web site:<ul>
	<li>Drag an Image item from the palette into the left-most cell of your grid.
	<li>The Image Builder dialog appears.
	<li>Ensure that the URL radio button is selected.
	<li>Enter the following URL: http://www.eclipse.org/birt/tutorial/basic/multichip-4.jpg.
	<li>Click the Preview button to ensure that the URL is correct.
	<li>Click Insert to add the image to your report.
	</ul>

	<p>You can also embed an image from your local disk. Embedding the image copies
	the image into the report design. Using a URL is more efficient.</p>

	<h1>Insert the Run Date</h1>
	<p>
	Next, let's display the current date in the right-most cell in the heading. <ul>
	<li>Drag a Data item from the Palette into the right-most cell of your grid.
	<li>The expression builder will appear.
	<li>Type "new Date( )" (without the quotes) to display the current date.
	<li>Click OK.
	<li>Set the date format. Select the Format DateTime page within the Property Editor.
	<li>Choose the date format that looks like this: May 12, 2005. (The actual date
	will be today's date.) This is the BIRT "Medium Date" date format.
	</ul>
	<p>
	BIRT uses Java formatting (based on Microsoft Excel) for dates, numbers and
	strings. In
	addition, BIRT adds a number of specialized, locale-aware date formats
	described in the <a href="/birt/ref/ROM_Styles_SPEC.pdf">ROM Styles Specification</a>. <p>

	<pre></pre></body>
	</html>