创建 Spry 数据集

创建 Spry 数据集

目录

• 创建 Spry HTML 数据集

   

• 创建 Spry XML 数据集

   

• 为数据集选择布局

   

  • 动态表格布局

     

  • 主/详细布局

     

  • 堆积容器布局

     

  • 带有聚光灯区域的堆积容器布局

     

  • 不要插入 HTML

     

• 编辑数据集

   

• 使用设计时输入功能

   

• 关于 Spry 数据选择器

   

• 关于动态 Spry 主表格和更新详细区域

   

创建 Spry HTML 数据集

1. 如果仅是创建数据集，您无需考虑插入点。如果要创建数据集，同时还要插入布局，请确保插入点位于希望插入布局的页面位置。

2. 选择“插入”>“Spry”>“Spry 数据集”。

3. 在“指定数据源”屏幕中，执行以下操作：

   • 从“选择数据类型”弹出菜单中，选择“HTML”。（默认选中此项。）

   • 为新数据集指定名称。第一次创建数据集时，默认名称为 ds1。数据集名称可以包含字母、数字和下划线，但不能以数字开头。

   • 在数据源中指定希望 Dreamweaver 检测的 HTML 元素。例如，如果已将数据组织在 div 标签中，希望 Dreamweaver 检测 div 标签而不是表格，请从“检测”弹出菜单中选择“Divs”。通过“自定义”选项，您可以输入希望检测的任何标签名称。

   • 指定包含 HTML 数据源的文件的路径。此路径可以是指向您站点中本地文件的相对路径（例如 data/html_data.html），也可以是指向现用网页的绝对 URL（使用 HTTP 或 HTTPS）。您可以单击“浏览”按钮，导航并选择本地文件。

     Dreamweaver 将在“数据选择”窗口中呈现 HTML 数据源，并显示可用作数据集容器的元素的可视标记。希望使用的元素必须已分配有唯一 ID。如果未分配，Dreamweaver 将显示错误消息，您将需要返回数据源文件，分配一个唯一 ID。此外，数据源文件中的合格元素不得位于 Spry 区域中，也不得包含其它数据引用。

     或者，您也可以指定“设计时输入”作为数据源。有关详细信息，请参阅使用设计时输入功能。

   • 单击“数据选择”窗口中显示的其个黄色箭头，或从“数据容器”弹出菜单中选择一个 ID，以此为数据容器选择元素。

     查看完全大小图形

     为 HTML 数据集数据容器选择元素。

     
     

     对于过长的文件，您可以单击“数据选择”窗口底部的“展开/折叠”箭头，查看更多数据。

     为数据集选择容器元素后，Dreamweaver 会在“数据预览”窗口中显示数据集预览。

   • （可选）如果希望为数据集指定 CSS 数据选择器，请选择“高级数据选择”。例如，如果在“行选择器”文本框中指定 .product，在“列选择器”文本框中指定 .boximage，数据集将仅包含分配有 .product 类别的行，以及分配有 .boximage 类别的列。

     如果要在给定文本框中键入多个选择器，请用逗号分隔。

     有关详细信息，请参阅关于 Spry 数据选择器。

   • 完成“指定数据源”屏幕中的操作时，单击“完成”可立即创建数据集，也可以单击“下一步”，转到“设置数据选项”屏幕。如果单击“完成”，数据集将出现在“绑定”面板（“窗口”>“绑定”）中。

4. 在“设置数据选项”屏幕中，执行以下操作：

   • （可选）选中一列，然后从“类型”弹出菜单中选择一种列类型，以此设置数据集的列类型。例如，如果数据集中有一列包含数字，请选中该列，然后从“类型”弹出菜单中选择“数字”。仅当您希望用户能够按该列排序数据时，此选项才有意义。

     选择数据集列的方式有以下三种：单击列标题；从“列名”弹出菜单中选择该列；使用屏幕左上角的左右箭头导航到该列。

   • （可选）从“对列排序”弹出菜单中选择要用作排序依据的列，这样可以指定希望如何排序数据。选择列后，您可以指定是按升序还是按降序排序该列。

   • （可选：仅限表格）如果希望使用通用列名，即 column0、column1、column2 等，而不使用 HTML 数据源中指定的列名，请取消选择“将第一行作为标题”。

     注： 如果所选数据集容器元素不是表格，此选项和下一选项均不可用。对于不是基于表格的数据集，Dreamweaver 自动使用 column0、column1、column2 等作为列名。

   • （可选：仅限表格）选择“将列作为行”可以反转数据集中数据的水平方向与垂直方向。如果选择此选项，列将用作行。

   • （可选）选择“筛选掉重复行”，排除数据集中重复的数据行。

   • （可选）如果希望始终能够访问数据集中最近使用的数据，请选择“禁用数据缓存”。如果希望自动刷新数据，请选择“自动刷新数据”，并以毫秒为单位指定刷新时间。

   • 完成“设置数据选项”屏幕中的操作时，单击“完成”可立即创建数据集，也可以单击“下一步”，转到“选择插入选项”屏幕。如果单击“完成”，数据集将出现在“绑定”面板（“窗口”>“绑定”）中。

