2.2 第一个流动页面

要在PeopleTools中创建一个应用模块，意味着要使用记录定义来描述数据，以及在页面和组件中使用这些数据。在本章，将重点介绍流动页面的开发。为了避免完成其他的数据定义任务，将会构建针对模拟PeopleTools记录定义的流动页面。具体来说，就是创建Translate Values组件的流动版本，该版本使用了PSXLATITEM（转换值明细表）的副本。

2.2.1 流动页面的数据模型

首先需要复制已有的PeopleTools表。登录到Application Designer，并打开PSXLATITEM记录定义。从Application Designer菜单栏中选择File | Save As，将新记录定义命名为BMA_XLATITEM。当提示是否复制基础记录的PeopleCode时选择No。在开始后续操作之前需要先构建记录定义。请确保选择了Create Table以及合适的执行选项（我个人更喜欢执行和构建脚本）。

注意：

在复制一条记录时，开发人员通常会询问是否复制PeopleCode。当然，这要具体问题具体分析。如果源记录中包含了应该在目标中存在的PeopleCode，则肯定应该选择复制PeopleCode。但如果不打算复制源记录的PeopleCode，则不要单击该按钮。更糟糕的是，如果源记录中没有PeopleCode，则Yes也不要单击。这是因为复制功能并不知道源记录中没有PeopleCode，所以它会循环遍历每个字段的所有事件，并尝试复制并不存在的PeopleCode事件。由此所消耗的时间永远无法收回。

PSXLATITEM记录定义是存在有效日期的。组件处理器使用了一种特殊的方法来处理有效日期行。然而，Translate Values组件并没有使用组件处理器这种特殊的有效日期处理方法。所采用的方法是通过将整个PSXLATITEM记录定义都包装到一个视图中，从而巧妙地掩饰了PSXLATITEM.EFFDT字段。这样一来，可以复制现有的数据行并更新SQL指向源表即可，而不必创建自己的数据行。打开PSXITMMNT_VW，并保存为BMA_XITMMNT_VW。然后切换到Record Type选项卡，检查Non-Standard SQL Table Name字段是否为空。打开SQL Editor，将源表从PSXLATITEM更改为PS_BMA_XLATITEM。最后保存并生成此定义。

注意：

除了使用PS_BMA_XLATITEM之外，还可以使用等价的Meta-SQL %Table（BMA_XLATITEM）。

2.2.2 创建一个流动页面

从Application Designer的菜单栏中选择File|New。当出现New Definition对话框时，选择Page（Fluid）。图2-2显示了选中Page（Fluid）的New Definition对话框的屏幕截图。

一旦单击了New Definition对话框中的OK按钮，你将会体验到流动页面与经典页面的第一个区别。流动页面要求布局。

布局可以帮助响应式设计确定页面元素的位置。从根本上讲，布局就是在页面上放置的一系列分组框（group box），对响应式网格中的内容进行组合。常见的PeopleTools流动页面布局包括PSL_APPS_CONTENT、PSL_TWOPANEL和PSL_2COLUMN_FLOAT。所选择的布局决定了页面起始分组框的位置（这里之所以说是“起始”，是因为通常可以添加多个分组框并/或重新排列内容）。例如，使用PSL_2COLUMN_FLOAT可以创建一个带有一些嵌套分组框的页面。PSL_2COLUMN_FLOAT布局最里面的分组框包含了针对两列网格布局的左右两个分组框。两列网格布局允许根据设备方向和屏幕尺寸以某种方式改变内容。例如，平板电脑可能会显示两个列，而移动手机则可能每次显示一个列。图2-3是布局选择对话框的屏幕截图。

注意：

布局只不过是一个PeopleSoft页面，其页面类型被设置为Layout Page。可以自定义创建包含任何有效页面内容的布局，包括子页面。

选择PSL_APPS_CONTENT布局。当出现提示时，将页面命名为BMA_XLAT_FL，并选择复制与该布局关联的PeopleCode。此时，Application Designer将显示一个带有单个分组框的新页面，该分组框覆盖了页面的整个宽度和高度。不管选择哪种布局，第一个元素都是一个分组框。所有其他的内容都位于该外层分组框的内部。

