Instead of having exactly one output component in each column of
the data table, it is possible to combine elements within columns to produce
a more attractive layout. You will use a group box to arrange the components,
similar to how you would use a hidden HTML table. Specifically, after adding
the image component to visually enhance the site, you will take most of the
textual information about each ad and place it into a single data table column,
which will then be labeled DETAILS.
- Click the Enhanced Faces Components drawer in the Palette to open
it. Drag a Panel - Group Box component into the TITLE
column of the data table. The Select Type window opens.
- Choose Box as the group box type in the
Select Type window and click OK. This group
box lays out components placed within it in a single column or row and can
be oriented either vertically or horizontally.
- Click the group box to select it.
- Using the Properties view, change the Orientation to Vertical.
- Drag the {TITLE} component into the list
group box. The instructional text in the group box disappears once you add
a component to it.
- Drag an Image component from the Enhanced
Faces Components drawer of the Palette into the list group box. It helps to
drop the image component onto the bottom edge of the group box in order to
ensure that the image will be placed below the title.
- Click the image component that you just added.
- Use the Size area of the Properties view
to set the Width to 60 pixels and the Height to
50 pixels. This ensures that no matter what size the images are in the database,
they will always appear as 60x50 on the page.
- Bind the image component to the PHOTO column of all_recordlist
by dragging the PHOTO column from the Page Data view onto the image component.
This will cause the image component to display the image data found in the
PHOTO column of each record. If the PHOTO (ByteArray) column is not listed,
right-click all_recordlist (ADS) in the Page Data view
and select Configure from the menu. Click OK to
close the URL window if it opens. In the Configure Relational Record List
window, click Next. Select ADS and then click Next.
Click to check the box next to PHOTO (ByteArray) and
then click Finish.
- Click the graphic you inserted. On the hx:graphicImageEx tab
of the Properties view, click the Select Page Data Object
button next to the Type field.
The Select Page Data Object window opens.
- Click to expand .
- Click IMAGETYPE (String).
- Click OK, then save the page.
Your page should now look like this: