级别： 初级 Scott DeWitt, 专职软件工程师, IBM，Research Triangle park
2002 年 6 月 01 日 Web 裁剪允许将一个外部 Web 页面的选中部分插入到由 WebSphere portal 版本 4.1 提供的 portlet 中。
© IBM版权所有，2003年。保留所有权利。
简介
WebSphere portal 版本 4.1 引入了 Web 裁剪（Web clipping）的概念。Web 裁剪允许门户网站管理员构建 portlet，这些 portlet 使用外部内容，并对其进行过滤以只显示与 portlet 相关的部分内容的视图。为了方便地做到这一点，在内置的 portlet 套件中已经添加了几个新的管理 portlet。Web 裁剪 portlet 提供了一个前端用户界面，它允许管理员通过指定要检索内容的 URL 以及各种约束（这些约束在内容被显示之前指导如何对其进行修改或“裁剪”）来构建新的 portlet。Web 裁剪 portlet 创建的 portlet 称为 Web 裁剪器（clipper）或者简称为 cliplet，它们以门户网站提供的两个模板之一为基础。这些模板提供了检索和修改内容所必需的内部结构。本教程演示了 Web 裁剪 portlet 是如何创建、编辑和删除 cliplet 的。它还将向您显示如何向门户页面添加一个已完成的 cliplet 以及如何定制使用由 Web 裁剪 portlet 提供的更高级特性的 cliplet 的某些设置。
需求和假定
要按照本教程中概述的步骤进行练习，您需要满足下列条件：
- 在可访问的服务器上安装 WebSphere portal 系列产品（Enable、Extend 或 Experience）中的一种。这些软件包的各自软硬件需求有所不同。请参阅与产品一起提供的文档和发行说明以获取这方面的信息。
- 一个有效的网络连接。
- 一个 WebSphere portal 支持的 Web 浏览器。Internet Explorer（IE）版本 4.x 以及更高版本或 Netscape 版本 6。
- 一个 WebSphere portal 服务器上的帐户，具有管理员权限或能够查看 Web 裁剪 portlet 并能在门户网站内创建其它 portlet（cliplet）的相应权限。
本教程假定您熟悉 WebSphere portal 的使用，特别是熟悉通过门户网站管理 portlet 进行门户网站管理。您应该尤其熟悉门户网站管理 portlet 的流程，包括导航机制和诸如 Done、Cancel、Next 和 Save 之类的术语，因为它们应用于门户网站环境。Web 裁剪 portlet 采用这些相同的机制并使其外观与其它门户网站管理 portlet 的常规外观保持一致。您还应该熟悉 WebSphere portal 的通用术语以及诸如页面、页面组、portlet 和 portlet 应用程序之类的概念。
最后，请注意本教程中使用的下列假定和考虑事项。
- 假定 WebSphere portal 所在服务器的位置是
http://portal.mycompany.com
- 假定管理员帐户（
wpsadmin ）的密码是
wpsadmin
- 显示门户网站页面的所有屏幕快照都使用该页面的缺省主题和外观来显示这些页面。如果您对这里描述的任何页面的首选项做了修改，那么您可能所看到的 portlet 和页面控件的配置和布局与本文图中显示的有所不同。
本
节已结束。在
下一节中，您将了解如何访问 Web 裁剪 portlet。
访问 Web 裁剪 portlet
Web 裁剪 portlet 位于
Administration页面组的
portlets页面下。要访问该页面，您需要拥有管理员权限或相应的权限。要访问 Web 裁剪 portlet，请完成下列步骤。
- 将 Web 浏览器指向
http://portal.mycompany.com/wps/portal
- 单击
Log in按钮（
 ）。
- 在 User ID 输入域中，输入
wpsadmin 。
- 在 password 输入域中，输入
wpsadmin 。
- 单击
Confirm按钮（
 ）或按
