在 IBM Lotus Quickr 中处理组件，第 2 部分：为声明组件创建个性化的视图

文档选项 未显示需要 JavaScript 的文档选项 讨论 样例代码 英文原文

级别： 中级

Amit Pareek, 系统软件工程师, IBM
Yogesh Karekar, IT 专家, IBM

2009 年 7 月 03 日

本文介绍如何跨用户所属的所有 teamplace 创建声明项的个性化视图。本文使用 IBM® Lotus® Web Content Management 菜单组件搜索在用户所属的不同 teamplace 中创建的所有声明内容（项）。随后根据规则使用 Java™Script 过滤菜单组件的结果集。可以使用类似的方法创建其他 Lotus Web Content Management 组件的个性化视图，比如 IBM Lotus Quickr™ 中的 Task 组件。

WebSphere® Portal 8.1 的 Lotus Quickr 服务（本文后面统称为 Lotus Quickr）提供一个复合应用程序列表，用于显示项目任务、声明和联系人等结构化内容集合。用户可以使用这些预定义列表组件存储与 teamplace 中的团队或项目有关的信息。

本文展示了如何在 Lotus Quickr 中创建声明组件的个性化视图。将根据字段类型（普通声明或特殊声明）向用户显示声明组件的个性化视图，并且跨用户所属的所有 teamplace 向他们展示普通声明组件。本文的个性化视图是在 Lotus Quickr 中使用 Lotus Web Content Management 应用程序实现的。

创建声明组件的个性化视图

要阅读本文，您应该对 Lotus Quickr services for WebSphere Portal 8.1、IBM Lotus Web Content Management、JavaScript、DHTML 编程有较好的了解。

遵循以下步骤创建声明组件的个性化视图：

1. 以管理员身份登录到 Lotus Quickr（wpsadmins 组的成员）。
2. 单击左侧模板的 Site Administration 链接。
3. 单击页首的 Manage Content 选项卡，显示 Web Content Authoring portlet。

注意：创建一个新库以存储 Lotus Quickr 定制的所有新工件。Shared Resources 库是 Lotus Quickr 附带的一个工件，该库在执行修复或补丁时会发生变化。

回页首

为个性化声明创建菜单组件

创建个性化列表（视图）的第一步是过滤 Lotus Quickr 内容以获取所有声明项。该菜单组件的表示区段可以使用 DHTML 创建表格。将对该表格执行操作，以根据声明组件的 type 元素过滤声明项。最后，使用 JavaScript 操作该表格并提供一个标有页码的视图。

1. 在 Shared Resources 库中选择 New - Component - Menu。
2. 在 Name 字段中输入 personalize_list_announcement_menu，并在 Display title 字段中输入 Personalize List - Announcement Menu。
3. 在 Menu Element Query 区段中选择 Authoring Templates 选项。
4. 选择 List – Announcement 作为创作模板。
5. 在 Authoring Templates 区段中，单击 Further 选项，如图 1 所示。
   
   • 选择 User-specified rendering portlet configuration 选项。
   • 选择 Replace selected authoring template with included authoring templates 选项。
   
   
   图 1. 菜单组件的 Menu Element Query 区段
   
   
   
6. 在 Menu design properties 区段中，做出如下修改，如图 2 所示：
   
   • 将字段 Sort results first by 的前两个下拉框的值改为 Publish Date。
   • 将字段 Sort results first by 的第三个下拉框的值改为 Last Modified Date。
   • 将字段 Results per pages 的值改为 100000。
   
   
   图 2. 菜单组件的 Menu design properties 区段
   
   
   
7. 输入清单 1 中的 HTML 代码，对菜单搜索结果进行格式化。在 header 部分，将 HTML 代码添加到 Heading 区段。

<style>
.content-title a{
   //font-size: 145%;
   font-size: 1.1667em;
   font-weight: bold;
   margin:0 0 0 0;
	color: #0063DC;
	text-decoration:none;
}

.heading b{
   color: #AB56F;
   text-decoration:none;
}
</style>
<style type="text/css">    
            .normal-page {
                color: black;
                font-weight: normal;
                text-decoration: underline;    
                cursor: pointer;    
            }
            .selected-page {
                color: black;
                font-weight: bold;
                font-size: 25;
            }
        </style>
<script type="text/javascript" 
src="/result/Pagination/jscript/pagination.js"></script>
<table  class="portlet-table"  cellspacing="4" cellpadding="0">
<tr><td width="70%" align="center"  >
<span class="heading">

</span></td>

