浅析Lotus Connections 2.0的定制-技术开发专区

浅析Lotus Connections 2.0的定制

作者：IT168 张明编辑：李倩 2008-10-28 10:54 来源：IT168�

二、定制组件业务功能模块的主题

　　由于各个组件都是基于Struts框架实现，并且均采用了Tiles框架进行页面布局，因此对于各个功能组件主题的定制，其实现机制和定制方法都是类似的。以下我以对Profiles（个人档案）组件的首页为例进行定制的介绍，首先我们看到的这个页面就是个人档案的首页面：

图3 个人档案首页面

　　在文件系统中，我们可以找到其模板页面，是位于<WAS_home>/profiles/<profile_name>/installedApps/<cell_name>/Profiles.ear/peoplepages.war/WEB-INF/jsps/html/layouts/目录下的profilesXColLayout.jsp文件 (X=1/2/3，分别定义框架为1列、2列和3列的页面结构)。个人档案的首页面是框架为2列的页面，对应到profiles2ColLayout.jsp文件。以下我们对其页面代码分为几个部分进行分析。

<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn"   uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="html" uri="http://jakarta.apache.org/struts/tags-html" %>
<%@ taglib prefix="tiles" uri="http://jakarta.apache.org/struts/tags-tiles" %>
<%@ taglib prefix="bidi" uri="http://www.ibm.com/lconn/tags/bidiutil" %>
<%@ taglib prefix="profiles" uri="/WEB-INF/tlds/profiles.tld" %>
<%@ taglib prefix="tags" uri="/WEB-INF/tags" %>

　　首先，在代码的开始部分引入了相关的标签库，包括JSTL v1.1（JSP Standard Tag Library，JSP 标准标记库）的core库（主要用于迭代和条件控制的基本操作等）、formatting库（用于支持通过资源束实现文本内容本地化，并支持对数字和日期的显示和解析等）、functions库（主要用于与字符串的长度、包含、替换和分隔等操作），Struts的html库（主要用于动态的生成用户输入表单和用户界面等），tiles库（通过模板来组合可复用的组件从而能够动态地生成页面），bidi库（用于显示双向语言），profiles库（提供了个人档案组件的工具类方法），tag库（用于引入一组可重用的页面组件，如登录表单、个人信息编辑页面等）。

　　通过采用标记库的方法组织页面代码，大大简化了代码复杂程度，使代码结构变得非常清晰，提高了代码的可读性。关于标记库的详细说明文档，可以查看在参考资料中给出的链接。

　　第二部分是页面HTML的内容：

……
<head>
    <tiles:useAttribute name="pageTitleKey" scope="request" />
    <title><fmt:message key="${pageTitleKey}" /></title>
    <tiles:insert attribute="frameworkHeader" />
</head>
……

　　在HTML的头部信息中，定义了页面的标题信息（title）和页面框架头部信息（frameworkHeader）。在这里使用了formatting库的<fmt:message>和tiles库的<tiles:useAttribute>和<tiles:insert>标记。

　　为了能够更加清楚了了解页面组织框架，我们首先来看一下Tiles框架在此是如何使用的。对于Tiles框架的使用，我们可以在个人档案组件的struts-config-html.xml中找到定义的tiles插件信息，其中定义了Tiles框架使用的定义文件的位置：

……
<plug-in className="org.apache.struts.tiles.TilesPlugin">
<set-property property="definitions-config" value="/WEB-INF/jsps/html/tiles-defs.xml"/>
</plug-in>
……

　　根据所指向的路径找到tiles-defs.xml，以下是示例代码片段：

……
<definition name="layout.base" path="/WEB-INF/jsps/html/layouts/profiles1ColLayout.jsp">
    <put name="pageTitleKey" value="label.page.profiles" type="string" />
    <put name="frameworkHeader" value="/WEB-INF/jsps/html/tiles/frameworkHeader.jsp" />
    <put name="sceneBanner" value="/WEB-INF/jsps/html/tiles/empty.jsp" />
    ……
    <putList name="jsIncludes">
      <add value="/javascript/prototype/prototype.js" />
      ……
    </putList>
</definition>
……

　　在tiles-defs.xml中定义了页面中所使用组件对应到的JSP文件和相关属性信息。

