adobe dreamweaver cs5 on demand part 63 pot

ptg
386 Chapter 16
With the spry tooltip widget, you can add screen information for ele-
ments on a web page. When you hover over an element, a tooltip with
information about the element, a title or short description, appears for a
short period of time or until you stop hovering over the element. A spry
tooltip consists of a container, page element, and JavaScript. When
you insert a spry tooltip, a container appears with a blue tab on top and
a placeholder sentence inside. You can add formatting for a tooltip by
using standard CSS styles. When you display the tooltip, by default, it
appears 20 pixels down and to the right of the cursor.
Creating a Spry Tooltip
Create a Spry Tooltip
Open the Web page you want to
insert a spry tooltip.
Select the full tag element you
want to add a tooltip.
Click the Spry tab on the Insert
panel, or click the Insert menu,
point to Spry, and then click Spry
Tooltip.
A container with a placeholder
sentence for the tooltip appears.
The container displays a blue tab
with the Spry Tooltip name.
Select the placeholder text, and
then enter the tooltip text that you
want.
Select the spry tooltip widget, and
then select from the following
options in the Properties panel:

◆ Name. Specifies a name for the
tooltip container.
◆ Trigger. Identifies the elements
that triggers the tooltip.
◆ Follow Mouse. Causes the
tooltip to follow the mouse.
◆ Hide on Mouse Out. Keeps the
tooltip open as long as the
mouse is hovering over the
tooltip (even if the mouse
leaves the trigger). Helpful for
selecting links in a tooltip.
5
4
3
2
1
1
3
2
From the Library of Wow! eBook
ptg
Chapter 16 Using Spry Widgets and Effects 387
◆ Horizontal or Vertical Offset.
Specifies the tooltips horizontal
or vertical position in relation to
the mouse. The offset value is
in pixels.
◆ Show Delay. Specify the delay
in milliseconds before the

tooltip appears after the tooltip
has been triggered.
◆ Hide Delay. Specify the delay in
milliseconds before the tooltip
disappears after the tooltip has
been triggered.
◆ Effect. Specify the type of
effect you want when the
tooltip appears. The Blind
option acts like a window blind
to display and hide the tooltip.
The Fade option fades the
tooltip in and out.
Edit a Spry Tooltip
Open the Web page with the spry
tooltip.
Hover over or place the insertion
point in the tooltip content on the
page.
Click the tooltip’s blue tab to
select it.
Modify the text in the tooltip or
change the tooltip options in the
Properties panel.
4
3
2
1
5
1

4
3
Spry tooltip
4
From the Library of Wow! eBook
ptg
388 Chapter 16
Displaying Spry
Data Sets
Display the Spry HTML Data Set
Open the Web page you want to
use.
Click the Spry tab on the Insert
panel, or click the Insert menu,
point to Spry, and then click Spry
Data Set.
Click the Select Data Type list
arrow, and then click HTML.
Enter a name for the spry data set
or use the default one, ds1.
Click the Detect list arrow, and
then select the type of HTML
elements in your data source that
you want to detect.
Click Browse, navigate to and
select the HTML data file, and then
click OK.
◆ To use a sam ple feed on your
test server, click the Design
Time Feed link.

In the Data Selection window, click
one of the yellow arrows with the
element for your data container.
You can also select an ID from the
Data Containers list arrow.
If you want to specify CSS data
selectors, select the Advanced
data selection check box, and then
enter a data selector, such as
.product, to filter the data.
Click Next to continue.
9
8
7
6
5
4
3
2
1
A spry data set allows you to provide interactive data to visitors on your
site. The data on the page changes based on the visitors’ selections.
For example, you can select an option in one part of a page, and then
display other content somewhere else on a page without requiring a
full-page refresh. To use data sets to create a dynamic page, you need
to take a few steps. First, you identify one or more data sets (HTML or
XML source files) that contain the data you want to use. Next, you
insert one or more spry data objects to display the data on a page.
When a visitor opens the page in a browser, the data set loads like a
normal table containing columns and rows.

3
4
5
6
98
7
From the Library of Wow! eBook
ptg
Chapter 16 Using Spry Widgets and Effects 389
Select the column you want to use
in the Data Preview window.
If you want to validate the data to a
specific type, click the Typ e list
arrow, and then select a data type.
If you want to sort the data as it
loads, click the Sort Column list
arrow, select a sort option, click
the Direction list arrow, select the
direction you want, and then select
or clear the sort check boxes.
Select the Filter Out Duplicate
Rows check box to eliminate any
duplicate columns.
Select the Disable Data Caching
check box to load data directly
from the server, otherwise it
caches it on your local computer.
Select the Auto Refresh Data check
box, and then enter an interval
value in milliseconds to refresh the

data from the server.
Click Next to continue.
Select a display option for the data,
and then click Set Up to specify
how you want to layout the data.
◆ Insert Table. Creates a dynamic
Spry Table.
◆ Insert Master/Detail Layout.
Creates a master region on the
left that updates information in
the detailed region on the right.
◆ Insert Stacked Containers.
Creates a stacked repeating
container structure for data.
◆ Insert Stacked Containers with
Spotlight Area. Creates a
stacked repeating container
structure (2 columns) with a
spotlight area (for a picture).
◆ Do Not Insert HTML. Creates a
data set without inserting a data
layout.
Click Done.
Continue Next Page
18
17
16
15
14
13

12
11
10
10
11
12
13
1614
15
17
18
From the Library of Wow! eBook
ptg
390 Chapter 16
Continued from Previous Page
Display the Spry XML Data Set
Open the Web page you want to
use.
Click the Spry tab on the Insert
panel, or click the Insert menu,
point to Spry, and then click Spry
XML Data Set.
TIMESAVER
If you don’t have
an XML data set, you can get a
sample at www.adobe.com/go/
learn_dw_spryframework.
Click the Select Data Type list
arrow, and then click HTML.
Enter a name for the spry data set

or use the default one, ds1.
Click Browse, navigate to and
select the XML data file, and then
click OK.
◆ To use a sam ple feed on your
test server, click the Design
Time Feed link.
Click Get Schema to populate the
Row Elements panel.
Select the element that contains
the data you want to display. The
element typically is a repeating
node with one or more subfields.
The XPath text box shows the data
found in the data set. A preview of
the data set appears in the Data
Preview window.
Click Next to continue.
Select the column you want to use
in the Data Preview window.
If you want to validate the data to
be a specific type, click the Typ e
list arrow, and then select a data
type.
10
9
8
7
6
5

4
3
2
1
3
4
5
9
10
From the Library of Wow! eBook
ptg
Chapter 16 Using Spry Widgets and Effects 391
If you want to sort the data as it
loads, click the Sort Column list
arrow, select a sort option, click
the Direction list arrow, and then
select the direction you want.
Select the Filter Out Duplicate
Rows check box to eliminate any
duplicate columns.
Select the Disable Data Caching
check box to load data directly
from the server, otherwise it
caches it on your local computer.
Select the Auto Refresh Data check
box, and then enter an interval
value in milliseconds to refresh the
XML data from the server.
Click Next to continue.
Select a display option for the data,

and then click Set Up to specify
how you want to layout the data.
Click Done.
View the Spry XML Data Set
Open the Web page with the spry
XML data set you want to view.
Click the Window menu, and then
click Bindings to display the
Bindings panel.
The spry XML data set appears,
displaying the structure of the data.
2
1
17
16
15
14
13
12
11
2
Data structure
16
17
From the Library of Wow! eBook