Enter键。
执行完上述步骤之后，会看到 Home 页面组内的 Welcome 页面。该页面与
图 1类似。
图 1. 缺省的 Welcome 页面
在 Welcome 页面上，现在您需要导航至包含 Web 裁剪 portlet 的相应页面和页面组。要这样做，请执行下列步骤。
- 使用页面组导航控件，选中
portal Administration页面组。
注：该页面组导航控件将根据您选择的主题和外观的不同而有所不同。在
图 1中，页面组导航控件是位于页面左上角、页面名称之上的下拉菜单。
- 从页面列表上选中
portlets页面。
注：同样，实际控件和控件的位置根据主题的不同可能有所不同。
- 从 portlet 的选项卡列表上选中
Web Clippingportlet。
执行完上述步骤之后，会看到 Web 裁剪管理页面。该页面与
图 2类似。在 Web 裁剪管理页面上，可以执行管理 Web 裁剪器或 cliplet 所需的所有操作。
图 2. Web 裁剪管理页面
Web 裁剪管理页面
看一下
图 2中的页面。该页面上的主控件是页面左侧的列表。该列表显示了门户网站内存在的所有 Web 裁剪器。由于我们还未添加任何 Web 裁剪器，所以该列表是空的。
该列表右侧有三个按钮，从上至下依次标记为
Add（
 ）、
Edit（
 ）和
Delete（
 ）。每个按钮都调用特定的 Web 裁剪管理功能。
正如您可以猜测到的，
Add按钮允许您在门户网站内创建新的 Web 裁剪器。
Edit按钮允许您修改左侧列表中选中的 Web 裁剪器。
Delete按钮允许您除去左侧列表中选中的 Web 裁剪器。注：
Edit和
Delete都要求选中 Web 裁剪器。如果您在选择这两个按钮中的任一个之前没有先选择 Web 裁剪器，那么将提示您进行选择。同样，如果我们还未添加任何 Web 裁剪器，则我们也不能进行选择。
本
节已结束。在
下一节中，您将了解如何创建新的 Web 裁剪器。
创建 Web 裁剪器
既然我们已经学习了如何访问 Web 裁剪 portlet 并熟悉了 Web 裁剪管理页面，那么现在是创建第一个 Web 裁剪器的时候了。
指定基本设置
创建新的 Web 裁剪器的第一步是指定基本设置，它告知 Web 裁剪 portlet 将新的 Web 裁剪器命名为什么，并告知作为新的 Web 裁剪器内容提供的外部内容的基本 URL。
- 从 Web 裁剪管理页面上，选中
Add按钮。这将产生
图
3中显示的 Basic Settings 页面。对于目前来说，您可以忽略该页面上除标记为
Name and default locale title和
URL to clip这两个输入域以外的其它所有东西。
- 在 Name and default locale
title 输入域中，输入名称
SimpleCliplet 。
- 在 URL to clip 输入域中，输入您希望裁剪的位置的全限定 URL。我们将在整个示例中使用 WebSphere 样本页面作为要裁剪的位置。该 Web 应用程序的 URL 是
http://portal.mycompany.com/webapp/examples 。
注：要在您的配置中使用这个 URL，请确保 Default Server 运行在 WebSphere Application Server 上。
- 单击 Basic Settings 页面顶部或底部的
Next（
 ）按钮。
