Displaying Spry Data Sets Display the Spry HTML Data Set Open the Web page you want to use.. Click the Select Data Type list arrow, and then click HTML.. Click the Detect list arrow, a
Trang 1With 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
Trang 2◆ 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
Trang 3Displaying 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 sample 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
9 8
7
Trang 4Select the column you want to use
in the Data Preview window
If you want to validate the data to a
specific type, click the Type 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
12
13
16 14
15
17
18
Trang 5Continued 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 sample 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 Type
list arrow, and then select a data
type
10
9
8
7
6
5
4
3
2
1
Trang 6If 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