The Button bar creates JavaScript button bars to control the sequencing of
the Component Effects components. Click
here to see the button
bar and Presenter in action. We have made some changes to the Button Bar
Helper to make it even easier to use. This tip will outline the process of
setting up the Presenter component and a Button Bar.
Step 1: Setup the Presenter Component
Insert a DPA component on
the page. It is recommended that you place the component and button bar
each in its own table row so that you can better control the layout of the
component and button bar.
Note: By default, once the page is loaded, the
Presenter will begin showing the images one after the other in sequence. If
you would like the Presenter to show the first image and then wait for the
user to use the button bar to advance the images, then you will need to set
the Presenter Animation Mode to "JavaScript controlled".
Step 2: Save the Page
Once the Presenter component has been inserted onto the page, save the page (this will make the component available
to the Button Bar Helper).
Step 3: Insert the Button Bar
Use the "Insert->FrontLook->FrontLook
Component Effects->Button Bar Helper..." menu to bring up the Button Bar
helper. The Button Bar Helper will scan the current page for any FrontLook
CFX components. Now select the component referenced on the page, select the
button style and button bar type.
Button Bar Help Dialog
In this example we selected the
"Blue Round Aqua" button style and the "6 Buttons in a table with Labels
Under" button type. Then press OK. The Button bar helper inserts a button
template at the cursor location and copies the needed button files to your
web.
The Presenter Component and the Button Bar in
FrontPage Normal Mode
You can modify the labels (if any) and
table properties by using the normal FrontPage Editor features. You may
need to set the Cell Properties Alignment to Center to get the button bar in
the center of the table.
Note:
Once these button bars are inserted, they cannot be edited by the button bar
helper. You can however, delete the button bar and insert another one in its
place.
Note: If both the component and the button
bar are in a Share Border, then you will need to select the "Absolute
reference for shared borders" check box in both the Button Bar Helper and
the Presenter component.
Step 4: Preview the Page in the Browser
To test the button bar, select the
File->Preview in Browser in FrontPage and then after the component starts
up, press the button bar to control it.
And that its!
This tip showed you how to
use the Button Bar Helper to add user control to your Presenter component.