图 3. Basic Settings 页面
裁剪内容
创建新的 Web 裁剪器的下一步是裁剪 Basic Settings 页面上指定 URL 的内容。裁剪 Web 页面是选择要在 Web 裁剪器输出中保留的页面元素的过程。只有那些选中的（经裁剪的）元素才显示在 Web 裁剪器的输出内。放弃所有未被选中的其它元素，也就是说，这些元素将不在输出中显示。在 Web 裁剪 portlet 内裁剪页面内容有三种方法。本教程只讨论第一种方法 — HTML 裁剪。
-
HTML 裁剪（缺省）
- 尽管这种方法的名称会使人产生一点误解，但是这种裁剪方法不需要任何 HTML 标记语言方面的知识。它是三种方法中最简单的一种并且也是缺省方法。当选中 Web 裁剪 portlet 时，它将显示指定 URL 上内容经过渲染的视图。即，Web 裁剪 portlet 显示此内容就如同您在浏览器中可以看到的那样。要选择需进行裁剪的页面元素，只要将鼠标移至该元素并单击它。就会突出显示该元素以向您表示它已被裁剪。要取消选择它，您只要再次单击它，那么将会取消对该元素的突出显示。
-
文本裁剪
- 文本裁剪比 HTML 裁剪稍微要复杂一些，主要是因为它需要有关被裁剪页面结构方面的知识。文件裁剪允许根据内容中存在的、表示要保留内容部分边界的一起出现的一对字符串，裁剪指定 URL 上的内容。这对字符串是由用户指定的，第一个字符串是开始字符串，而第二个字符串是结束字符串。当选中指定 URL 上的内容时，将对它进行搜索以查找是否存在开始字符串，以及其后是否同时存在结束字符串。这两个字符串之间的内容部分是显示给用户的，这使得用户可以选择应该保留的内容。
-
无裁剪
- 顾名思义，当选中这种方法时，将不执行对指定 URL 上内容的裁剪。该内容将保持原样，而不做任何裁剪。如果您只希望创建一个 portlet 来代理一些外部内容而又不过滤这些内容，那么这种方法很有用。
如果对于新的 Web 裁剪器，您不修改裁剪选项（我们在这里没有进行修改），那么 Web 裁剪 portlet 将假定您希望使用缺省的 HTML 裁剪方法，并且它将显示
图 4中所示的 HTML 裁剪页面。
图 4. HTML 裁剪页面
继续使用我们的示例，假定我们已经决定保留
Examples标题，以及中间的四个链接。请回忆前面描述的内容，要选择需进行裁剪的页面元素，您只要将鼠标移至该元素并单击它。该元素就会突出显示以向您表示它已被裁剪。
- 单击文本
Examples以选中它。
- 以相同方式选择链接
Sample Error Servlet、
Show server configuration、
ping 和
Hit Count Servlet。
执行完上述步骤之后，HTML 裁剪页面类似于
图 5。注：在上述步骤中选中的元素现在是突出显示的。
图 5. 进行选择后的 HTML 裁剪页面
预览内容
现在，让我们研究一下内置的预览功能。这个功能允许您预览在 HTML 裁剪页面中正在构建的 Web 裁剪器内容。预览显示在预览窗口内。可以通过 HTML 裁剪页面右上角的
preview（
 ）按钮来访问预览窗口。如果预览窗口没有打开，那么单击
preview按钮将打开预览窗口并显示当前 Web 裁剪器内容的预览。如果预览窗口已经打开，那么预览的内容将被更新以反映自上次更新预览以来的任何更改。在下列步骤中，我们将通过打开预览窗口、选择保持更新此预览窗口的 HTML 裁剪页面的元素、更新预览窗口以及关闭它来练习预览功能。要这样做，请完成下列步骤。
- 单击
preview按钮。打开预览窗口。它类似于
图
6。注：正如该窗口中的内联帮助所描述的那样，该内容内的任何链接都是禁用的，而且该内容中的任何 URL 都没有被重写。这是因为这些功能需要的信息只有当创建了新的 Web 裁剪器时才可用。
- 使预览窗口保持打开，返回至 HTML 裁剪页面。
- 单击
simple.jsp [directly accessed]...（第二个链接）以选中它。该链接和上述步骤中其它链接一样突出显示。
- 再次单击
preview按钮。更新预览窗口。要查看更新，您需要切换回预览窗口。
注：由于各种技术原因，当更新预览窗口的内容时，该窗口不会出现在最前面。现在预览窗口类似于
图 6，其上添加了上面选中的额外链接。
图 6. 预览窗口
- 当您准备继续操作时，请单击位于 HTML 裁剪页面顶部或底部的
Next按钮。注：当您退出 HTML 裁剪页面时，预览窗口将自动关闭。
完成
裁剪器创建过程的最后一步是验证您刚才创建的 Web 裁剪器的输出。Finish 页面显示新的 Web 裁剪器内容的正确预览，只是 URL 还未重写，链接是禁用的。这是因为这些功能需要的信息只有当创建了新的 Web 裁剪器时才可用，并需要禁用链接以防止进行导航。这是预览内容的最后一次机会，并确保您对此内容满意。要进行更改，请单击位于 Finish 页面顶部或底部的
Cancel（
 ）按钮以返回到 HTML 裁剪页面。在您满意之后，请单击