双击该分组框，检查其属性。前4个选项卡（Record、Label、Use和General）都是非常标准的。PeopleTools 8.54向分组框添加了一个新的选项卡Fluid。切换到该选项卡，查看一下Fluid选项卡的属性。请注意，Default Style Name属性为ps_apps_content。对于主要和次要流动页面上的最外层分组框来说，这是最常用的样式。图2-4显示了用于分组框的Fluid属性。Form Factor Override部分允许根据设备尺寸指定一个备用的类名，而Suppress On Form Factor部分则允许开发人员根据各种不同的设备尺寸隐藏分组框。这两部分的不同之处在于：如果某一设备启用了禁止显示功能，那么后者将不会向该设备发送内容，从而节约了宝贵的带宽。

在新页面的分组框内添加BMA_XLATDEFN.FIELDNAME字段，并设置该字段的Display Only和Display Control Field属性。然后再添加PSDBFLD_XLAT.LENGTH字段，并将其标记为与Field Name字段相关联的关联字段。这些字段在分组框中的放置位置无关紧要。它们的位置是由CSS类名和布局决定的，而不是在设计器中确定。与经典设计不同的是，流动设计并不是WYSIWYG。然而Application Designer仍然维护了双亲层次结构（parental hierarchies），所以，请确保上述字段都位于页面的唯一一个分组框中。同样，PeopleTools通过位置来确定字段的顺序。图2-5显示了当前页面的屏幕截图。

随后我们将进一步开发该页面，但在此之前先创建测试该页面所需的元数据。创建一个新组件，并向其中添加一个新页面。通常在保存组件之前Application Designer会要求指定一条搜索记录。原PSXLATMAINT组件的搜索记录是PSDBFLD_XLAT，所以请将新建组件的搜索记录设置为相同的PSDBFLD_XLAT。然后禁用Add操作。0级记录表示字段定义，是不能在线添加的，所以Add操作无法进行。该组件的重点是更新字段元数据，而不是创建新字段。当检查组件的属性时，切换到Fluid选项卡，然后选中Fluid Mode复选框。该复选框是经典组件与流动组件之间唯一的区别。保存组件，并将其命名为与页面相同的名称BMA_XLAT_FL。

与其他任何组件一样，需要将新建的组件附加到一个菜单中。首先创建一个名为BMA_FLUID的新标准菜单，然后双击菜单中位于Language和Help菜单项之间的空白位置。当弹出对话框时，将标签设置为Custom。随后在Custom菜单项下出现的新下拉菜单项上双击，并将类型更改为Separator。实际上并不需要这个分隔线，这样做是因为该菜单不能为空。PeopleTools要求在保存菜单之前必须包含内容，所以添加一条分隔线就足以满足Application Designer的要求。

接下来需要注册前面所创建的流动组件。组件注册向导首先将询问保存该组件的文件夹。Portal Registry中的所有流动组件都属于Fluid Structure and Content|Fluid Pages的一个子文件夹中。在线登录到PeopleSoft应用，并导航到PeopleTools | Portal | Structure and Content。然后再从Protal Registry导航到Fluid Structure and Content|Fluid Pages。最后创建一个名为BMA_PEOPLETOOLS的新文件夹，并将其标签设为BMA PeopleTools。

可以使用Application Designer中的Component Registration Wizard来注册组件。选择相关选项将组件添加到菜单、门户注册表和权限列表中（这三个选项都位于向导的第一个页面中）。当提示提供菜单时，请选择BMA_FLUID和bar MENUITEM1。在向导的第三个页面中会要求输入关于内容引用的相关信息，请分别将Folder Name和Content Reference Label更改为BMA_PEOPLETOOLS和BMA Translate Values。在单击Next之前，还需将Node Name设置为本地门户节点名称。由于后面将要使用HRMS数据库，因此选择了HRMS门户节点。图2-6显示了注册向导中该步骤的屏幕截图。在下一步中，在权限列表选择步骤中，选择PTPT1200权限列表。

完成该向导，创建内容引用。注册向导的最后一步将询问是否愿意向项目中添加权限列表。虽然这样做会带来极大的便利，但许多公司阻止（或者不允许）传输权限列表之类的安全定义。此外，包含了权限列表的项目可能会花费更多的时间。作为一般规则，不要向开发项目中添加权限列表。

