6 附录 A – 选项卡式提示页面

注意：这份资料最初是一份单独的 Proven Practices 文档。这里的内容与原文档中相同。

6.1 更快的选项卡式提示页面

这里的场景是，客户希望向最终用户提供报表，在提示页面中使用选项卡式用户界面而不是一系列提示页面。最常用的提示出现在第一个选项卡中，其他选项卡显示不太常用的提示。

图 2.选项卡式提示页面

我们见过的一些应用程序示例有多达 60 个提示，它们分布在 6 到 8 个选项卡上。有两个问题会影响这些报表的性能。首先，提示数量大意味着 Cognos 8 在运行报表之前必须分析许多查询。一般情况下，这意味着每个提示有一个查询，还要加上报表查询本身。这个问题只能通过减少报表中使用的查询数量来解决，这超出了本文的范围。第二，原来使用的 HTML/JavaScript 技术的性质决定了它们的性能非常差。生成选项卡的标准 HTML/JavaScript 技术允许用户在不访问服务器的情况下切换选项卡。这意味着必须在显示第一个选项卡之前 填充所有提示（多达 60 个）。因为在默认情况下查询是串行运行的，需要的提示查询越多，用户等待的时间就越长。

6.2 解决方案概述

这个解决方案使用条件块显示提示。选项卡本身仍然是用 HTML 和 JavaScript 创建的。使用条件块的优点是，系统知道隐藏的块中的提示是不可见的，因此不运行填充它们所需的查询。如果用户切换选项卡，提示变得可见并运行相关联的查询。缺点是切换选项卡需要向服务器发出请求。

实现这种技术的提示页面使用条件块决定显示哪些提示。请想像一系列重叠的矩形，在任何时候只显示其中的一个。

图 3.条件块显示提示

这些块在任何时候只有其中的一个是可见的，但是所有选项卡都是一直可见的。‘当前’选项卡的边框和文本颜色设置为黑色，让它看起来像在其他选项卡前面。非当前的选项卡是灰色的，让它们不太突出。

图 4.选定选项卡

从某种程度上来说，编写报表相当简单。我们将创建一个条件块以及与选项卡数量相同的块 —— 在以上示例中是 4 个。然后，以表格单元格的形式创建基本选项卡结构（矩形），根据需要设置边框。用 HTML 和一些简单的 JavaScript 创建选项卡中显示的文本。

当用户单击选项卡（实际上是单击选项卡中的文本）时，显示相关联的条件块，修改选项卡边框和文本颜色，显示相关联的块。

在后台，通过设置一个参数值指定显示哪个选项卡，然后重新提示报表。在理想情况下，我们使用提示控件或提示按钮设置参数值并重新提示。但是，没有提示控件或按钮能够满足要求。一个提示可以设置参数值并重新提示（通过自动提交），但是无法看起来像文本。

6.3 适用范围

这种技术应该适用于 ReportNet 或 IBM Cognos 8 的任何版本。

6.4 未记录和不受支持的功能

正如下面详细讨论的，这个解决方案需要使用两个在 IBM Cognos 8 中未记录和不受支持的功能。因此，在以后的版本中对这两个功能的支持可能会改变或完全取消，从而需要重写这个解决方案。但是，这种风险很低，因为目前在这些方面没有修改计划。

6.5 选项卡式提示报表项目

在我们的场景中，第一个选项卡让用户选择 Order year(s)，第二个选项卡让用户选择 Product name(s)，以便运行一个非常简单的列表报表。

我们将从头到尾介绍创建示例报表的整个过程。为方便起见，我们只使用两个选项卡，每个选项卡上各有一个提示。

6.5.1 创建基本报表

打开 Report Studio 和 GO Sales and Retailers 包。

创建一个新的列表报表：

• OrdersOrder year
• OrdersProduct name
• OrdersRevenue

如图所示：

图 5.创建基本报表

创建两个可选的 详细信息筛选：

• [Order year] in ?p_OrderYear?
• [Product name] in ?p_ProductName?

这样就行了。这就是将用来演示这种技术的基本报表。

6.5.2 创建基本提示页面

尽管创建选项卡式提示用户界面并不难，但是过程很长。大多数时间花在格式化方面。实际功能花费的时间很少。

