IBM®
跳转到主要内容
    中国 [选择]    使用条款
 
 
Select a scope: Search for:    
    首页    产品    服务与解决方案     支持与下载    个性化服务    
跳转到主要内容

developerWorks 中国  >  Lotus  >

在 IBM Lotus Quickr services for IBM WebSphere Portal 8.0 中定制组件

使用组合应用程序发掘协作工具的潜能

developerWorks
文档选项

未显示需要 JavaScript 的文档选项

讨论

英文原文

英文原文


级别: 中级

Axel Saß, 认证 IT 专家, IBM
Jon Brunn, 软件架构师, Federated Integration Test team, IBM China Development Lab

2009 年 6 月 30 日

了解可用于 IBM Lotus Quickr services for IBM WebSphere Portal 8.0 的组合应用程序。学习如何定制使用 IBM Workplace Web Content Management 服务的组件。查看一个示例,了解我们如何向博客组合应用程序添加功能。

在本文中,我们将介绍可用于 IBM Lotus Quickr services for IBM WebSphere Portal 8.0 的组合应用程序,后者也称为 J2EE 版本的 Lotus Quickr。我们将演示如何定制使用 IBM Workplace Web Content Management 服务的组件。还将解释一些基本概念,并通过一个示例演示如何向博客组合应用程序添加功能。

内容的 Lotus Quickr 表示:基本概念

Lotus Quickr services for WebSphere Portal 使用组合应用程序的概念来创建空间。下载试用版 Lotus Quickr 8.0,这是一个基于 Web 2.0 的团队协作产品。您可以在 developerWorks 文章 “在 WebSphere Portal V6 中构建组合应用程序和模板” 中了解组合应用程序概念的更多信息。

一般而言,使用组合应用程序能够实现目前的 IT 开发的多个方面。组合应用程序应该具有以下功能:

  • 重用部件
  • 让这些部件彼此交互
  • 是一个完整的包,其中包含要部署的所有必要信息
  • 能够以模板的形式重用整个应用程序

Lotus Quickr 中打包了两种不同类型的组合应用程序。Wiki、博客和列表(例如公告、联系人和项目任务)使用 IBM Workplace Web Content Management 显示其内容,而提要(feed)阅读器和库组合应用程序不使用 Workplace Web Content Management。

本文主要介绍如何定制使用 Workplace Web Content Management 的组合应用程序。我们仔细了解一下 Workplace Web Content Management 的一般概念。

Workplace Web Content Management 概念

在 Workplace Web Content Management 系统视图中,内容是一个数据元素(比如文本、数字或图像)集合。您可以通过两种方式与该内容交互:

  • 编写模板(authoring template)。编写模板用于创建或编辑内容。这些模板定义用户界面希望如何创建或编辑特定内容。
  • 演示模板(presentation template)。演示模板用于显示内容。

编写模板被影射到演示模板。给定一个编写模板和一个站点,就会有一个相关联的演示模板被用于向用户显示内容。演示模板可以包括对 Web 内容组件的引用。当被演示模板引用时,Web 内容组件就会成为包含在演示模板中的可重用片段,就好象它们本来就在演示模板中一样。Web 内容组件类型包括 HTML、图像、富文本、样式表等。当您引用一个 Web 内容组件时,引擎既可以将引用替换为组件的内容(比如 HTML 或富文本组件),也可以将引用替换为 Web 内容组件的内容的 URL(比如图像或样式表组件)。

图 1 展示了不同的 Workplace Web Content Management 工件如何彼此交互。


图 1. Workplace Web Content Management 工件
Workplace Web Content Management 工件

Workplace Web Content Management 组件

在 Lotus Quickr 的不同的演示模板中,使用了许多 Workplace Web Content Management 元素。元素表示如何向用户提供某部分内容的信息或该信息是什么格式。以下是 Lotus Quickr 组合应用程序的演示模板中使用的元素:


  • 用于与内容交互。可以选择不同的操作:NEW、EDIT、DELETE、APPROVE、REJECT。

  • 用于显示 HTML 代码。

  • 用于显示菜单。在 Lotus Quickr 的 Workplace Web Content Management 模板中,这个元素用于显示一组条目,比如内容项。

  • 用于将 JSP 代码集成到 Workplace Web Content Management 组件中。举例来说,这个组件可用于显示正确的 Project Task 状态图。

  • 这个元素用于输入文本。

  • 这个元素用于输入富文本。

  • 这个元素用于输入数字。

  • 这个元素用于输入日期和/或时间。

  • 这个元素用于显示一幅图像。

  • 这个元素用于输入一个选项。

Workplace Web Content Management 远程操作

Workplace Web Content Management 远程操作 可用于创建一些链接,这些链接能够触发底层 Workplace Web Content Management 系统内的特定操作。您可以在 WebSphere Portal V6 文档中了解远程操作的更多信息。

远程操作是一个 URL。通过将一个参数添加到 Workplace Web Content Management 应用程序的链接中,可以添加远程操作。例如:

http://quickr.greenautos.com:10038/lotus/myquickr?wcmAuthoringAction=action

您可以使用不同类型的操作:

  • Delete
  • Edit
  • Read
  • Openmainview
  • New
  • 与工作流相关的操作:
    • Decline
    • Approve