2.2.3 流动搜索页面

作为一名开发人员，PeopleTools中最让人喜欢的功能之一是元数据驱动的组件搜索页面。该页面并不是一个实际的页面，而是在运行时通过使用搜索记录的属性构建的。而其他的开发环境都要求创建自己的搜索页面。另一方面，作为一名功能用户，我并不喜欢经典的组件搜索页面，因为它太普通了。

流动组件采取了一种混合的方法，允许在配置的、元数据驱动的以及普通搜索页面或自定义搜索定义之间选择。Fluid迫使我们重新思考一下组件搜索。下面列举了几种选择：

•使用默认的流动搜索。

•创建和注册Pivot Grids。

•关键字搜索。

•构建流动搜索组件来收集事务搜索参数，然后再传递给目标流动页面（也被称为“自定义搜索页面”）。

•向流动页面添加搜索标题或侧边栏。

注意：

分组框拥有一个针对标题搜索而设计的名为Custom Header Search的特殊布局类型。

1. Fluid默认搜索

为流动组件配置默认搜索非常简单，只需选择一个复选框并添加一个页面即可。接下来对前面创建的组件进行配置，使其使用该默认搜索。第1步是启用搜索，所以请打开组件的属性并切换到Fluid选项卡。然后找到并选择Enable Search Page选项。图2-7显示了组件属性集合中Enable Search Page选项的屏幕截图。

第2步是向组件添加PT_SEARCHPAGE。但该页面并不需要出现在组件页面标签列表中以供选择，所以将其标记为隐藏。最后保存组件。

2. Pivot Grid搜索

Pivot Grid搜索是一项非常强大的搜索功能，它使用了多维事务数据来识别事务。由于是多维的，因此需要事实和维度。事务本身就是表示维度的事实和基础表，比如ChartFields、地理定位、位置信息等。针对基础数据，多维搜索并不能很好地工作，因为每个基础组件（比如位置表）只表示一个维度。使用Pivot Grid搜索包括创建一个查询和Pivot Grid。针对Pivot Grid搜索的搜索页面是PTS_NUI_SEARCH。

3．关键字搜索

关键字搜索使用SES索引来填充搜索页面。关键字搜索配置需要完成以下步骤：

（1）打开组件的属性，并切换到Internet选项卡。然后选择Keyword search选项。

（2）在组件属性的Fluid选项卡中，选择Enable Search Page选项。

（3）继续查看组件属性的Fluid选项卡，并选择Next in List和Previous in List选项。

（4）最后一步是在线登录到PeopleSoft应用，并创建和配置一个映射到新组件的SES索引。

注意：

创建SES索引的详细步骤已经超出了本书的讨论范围。

4．自定义搜索组件

采用该方法的开发人员需要创建一个专门用来收集需求的组件，以便定位一个事务。该组件包含了数据输入字段以及某种类型的选择列表。该方法并不是很常用，因为可以以PT_SEARCHPAGE和PTS_NUI_SEARCH页面为基础在组件中创建自定义搜索页面。

5．搜索标题和侧边栏

搜索标题和侧边栏是非常常用的方法。在本章的后面，将创建一个带有侧边栏搜索的页面。

2.2.4 流动页面导航

前面已经对流动页面和组件进行了详细介绍。现在，可以回顾一下进展情况，你会发现存在一个问题：如何访问一个流动组件？在标准的PeopleTools菜单或者导航中都无法看到流动组件。访问流动组件的一种方法是打开其门户注册表内容引用并单击Test Content Reference超链接。首先导航到PeopleTools | Portal | Structure and Content。在门户注册表中，导航到Fluid Structure and Content | Fluid Pages | BMA PeopleTools。单击BMA Translate Values项旁边的Edit超链接，然后再单击Test Content Reference超链接。此时，PeopleSoft应该显示添加到组件的基本搜索页面。图2-8显示了组件搜索页面的屏幕截图。