首先我们需要一个提示页面。

在报表中添加一个提示页面：

图 6.添加一个提示页面

把一个一行两列的表格拖到提示页面体中，如图所示：

图 7.把一个一行两列的表格拖到提示页面体中

我们暂时不管这个表格，但是稍后要使用它。

6.5.3 创建选项卡体

条件块最终包含出现在每个选项卡上的提示。

图 8.创建选项卡体

我们首先创建基本的选项卡体结构并使用一些文本项，让我们可以看出哪个选项卡是当前的。

把一个 Conditional Block 对象拖到页面体中：

图 9.把一个 Conditional Block 对象拖到页面体中

选择条件块对象然后选择 Block Variable 属性。

创建一个 <New String Variable>，像这样：

• Name: TabToShow
• Values: Tab2
• Expression: ParamValue('pTabToShow')

变量名 TabToShow、值 Tab2 和参数 pTabToShow 很重要，这个项目要多次引用它们。

选择好块之后，把 Current Block 属性设置为 Other。

把一个文本项‘ Tab 1 ’拖到块中，像这样：

图 10.把一个文本项‘ Tab 1 ’拖到块中

这个文本用于提醒我们哪个选项卡是当前正在查看的。

选择块，把 Current Block 属性设置为 Tab2。

‘ Tab 1 ’文本项会从块中消失。

把文本项‘ Tab 2 ’拖到块中，像这样：

图 11.把文本项‘ Tab 2 ’拖到块中

同样，这个文本用于提醒我们哪个选项卡是当前正在查看的。

选择块，在 Other 和 Tab2 之间来回变换 Current Block 属性值，应该可以看到 Report Studio 中的选项卡随之切换。

6.5.4 创建选项卡

正如前面所说的，我们要使用 HTML 项和一些未记录和不受支持的功能实现选项卡。

首先要做的是，使用 Report Viewer 将参数值传递给服务器。作为表单变量传递参数值，表单变量的名称是参数名（比如 pTabToShow）前面加上 p_，比如 p_pTabToShow。

这种参数传递机制是未记录和不受支持的。请注意本文前面的说明。

我们使用一个 HTML 对象创建这个表单变量。

把一个 HTML 项目拖到 Page Header 中，像这样：

图 12.把一个 HTML 项目拖到 Page Header 中

这个项的位置无所谓，因为它不向用户显示。

选择 HTML 项并把 HTML 属性设置为：

 <input type="hidden" name="p_pTabToShow" value="Tab1"/>

这行 HTML 代码创建表单变量 p_pTabToShow 并将值设置为 Tab1。

这个表单变量让服务器认为报表中已经定义了名为 pTabToShow 的参数，所以服务器会保留它的值并在重新提示报表时把它传递回 Report Viewer。

现在，回到前面在该示例中添加的表格。

尽管目前还看不出来，但是这个表格中的两个单元格将变成用户可以单击的选项卡。

图 13.单击的选项卡

出现在选项卡上的文本项将是 HTML 项。

在每个表格单元格中添加一个 HTML 项，让它们在单元格中居中：

图 13.在每个表格单元格中添加一个 HTML 项

选择左边的 HTML 项并把 HTML 属性设置为：

 <button title="Show Tab 1" 
onclick="document.formWarpRequest.elements['p_pTabToShow'].value=' Tab1';
SetPromptControl('reprompt')">Show Tab 1</button>

这段 JavaScript 创建一个按钮：

• 按钮标题（工具提示文本） – Show Tab 1
• 操作：
  • 将表单变量 p_pTabToShow 设置为 Tab1
  • 运行函数 reprompt
• 按钮标签 – Show Tab 1

换句话说，当用户按这个按钮时，它会设置表单变量并重新提示报表。

注意，reprompt 函数是未记录和不受支持的。请注意本文前面的说明。

选择右边的 HTML 项并把 HTML 属性设置为：

 <button title="Show Tab 2" 
onclick="document.formWarpRequest.elements['p_pTabToShow'].value='
 Tab2';
SetPromptControl('reprompt')">Show Tab 2</button>

运行报表：

图 15.运行报表

