2.1 关于PeopleTools流动页面

目前，用户不再是只能使用键盘和鼠标向信息系统输入事务记录。如今的用户使用移动设备（如手机和平板电脑）、桌面电脑、笔记本电脑、触摸屏以及上网本。Oracle使用术语“流动”（fluid）来描述PeopleSoft的移动优先、触控优先但仍然桌面友好的应用页面。流动页面在Application Designer中以拖放方式构建，这与构建经典的PeopleTools页面类似。这两种页面类型都得益于PeopleSoft的数据绑定和持久性，两者都支持相同的事件，支持嵌套的子页面。但对于流动页面来说，还存在一些独特的功能：

•响应式设计

•自适应设计

•CSS3布局

•HTML5运行时控件

2.1.1 响应式和自适应设计

移动设备具备各种不同的外形和尺寸，从较小的智能手机到较大的平板电脑。屏幕尺寸的变化会带来一个问题：开发人员（或者设计人员）如何针对每种设备尺寸显示适量的信息。一般的解决方法有以下几种：

•针对每种支持的设备分类创建一个单独的网站。

•使用CSS3媒体查询来更改页面上的信息布局（响应式）。

•使用自适应设计，其中包括根据设备能力选择显示的信息内容和显示方式。

在移动Web的早期，普遍使用的解决方法是建立“单独网站”。当时CSS3技术还不存在，所以响应式设计也就无法实现。而自适应设计也没有太大意义，因为有些设备并不支持HTML，而是支持WAP/WML。移动设备上所显示的内容是不同的，因此需要使用相互独立的代码行。这种方法往往会产生两个或三个网站，它们分别针对桌面、手机以及平板电脑（偶尔）。采用该方法的开发人员必须维护相同应用的多个版本。

响应式设计使用CSS3媒体查询断点（break point）来应用布局规则。这些规则包括页面中信息的放置、图形的大小和位置，甚至包括是否显示或隐藏各种页面元素。使用响应式设计构建的页面通常包含数据，但却包含很少的布局指令。该方法与前面所介绍的多网站方法的不同之处在于：所有设备都浏览相同的网站。但也有相似之处，因为响应式设计仍然需要两个代码行：分离每个表单元素的CSS定义。响应式设计的使用是非常普遍的。如果想看一下具体运用，可以去浏览任何消费者网站（如Amazon、Wal-Mart等），并调整浏览器窗口的大小：一旦预先确定了屏幕的宽度，将会看到标题区域的变化。但响应式设计所带来的一个问题是如何针对低宽带浏览进行内容优化。例如，向一个较小的设备发送一张高分辨率的照片就没有任何意义，因为该照片在设备上将显示为一个缩略图——照片显示的太小而无法看到任何重要的细节信息。

自适应设计使用了渐进增强（progressive enhancement）的技术来确定显示什么内容以及如何显示。使用自适应设计的开发人员可以使用客户端JavaScript或服务器端程序来调查设备能力并显示合适的内容。虽然自适应设计可能会使用与响应式设计类似的概念，但关键区别在于自适应设计不会发送设备无法合理使用的内容。

PeopleTools流动页面使用了自适应设计和响应式设计。通过CSS3媒体查询，预先配置的PeopleTools CSS3样式表会在不同的断点更改页面的布局。数据输入和显示元素包含了自适应属性，从而确保向不同设备仅发送关键、重要且相关的信息。例如，相对于在移动设备上显示的网格，在桌面上显示的相同网格可能会包含更多的字段。

2.1.2 CSS3布局

PeopleTools经典网页设计器是一种所见即所得（What You See Is What You Get, WYSIWYG）的拖放设计器。如果不喜欢某一项目在页面中的放置位置，那么可以将其拖放到其他任意位置。虽然可视化地看到页面的运行时外观对于页面设计来说是非常便利的，但布局过程却是非常烦琐的。为了能够在浏览器中查看组件的同时重复修改布局，我记不得注册了多少次相关的经典组件。而另一方面，流动页面使用了CSS3布局。开发人员只需按照所需的顺序在页面上放置字段即可，具体布置由流动布局负责处理。Fluid通过布局、CSS或类名来选择元素的位置。

2.1.3 HTML5运行时控件

只要PeopleSoft应用面向Internet，就需要使用数据输入格式以及特定日期的输入控件。这些经典的数据输入字段需要使用大量的JavaScript和CSS。而HTML5指定了一整套数据输入字段类型，包括日期、时间、数字、数值范围、E-Mail、搜索以及URL。这样一来，将由设备（而不是由PeopleSoft）来决定如何显示这些特殊类型的数据输入字段。

2.1.4 流模式设置

在开始创建一些非常酷且反应迅速的页面之前，先要确保PeopleSoft应用被配置为流模式（Fluid Mode）。首先，登录到PeopleSoft服务器并导航到PeopleTools | Web Profile | Web Profile。然后滚动到底部并确保“Disable fluid…”复选框没有被选中。在修改完Web配置文件之后重启Web服务器。修改完之后，移动浏览器将会自动看到流动主页面。而桌面浏览器仍然继续显示经典主页面。针对每个用户，可以让桌面浏览器默认显示流动主页面，其方法是导航到My Personalizations，并选择Personalize General Options类别。通过将Override Value设置为Fluid，重新设置PC Homepage行，如图2-1所示。

2.1.5 技巧

前面介绍了很多Web技术，比如CSS3、JavaScript和HTML5，那么你可能会疑惑除了成为一名PeopleTools专家外，是否还需要成为一名Web开发人员。让我来消除你的担心吧，“不，如果你不想的话，完全没有必要学些这些花哨的Web技术”。如果选择了学习Web设计，那么可能会创建出令人惊讶的东西，但唯一真正的硬性知识需求是掌握核心的PeopleTools。通过学习Application Designer的应用知识，包括标准页面、组件以及PeopleCode，可以创建任何所期望的流动页面。但必须提醒一点的是，如果仅仅坚持学习核心的PeopleTools，还是不够的。因此至少学习CSS3将会受益匪浅。