图2-9显示了Translate Values页面的小型化版本。请注意，尽管在Application Designer中随机地在页面上放置了这些字段，但可以看到，字段和标签垂直显示，并且在水平方向上居中对齐。在水平方向上调整浏览器窗口的大小，可以注意一下标题按钮是如何变化的。此外，还可以看到组件不包含经典的页面栏（帮助链接、新建窗口链接等）或者页脚工具栏（保存、返回列表等）。随后，我们将使用新的PeopleTools保存操作来添加一个保存按钮。

由于在菜单中不会显示流动页面，因此需要使用另外一种机制来访问它们。当查看组件时，请单击右上角的三栏汉堡式按钮。此时将出现带有三个导航选项的上下文菜单：

•Add to Homepage

•Add to NavBar

•Add to Favorites

选择Add to Homepage，将会显示一个主页面列表以及一个用来创建全新主页面的快捷方式。因为本事务的当前URL是一个包含了搜索键值的完全限定URL，所以请选择Add to Homepage，直接在事务页面上创建一个主页面按钮。目前完成上述操作就足够了。但更好的一种方法是为搜索页面设置书签。图2-10显示了该流动主页面的屏幕截图，其中包含了指向BMA Translate Values组件的新建Grouplet。

注意：

Grouplet是一种主页工件（artifact），表示某种类型的相关信息或事务页面。很多人更喜欢将其称为Tile，而不是Grouplet。之所以被称为Grouplet，是因为这些Tile的内容可以来自流动PeopleSoft页面所包含的分组框。可以通过流动内容引用的Fluid Attributes选项卡来配置各个Grouplet。在本章的后面还将介绍如何更改Grouplet的图标和内容类型。

2.2.5 优化针对Fluid的组件

目前所创建的组件只是一个单一页面组件，所以请打开组件属性，并禁用Display Folder Tabs。可以在Internet选项卡的Multi-Page Navigation部分找到该选项。在编辑该组件时，将页面的Item Label更改为“Translate Values”。Item Label即PeopleSoft在页面的标头所显示的内容。

2.2.6 流动网格

向流动页面添加一个网格，并在网格中添加下面所示的BMA_XITMMNT_VW字段：

FIELD_VALUE

DATE_FROM

EFF_STATUS

XLATLONGNAME

XLATSHORTNAME

分别将EFF_STATUS、XLATLONGNAME和XLATSHORTNAME的标签更改为RFT Short。保存页面，然后刷新页面的在线视图。此时，在Length字段的下面会看到一个网格。该网格包括了许多填充内容（与其他的流动元素类似），但外观上并不是很漂亮。目前所看到的是流动页面中的一个经典网格。如果想要将该网格转换为响应式网格，只需在Application Designer中更改一个属性即可。返回到Application Designer，并双击网格，显示其属性窗口。在General选项卡中选择Unlimited Occurs Count属性。然后切换到网格属性对话框的Use选项卡，并将Grid Layout从Original Grid Layout更改为Original Flex Grid Layout，如图2-11所示。

在Application Designer中保存页面，并刷新在线视图。此时应该可以看到一个更加窄的响应式网格。图2-12显示了一个响应式流动组件的屏幕截图，其中包含了若干数据输入字段以及一个Flex网格。

注意：

虽然没有在该组件中添加一个保存按钮，但是仍然可以使用经典的快捷键组合Alt+1（Alt以及数字键1）来完成保存操作。如果向网格输入了数据并按下了组合键Alt+1，那么组件处理器将会保存子记录而不是父记录。

2.2.7 HTML5数据输入字段

很长一段时间以来，Web浏览器只能通过输入文本字段和按钮（包括单选按钮、复选框以及普通按钮）来收集反馈信息，而开发人员则需要编写大量的JavaScript来创建数据输入字段、数字微调、E-Mail地址字段等。相比于过去，现代的Web浏览器更加智能。HTML5（最新的HTML规范）包括了针对日期、电话号码、E-Mail、数字等的特殊元素。该规范并没有定义如何显示这些特殊的元素。相反，由每种设备确定最佳的输入方式。例如，桌面计算机的Web浏览器组合使用一个日历以及一个数字微调器（可以通过鼠标和键盘操作）来显示一个日期输入字段。而对于智能手机来说，则可能将日期输入字段显示为一个适合手指操作的大选择转盘。