<td  class="header-right" style="white-space: 
nowrap;border-left:=0px solid #ECECEC"  width=30%>

</td></tr>


</table>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<table id="results" border="0">
<tbody> 
<tr><th width='25px' align='left'>&nbsp;</th><th 
width='100%'  align='left'  
align='left'>&nbsp;</span></th></tr>

8. 在 Design for each menu search result 区段输入清单 2 所示的 HTML 代码。

<script>
var type = '<Element context="autoFill" type="content" key="type"/>';
var condition = '@nls@regular.title@';
var imageSrc = '/lotus/wcm/images/teamspace/normal.gif';
if(type=='@nls@special.title@' ) {
	imageSrc = '/lotus/wcm/images/teamspace/important.gif';
}
var displayText = "<tr><td width='25px'><img src='"+imageSrc+"' 
alt='"+type+"' title='"+type+"' /></td><td width='100%'  
align='left'><span class='content-title'><a href='<URLCmpnt 
context="autoFill" type="content" mode="storable"/>'   class='teamspaceList'  >
<Placeholder tag="title"/></a>
<br/></span></td></tr>";
if(type==condition ) 
{
document.write(displayText);
}
</script>

9. 在 Footer 区段输入清单 3 所示的 HTML 代码。Footer 中的代码将对过滤后的结果标记页数。

</tbody>
</table>
<div id="pageNavPosition"></div>
</form>
 <script type="text/javascript">
        var pager = new Pagination(3, 'results'); 
        pager.initialize(); 
        pager.showNav('pager', 'pageNavPosition'); 
        pager.showSet(1);
</script>

10. 向表示模板中添加如图 3 所示的 Access 设置。此操作将把所有继承访问添加到该组件。
    
    • Select Inheritance for role User
    • Select Inheritance for role Contributor
    • Select Inheritance for role Editor
    • Select Inheritance for role Manager
    
    
    图 3. 菜单组件的 Access settings 区段
    
    
    
11. 单击 Save 保存菜单组件。

回页首

在页面中添加 portlet

创建完菜单组件后，需要使用一个 Lotus Web Content Management 内容查看器 portlet 将菜单组件公开给用户。遵循下面的步骤添加 portlet：

1. 在 Lotus Quickr 页面导航中，访问 Site Administration 页面。
2. 单击页首的 Advanced Administration 选项卡。
3. 选择 Portal User Interface - Manage Pages。
4. 在 Manage Pages 页面的 Search 字段中，输入 “application root” 并单击 Search，如图 4 所示。
   
   
   
   图 4. Advance Administration 页面中的 Manage Pages
   
   
   
5. 在搜索结果中，单击 Application Root 节点以进入它的下一层。如图 5 所示。
   
   
   
   图 5. Application Root 节点的内容
   
   
   
6. 图 6 所示的列表是 Lotus Quickr 设置中的 teamplace 列表。单击您希望为其创建个性化视图的 teamplace。
   
   
   
   图 6. Application Root 节点内部的 teamplace 列表
   
   
   
7. 在刚才选择的 teamplace 中，单击 New Page 创建一个新的页面，并将其命名为 personalized Announcement。
8. 在 Theme 字段中选择 Inherit Parent Theme 选项。
9. 单击 Edit Page Layout 图标，如图 7 所示，在 Edit 模式下打开 personalized Announcement 页面。
   
   
   
   图 7. Edit Page Layout 图标
   
   
   
10. 单击 Add portlets 按钮，在 personalized Announcement 页面中添加 Web Content Viewer portlet。如图 8 所示。
    
    
    
    图 8. Edit Page Layout 视图
    
    
    
11. 单击 Done 保持更改。
12. 转到添加了 portlet 的 teamplace。
13. 单击 personalize Announcement 页面。
14. 单击 Click for options 选项卡。
15. 单击 Edit shared settings 链接。
16. 在 Content 区段中，执行以下操作：
    
    • 在 Content Type 字段中选择 Component。
    • 在 Component 字段中选择 component /Shared Resources/Personalized List – Announcement Menu。
    • 为 Content 字段选择 site /Shared Resources/Announcement。
17. 在 Portlet Display Title 字段中输入 Personalize Announcement。如图 9 所示。
    
    
    
    图 9. Web Content Viewer portlet 设置
    
    
    
18. 单击 OK 保存更改。

完成这些步骤后，portlet 将显示跨用户所属的 teamplace 的所有普通声明项。

注意：这种方法跨多个 teamplace 查询数据，因此会影响系统的性能。所以应该在用户单击链接时才显示该视图，而不是直接显示在 teamplace 的第一个页面上。