一般情况下,不需要使用 Workplace Web Content Management 远程操作来创建您自己的内容。可以使用 Authoring Tools 组件完成所有需要的任务。





回页首


定制依赖于 Workplace Web Content Management 的 Lotus Quickr 组合应用程序

在后面的内容中,我们将更全面地讨论适用于 Wiki、博客和列表的组合应用程序。这 3 种应用程序依靠 Workplace Web Content Management 来向用户显示它们的内容。对于每种组合应用程序,Workplace Web Content Management 都提供了对应的演示模板、编写模板以及这些模板中使用的 Workplace Web Content Management 组件和样式。

Wiki 组合应用程序

Wiki 组合应用程序支持用户创建和编辑内容。创建的每个条目都能够链接到其他条目。

图 2 显示了演示模板的 Wiki 区域。


图 2. 演示模板的 Wiki 区域
演示模板的 Wiki 区域

Wiki 组合应用程序中使用了以下区域:

  • Wiki Icon - Icon
  • Wiki - Area New Page Action - Authoring Component - Used Actions: Create
  • Wiki - Page list Tools - Authoring Component - Used Actions: Delete
  • Wiki - Recently added Pages - Menu - Six Last Entries
  • Wiki - Recently modified Pages - Menu - Six Last modified entries
  • Wiki area - About Box - HTML - About Box plus Atom Feed:
    • Common Site area About Info
    • Common Site area About box Links

演示模板的 Wiki 区域中使用了下面这个元素:

  • all_wiki_pages - Wiki – Pages

图 3 显示了一个 Wiki 页面。


图 3. Wiki 页面
Wiki 页面

图 4 显示了 About 框和 Task 框的详细信息。


图 4. About 框和 Task 框
About 框和 Task 框

Wiki 页面中使用了以下区域:

  • Wiki Icon - Icon
  • Table of Contents - HTML
  • Table of Contents Trigger - HTML
  • Wiki - Edit Page - Authoring Component - Used Actions: Edit
  • Wiki page - Task Box - HTML
    • Wiki - New and Delete Page Link - Authoring Component - Used Actions:
      • NEW. New_button
      • EDIT. Wiki – Version and History Actions
      • DELETE
    • wiki_list - Wiki Pages
  • Wiki Page - About Box
    • Common Site Area - About Information
    • Wiki - References to Box
    • Feed Bookmark
    • Common Content - About box Links

Wiki 页面中使用了下面这个元素:

  • comment_section - Document Posts show Component

可用于 Wiki 组合应用程序的编写模板包括以下元素:

  • Wiki - Area
    • body - Rich Text
  • Wiki - Page
    • body - Rich Text

博客组合应用程序

博客组合应用程序支持用户创建一组信息片段。所有这些条目按照一定顺序依次显示。

图 5 显示了演示模板的博客区域。


图 5. 演示模板的博客区域
演示模板的博客区域

Blog - Entry 模板中使用了以下组件:

  • Blog Icon - Icon
  • Blog entry - Task Box
    • Blog - Edit Entry - Authoring Component - Used Actions
    • Blog - New Delete Entry - Authoring Component - Used Actions:
      • NEW
      • DELETE
  • Blog - Recent Entries
  • Blog entry - About Box
    • Common Content About Info
    • Feed Integration
    • Common Content About box Links

Blog 页面中使用了下面这个元素:

  • comment_section - Document Posts show Component

图 6 显示了博客页面中使用的元素。


图 6. 博客页面中使用的元素
博客页面中使用的元素

Blog - Main 页面中使用了以下组件:

  • Blog Icon - Icon
  • Blog - Entry View - Menu - Renders the last 10 entries
    • Document Posts - Count
  • Blog - New Post - Authoring Component - Used Actions: NEW
  • Blog - Manage Blog Action - Authoring Component- Used Actions:
    • DELETE:
      • Blog - Manage - Presentation Template
      • Edit Portlet Settings - JSP
        /teamspace/jsp/html/edit_portlet_settings.jsp
  • Blog – Recent Entries - Menu - Display recently added entries
  • Blog view – About Box
    • Common Site Area – About Info
    • Feed Integration
    • Common Site area – About Box Links

图 7 显示了 Blog – Manage 页面中使用的组件。


图 7. Blog – Manage 页面中使用的元素
Blog – Manage 页面中使用的元素

Blog - Manage 页面中使用了以下组件:

  • Blog Icon - Icon
  • Blog - Manage Posts View - Menu(这个菜单列出可以管理的所有博客文章。)
  • Blog - New Post - Authoring Component - Used Actions: NEW
  • Blog view - About box
    • Common Site Area - About Info
    • Feed Integration
    • Common Site area - About Box Links

可用于博客组合应用程序的编写模板包含以下元素:

  • Blog - Entry
    • blog - Rich Text

列表组合应用程序

列表组合应用程序是一个基础模板。在 Lotus Quickr 中,它被用于以下组合应用程序:Project Tasks、Announcements 和 Contacts。每个列表的主要内容使用了一个基本的演示模板。这个演示模板然后使用一个模板映射进行配置,以使用依赖于列表的值实例化模板元素。