5. 在“选择插入选项”屏幕中，执行下列操作之一：

   • 为新数据集选择布局，并指定适当的设置选项。有关详细信息，请参阅为数据集选择布局。

   • 选择“不要插入 HTML”。如果选择此选项，Dreamweaver 将创建数据集，但不会向页面中添加任何 HTML。数据集显示在“绑定”面板（“窗口”>“绑定”）中，您可以手动将所需数据从数据集拖动到页面。

6. 单击“完成”。

   Dreamweaver 将创建数据集。如果您选择了布局选项，Dreamweaver 还将在页面上显示布局和数据占位符。如果查看“代码视图”，您会看到，Dreamweaver 已在标头中添加对 SpryData.js 文件和 SpryHTMLDataSet.js 文件的引用。这些文件是重要的 Spry 资源，与页面一起使用。请勿从页面删除此代码，否则数据集将无效。将页面上传到服务器时，也需要以相关文件的形式上传这些文件。

创建 Spry XML 数据集

1. 如果仅是创建数据集，您无需考虑插入点。如果要创建数据集，同时还要插入布局，请确保插入点位于希望插入布局的页面位置。

2. 选择“插入”>“Spry”>“Spry 数据集”。

3. 在“指定数据源”屏幕中，执行以下操作：

   • 从“选择数据类型”弹出菜单中，选择“XML”。

   • 为新数据集指定名称。第一次创建数据集时，默认名称为 ds1。数据集名称可以包含字母、数字和下划线，但不能以数字开头。

   • 指定包含 XML 数据源的文件的路径。此路径可以是指向您站点中本地文件的相对路径（例如 datafiles/data.xml），也可以是指向网页的绝对 URL（使用 HTTP 或 HTTPS）。您可以单击“浏览”按钮，导航并选择本地文件。

     Dreamweaver 将在“行元素”窗口中呈现 XML 数据源，显示可供选择的 XML 数据元素树。重复元素以加号 (+) 标示，子元素缩进显示。

     或者，您也可以指定“设计时输入”作为数据源。有关详细信息，请参阅使用设计时输入功能。

   • 选择包含要显示的数据的元素。通常情况下，此元素是重复元素，如 <menu_item>，并带有若干子元素，如 <item>、<link>、<description> 等。

     查看完全大小图形

     为 XML 数据集选择重复元素。

     
     

     为数据集选择容器元素后，Dreamweaver 会在“数据预览”窗口中显示数据集预览。XPath 文本框会显示一个表达式，指明所选节点在 XML 源文件中位置。

     注： Xpath（XML 路径语言）是一种语法，用于确定 XML 文档各部分的位置。大多数情况下，Xpath 用作 XML 数据的查询语言，这与 SQL 语言用于查询数据库一样。有关 XPath 的详细信息，请参阅 W3C Web 站点上的 XPath 语言规范，网址为 www.w3.org/TR/xpath。

   • 完成“指定数据源”屏幕中的操作时，单击“完成”可立即创建数据集，也可以单击“下一步”，转到“设置数据选项”屏幕。如果单击“完成”，数据集将出现在“绑定”面板（“窗口”>“绑定”）中。