回页首

将分页 EAR 文件部署到 WebSphere Application Server

前面提到的 JavaScript 文件需要添加到 WebSphere Application Server 才能被 Lotus Quickr 服务器使用。由于系统在应用补丁或修复时，Lotus Quickr 附带的所有其他 EAR 文件都会发生变化，因此您应该创建自己的 EAR 应用程序来部署 JavaScript。

遵循以下步骤进行创建：

1. 登录到 WebSphere Application Server 管理员控制台。
2. 选择 Application - Enterprise Applications。
3. 显示页面 Preparing for the application installation。用户可以在此页面安装刚刚创建的 EAR 文件。单击 Next 继续。
4. 显示一个新的窗口。在此窗口中，执行如图 10 所示的操作：
   
   • 选择 Generate Default Bindings 选项。
   • 选择 Override existing bindings 选项。
   • 选择 Use default virtual host name for Web modules 选项。
   • 单击 Next 继续。
   
   
   图 10. Preparing for the application installation
   
   
   
5. 将显示图 11 所示的窗口。执行以下操作：
   
   • 不要做任何修改；使用默认设置。
   • 单击 Next 继续。
   
   
   图 11. 选择安装选项
   
   
   
6. 将显示窗口 Step 2, Map modules to servers，如图 12 所示。执行以下操作：
   
   • 在 Clusters and Servers 区段中选择第二个选项 Websphere cell=<node_name>=,server=Websphere_Portal。
   • 单击 Select 列下方的复选框。
   • 单击 Apply。
   • 单击 Next 继续。
   
   
   图 12. Map modules to servers screen
   
   
   
7. 将显示窗口 Step 3, Map virtual hosts for Web modules，如图 13 所示。保持默认值并单击 Next 继续。
   
   
   
   图 13. Map virtual hosts for Web modules 页面
   
   
   
8. 将显示窗口 Step 4, Map security roles to users/groups，如图 14 所示。执行以下操作：
   
   • 为 All Role 选择 All authenticated? 复选框。
   • 单击 Next 继续。
   
   
   图 14. Map security roles to users/groups page
   
   
   
9. 将显示安装向导的摘要页面，如图 15 所示。
   
   
   
   图 15. 摘要页面
   
   
   
10. 单击 Finish。
11. 将显示如图 16 所示的安装页面。
    
    
    
    图 16. 安装页面
    
    
    
12. 单击 Save to Master Configuration。
13. 单击 Save 按钮。该操作将您带回到 Enterprise Application 视图。
14. 启动您在上一步安装的应用程序。

回页首

结果

图 17 显示了一位跨 teamplace 用户的个性化声明视图的屏幕截图。

回页首

结束语

本文讨论了如何在 IBM Lotus Quickr services for WebSphere Portal 中为声明组件创建个性化视图。您使用 Lotus Web Content Management 菜单组件为登录用户获取一组声明项。然后根据 type 属性值使用 JavaScript 和 DHTML 过滤这些项。您还使用 JavaScript 实现了个性化视图的分页功能。

回页首

下载

	关于下载方法的信息

参考资料

• 参与论坛讨论。
  
  
• 阅读 developerWorks® 文章 “End-to-End Web Content in WebSphere Portal using Web Content Management 6.0”。
  
  
• 阅读 developerWorks 文章 “在 IBM Lotus Quickr 中处理组件，第 1 部分：创建新闻组件”。
  
  
• 阅读 Lotus Quickr 文档 “IBM Lotus Quickr 开发人员指南”。
  
  
• 参考 Lotus Quickr 产品文档。
  
  
• 参考 Lotus Quickr 产品页面。

作者简介

		Amit Pareek 是 IBM 印度软件实验室 Services 团队的系统软件工程师。他的专业领域包括 J2EE 和 Content Management 解决方案，并且从事过 IBM Lotus Quickr 定制工作。他与 Lotus Quickr 开发团队进行沟通，并与架构师一起从事产品定制工作。

		Yogesh Karekar 是 IBM 印度软件实验室的 IT 专家。他在各种门户和内容管理产品方面具有丰富的经验。他目前在软件实验室从事 Lab Services 决策的工作。他的专长包括 IBM Websphere Portal、IBM Lotus Web Content Management 和 IBM Lotus Quickr，并参与各种面向客户的活动。

对本文的评价

太差！ (1) 需提高 (2) 一般；尚可 (3) 好文章 (4) 真棒！(5) 将您的建议发给我们或者通过参加讨论与其他人分享您的想法.

回页首