例如,看一下图 8、9 和 10,您会看到组件 List – Main Icon 的外观因实现(Announcements、Contacts 或 Project Tasks)的不同而不同。

图 8 显示了使用列表组合应用程序的 Announcements 实现。


图 8. Announcement 区域
Announcement 区域

图 9 显示使用列表组合应用程序的 Contact 实现。


图 9. Contact 区域
图 9. Contact 区域

图 10 显示了使用列表组合应用程序的 Project Tasks 实现。


图 10. Project Tasks 区域
Project Tasks 区域

List - Main 页面中使用了以下组件:

  • List - Main Icon - Icon
  • List - Home Action Links - Authoring Component- Used Actions:
    • NEW. New_button - Create new list item
    • DELETE. List - Edit Portlet Settings - JSP
      /teamspace/jsp/html/list_edit_portlet_settings.jsp

List – Main 页面中使用了以下元素:

  • New_button - 新的 Announcement、Contact 和 Project Task 按钮的名称
  • Menu - 用于显示条目列表的组件名称

图 11 显示了一个 Announcement 项。


图 11. Announcement 项
Announcement 项

List – Announcement 项中使用了以下组件:

  • List - Main Icon - Icon
  • List - Item Action Links - Authoring Component - Used Actions:
    • NEW. New_button
    • EDIT
    • DELETE

List – Announcement 项中使用了以下元素:

  • New_button - 新的 Announcement、Contact 和 Project Task 按钮的名称
  • Comment_section - Document Posts – Show

图 12 显示了一个 Contact 项。


图 12. Contact 项
Contact 项

List – Contact 项中使用了以下组件:

  • List - Main Icon - Icon
  • List - Item Action Links - Authoring Component - Used Actions:
    • NEW. New_button
    • EDIT
    • DELETE

List - Contact 项中使用了以下元素:

  • New_button - 新的 Announcement、Contact 和 Project Task 按钮的名称
  • Phone_number
  • Mobile_number
  • Work_number
  • Fax_number
  • Address
  • Company
  • Email_address
  • URL
  • Notes

图 13 显示了一个 Project Task 项。


图 13. Project Task 项
Project Task 项

List - Announcement 项中使用了以下组件:

  • List - Project Task Priority Title Image - JSP
    • /teamspace/jsp/html/list_project_task_priority_titleicon.jsp
  • List - Update Task Status - JSP
    • /teamspace/jsp/html/list_update_task_status.jsp
      用于更新当前的任务状态
  • List - Item Action Links - Authoring Component - Used Actions:
    • NEW. New_button
    • EDIT
    • DELETE
  • List - Project Task Status Image - JSP
    • /teamspace/jsp/html/list_project_task_status_image.jsp
      更改完成状态

List - Announcement 项中使用了以下元素:

  • New_button - 新 Announcement、Contact 和 Project Task 按钮的名称
  • Description - Rich Text
  • Assigned_to - User Selection
  • Priority - Option Selection
  • Start_date
  • Due_date
  • Comment_section

编写模板的名称及其元素如下:

  • List - Announcement
    • body - Rich Text
    • type - Option Selection
  • List – Contact
    • phone_number - Text
    • mobile_number - Text
    • work_number - Text
    • fax_number - Text
    • address - Text
    • company - Text
    • email_address - Text
    • url - Text
    • notes - Rich Text
  • List - Project Task
    • description - Rich Text
    • assigned_to - User Selection
    • priority - Option Selection
    • percentage_complete - Number
    • start_date - Date and Time
    • due_date - Date and Time




回页首


层叠样式表

可以使用不同的选项来更改 Lotus Quickr Teamroom 的外观。developerWorks Lotus 文章 “Customizing themes in IBM Lotus Quickr services for IBM WebSphere Portal V8.0” 中描述的所有方法也适用于 Lotus Quickr 中的组合应用程序。但是由于一些组合应用程序使用 Workplace Web Content Management 作为它们的基础,所以它们会使用一些变体。下面将介绍这些变体。

在常规门户样式表中更改样式

组合应用程序中使用的大多数样式都在下面的文件中定义:

\#wp_profile#\installedApps\porta\wps.ear\wps.war\
themes\html\#Theme Directory#\styles_ibmportlet.jspf

下面两张屏幕截图显示了基本样式。图 14 显示了 Wiki 页面中使用的样式。


图 14. Wiki 页面中使用的样式
Wiki 页面中使用的样式

图 15 显示了 Wiki 页面的右侧 —— 用于显示常用样式的菜单部分。


图 15. Wiki 页面右侧使用的样式
Wiki 页面右侧使用的样式

接下来,我们通过一个例子来介绍如何更改原始操作的样式。

更改原始操作的样式

在 Lotus Quickr 基本主题中,原始操作与图 16 中显示的屏幕类似。


图 16. 原始的 Create 用户界面
原始的 Create 用户界面