4. 在“设置数据选项”屏幕中，执行以下操作：

   • （可选）选中一列，然后从“类型”弹出菜单中选择一种列类型，以此设置数据集的列类型。例如，如果数据集中有一列包含数字，请选中该列，然后从“类型”弹出菜单中选择“数字”。仅当您希望用户能够按该列排序数据时，此选项才有意义。

     选择数据集列的方式有以下三种：单击列标题；从“列名”弹出菜单中选择该列；使用屏幕左上角的左右箭头导航到该列。

   • （可选）从“对列排序”弹出菜单中选择要用作排序依据的列，这样可以指定希望如何排序数据。选择列后，您可以指定是按升序还是按降序排序该列。

   • （可选）选择“筛选掉重复行”，排除数据集中重复的数据行。

   • （可选）如果希望始终能够访问数据集中最近使用的数据，请选择“禁用数据缓存”。如果希望自动刷新数据，请选择“自动刷新数据”，并以毫秒为单位指定刷新时间。

   • 完成“设置数据选项”屏幕中的操作时，单击“完成”可立即创建数据集，也可以单击“下一步”，转到“选择插入选项”屏幕。如果单击“完成”，数据集将出现在“绑定”面板（“窗口”>“绑定”）中。

5. 在“选择插入选项”屏幕中，执行下列操作之一：

   • 为新数据集选择布局，并指定适当的设置选项。有关详细信息，请参阅为数据集选择布局。

   • 选择“不要插入 HTML”。如果选择此选项，Dreamweaver 将创建数据集，但不会向页面中添加任何 HTML。数据集显示在“绑定”面板（“窗口”>“绑定”）中，您可以手动将所需数据从数据集拖动到页面。

6. 单击“完成”。

   Dreamweaver 将创建数据集。如果您选择了布局选项，Dreamweaver 还将在页面上显示布局和数据占位符。如果查看“代码视图”，您会看到，Dreamweaver 已在标头中添加对 xpath.js 文件和 SpryData.js 文件的引用。这些文件是重要的 Spry 资源，与页面一起使用。请勿从页面删除此代码，否则数据集将无效。将页面上传到服务器时，也需要以相关文件的形式上传这些文件。

为数据集选择布局

在“选择插入选项”屏幕上，您可以选择各种显示选项，不同选项对应数据集中的值在页面上的不同显示方式。您可以使用动态 Spry 表格、主/详细布局、堆积容器（单列）布局或带有聚光灯区域的堆积容器（两列）布局来显示数据。“选择插入选项”屏幕上会显示每种布局的缩略图表示。

动态表格布局

如果希望在动态 Spry 表格中显示数据，请选择此选项。Spry 表格支持动态列排序和其它交互行为。

选择此选项后，请单击“设置”按钮，打开“插入表格”对话框，然后执行以下步骤：

1. 在“列”面板中执行下列操作，调整表格中的列：

   • 选择列名并单击减号 (-)，从表格中删除列。单击加号 (+) 并选择列名，向表格添加新列。

   • 选择列名并单击上/下箭头，移动列。向上移动列会使其在所显示表格中左移；向下移动列会使其右移。

2. 若要使列可排序，请从“列”面板中选择列，然后选择“单击标题时将对列排序”。默认情况下，所有列均可排序。

   若希望使列不可排序，请从“列”面板中选择该列名称，然后取消选择“单击标题时将对列排序”。

3. 如果您的页面关联有 CSS 样式（或者作为附加样式表，或者作为 HTML 页面中的一组单独样式），则可以为以下一个或多个选项应用 CSS 类：

   奇数行类

   根据所选类样式，更改动态表格中奇数行的外观。

   偶数行类

   根据所选类样式，更改动态表格中偶数行的外观。

   悬停类

   根据所选类样式，更改将鼠标悬停在表格行上时，表格行的外观。

   选择类

   根据所选类样式，更改单击表格行时，表格行的外观。

   注： 奇数类、偶数类、悬停类和选择类在样式表中的顺序具有重大意义。规则应确切按照上述顺序（奇数类、偶数类、悬停类和选择类）排列。如果样式表中，悬停规则位于选择规则的后面，那么悬停效果将在用户鼠标悬停在其它行上时出现。如果样式表中，悬停规则和选择规则位于奇数规则和偶数规则的前面，奇数效果和偶数效果将完全无法实现。您可以在 CSS 面板中拖动规则，将其正确排序，也可以直接处理 CSS 代码。

4. 如果正在创建的表格将成为动态 Spry 主表格，请选择“单击行时将使用‘更新’详细区域”。有关详细信息，请参阅关于动态 Spry 主表格和更新详细区域。