Done（
）按钮。
在执行完以上步骤之后，这个完成的页面类似于
图 7。如果它不是这样，那么请单击
Cancel返回到 HTML 裁剪页面，并选择适当的元素。如果一切正常，那么请单击
Done按钮以完成 Web 裁剪创建过程。
图 7. Finish 页面
祝贺您！您刚才已创建了第一个 Web 裁剪器。现在您的 Web 裁剪管理页面类似于
图 8。在
下一节中您将了解如何向门户网站内的页面添加
SimpleCliplet 。
图 8. 创建 Web 裁剪器之后的 Web 裁剪管理页面
向您的门户网站添加 Web 裁剪器
现在准备向您门户网站内的页面添加 Web 裁剪器。因为 Web 裁剪器只是另一个 portlet，因此将它添加到门户网站内页面的技术无异于将任何其它 portlet 添加到门户网站内的页面。尽管讨论这个过程稍微超出了本文的范围，但是我们自然而然地会去讨论它。在下面的示例中，我们将向 Home 页面组内的 Welcome 页面添加我们的 Web 裁剪器。如果您希望将它添加到其它页面，那么只须替代页面名称及其包含的页面组。要将我们刚才创建的 Web 裁剪器
SimpleCliplet 添加到门户网站页面，完成下列步骤。
- 使用页面组导航控件，选中
Work With pages页面组。
- 从页面列表上选中
Edit Layout页面。
- 在
page Group下拉菜单中，选中名为
Home的页面组。
- 在
page下拉菜单中，选中名为
Welcome的页面。现在您应该看到类似
图 9 中的页面。
图 9. Edit Layout 页面
- 单击
Get portlets（
）按钮。该按钮位于
图 9中显示的 Edit Layout and Content 页面的中间。您会看到
图
10 中显示的 Get portlets 页面。
图 10. Get portlets 页面
- 在 Get portlets 页面上，单击
Show all
portlets按钮。
- 选中
Go（
 ）按钮。Get portlets 页面将刷新并在页面底部的 Search Results 表中显示所有可用的 portlet。
- 在 Search Results 表中寻找新的 Web 裁剪器
SimpleCliplet 然后单击
Add（
 ）按钮。您可能没有注意到表示已单击这个按钮的可见响应或操作。这没关系。您将注意到
SimpleCliplet 已经被添加到页面顶部的列表中。
- 选中
OK（
）按钮。这将返回到 Edit Layout 页面。
- 现在 Edit Layout 页面顶部的列表应该包含一项
SimpleCliplet 。选中这个项。现在页面类似于
图 11。
图 11. 包含选中
SimpleCliplet 的 Edit Layout 页面
- 该页面底部的表显示了 Welcome 页面上的 portlet 布局。注：它分成两列，称为容器。现在您希望将
SimpleCliplet 添加到第一个容器的底部。要这样做，单击左列顶部的
Add portlet to container
（
 ）按钮。该页面将刷新，并且将更新第一列以在该列底部包含新的 portlet。现在页面类似于
图 12。
图 12. 包含添加
SimpleCliplet 的 Edit Layout 页面
- 最后一步是激活您正操作的页面。当您开始操作它时，您的门户网站取消激活该页面以便当它处于不一致状态时用户不能访问它。要激活它，单击页面右上角的
Activate（
 ）按钮。