前面所创建的Translate Values页面包含了一个日期字段：DATE_FROM。当前，PeopleTools使用较老的方法显示该日期字段：即使用了大量的JavaScript代码。接下来通过启用HTML5数据输入类型，将该页面带入到现代化时代。返回到Application Designer，并打开BMA_XLAT_FL页面定义。找到DATE_FROM字段并双击。这是一个带有标签Effective Date的网格字段。当Edit Box Properties对话框出现时，找到Fluid选项卡底部的Input Type属性。将Input Type更改为Date。图2-13显示了Fluid选项卡的屏幕截图，其中选中了日期输入类型。

重新加载在线页面，会看到在Effective Date字段中不再显示一个日历图标。相反，当与该字段进行交互时，根据设备和浏览器的不同，将会看到一个特定日期控件。例如，如果使用Chrome Web浏览器，那么会看到一个桌面友好的日历下拉菜单，同时使用一个数字微调器来操作字段的日期。

2.2.8 添加事务按钮

众所周知，可以通过使用Alt+1键盘组合来保存事务页面，但对于很多人来说，这种方法并不是很直观，因此需要一种更好的方法。流动页面可以使用一种被称为Toolbar Action的特殊按钮。当选择该按钮时，可以指定要调用的操作。向BMA_XLAT_FL页面的左上角添加一个按钮，打开按钮属性，并将Destination更改为Toolbar Action。在Destination字段的下面几行会看到Action Type字段。请将Action Type设置为Save。图2-14显示了按钮类型属性的屏幕截图。

切换到属性对话框的Label选项卡，分别将类型设置为Text，以及将Text设置为Save。最后再切换到Fluid选项卡，将Default Style Name设置为psc_float-right psc_primary。psc_float-right类在事务页面的右上角放置了该按钮，而psc_primary类则更改了按钮颜色，从而凸显该按钮是页面的主按钮。图2-15显示了Application Designer中页面的屏幕截图，而图2-16显示了通过Web浏览器查看的页面的屏幕截图。请注意，Application Designer中的字段对齐方式与在线浏览页面的对齐方式存在很大的不同，而这恰恰体现了Fluid的本质。Fluid可以让设备（通常需要CSS3的一点帮助）确定项目的具体放置位置。

注意：

图2-15包含了一些本章并没有介绍的额外分组框。具体来说，0级字段被一个分组框所包围，而保存按钮则包含在自己的分组框中。虽然这些分组框并不是必需的，但推荐使用。PeopleTools建议使用分组框来包含相关的项目。当拿不准是否应该包含时，最好还是包含。当对项目进行分组时，请确保将分组框的类型更改为Layout Only。

可以创建一些测试数据来测试保存按钮是否按照预期工作。传统方法的一个让人怀念的特征是在右上角显示一条通知消息，通过该消息可以确认事务被成功保存。但Fluid没有包含此类通知，相反，它使用了一种不那么神秘但却无正式文件的FUNCLIB功能来显示一条通知消息。可以使用该功能添加带有SavePostChange事件的通知。打开BMA_XLAT_FL组件的PeopleCode编辑器，并向SavePostChange事件添加下面所示的PeopleCode：

    Declare Function SetConfirmationMessage PeopleCode
        PT_WORK.PT_CONFIRM_MSG FieldFormula;

    SetConfirmationMessage("Translate value saved");

注意：

最佳实践建议使用消息目录而不是硬编码的文本。

在添加了一些新值并按下保存按钮之后，将会在标头的下面看到一条消息。图2-17是显示了保存确认消息的Translate Values组件的屏幕截图。

在下一节，我们将学习如何使用双列（或双面板）布局。但在此之前，请先使用该页面向不同字段添加几行转换值。在此选择了字段PTIB_DIRECTION、PTCACHEABLE和PTCOMPARABLE。输入的测试数据越多，页面看起来就越美观。

以上介绍的都是一些Fluid的基本知识。现在，我们已经创建了一个响应式事务页面。除了一些属性稍有不同之外，所使用的开发过程与开发其他经典PeopleTools页面是类似的。当然，关于Fluid的知识还有很多，但正如你所经历的那样，创建流动页面并不需要学习任何新的知识。接下来让我们一起学习更多流动页面的特性。