5. 单击“确定”关闭对话框，然后在“选择插入选项”屏幕中单击“完成”。

   如果切换到“设计视图”，您将看到表格，它显示为一个标题行和一个数据引用行。数据引用突出显示，并括在大括号 ({}) 中。

主/详细布局

如果希望使用主/详细布局来显示数据，请选择此选项。通过主/详细布局，用户单击主区域（左区域）中的项目，即可更新详细区域（右区域）的信息。通常情况下，主区域包含一个很长的名称列表，例如可用产品的列表。当用户单击其中一个产品名称时，详细区域将显示有关所选产品的更详细信息。

选择此选项后，请单击“设置”按钮，打开“插入主/详细布局”对话框，然后执行以下步骤：

1. 在“主列”面板中执行以下步骤，调整主区域的内容：

   • 选择列名并单击减号 (-)，从主区域中删除列。单击加号 (+) 并选择列名，向主区域添加新列。默认情况下，Dreamweaver 使用数据集中的第一列数据来填充主区域。

   • 选择列名并单击上/下箭头，移动列。在“主列”面板中向上或向下移动列，设置该数据在页面上主区域中的显示顺序。

2. 在“详细列”面板中，重复上述步骤。默认情况下，Dreamweaver 使用所有未出现在主区域中的数据（即数据集中除第一列外的所有列）来填充详细区域。

3. （可选）为详细区域中的数据设置不同的容器类型。为此，请选择详细列的名称，然后从“容器类型”弹出菜单中选择要用于该列的容器。您可以从 DIV、P、SPAN 或 H1-H6 标签中进行选择。

4. 单击“确定”关闭对话框，然后在“选择插入选项”屏幕中单击“完成”。

   如果切换到“设计视图”，您将看到主/详细区域，其中填充有所选数据引用。数据引用突出显示，并括在大括号 ({}) 中。

堆积容器布局

如果希望在页面上使用重复容器结构来显示数据，请选择此选项。例如，如果数据集中有 4 列数据，则每个容器都可以包含所有 4 列，且对于数据集的每一行，容器结构都重复一次。

选择此选项后，请单击“设置”按钮，打开“插入堆积容器”对话框，然后执行以下步骤：

1. 在“列”面板中执行以下步骤，调整堆积容器的内容：

   • 选择列名并单击减号 (-)，从堆积容器中删除列。单击加号 (+) 并选择列名，向容器添加新列。默认情况下，Dreamweaver 使用数据集中的每列数据来填充堆积容器。

   • 选择列名并单击上/下箭头，移动列。在“列”面板中向上或向下移动列，设置该数据在页面上堆积容器中的显示顺序。

2. （可选）为堆积容器中的数据设置不同的容器类型。为此，请选择数据集列的名称，然后从“容器类型”弹出菜单中选择要用于该列的容器。您可以从 DIV、P、SPAN 或 H1-H6 标签中进行选择。

3. 单击“确定”关闭对话框，然后在“选择插入选项”屏幕中单击“完成”。

   如果切换到“设计视图”，您将看到容器，其中填充有所选数据引用。数据引用突出显示，并括在大括号 ({}) 中。

带有聚光灯区域的堆积容器布局

如果希望在页面上使用其中每个容器都带有聚光灯区域的重复容器结构来显示数据，请选择此选项。通常情况下，聚光灯区域包含图片。聚光灯区域布局与堆积容器布局类似。不同之处在于，在聚光灯区域布局中，数据显示分为两个单列（在同一容器中）。

选择此选项后，请单击“设置”按钮，打开“插入聚光灯区域布局”对话框，然后执行以下步骤：

1. 在“聚光灯列”面板中执行以下步骤，调整聚光灯区域的内容：

   • 选择列名并单击减号 (-)，从聚光灯区域中删除列。单击加号 (+) 并选择列名，向聚光灯区域添加新列。默认情况下，Dreamweaver 使用数据集中的第一列数据来填充聚光灯区域。

   • 选择列名并单击上/下箭头，移动列。在“聚光灯列”面板中向上或向下移动列，设置该数据在页面上聚光灯区域中的显示顺序。

2. （可选）为聚光灯区域中的数据设置不同的容器类型。为此，请选择数据集列的名称，然后从“容器类型”弹出菜单中选择要用于该列的容器。您可以从 DIV、P、SPAN 或 H1-H6 标签中进行选择。

3. 在“堆积列”面板中，重复上述步骤。默认情况下，Dreamweaver 使用所有未出现在聚光灯区域中的数据（即数据集中除第一列外的所有列）来填充堆积列。

