OVERVIEW
This tutorial introduces you to the handling of images and text. The final report will contain the following items:
‧ A picture of a fish
‧ A description of the fish, which is a few paragraphs in length
‧ Additional information about the fish
(length, species, and category)

BUILD THE REPORT LAYOUT

Task 1 Select Data via the Query Wizard
1 Create a new report.
2 Access the Query Wizard.
3 Select the Biolife table.
4 Click Next until you reach the screen with the Set Order option.
5 Choose Select Group.
6 Choose Set Order option.
7 Click Finish.

Task 2 Lay Out the Detail Band
1 Access the design workspace.
2 Extend the detail band to two inches.
3 Place a shape in the detail band.
4 Set the fill color of the shape to red.
5 Set the size and position:
Left 0.45
Top 0
Width 2.7
Height 1.1

6 Place a DBText component over the shape.
7 Set the size and position:

Left 0.5
Top 0. 1
Width 2.6

8 Assign the Common Name field to the DBText component by selecting 'Common Name' from the drop-down list box at the upper left corner of the Report Designer.
9 Set the font size to 20 pt.
10 Set the font color to white.

Task 3 Create a Graphic
1 Place a DBImage component over the shape, just below the DBText component.
2 Set the position to:
Left 0.5
Top 0.5

3 Assign the 'Graphic' field to the DBImage component. Notice that the image is cropped because it is too big for the component.
4 Right-click and select Stretch. The entire image of the fish should now be visible. This image is slightly distorted because it natively has a rectangular shape and the Stretch property is scaling it to fit into a square.
5 Right-click and select MaintainAspectRatio. The image should be readjust so that it is no longer distorted. While the image no longer fills the entire DBImage component, it looks better because the height and width of the original image have been scaled by the same amount. Aspect ratio is the ratio of the height to the width. Maintaining the aspect ratio is simply scaling the height and the width by the same percentage.


Task 4 Use the Data Tree to Create Components
1 Create another shape and place it below the red shape in the detail band.
2 Set the size and position:
Left 0.45
Top 1. 0
Width 2.7
Height 0.8

3 Launch the Data Tree. If it does not appear docked on the left side of the Report Designer, dock it there.
4 Select the Layout tab at the bottom of the Data Tree and set the Style to Vertical.
5 Select the Data tab at the bottom of the Data Tree and Ctrl-click the following fields:
Category
Length In
Species Name

6 Drag the selection to the upper left corner of the new shape and release the mouse button. The canvas should look like this:

7 While all of the components are still selected, change the font size to 8 pt.
8 Autosize the labels (the components on the left).
9 Set the left of each label to 0.6.
10 Set the size and position of the DBText compo-nents:
Left 1.5
Width 1.6

11 Select the labels and DBText components. Hold down the Ctrl key and use the arrow keys to move the selection up and down. Notice the Top value in the status bar at the bottom right of the Report Designer. This value is updated each time you move the selection. Use the arrow keys to move the selection to 1.1042. The layout should look like this:


Task 5 Generate a Framing Shape and Text
1 Create another shape and place it to the right of the red shape.
2 Set the size and position:
Left 3.17
Top 0. 01
Width 4.15
Height 1.8

3 Place a DBMemo component over the shape.
4 Set the size and position:
Left 3.25
Top 0. 08
Width 4
Height 1.65.

5 Assign the DBMemo component to the 'Notes' field.
6 Set the DBMemo font:
Color red
Size 12 pt
Style bold

7 Press Ctrl + S and save the report under the name Fish Photo.
8 Preview the report.

FIT AND FINISH

Task 1 Adjust the Text and Shape
As you preview, notice that the description for the 'Atlantic Spadefish' is not shown completely. Let's fix this first.
1 Return to the design workspace.
2 Right-click over the DBMemo and select Stretch.
3 Preview. Now the entire description appears,but the shape bordering it does not stretch properly:

4 Return to the design workspace and right-click over the shape behind the DBMemo
5 Select StretchWithParent.
6 Preview. The shape now functions as a frame around the description.
7 Scroll to the bottom of page one. Notice that the last description does not print completely on this page. Go to the next page and scroll to the top. The description finishes printing at the top of this page, but there is no framing shape.
8 Return to the design workspace and right-click over the shape.
9 Select ReprintOnOverflow. Preview and advance to page two. The shape now appears on this page as well. Next, we want to extend the shape with the DBText components so that it matches the height of the framing shape.
10 Return to the design workspace.
11 Right-click over the shape with the DBText components and select StretchWithParent, then Preview. Now we have a great-looking page.

Task 2 Improve the Pagination
Although we have modified this layout to look as professional as possible when the description overflows onto an additional page, our preference is to keep the memo from breaking across pages in the first place. We can achieve this by using a group to hold the detail band together.

1 Return to the design workspace.
2 Select Report | Groups.
3 Select Biolife.CommonName.
4 Click the Add button. A group is created on the Common Name field. Notice that the 'Keep group together' box is checked.
5 Click OK.
6 Preview. Advance to page two. The California Moray entry is now printed completely on this page. Page two of the final report should look like this:


Note: Here we created a group that breaks for every record in the report. The group has the Keep Together option set to True, which means that if the group header, detail, and group footer bands cannot fit on the current page, then the group will break to the next page. Thus, when the description in the detail band didn't fit on page one, the group moved it to page two.

7 Close the Report Designer, saving the changes.