tutorial/basic/script09.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">Setting Visual Properties</p>

 <h1>Resizing Table Columns</h1>
 <p>
 Let's adjust the size of the table columns. Tables &amp; columns can
 be sized using absolute sizes (inches, centimeters), or relative sizes (percentage
 of the width of the page.) Here, we'll adjust the column widths by directly
 changing the size.

 <ul>
 <li>Click the Layout tab to switch back to the report layout.
 <li>Display, then click on the table tab to display the "scaffolding."
 <li>Find the black line that separates the &quot;City&quot; and &quot;State&quot; column headings.
 <li>With the cursor over this line, hold down the left mouse button and resize
 the column to be about big enough to hold the two-letter state code and label.<li>Repeat the above to resize the city column.
 </ul>

 <h1>Setting the Background Color</h1>
 <p>
 Let's dress up the state heading. Let's give it
 a color band by setting the row's background color.

 <ul>
 <li>Select the state group header row (first group header) by clicking on the shaded box to the left
 of the row. (Remember to display, then click on the table tab to display the scaffolding.)
 <li>Locate or open the Property Editor.
 <li>A list of property types appears at the left of the view. Click on the General
 group.
 <li>Find the Background color field. Click on the empty gray button to display the
 color chooser.
 <li>Pick the blue color third from the right in the top row. This is a standard
 color, but is a bit too dark for our needs.
 <li>Click on the "Define Custom Colors" button.
 <li>Take the right-most slider (saturation) and move it up to produce a very light
 blue.
 <li>Click OK.
 </ul>

 <h1>Setting the Font</h1>
 <p>
 Now, let's give the state a bold font. We'll also dress up the city group heading
 by giving it a dark blue, bold, larger font.

 <ul>
 <li>Select the state data item.
 <li>Switch to the General property group in the Property Editor.
 <li>Find the Font size field. Change the size to "Large".
 <li>Click the [B] (bold) button to make the font bold.
 <li>Select the city data item.
 <li>Again, switch to the General property group.
 <li>Set the font size to Large.
 <li>Click on the Font Color button.
 <li>The color chooser again opens. Again choose the blue that is third from the right
 in the top row.
 <li>Click OK.
 </ul>

 <h1>Formatting Data</h1>
 <p>
 We want to format the phone numbers so that they have correct North American
 format: (123) 555-1212. We do this by applying a string format to the phone number
 field. Formats are also available for dates and numbers.

 <ul>
 <li>Select the phone number item.
 <li>Switch to the Format String page in the Property Editor.<li>Choose Custom
 for Format String as.<li>Choose Phone Number from the list.<li>In the Format
 Code field, add a space after the closing parenthesis to produce the following:</ul>

 <pre class="code-block">(@@@) @@@-@@@@</pre>

 <h1>Setting a Border</h1>
 <p>
 Next, let's put a "drop shadow" border around our table.

 <ul>
 <li>Click on the table tab.
 <li>Select the Borders page in the Property Editor.
 <li>Set the Style field to a solid line. (This is the default.)<li>Set the Color field to a black. (Use the color name pull-down, or choose the
 bottom left color in the color chooser.)&nbsp; (This is the default.)<li>Set the Width property to the thinnest line.&nbsp;
 (This is the default.)<li>Click the top and left border buttons.
 <li>Set the Width property to the second thinnest line.
 <li>Click the bottom and right border buttons.
 </ul>

 <div class="caution"><span class="caution-head">Release 1.0.1 Note:</span> Once
   you select some other item, the Property Editor will no longer display your
   border settings. The properties are still set, but the UI does not display
   them. Use the Properties view to see them. To open the Properties view, use
   the main menu and choose Window&rarr;Show&nbsp;View&rarr;Properties.</div>

 <h1>More on Properties</h1>
 <p>
 BIRT provide a wide variety of properties for formatting report items. The properties
 are based on the
 <a href="http://www.w3.org/TR/CSS21/">W3C CSS<a>
 (Cascading Style Sheet) standard. If you've ever used CSS
 to format HTML, you are well on your way to understanding formatting in BIRT.
 <p>
 BIRT adds additional, report-specific properties such as the date, number and string
 formatting that we just set. However, even these act just like CSS properties.
 <p>

 </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">Setting Visual Properties</p>

	<h1>Resizing Table Columns</h1>
	<p>
	Let's adjust the size of the table columns. Tables & columns can
	be sized using absolute sizes (inches, centimeters), or relative sizes (percentage
	of the width of the page.) Here, we'll adjust the column widths by directly
	changing the size.

	<ul>
	<li>Click the Layout tab to switch back to the report layout.
	<li>Display, then click on the table tab to display the "scaffolding."
	<li>Find the black line that separates the "City" and "State" column headings.
	<li>With the cursor over this line, hold down the left mouse button and resize
	the column to be about big enough to hold the two-letter state code and label.<li>Repeat the above to resize the city column.
	</ul>

	<h1>Setting the Background Color</h1>
	<p>
	Let's dress up the state heading. Let's give it
	a color band by setting the row's background color.

	<ul>
	<li>Select the state group header row (first group header) by clicking on the shaded box to the left
	of the row. (Remember to display, then click on the table tab to display the scaffolding.)
	<li>Locate or open the Property Editor.
	<li>A list of property types appears at the left of the view. Click on the General
	group.
	<li>Find the Background color field. Click on the empty gray button to display the
	color chooser.
	<li>Pick the blue color third from the right in the top row. This is a standard
	color, but is a bit too dark for our needs.
	<li>Click on the "Define Custom Colors" button.
	<li>Take the right-most slider (saturation) and move it up to produce a very light
	blue.
	<li>Click OK.
	</ul>

	<h1>Setting the Font</h1>
	<p>
	Now, let's give the state a bold font. We'll also dress up the city group heading
	by giving it a dark blue, bold, larger font.

	<ul>
	<li>Select the state data item.
	<li>Switch to the General property group in the Property Editor.
	<li>Find the Font size field. Change the size to "Large".
	<li>Click the [B] (bold) button to make the font bold.
	<li>Select the city data item.
	<li>Again, switch to the General property group.
	<li>Set the font size to Large.
	<li>Click on the Font Color button.
	<li>The color chooser again opens. Again choose the blue that is third from the right
	in the top row.
	<li>Click OK.
	</ul>

	<h1>Formatting Data</h1>
	<p>
	We want to format the phone numbers so that they have correct North American
	format: (123) 555-1212. We do this by applying a string format to the phone number
	field. Formats are also available for dates and numbers.

	<ul>
	<li>Select the phone number item.
	<li>Switch to the Format String page in the Property Editor.<li>Choose Custom
	for Format String as.<li>Choose Phone Number from the list.<li>In the Format
	Code field, add a space after the closing parenthesis to produce the following:</ul>

	<pre class="code-block">(@@@) @@@-@@@@</pre>

	<h1>Setting a Border</h1>
	<p>
	Next, let's put a "drop shadow" border around our table.

	<ul>
	<li>Click on the table tab.
	<li>Select the Borders page in the Property Editor.
	<li>Set the Style field to a solid line. (This is the default.)<li>Set the Color field to a black. (Use the color name pull-down, or choose the
	bottom left color in the color chooser.)  (This is the default.)<li>Set the Width property to the thinnest line.
	(This is the default.)<li>Click the top and left border buttons.
	<li>Set the Width property to the second thinnest line.
	<li>Click the bottom and right border buttons.
	</ul>

	<div class="caution"><span class="caution-head">Release 1.0.1 Note:</span> Once
	you select some other item, the Property Editor will no longer display your
	border settings. The properties are still set, but the UI does not display
	them. Use the Properties view to see them. To open the Properties view, use
	the main menu and choose Window→Show View→Properties.</div>

	<h1>More on Properties</h1>
	<p>
	BIRT provide a wide variety of properties for formatting report items. The properties
	are based on the
	<a href="http://www.w3.org/TR/CSS21/">W3C CSS<a>
	(Cascading Style Sheet) standard. If you've ever used CSS
	to format HTML, you are well on your way to understanding formatting in BIRT.
	<p>
	BIRT adds additional, report-specific properties such as the date, number and string
	formatting that we just set. However, even these act just like CSS properties.
	<p>

	</body>
	</html>