可以通过单击按钮在选项卡之间切换，显示相应的文本。

图 16.切换选项卡

核心选项卡功能现在完成了。剩下的工作都是装饰性的；这个用户界面是有效的，但是看起来不像选项卡式用户界面。另外，还要把提示放到选项卡上。

返回到 Report Studio。

6.5.5 设置选项卡的样式

我们要用边框、对齐和其他样式改变 HTML 按钮和块的外观，让它们看起来像选项卡。

首先，处理 HTML 按钮。

选择父表格，在 Table Properties 属性中选择 Fixed Size。

仍然选择表格，选择 Size and Overflow 属性并删除当前的宽度设置。

选择每个表格单元格并把宽度都设置为 100 pixels (px)。

在实际的报表中，必须调整宽度，让宽度与每个选项卡中的文本匹配。请记住，为了让选项卡更美观，所有选项卡常常采用相同的宽度。

现在，表格单元格和 HTML 按钮有点儿像选项卡了：

图 17.设置选项卡的样式

现在，需要重新设置 HTML 按钮的样式，让它们只显示文本。

选择 HTML 对象之一，会看到没有样式属性：

图 18. 重新设置 HTML 按钮的样式

在 IBM Cognos 8 中，可以在报表中定义样式并把它们应用于报表对象。同样，也可以把这些样式应用于 HTML 对象。

6.5.6 IBM Cognos 8 按钮样式

在 IBM Cognos 8 中，可以定义一个类，然后在 HTML 按钮定义中引用它。

使用 Page Explorer 打开 Classes。

把一个 Class 对象从工具箱拖到 Local Classes 区域：

选择这个新的类对象并设置属性：

• Name: HTMLButtons
• Border: None
• Box Type: Block
• Background Color: White
• Class or Selector: HB

返回到提示页面。

Class/Selector 属性是在把样式应用于 HTML 项时使用的标识符。

选择左边 Tab 1 的 HTML 对象并把 HTML 属性改为：

 <button title="Show Tab 1" 
onclick="document.formWarpRequest.elements['p_pTabToShow'].value=' Tab1';
SetPromptControl('reprompt')" class="HB"Show Tab 1</button>

选择右边 Tab 2 的 HTML 对象并把 HTML 属性改为：

 <button title="Show Tab 2" 
onclick="document.formWarpRequest.elements['p_pTabToShow'].value=' Tab2';
SetPromptControl('reprompt')" class="HB">Show Tab 2</button>

6.5.7 ReportNet 按钮样式

在 ReportNet 和 IBM Cognos 8 中都可以使用这种方法。

我们使用 HTML 样式属性在 HTML 按钮定义中直接应用样式，而不是引用在报表级定义的通用样式定义。

选择左边的 HTML 对象并把 HTML 属性改为：

 <button title="Show Tab 1" 
onclick="document.formWarpRequest.elements['p_pTabToShow'].value=' Tab1';
SetPromptControl('reprompt')" 
style="border-top- style:none;border-left-style:none;border-right-style:none;
border- bottom-style:none;display:block;background-color:white">Show Tab 
 1</button>

选择右边的 HTML 对象并把 HTML 属性改为：

 <button title="Show Tab 2" 
onclick="document.formWarpRequest.elements['p_pTabToShow'].value=' Tab2';
SetPromptControl('reprompt')" 
style="border-top- style:none;border-left-style:none;border-right-style:none;
border- bottom-style:none;display:block;background-color:white">Show Tab 
 2</button>

6.5.8 运行报表

运行报表。删除按钮的按钮式外观，只留下文本。

图 19.运行报表

6.5.9 显示活跃的和不活跃的选项卡

我们现在需要通过设置选项卡的样式表明哪个选项卡是活跃的。活跃的选项卡将采用黑色的边框和文本。不活跃的选项卡将采用灰色的边框和文本。

选择左边的表格单元格。

将 Style Variable 设置为 TabToShow。

使用 Variable Explorer 选择 TabToShow，再选择 Other：

图 20.

仍然选择左边的表格单元格，将左边、上边和右边的 Border 设置为 Black、Solid Line、1.5 point (pt)：

图 21.Border 设置