　　我们可以找到在HTML头部信息中定义的页面标题的名称（pageTitleKey），通过到资源束中查找label.page.profiles关键字对应的值，可以在resources-general.properties属性文件中找到对应的值。该文件被打包在<WAS_PROFILE_ROOT>/installedApps/<cellname>/ profiles.ear/peoplepages.war/WEB-INF/lib/peoplepages.web.jar文件中，位于com/ibm/peoplepages/webui/resources/目录下。由于Lotus Connections产品提供了多语言支持，因此在这一目录下可以找到很多以resources-general开头的属性文件。而对于仅使用中文的用户来讲，只需要查看和定制resources-general_zh.properties中关键字对应的值即可。在这一属性文件中，还可以找到在个人档案组件中页面引用的其他文字。

　　对于HTML头部信息中使用的<tiles:insert>标记，通过引用属性frameworkHeader的方式，来插入所对应的内容。<tiles:insert>标记和<jsp:include>标记具有相同的功能，能够将指定的组件插入到页面中。

　　之后是页面的主体内容（body）：

……
<body class="<tiles:getAsString name="bodyclass" ignore="true" />">
    <tiles:useAttribute name="editableClass" scope="session" />
    
    <div id="lotusFrame" class="<tiles:getAsString name="frameclass" ignore="true" />">
      <tiles:insert attribute="sceneBanner" />
      <tiles:insert attribute="sceneHeader" />
      
      <div id="lotusMain" class="<tiles:getAsString name="mainclass" ignore="true" />">
        <tiles:insert attribute="leftCol" />
        <tiles:insert attribute="scene" />
      </div> 
      <tiles:useAttribute name="contextualHelpList" scope="request" />
      <c:forEach items="${contextualHelpList}" var="contextualHelp">
        <tiles:insert page="${contextualHelp}" />
      </c:forEach>
      <tiles:useAttribute name="jsIncludes" scope="request" />
      <tiles:insert attribute="frameworkFooter" />
      <tiles:insert attribute="sceneFooter" />
    </div> 
</body>
</html:html>

　　同样，我们可以根据在tiles-defs.xml文件中定义的组件和body中定义的页面框架组装出我们在之前所看到的页面。通过采用Tiles框架，可以清晰地看出整个页面的组织结构，分为导航区、标题区、工具栏、主体功能区和页脚区5个部分。从而，可以根据需要找到对应的JSP文件对其中的任意部分进行定制。

图4 个人档案首页面框架图

　　对于个人档案（Profiles）的其他页面或者其他组件的页面来讲，均采用了类似的方式进行页面组织，我们可以采用相同的方法进行定制。首先进入组件的业务模块，在WEB-INF目录下的struts-config.xml或者struts-config-html.xml中找到Tiles框架定义文件tiles-defs.xml；然后根据具体的页面布局，找到对应的布局定义以及页面框架中每一部分对应的JSP文件进行定制。

　　如果您只需要对页面中的主题进行定制（如修改背景或者缺省字体样式等），可以直接对级联样式表进行修改。级联样式表分别保存在每个功能组件对应的导航模块中，位于<WAS_home>/profiles/<profile_name>/ installedApps/<cell_name>/<feature_name.ear>/ sn-coreui.war/common/styles目录下，可以找到defaultTheme.css、core.css和iehacks.css三个主要的CSS文件。其中，defaultTheme.css是最主要的样式定义文件，定义了页面背景和缺省字体的样式，core.css定义了与布局元素相关的样式，iehacks.css中则定义了用于适配不同浏览器而需要的样式。

　　以下以修改导航栏字体样式和主题背景为例，供大家参考：

　　将需要替换的背景图片上传到images路径下，然后对defaultTheme.css文件做出相应的修改：

/* CSS Document */
body{color:#222;background-color:#fbfcfd;background-image:url(images/background.jpg)}
/*** B A N N E R ***/
#lotusBanner ul.lotusLinks li.lotusSelected a, .lotusBanner ul.lotusLinks li.lotusSelected a{color:#666 !important;background-color:#999999}

图5 CSS样式表定制示例效果图

参考资料

Lotus Connections 2.0 信息中心：
http://publib.boulder.ibm.com/infocenter/ltscnnct/v2r0/index.jsp

JSTL v1.1标记库文档：
http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/index.html

Programming Jakarta Struts: Using Tiles, Part 3：
http://www.onjava.com/pub/a/onjava/excerpt/progjakstruts_14/index3.html

第1页：定制页面导航模块第2页：二、定制组件业务功能模块的主题

关注我们