要将这些操作的外观从图 16 中显示的样式更改为一个不同的样式,执行以下操作:

  1. 创建两个新图像。一个图像充当背景,另一个图像充当折叠图像(twisty image)。例如,您可以使用基本主题提供的图像。可以在下面的目录下找到背景图像:
    was_profile_root/installedApps/cellname/wps.ear/wps.war/
    themes/html/QPG/images/portlet/buttonBG.gif
  2. 可以在下面的目录中找到折叠图像:
    was_profile_root/installedApps/cellname/wps.ear/
    wps.war/images/icons/pb-menu.gif

    折叠图像与主题是相互独立的。这意味着您可以在一个服务器上仅使用一幅折叠图像。如果要这么做,您应该使用一种适合于在服务器上使用的所有主题的普通颜色。

  3. 打开下面的文件:
    was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/
    custom_theme/styles_ibmportlet.jspf

    搜索以下定义:
    .ibm-portlet-sidebar .primary-action-section BUTTON {
  4. 将这个定义替换为清单 1 中显示的样式定义。


    清单 1. 样式定义
    						
    .ibm-portlet-sidebar .primary-action-section BUTTON {
       background: #E6F0FC url(./images/your-example.gif) left center repeat-x;
       color: #295500;
       border: 1px solid #295500;
       padding: 0.2em 0.5em;
       cursor: pointer;
    }
    

  5. 确保您的定义与清单 2 中的定义类似。


    清单 2. 修改之后的定义
    						
    .ibm-portlet-section-header-small .ibm-portlet-primary-actions BUTTON,
    .ibm-portlet-sidebar .ibm-portlet-primary-actions BUTTON,
    .ibm-portlet-sidebar .primary-action-section BUTTON {
      background: #E6F0FC url(./images/buttonBG-green.gif) left center repeat-x;
      color: #29550;
      border: 1px solid #295500;
      padding: 0.2em 0.5em;
      cursor: pointer;
      }
    

  6. 保存文件。
  7. 将包含新的背景 GIF 图像的文件添加到主题中的图像目录中。首先导航到:
    was_profile_root/installedApps/cellname/wps.ear/wps.war/
    themes/html/customized_theme/images

    然后,将新图像复制到该目录。

  8. 将 pb-menu.gif 替换为该图像的新版本。首先导航到:
    was_profile_root/installedApps/cellname/wps.ear/wps.war/images/icons

    然后,将旧 pb-menu.gif 图像替换为新 pb-menu.gif 图像。

  9. 重新载入和编译了主题之后,按钮应该具有新的外观,例如,它的外观可能与图 17 类似。

    图 17. 修改之后的 Create 用户界面
    修改之后的 Create 用户界面

有两种例外情况无法使用更改样式的常规行为。

更改 Announcement 标题

图 18 中显示的 Announcement 样式 (content-title) 无法通过样式表 JSPS 访问。


图 18. 公告中使用的样式
公告中使用的样式

由于 List - Main Page 中的 Announcement 项、Contact 项或 Project Task 项是在 Teamspace portlet 中定义的,所以您需要将更改直接添加到指定的 Workplace Web Content Management 组件。图 19 显示了更改之前的 Announcement 标题。


图 19. 更改之前的 Announcement 标题
更改之前的 Announcement 标题

转到 Lotus Quickr 主页。选择 Site Administration - Manage Content。在 Components 树中,单击以下每项的 Edit:

  • List - Announcements Menu
  • List - Contacts Menu
  • List - Project Task Menu

对于每一项,转到 Chapter Design for each menu search result,并在 class="teamspaceList" 之后添加 style="color: #enter_your_value_here",如图 20 所示。


图 20. 突出显示的文本被添加到 Workplace Web Content Management 组件中
突出显示的文本被添加到 Workplace Web Content Management 组件中

结果应该与图 21 类似。


图 21. 更改之后的 Announcement 标题
更改之后的 Announcement 标题

更改列表的分页值

无论是否显示了列表(例如在 Library 应用程序或 Announcements 中),用户都可以决定要显示多少链接,如图 22 所示。


图 22. 分页值显示
分页值显示

要更改底部的链接的颜色,您需要更改 wpsLink,后者位于 styles_theme.jspf 文件中。由于这个类的值派生自当前使用的颜色主题,所以您必须在下面的代码中更改 bodyAnchor* 的值:

\#wp_profile#\installedApps\porta\wps.ear\wps.war\themes\html\
#Theme Directory#\colors\default.properties

在这个文件的开头,找到图 23 中突出显示的区域。


图 23. 更改此 wpslink 文本
更改此 wpslink 文本

将这些值替换为新颜色的值。在我们的例子中,颜色值为 #295500,如图 24 所示。


图 24. wpslink 的新文本
wpslink 的新文本

保存 default.properties 文件并重新编译 styles.jsp。将最后的编辑时间更改为当前时间,以便让服务器知道它必须重新编译该文件。

所做更改的结果应该与图 25 中所示的图像类似。


图 25. 更改之后的编号
更改之后的编号




回页首


与 Workplace Web Content Management 相关的其他信息

在以下各节中,介绍一些标准任务,以及您可能想要在所创建页面中添加的增强功能。

Workplace Web Content Management 组件中使用的 JSP

JavaServer Page (JSP) 通常在需要一项特殊功能来显示特定内容时使用。您可以在以下目录中找到 Workplace Web Content Management 组件中使用的 JSP:

\#PortalRoot#\installedApps\WCM_Teamspace_Portlet_######.ear\
######.war\teamspace\jsp\html

确保将 ###### 替换为您的部署代号。

如果您需要将代码添加到特定 JSP 文件中,我们建议您创建一个新 JSP 文件,复制旧文件并将其放在一个不同的子目录中。例如,将其放在下面的目录中:

\#PortalRoot#\installedApps\WCM_Teamspace_Portlet_######.ear\
######.war\teamspace\jsp\html\customized

接下来,创建一个新 JSP 组件,并在演示模板中引用该组件。您然后应该将该子目录复制到 portlet 外部的某个区域,以进行备份。

此外,您应该添加一些注释来说明在演示模板或 JSP 组件内部所做的更改。您必须添加一条注释,因为应用修复包时,您无法确定定制的文件不会被删除。例如,您可能像下面这样添加一条注释:

"The List - Project Task Priority Image component uses the list_
project_task_priority_icon.jsp. This JSP renders the priority image of the project."

添加 Back 链接

要添加一个按钮来指向应用程序的主屏幕,可以添加清单 3 中所示的代码。


清单 3. 添加一个 Back 按钮
				
<a class="nav-link" href="<URLCmpnt context="current" type="site" 
mode="storable"/>" title="< Back to <IDCmpnt context="current" 
type="sitearea" field="title"/>">< Back to <IDCmpnt context="current" 
type="sitearea" field="title"/></a>

这个 Back 按钮总是在需要从一个细节页面返回到主页面时使用。例如,它可以用在 Blog – Manage 或 Blog – Entry 页面中。

在 Workplace Web Content Management 内容内部实现在线感知(people awareness)

要实现根据用户姓名感知其在线情况,可以添加一个感知图标。这个图标在用户在线时是绿色的,当用户离线时是灰色的。为了使人们能够感知名称,将以下属性添加到 IDCmpnt 标签中:

<IDCmpnt context="current" type="content" field="authors" awareness="true"
start="<li><label for=’contentAuthor’>Author:</label> <span
id=’contentAuthor’>" end="</li>"/>

这个属性在 Wiki – Area 页面中使用。

区域语言支持

这一节介绍如何使用 Workplace Web Content Management 在 Workplace Web Content Management 和 Lotus Quickr 组件中实现区域语言支持(National Language Support,NLS)。字符串 @nls@ 表示 Workplace Web Content Management 的一个 NLS 感知字符串。当通过呈现 portlet 进行呈现时,Workplace Web Content Management 将这个键字符串替换为一个 Workplace Web Content Management 属性文件中的值。在通过 Workplace Web Content Management 管理或编写 portlet 查看 Web 内容工件时,这些键不会被替换为它们的值。这个视图允许网站设计人员查看使用了哪些键并替换为新键。

要在 Workplace Web Content Management 组件中添加区域语言支持,执行以下操作:

  1. 创建属性文件及其 NLS 变体:
    myNLS.properties
    myNLSproperties_en.properties

    在文件中添加以下代码:

    mystring=My string
    my2string=My 2. string
  2. 源文件必须位于 Workplace Web Content Management 团队空间 portlet 的类路径上。例如,可以将这些文件放在 #Portalroot#\wcm\shared\app 中。
  3. 在 Workplace Web Content Management 组件中添加对 NLS 字符串的引用:
    @nls:myNLS@mystring@ through the authoring portlets

如果您需要更改一个字符串,或向资源包中添加一些内容,需要重启服务器才能使新内容生效。





回页首


将 Atom 提要添加到当前内容中

要添加一个 ATOM 提要链接来访问当前内容,将清单 4 中所示的代码添加到您想要在其中显示链接的组件中。


清单 4. 添加 Atom 提要
<link rel="alternate" type="application/rss+xml" title="Subscribe to this" 
href="<URLCmpnt context="current" type="content" mode="atom"/>">
<ul class="link-list"><li><a class="menu-link" href="<URLCmpnt 
context="current" type="content" mode="atom"/>" title="Subscribe to this" 
target="" border="0"><Component name="shared resources/feed-icon"/><span>
Subscribe to this</span></a></li>

此链接可以在 About 框组件中找到。例如 Blog entry – About box 就包含这个提要链接。





回页首


通过添加新页面来定制 Workplace Web Content Management 组合应用程序

在添加新页面之前,您应该思考以下问题:

  • 您需要提供新内容吗?
  • 您需要创建一个新的内容项吗?

如果您决定创建一个新页面,执行以下步骤:

  1. 定义组成内容的元素。然后创建一个编写模板,您可以在其中输入内容。了解与创建 编写模板 有关的更多信息。有了这个编写模板之后,可以创建一个内容对象。
  2. 接下来,添加一个 演示模板 来显示此信息。
  3. 在创建了想用来显示内容的演示模板之后,确定想要在该模板中使用哪个 Workplace Web Content Management 组件。有 3 个选项:JSP、Menu 和 HTML。如果您拥有静态内容,则使用 HTML 组件。如果您想要显示一个内容项列表,则使用 Menu 组件。如果您需要具有最高的灵活性,则使用 JSP 组件。
  4. 通过添加指向新页面的按钮或链接,可以将添加的内容集成到现有的站点结构中。

下面看一个将页面添加到博客组合应用程序的例子。这个新页面显示当前用户的博客条目,应该从博客主页中访问它。为了完成这个示例,我们使用一个个性化组件来选择特定的博客条目。这个组件具有区域语言支持功能。

执行以下操作,添加区域语言支持的资源包:

  1. 在文件夹 #PortalserverRoot#\wcm\shared\app 中创建一个名为 myblogs.properties 的文件。
  2. 为每个要被区域化的文本字符串添加一个名称/值对。对于 My Blogs 增强,可以添加以下文件:
    myblogs.title=My Blog Entries
    myblogs.goto.page=Goto My Blog Entries
  3. 通过添加与语言相关的文件名称,复制应该受支持的所有语言的文件。对于英语,将 myblogs.properties 复制到 myblogs_en.properties。对于德语,将 myblogs.properties 复制到 myblogs_de.properties,然后翻译该文件中的所有条目。

这些个性化规则目前不支持选择类型为当前站点区域(current sitearea)的站点区域。可以使用一个请求参数来过滤出必要的内容项。要将当前的站点区域添加到请求对象中,调用一个 JSP 来添加必要的信息。执行以下步骤:

  1. 在下面的文件夹中创建一个名为 customized 的目录:
    #PortalserverRoot#\installedApps\WCM_Teamspace_Portlet_
    xxxxxxxxx.ear\xxxxxxxx.war\teamspace\jsp\html\customized
  2. 在下面的文件夹中创建一个名为 currentSite.jsp 的文件:
    #PortalserverRoot#\installedApps\WCM_Teamspace_Portlet_
    xxxxxxx.ear\xxxxxxx.war\teamspace\jsp\html\customized

    由于安装程序之间的差异,您可能需要将 xxxxxxx 更改为您的 Lotus Quickr 服务器的部署 ID。搜索 WCM_Teamspace_Portlet。这个文件应该包含清单 5 中的代码。


清单 5. 当前的 Site.jsp 的代码
				
<%@ page import="com.ibm.portal.um.*,
com.ibm.workplace.wcm.api.*,
com.ibm.workplace.wcm.api.exceptions.*" %>

<%--  Initialize the WCM workspace with the current users context--%>
<wcm:initworkspace user="<%= 
(java.security.Principal)request.getUserPrincipal() %>" >
</wcm:initworkspace>
<%
try
{
   RenderingContext renderingContext = 
   (RenderingContext)request.getAttribute("wcmRenderingContext");
  
   if (renderingContext != null)
   {
   /* Retrieve the Object ID of the current site */
	   String docLibID = renderingContext.getSite().getOwnerLibrary().getId();
	   /* Add the Object ID to the request */
	   request.setAttribute("library", "uuid:"+docLibID);
	   
   }
	   else
		System.err.println("The renderingContext could not be initialized. 
		Therefore the Object ID o fthe current site could not be evaluated.");
}
catch (Exception e)
{
   e.printStackTrace();
}
%>

接下来,执行以下步骤,将一个 JSP 组件添加到 Workplace Web Content Management 中的共享库中:

  1. 单击 Site Administration。
  2. 单击 Manage Content。
  3. 选择 New - Component - JSP。
  4. 在 Name 字段中,输入 blog_current_site。在 Display title 字段中,输入 Blog - Current Site JSP。
  5. 在 Path 字段中输入 JSP 的路径 /teamspace/jsp/html/customized/currentSite.jsp。
  6. 单击 Save,然后单击 Close。

接下来,执行以下步骤,添加个性化规则组件:

  1. 选择 Web Content 标签。
  2. 选择 New - Component - Personalization。
  3. 在 Name 字段中,输入 blog_myblogs_perso_comp,在 Display title 字段中,输入 Blog - MyBlogs Personalization component。
  4. 滚动到 Personalization Element 部分。单击 New,如图 26 所示。


    图 26. 添加新的个性化元素
    添加新的个性化元素

  5. 输入规则的描述:Select the entries the current has created in the current blog。
  6. 在 Select 字段中,单击 content*,然后从显示的列表中选择 Web Content。
  7. 在 Site Area situation 中选择 value,然后在显示的选项中选择 Request and Manage Properties。
  8. 选择 Add Dynamic Property。
  9. 在 Enter a name for the dynamic 字段中,输入名称 library。保留默认类型 Text,然后输入 library 作为规则中使用的名称,如图 27 所示。单击 Save。


    图 27. 输入 Dynamic Property 中的值
    输入 Dynamic Property 中的值

  10. 单击 Done。
  11. 在 Site Area condition 中,选择 value,然后在显示的选项中选择 Request and library。
  12. 选择 attribute,然后从显示的列表中选择 Author。
  13. 单击 value* 后面的 >’,然后从显示的选项中选择 Portal Users and Distinguished Name。
  14. 选择 add Condition,然后从显示的列表中选择 Authoring Template。
  15. 选择 value*,然后从显示的列表中选择 WCM Template。
  16. 选择 Blog - Entry,然后单击 OK,如图 28 所示。


    图 28. 选择 Blog Entry 作为过滤参数
    选择 Blog Entry 作为过滤参数

  17. 单击 Save。
  18. 在 Results per page 字段中输入 5。

创建新页面之后,您需要创建页面的显示方式。您需要完成页面的页眉、设计、页脚和分隔符。因为已经存在一个博客条目列表,所以您可以复制此内容。执行以下步骤:

  1. 单击 Web Content 标签,并且不要关闭个性化组件。
  2. 选择 Components,然后选择 Blog - Entry View。
  3. 将 Blog - Entry View Header 部分的内容复制到 Personalization Component Header 部分,如图 29 所示。


    图 29. 复制到 Header 部分的文本
    复制到 Header 部分的文本

  4. 对设计、页脚和分隔符部分执行相同操作。
  5. 展开 Access,然后选择 Grant User Access。
  6. 选择 Search。
  7. 选择 [all authenticated portal users] 选项,然后单击 OK。
  8. 展开 Save 按钮,然后选择 Save and close 选项。
  9. 单击 X 关闭 Blog - Entry View 标签,如图 30 所示。


    图 30. 关闭 Blog - Entry View
    关闭 Blog - Entry View

现在您需要创建或编辑负责在 Blog - Main 和 Blog - My Blogs Page 中显示操作选项的组件。

编辑 Blog - Main 页面操作,使用户能够单击一个链接来转到 My Blogs Page。执行以下步骤:

  1. 如果您未在 Web Content 区域中,选择 Web Content 标签。
  2. 选择 Components。
  3. 选择 Blog - Manage Blog Action 选项。
  4. 单击 Edit。
  5. Blog – Manage Blog Action 组件是一个 Authoring Tool 组件,其功能取决于用户的权限。这里使用了 Edit 访问权限,只有具有 Edit 访问权限的用户才能够拥有他们创作的博客条目。滚动到 Edit action design 并输入清单 6 所示的代码。


    清单 6. 将一个新按钮添加到操作列表的代码
    						
    <div class="action-section">
    <div><a href="<Element context="current" type="site" 
    key="myblogs_page" format="url" start=" " end=" "/>" 
    title="@nls:myblogs@myblogs.goto.page@" 
    target="">@nls:myblogs@myblogs.goto.page@</a></div>
    </div>
    

  6. 单击 Save,但不要关闭文件。

接下来创建 My Blogs Page 操作:

  1. 在 Blog - Manage Blog Action 组件中,展开 Save 选项并选择 Save as。
  2. 在 New name 字段中,输入 blog_myblog_action。在 New display title 字段中,输入 Blog - My Blog Action。单击 OK。
  3. 删除 Read action design 的内容,如图 31 所示。


    图 31. 空 Read Action Design
    空 Read Action Design

  4. 在 Delete action design 部分,删除突出显示的的内容,如图 32 所示。


    图 32. Delete action design 的新内容
    Delete action design 的新内容

  5. 选择 Save and close。

接下来,您需要添加要显示 My Blog Entries 的内容的页面。创建内容、一个编写模板和一个演示模板。因为您不会实际添加内容,所以只需要编写模板就可以创建一个内容对象。这个编写模板应该是您能找到的最基本的模板。Lotus Quickr 包含一个编写模板 Welcome,可根据它创建 My Blog Entries 编写模板。

第一步是为此页面创建一个编写模板:

  1. 如果您未在 Web Content 区域中,选择 Web Content 标签。
  2. 选择 Authoring Templates 选项。
  3. 单击 > 访问第二个模板页面。
  4. 使用 Welcome 编写模板作为 My Blog Entries 编写模板的基础模板。可以创建一个内容占位符来触发内容的表示,编写模板本身所能做的只是支持定义一个页面类型,并将该页面添加到内容层次结构中。选择 Welcome 选项。
  5. 单击 Edit。
  6. 展开 Save 选项。然后选择 Save as。
  7. 在 New name 字段中,输入 myblogs_page_authoring。在 New display title 字段中,输入 Blog - Myblogs Authoring。单击 OK。
  8. 展开 Save 选项,选择 Save and close。

接下来创建演示模板。与编写模板不同,您需要添加博客条目的显示,一个虚构的演示模板是不够的。幸运的是,Blog - Main 页面显示的内容与 My Blog Entries 页面的内容很相似。您可以使用 Blog – Main 页面作为新的演示模板的基础。执行以下步骤:

  1. 选择 Presentation Templates。
  2. 选择 Blog - Main 选项。
  3. 单击 Edit。
  4. 展开 Save 选项,选择 Save as。
  5. 在 New name 字段中,输入 blog_myblogs;在 New displaytitle 字段中,输入 Blog - My blogs。单击 OK。

执行以下步骤,更改 My Blogs 演示模板的外观:

  1. 选择 Presentation Template。
  2. 将 blog_current_site JSP 组件添加到页面。参见图 33。将以下代码添加到文件开头:
    <Component name=”shared resources/blog_current_site”/>

    图 33. 添加 blog_current_site JSP 组件
    添加 blog_current_site JSP 组件

  3. 将页面标题从
    <IDCmpnt context="current" type="sitearea" field="title"/>
    更改为
    @nls:myblogs@myblogs.title@

    这可以通过将图 34 中突出显示的文本更改为图 35 中突出显示的文本来完成。



    图 34. 更改之前的页面标题
    更改之前的页面标题



    图 35. 更改之后的页面标题
    更改之后的页面标题

  4. 接下来将一个 Back 按钮添加到 Blog - Main 页面。为此,删除以下代码:
    <div class="information"><IDCmpnt content="current"
    type="sitearea" field="description"/></div>

    如图 36 所示。


    图 36. 要删除的代码
    要删除的代码

    在同一位置输入清单 7 中显示的代码。



    清单 7. 要为 Back 按钮添加的代码
    						
    <a class="nav-link" href="<URLCmpnt context="current" 
    type="site" mode="storable"/>" title="< Back to <IDCmpnt context="current" 
    type="sitearea" field="title"/>">< Back to <IDCmpnt context="current" 
    type="sitearea" field="title"/></a>
    

  5. 在下面的代码中:
    <element context="current" type="site" key="blog_entry_view"/>

    将 blog_entry_view 替换为 blog_myblogs_perso。

  6. 在下面的代码中:
    <component id="083d458043079501a13fe7e002b091
    cc:NC9zaGFyZWQgcmV2b3VyY2VzL2Jsb2dfbWFuYWsIX2FjdGIvbg**"
    name="shared resources/blog_manage_action"/>

    将 blog_manage_action 替换为 blog_myblogs_action。

  7. 展开 Save 选项,选择 Save and close。

接下来创建一个虚构的内容(dummy content)。有了这个虚构内容之后,您可以使用演示模板显示 My Blog Entries。执行以下步骤:

  1. 选择 New - Content。
  2. 选择 Blog - Myblogs Authoring 选项,然后单击 OK。
  3. 在 Name 字段中,输入 myblogs_page。在 Display title 字段中,输入 Blog - My Blogs Page。
  4. 展开 Save 选项,选择 Save and close。
  5. 展开 Blog,选择 Team Blog。
  6. 单击 OK。

您需要编辑站点区域文档,添加模板映射和其他元素。模板映射用于定义内容、编写模板和演示模板之间的关系。执行以下步骤:

  1. 展开 Site Areas。选择 By Site,然后在右侧菜单中选择 Blog。
  2. 单击 Edit。
  3. 单击 Edit Template Mapping 按钮。
  4. 单击 Add 按钮。
  5. 选择 Blog - Myblogs Authoring 和 Blog - My Blogs 选项。单击 OK。

您可以使用两种选项中的一个来将特定组件添加到一个页面。使用第一个选项,您可以使用 Component 标记直接添加该组件,这表示该组件是被静态引用的。

但是您应该选择第二个选项。使用这种方法时,您在页面中定义一个占位符或一个元素,然后通过演示模板引用该占位符,在 Site Area 文档中定义占位符的值。在本例中,创建新博客时可以使用不同的个性化组件。

执行以下步骤,添加一个组件:

  1. 单击 Manage Elements 按钮。
  2. 在 Element type 框中选择 Component Reference。
  3. 在 Name 字段中,输入 blog_myblogs_perso;在 Display title 字段中,输入 My Blogs Personalization Component。单击 Add 按钮。
  4. 将 Element type 列表中的选择更改为 Link。
  5. 不应该静态引用显示 My Blog Entries 的页面。在 Name 字段中,输入 myblogs_page;在 Display title 字段中,输入 My Blogs page。单击 Add 按钮。
  6. 单击 OK。
  7. 在 My Blogs Personalization Component 中单击 Select Component 按钮。
  8. 从显示的列表中选择 Personalization 组件。
  9. 选择 Blog - Myblogs Personalization Component,然后单击 OK。
  10. 在 My Blogs Page 部分单击 Browse Content 按钮。
  11. 展开 By Site Area。展开 Blog 并单击 Team Blog。选择右侧的 Blog - My Blogs Page。单击 OK。
  12. 展开 Save 选项。选择 Save and close。

要测试更改,请确保执行了以下操作:

  • 如果对资源包进行了更改,请重启服务器。
  • 在 Lotus Quickr 的 Home 视图中,单击 Create a Place link。

接下来,选择 Teamblog as Template。输入您所在地的名称,然后单击 Create 按钮。

您现在可以测试您的更改了。





回页首


结束语

在本文中,您了解了如何在 Lotus Quickr 中定制 Blog Component。您创建了一个新的内容对象,以及它的编写模板和演示模板。您在现有页面和新页面之间建立了交互,并且使用一个个性化规则来显示内容。您还了解了如何将 NLS 字符串添加到定制页面或定制页面操作中。



参考资料

学习

获得产品和技术

讨论


作者简介

Axel Saß 于 2000 年加入 IBM。他是德国 Lotus Technical Sales Competitive Team 的一位经过认证的 IT 专家。他的职责包括为 IBM WebSphere Portal 和 IBM Lotus Quickr 的销售人员提供支持。


Jon Brunn 是 Lotus Quickr for Enterprise Content Management integration 的架构师。Jon 目前正在研究 Lotus Quickr 产品,尤其是在扩展、定制和企业集成方面。




对本文的评价










回页首


IBM 公司保留在 developerWorks 网站上发表的内容的著作权。未经IBM公司或原始作者的书面明确许可,请勿转载。如果您希望转载,请通过 提交转载请求表单 联系我们的编辑团队。
    关于 IBM 隐私条约 联系 IBM 使用条款