4. 单击“确定”关闭对话框，然后在“选择插入选项”屏幕中单击“完成”。

   如果切换到“设计视图”，您将看到聚光灯区域，旁边是堆积容器，其中填充有所选数据引用。数据引用突出显示，并括在大括号 ({}) 中。

不要插入 HTML

如果您计划创建数据集，但希望 Dreamweaver 不要为数据集插入 HTML 布局，请选择此选项。数据集显示在“绑定”面板（“窗口”>“绑定”）中，您可以手动将所需数据从数据集拖动到页面。

尽管创建数据集时没有插入布局，您仍可随时插入可用的 HTML 布局之一。为此，请在“绑定”面板中双击所需数据集的名称，单击进入“选择插入选项”屏幕，选择所需布局，然后单击“完成”。

注： 您也可以将数据集的名称从“绑定”面板拖到页面上的插入点。执行此操作时，将打开“选择插入选项”屏幕。选择布局，然后单击“完成”。

编辑数据集

创建 Spry 数据集后，可随时编辑它。

 在“绑定”面板（“窗口”>“绑定”）中，双击所需数据集的名称，然后进行编辑。

注： 编辑数据集时，若在“选择插入选项”屏幕中选择一个新布局，Dreamweaver 不会替换页面上现有的任何布局，而是插入新的布局。

使用设计时输入功能

如果您使用的是仍在开发过程中的数据，则可能会发现使用设计时输入功能会非常有用。例如，如果服务器开发人员还在完善 XML 数据文件的后台数据库，您可以使用该文件的测试版本，独立于数据开发工作来设计自己的页面。

若使用设计时输入，Dreamweaver 仅使用所输入数据来填充您的工作环境。在对位于页面代码内的数据源的引用中，将仅剩余对要使用的实际数据源的引用。

1. 开始创建 Spry 数据集（参阅上述步骤说明）。

2. 在“指定数据源”屏幕中，单击“设计时输入”链接。

3. 单击“浏览”按钮，找到所需设计时输入，然后单击“确定”。

关于 Spry 数据选择器

使用 Dreamweaver 来创建 Spry 数据集时，Dreamweaver 默认包含所选容器中的所有数据。您可以使用 CSS 数据选择器调整选择行为。CSS 数据选择器允许您指定附加到特定数据片段的 CSS 规则，从而仅包含数据源中的部分数据。例如，如果在“指定数据源”屏幕的“行选择器”文本框中指定 .product，Dreamweaver 创建的数据集中将仅包含分配有 .product 类的行。

要激活数据选择器框，必须在“指定数据源”屏幕中选中“高级数据选择”选项。如果在数据选择器中进行输入并取消选择此选项，Dreamweaver 将保留您在框中键入的内容，但不会将其用作数据集的过滤器。

关于动态 Spry 主表格和更新详细区域

Spry 数据集最常见的用法之一就是创建一个或多个 HTML 表格，这些表格可动态更新其它页面数据以响应用户的操作。例如，如果用户从表格的产品列表中选择一种产品，数据集可立即使用有关所选产品的详细信息来更新页面上其它位置的数据。借助 Spry，这些更新不需要刷新页面。

这些独立页面区域称为主 区域和详细 区域。通常情况下，页面上的一个区域（主区域）显示分类项目列表（例如产品列表），页面上的另一个区域（详细区域）显示有关所选记录的详细信息。

每个数据集都有一个当前行。默认情况下，数据集中的第一个数据行是该数据集的当前行。用户在主区域中进行不同选择时（请仍考虑不同产品的列表的例子），Spry 会实际更改数据集的当前行。因为详细区域依赖主区域，所以用户与主区域的交互（例如选择不同的产品）所引起的任何变化，都将导致详细区域内所显示的数据发生变化。

在 Dreamweaver 自动为您创建主/详细布局时，主区域和详细区域之间的所有关联都已正确就绪。但如果希望自行创建动态主表格，您可以通过相关选项，为以后将此表格与详细区域进行关联做好准备。若在“插入表格”对话框内，选中了“单击行时将使用‘更新’详细区域”选项，Dreamweaver 将在动态表格重复行的标签中插入 spry:setrow 标签。此属性将按主表格来准备您的表格。当用户与主表格交互时，主表格可以重置数据集的当前行。