祝贺您！您已经成功地向门户网站添加了
SimpleCliplet 。
现在准备看一下第一个 Web 裁剪器。要做到这一点，使用页面组导航控件以导航回 Home 页面组和 Welcome 页面。现在您的 Welcome 页面类似于
图 13。在
下一节中，您将了解如何向
SimpleCliplet 添加描述以及如何修改裁剪。
图 13. 包含
SimpleCliplet 的 Welcome 页面
修改 Web 裁剪器
既然您已经向门户网站添加了 Web 裁剪器，如果您觉得内容完全不是您想要的，那么该怎么办呢？Web 裁剪 portlet 允许您在创建了 Web 裁剪器之后的任何时候对它进行编辑。您不仅可以编辑正在显示的裁剪，而且还可以编辑 Web 裁剪器的任何设置，包括本教程中没有讨论的更高级设置。唯一不能更改的是 Web 裁剪器本身的名称。例如，假定我们希望向 Web 裁剪器添加描述，并且假定事实上我们决定只需要内容页面上的第三、第四和第五个链接。要这样做，请完成下列步骤。
- 通过使用页面组和页面导航控件，返回到
Web 裁剪管理页面。
- 在页面左侧的列表框内查找名为
SimpleCliplet 的 Web 裁剪器并选中它。
- 单击
Edit（
）按钮。这将产生 Basic Settings 页面，就如同您单击
Add按钮，不过有下列区别：
- Web 裁剪页面上所有可应用的域都自动地用相应的设置进行填充，应该至少存在一个裁剪器，本例中选中的 Web 裁剪器是
SimpleCliplet 。
- Basic Settings 页面上标记为
Name and default locale title的域是禁用的，也就是说，它不能被编辑。Web 裁剪器的名称是唯一一个不可以编辑的域。
例如，请注意 Basic Settings 页面上的 URL to clip 域已经用我们创建 Web 裁剪器时输入的值，也就是
http://portal.mycompany.com/webapp/examples 进行了填充。
- 在 Description 域中，输入
My first Cliplet 。
- 在 Basic Settings 页面的顶部或底部单击
Next按钮。这将再次把您带入 HTML Clipping 页面。它类似于
图 14。注：当您创建 Web 裁剪器时选中的元素是突出显示的，它告诉您这些元素已经被保留下来。
图 14. 包含选中元素的 HTML 裁剪页面
- 单击标记为
simple.jsp
[directly accessed]...的第二个链接。将除去对这个链接的突出显示，这表明该链接不再保留在 Web 裁剪器的输出中。
- 单击标记为
Hit Count Servlet的第六个链接。同样将除去对这个链接的突出显示。现在您的 HTML 裁剪页面类似于
图 15。
图 15. 最终的 HTML 裁剪页面
- 当您准备继续时，在 HTML
裁剪页面的顶部或底部单击
Next按钮。
- 在 Finish 页面的顶部或底部单击
Done按钮。
- 使用页面组和页面导航控件，返回到 Home 页面组内的 Welcome 页面。
现在该页面上名为
SimpleCliplet 的 portlet 类似于
图 16。
图 16. SimpleCliplet
本
节已结束。在
下一节中，您将了解如何从您的门户网站上除去 Web 裁剪器。
除去 Web 裁剪器
本教程中我们将执行的最后一个任务是删除我们已经创建的 Web 裁剪器
SimpleCliplet 。如果您想要保留这个 Web 裁剪器作为示例，那么请阅读本节，但不要完成其中的任务。
除去 Web 裁剪器很简单。要除去
SimpleCliplet ，请完成下列步骤。
- 使用页面组和页面导航控件，返回到 Web 裁剪管理页面。
- 在页面左侧的列表框内查找名为
SimpleCliplet 的 Web 裁剪器，并选中它。
- 单击
Delete（
）按钮。这将产生
图 17中显示的确认对话框。
- 单击
OK按钮。
完成这些步骤之后，
Web 裁剪管理页面将立即刷新，并且
SimpleCliplet 将不再出现在 Web 裁剪器的列表中。
图 17. 除去确认对话框
结束语
祝贺您！您已经完成了本教程。在本教程中，我们讨论了 Web 裁剪的基础知识。我们引入了 Web 裁剪的概念，谈论了如何访问 Web 裁剪 portlet。我们还讨论了如何添加、编辑和除去 Web 裁剪器以及如何向门户网站内的页面添加已完成的 Web 裁剪器。尽管您开始独立地研究 Web 裁剪 portlet，但您要认识到本文未涉及到的内容还有很多。实际上，本文中我们未涉及到的主题有很多。这里列出了一些主题。
-
认证
- 如何创建访问受限内容的 Web 裁剪器 — 这些内容需要某种形式的认证。
-
代理和防火墙
- 如何创建通过代理或防火墙访问内容的 Web 裁剪器。
-
URL 重写
- 什么是 URL 重写？URL 重写设置有哪些影响？当导航 Web 裁剪器内的超链接时，会怎么样？它们是如何影响该页面内的其它 URL 的？
-
单设备裁剪器 vs. 多设备裁剪器
- 这两者有何区别并且在何种情况下多设备裁剪器是可用的？
-
HTML 裁剪的局限性
- 不是所有的 HTML 页面都可以方便地裁剪。特别是包含 JavaScript 和 HTML 框架的裁剪页面存在一些限制。
在有关 Web 裁剪的下一篇文章中，我们将讨论上述的某些问题，并让您详细了解上面描述的一些更高级的功能。
参考资料
关于作者  | 
| |
Scott DeWitt是位于美国北卡罗莱纳州 Research Triangle park 的 IBM Software Group 实验室专职软件工程师。他从事转码技术组设计和开发包括 Web 裁剪 portlet 和外部注释编辑器（External Annotation Editor）以及相关工具在内的转码工具。他喜欢弹奏古典吉他，阅读哈里·波特系列小说（JK，请快些完成第五本书吧！）以及在他有限的休闲时光陪伴他的家人。可以通过
mailto:dewittsc@us.ibm.com与 Scott DeWitt 联系。
|
对本文的评价
| 