图 22. Tab 1 选项卡

使用 Variable Explorer 选择 TabToShow，再选择 Tab2：

仍然选择左边的表格单元格，将左边、上边和右边的 Border 设置为 Silver、Solid line、1.5 point (pt)：

图 23. Tab2 Border 设置

图 24. Tab 2 选项卡

运行报表：

图 25.运行报表 Tab 1

单击 Show Tab 2，让 Tab 1 变成非当前的：

图 26.运行报表 Tab 2

对 Tab 2（右边的表格单元格）重复相似的步骤。

选择右边的表格单元格。

使用 Variable Explorer 选择 TabToShow，再选择 Other：

图 27. 将 Style Variable 设置为 TabToShow

仍然选择右边的表格单元格，将左边、上边和右边的 Border 设置为 Silver、Solid Line、1.5 point (pt)：

图 28. Border 设置

仍然选择右边的表格单元格，将左边、上边和右边的 Border 设置为 Black、Solid Line、1.5 point (pt)：

图 29. Tab2 Border 设置

运行报表：

图 30. 运行报表

单击 Show Tab 2：

图 31. 运行报表 Show Tab 2

两个表格单元格之间的边框是灰色，但是我们在右边的表格单元格上已经把它设置为黑色了。因此它既有灰色也有黑色。每个表格单元格实际上有自己的边框，但是在默认情况下它们是重叠的。

也就是说，不会看到下面这样并列的边框：

图 32.不会看到下面这样并列的边框

边框会重叠在一起。当边框重叠时，按一定的规则决定（优先）显示哪个边框。在这里，显示左边的单元格边框。

当右边的单元格活跃时，我们需要调整边框，让左边的单元格没有边框。

选择左边的单元格。

删除单元格右边的边框：

图 33.删除单元格右边的边框

运行报表：

图 34. 运行报表

单击 Tab 2：

图 35. 单击 Tab 2

现在，边框样式能够适当地表明活跃的和不活跃的选项卡。

6.5.10 格式化选项卡体

现在需要把选项卡和选项卡体连接在一起。

使用 Variable Explorer 选择 No variable：

图 36. 选择 No variable

选择块：

图 37. 选择块

在四个边上将 Border 设置为 Black、Solid、1.5 point (pt)：

图 38. Border 设置

仍然选择块，将 Current Block 属性设置为 Tab2。

在四个边上将 Border 设置为 Black、Solid、1.5 point (pt)：

图 39. Tab2 Border 设置

运行报表：

图 40. 运行报表

现在，选项卡的样式完全设置好了。

但是，我们想再设置一些样式，让选项卡更美观一点。

首先，我们想把选项卡向下移动，让它们窄一些。

6.5.11 格式化页面并添加文本

选择 Page Body 对象，将左边、上边和右边的 Padding 设置为 100 pixels (px)。

这在选项卡的所有边上提供 100 像素的缓冲区。

最后，我们提供一些说明性文本，然后把报表提示放进选项卡中。

将标题文本编辑为“Revenue Report”

图 41. 格式化页面并添加文本

把一个块拖到页眉中，作为最后一项：

图 42. 把一个块拖到页眉中

把文本对象拖到这个块中，输入文本“You may switch tabs to choose a different prompt.”：

图 43. 输入文本

选择页面体中的条件块。

将 Current Block 属性设置为 Other。

我们希望（tab 1 上的）主提示用于提示 Order year。

把一个 Value Prompt 对象拖到块中：

• 使用现有的参数：p_OrderYear
• 为 Order year 创建一个新查询（默认选项）

选择提示并把 Required 属性设置为 No（如果还没有设置的话）。

选择条件块并将 Current Block 属性设置为 Tab2。

我们希望（tab 2 上的）第二个提示用于提示 Product name。

运行报表。

因为这些筛选是可选的，用户可以选择两个提示之一、都选择或都不选择。

6.6 结束语

这是一种很方便的方法。尽管它使用一些未记录和不受支持的产品功能，但是对于最终用户仍然很有价值。

当然，可以根据需要使用这种方法实现更多的选项卡、不同的提示、文本和许多其他对象和控件，从而满足用户对提示界面体验的偏好。