IBM Portal的开发流程及注意项.

引言：之前在电信公司的时候，主要就是面向银行与保险类的大客户，这些客户呢，基本都要求使用IBM的产品，对安全性有很高的要求。本人也有幸负责过几个项目，如华夏银行和江苏银行的内网门户等，其中主要涉及各种服务的安装、三方系统的集成及单点、Portlet及Dojo组件开发等等，还有CMS，用户管理、搜索和监控等业务系统的开发。最近又参与了一些这类的项目，算是又重操旧业了吧，之前也总结过相关开发等文档，乘此机会，整理分享，也希望大家多来交流。

1. 简述

本文主要面向IBM Portal 8相关项目。在IBM Portal实施的项目中，主要在于：主题开发、Portlet开发、接口联调（相关service项目及Portlet中的联调接口）、单点联调等。本文主要介绍前两个，及主题开发以及简单的Portlet开发。

另外，其实在使用IBM Portal开发门户的过程中，一般都会遇到的如下的问题或需求：服务配置（包含ftp和httpserver等）、待办推送（WebSocket）、公共接口的联调方式（主要包含webservice、json和jsonp等几种接口调用方式）。由于篇幅问题，本文暂不做介绍了，以后有空补上吧。

2. IBM Portal开发实施流程

2.1 准备工作

在IMB Portal的项目实施中，只要做过此类项目的人员，都会有一个很深的体会，也是很头疼的事情，那就是“样式问题”，继而演变为“兼容问题”，“页面（CSS表）的好坏”和“页面的结构（CSS表）是否清晰”会直接影响到开发人员的效率，从而影响项目的进度。

原因：

一般开发IBM Portal项目时，是在IBM Portal门户上，开发Portlet组件，开发人员写好的Portlet是放在IBM Portal页面布局中的，于是，页面上就包含了至少两套样式，1）美工设计人员的设计的CSS表；2）IBM Portal本身自带的CSS表。当然在IBM Portal中，有两种布局样式，下面将详细阐述。当两者的CSS表混合之时，自然会互相影响，出现预想不到的状况，需要进一步的调试。

故，在准备工作中，首先提出的就是，需求之初，请认真与“美工设计人员”及“美工裁切人员”认真的交流，谈好细节。

在此处，列举几点，也是在开发IBM Portal门户时比较重要的。

2.1.1 CSS表，尽量使用DIV块结构，而且每块之间尽量不要有冗余之处，即互不干扰

尽量把每一个块结构的div分布在body下或者用于布局的div下，这样可以使得开发人员在开发中，能“随心所欲”的将div块进行移植修改。

最终目的是将除了布局之外的所有块状结构的div，基本放在最大的布局div或者body中，这样既能让开发人员便于理解开发，在创建主题时，也很容易嵌套。

2.1.2 分辨率问题

分辨率也是跟美工设计人员与静态页面裁切人员紧密相关的问题。在设计之初一定要看好客户使用环境，及将来的变更情况。大多数客户都会使用IE浏览器，还有使用不同的操作系统和不同分辨率的显示器。所以这个问题一定要提前确认好，不然后面有可能面临美工返工的情况，严重影响项目进度。

2.1.3 Html标签中，尽量不要使用不常见的标签，以及使用html规范

2.1.3.1 页面标准使用<!DOCTYPE HTML>

该标准为当前支持性做好的HTML5标准，相对浏览器的兼容性（特别是对解决IE7、IE8、IE9及IE10版本兼容性有规范性上的好处）。这里特别提出：浏览器的Quirks Model（怪异模式或兼容模式Compatibility Mode)当然与之对应的就是标准模式（Standards Mode或Strict Mode）。当然在开发过程，我们通常称之为“杂项模式”，这种模式下的兼容性问题，尤为繁琐。以下引用一些资料说明一下，其产生的原因：

标准模式与怪异模式：

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

火狐一直工作在标准模式下，但IE（6，7，8）标准模式与怪异模式差别很大，主要体现在对盒子模型的解释上，这个很重要，下面就重点说这个。

那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：

（1）浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。

（2）对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/ 。

（3）对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析。

（4）在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。

（5）可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。

（6）在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version=”1.0″ encoding=”iso-8859-1″?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。

2.1.3.2 文本标签、按钮等常见标签的选择。

（1）最简单的标签，比如<input />、<br />和<hr />等标签，尽量有闭合；

（2）文本标签，如<p>，也最好使用div来展示，用文本相关样式来控制即可；比如有这样的问题：连续长字段不换行问题，代码示例如下：

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

该div显示会超出浏览器显示区域，不换行。如果使用p等文本标签还是需要改为div。在div中添加浏览器兼容的css属性即可，在IE中使用word-wrap:break-word;在火狐中使用white-space:normal，将几个属性都设置上即可，多浏览器兼容显示。

（3）“按钮”标签。提到按钮想到就是button，其实在裁切页面的时候，可以用a标签来代替。建议遇到按钮或者触发链接等，尽量不使用button，使用a标签来实现。首先说下button，使用button标签时，经常会忘记添加type属性（type=”button”），在不添加该属性时，同时该对象也不具有onclick事件时，点击就会刷新页面，如果在表单内就会提交。还有，在IBM Portal开发中，一般都需要开发dojo组件，在组件开发过程中，事件的监听等，a标签要优于button标签。其他的就不列举了。

2.1.4 弹出框的处理

现在基本每个项目都需要使用弹出框，也是常见的优化体验的手段。但是目前来说，实现弹出框很容易出现兼容性问题。一般来说，实现弹出框的思路为：首先实现遮盖层，之后实现显示区域。遮盖层的实现，需要使用透明定位等属性，都是兼容问题所在。能够很好的解决问题的手段是，遮盖层使用背景图片，就不需要透明属性。

其他的问题就不一一列举了。

2.2 主题开发

在以上充分的准备工作之后，在开发IBM Portal首要的工作就是开发主题。相对是比较容易的。

2.2.1 工具准备

用于上传主题工具是AnyClient（需要安装32位的jdk）。

2.2.2 主题目录结构

主要使用目录说明：

css：样式表存放目录。当然根据当前的开发，一般样式表放在httpServer服务目录下，能提高页面展示速度，不会出现图片不加载的情况。

images：图片存放目录（一般为主题中默认目录），当然必须要跟css样式表中的图片对应。

imgs：同样是图片目录（一般是开发人员新添加的目录），同样是根据美工静态页面对应添加的目录。

js：显然是公共js或者公共组件存放目录。

nls：主题页面修改变更目录，其下的文件theme_zh.html，为开发主体之重点所在。下面详细介绍该页面修改等。

其他目录多数不会使用，暂不介绍。

2.2.3 首先需要修改主题配置文件metadata.properties。

更改此文件的目的：当主题上传完成之后，会在IBM Portal中显示当前可使用的主题，如果不改名称，不便于查找（会出现带有随机数的主题名称），还有样式的引用也会有问题。

举例来说该文件内容如下：

#

#Wed Sep 24 12:22:16 CST 2014

com.ibm.portal.layout.template.href=dav\:fs-type1/themes/<主题名称>/layout-templates/2ColumnEqual/

resourceaggregation.profile=profiles/profile_deferred.json

在以上内容中，一般只需要修改<主题名称>这一块即可。对应的到IBM Portal中就会显示该名称。

2.2.4 修改theme_zh.html文件

初始代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh” xml:lang=”zh” >

<head>

<title>IBM Portal主题</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1″>

<!– rel=dynamic-content indicates an element that is replaced with the contents produced by the specified href.

dyn-cs:* URIs are resolved using the WP DynamicContentSpotMappings resource environment provider. These values can

also be set using theme metadata if a theme is specified in the URI (e.g. @tl:oid:theme_unique_name). –>

<link rel=”dynamic-content” href=”co:head”>

<link rel=”dynamic-content” href=”dyn-cs:id:80theme_head”>

<!– rendering is delegated to the specified href for each locale –>

<link rel=”stylesheet” type=”text/css” href=”css/reset.css”  />

<link rel=”stylesheet” type=”text/css” href=”css/index.css” />

<link rel=”icon” type=”image/x-icon” href=”images/favicon.ico” />

<link rel=”shortcut icon” type=”image/x-icon” href=”images/favicon.ico” />

<style type=”text/css”>

</style>

<script type=”text/javascript”>

</script>

</head>

<body class=”lotusui30dojo tundra locale_zh”>

<div class=”g-layout-page”>

<!– 头部开始 –>

<div class=”g-top”>

  <div class=”m-head”>

</div>

    </div>

    <div class=”m-leftMenu”>

        <a rel=”dynamic-content” href=”dyn-cs:id:80theme_primaryNav”></a>

     </div>

    <!– 中间开始 –>

<div class=”wpthemeFrame”>

<div class=”wpthemeMainContent” role=”main”>

<div class=”wpthemeInner”>

<!– asa markup contributions for pages –>

<a rel=”dynamic-content” href=”dyn-cs:id:80theme_asa”></a>

<a rel=”dynamic-content” href=”dyn-cs:id:80theme_crumbTrail”></a>

<div class=”wpthemeClear”></div>

<a rel=”dynamic-content” href=”dyn-cs:id:80theme_status”></a>

</div>

<!– required – do not remove –>

<a rel=”dynamic-content” href=”state.portlet:portlet?include=windowState&include=portletMode&mime-type=text/html”></a>

<div id=”layoutContainers” class=”wpthemeLayoutContainers wpthemeLayoutContainersHidden” >

<div class=”wpthemeInner”>

<a rel=”dynamic-content” href=”dyn-cs:id:80theme_layout”></a>

<div class=”wpthemeClear”></div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

以上为删除了相关代码的简单页面框架结构，一般在这个原始页面框架上我们需要加上以下部分：

1. 浏览器文档模式控制

2. 引入dojo（目前使用IBM Portal为8版本，自带dojo版本为1.7，开发与1.9类似）

3. 布局控制，主要改写相关布局样式，和嵌套需要使用的CSS表

4. 公共功能开发，如登出、加入收藏夹等功能

注意：需要看懂IBM Portal自带的页面标签，它会解析成对应的代码或者资源路径，下面的代码中做一些解释。

修改之后如下（当然只有部分代码），以下使用粗体字标出及注释：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh” xml:lang=”zh” >

<head>

<title>IBM Portal主题</title>

//以下两句作用主要是设置编码

//控制IE浏览器版本，意思是，使用IE8或IE9，如果当前版本为9以上，就使用当前版本

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<meta http-equiv=”X-UA-Compatible” content=”IE=8;IE=9;IE=EDGE” />

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1″>

<!– rel=dynamic-content indicates an element that is replaced with the contents produced by the specified href.

dyn-cs:* URIs are resolved using the WP DynamicContentSpotMappings resource environment provider. These values can

also be set using theme metadata if a theme is specified in the URI (e.g. @tl:oid:theme_unique_name). –>

<link rel=”dynamic-content” href=”co:head”>

//引入IBM Portal8本身的样式列表

<link rel=”dynamic-content” href=”dyn-cs:id:80theme_head”>

<!– rendering is delegated to the specified href for each locale –>

//引入dojo框架，便于开发Portlet

<script type=”text/javascript” src=”/wps/portal_dojo/v1.7/dojo/dojo.js” djConfig=”parseOnLoad: true, isDebug: false”></script>

//引入美工设计裁切样式列表

//@特别说明：

//如果使用主题中的样式，其实href属性应该为”/css/reset.css”，最前面多一个“/”，这个是读的主题中的样式表，但在实施中，会出现页面加载慢、图片不出来的情况，故使用HttpServer的方式，将样式置于httpServer服务中，提高速度体验。

<link rel=”stylesheet” type=”text/css” href=”css/reset.css” />

<link rel=”stylesheet” type=”text/css” href=”css/index.css” />

//设置自定义的ico，即URL前的图标

//@注：该图标在IE中的要求比较苛刻，需要事先跟美工人员说好，尽量不要裁切成其他格式的小图标，之后再改后缀，很多会破坏图片，导致图标显示不出来。

<link rel=”icon” type=”image/x-icon” href=”images/favicon.ico” />

<link rel=”shortcut icon” type=”image/x-icon” href=”images/favicon.ico” />

<style type=”text/css”>

//自定义样式，一般在该页面修改布局等样式，需要一定的经验或者好的CSS调试基础

//自定义style

</style>

<script type=”text/javascript”>

//自定义公共js方法

</script>

</head>

//body一般需要变更样式，如果使用dojo样式就需要引入dojo样式，这个根据情况，逐个添加

<body class=”lotusui30dojo tundra locale_zh”>

//该部分可以自定义头部内容，一般有搜索框，收藏夹等功能

    <!– 头部开始 –>

    <div class=”g-top”>

<div class=”m-head”>

   //自定义公共头部功能，如LOGO等

          <div class=”logo-pic”>

              <img src=”imgs/style/logo.png”/>

            </div>

<div class=”m-text-nav”>

             <span class=”text”>加入收藏夹</span>

            </div>

            <div class=”m-sarech”>

              <input type=”text” class=”inp” value=”请输入您要搜索的内容”/>

                <button class=”u-btn-pic”><img src=”imgs/style/ico_search.png”/></button>

            </div>

      </div>

    </div>

//导航区域布局控制

    <div class=”m-leftMenu”>

//@这个a标签的作用，其实是去获取一个页面，IBM Portal自己的导航生成页面，这个页面也是开发中需要重点考虑的

  <a rel=”dynamic-content” href=”dyn-cs:id:80theme_primaryNav”></a>

    </div>

    <!– 中间开始 –>

//主要内容显示区域

<div class=”wpthemeFrame”>

<div class=”wpthemeMainContent” role=”main”>

<div class=”wpthemeInner”>

<!– asa markup contributions for pages –>

//@BM Portal8本身的布局区域，这块区域主要有两种布局方式，下面布局开发中将进行讲述。

<a rel=”dynamic-content” href=”dyn-cs:id:80theme_asa”></a>

<a rel=”dynamic-content” href=”dyn-cs:id:80theme_crumbTrail”></a>

<div class=”wpthemeClear”></div>

<a rel=”dynamic-content” href=”dyn-cs:id:80theme_status”></a>

</div>

<!– required – do not remove –>

<a rel=”dynamic-content” href=”state.portlet:portlet?include=windowState&include=portletMode&mime-type=text/html”></a>

<div id=”layoutContainers” class=”wpthemeLayoutContainers wpthemeLayoutContainersHidden” >

<div class=”wpthemeInner”>

<a rel=”dynamic-content” href=”dyn-cs:id:80theme_layout”></a>

<div class=”wpthemeClear”></div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

当然在实施过程中，需要对IBM Portal的原理及配置有一定熟悉度，还需要有较强的样式调试能力，能够将IBM Portal样式与项目静态页面样式进行很好的融合。

2.3 页面开发

当主题开发完成之后，一般就会开始配置首页，具体的配置方法，需要在IBM Portal上进行配置，这块内容就不介绍了，也有相关说明文档。

2.3.1 导航开发

导航的开发，根据具体情况有所不同，如果是比较普通的一级二级导航，可能没什么开发量。

当然如果是变化较大的导航就需要花点心思了。

说明：本文介绍开发，都是基于IBM Portal8，因为之前的版本开发方式有所不同，比如Portal6和Portal7。

文件名：navigation.jsp，具体位置根据服务安装为准。其中的难点应该是理解IBM Portal本身的一些标签的含义了，需要多实施来提高熟悉度和认知。

2.3.2 布局开发

布局的开发主要在于CSS的调试。

在这里主要声明一下：在IBM Portal中创建页面，有两种方式。带来的效果是不同的。

1. 在创建页面的时候，选择静态的布局，如一行一列等，这种方式，在具体的页面上是使用的table的方式布局；

2. 创建页面之时，不确定布局，到具体页面上去设置布局。此时，该页面的形成，主要使用div来控制布局，当然也有少数的table。

注意：

1. 两种布局不要混合使用，因为具体的样式css不同，会导致这边好，那边出问题的情况，要考虑很多兼顾的情况

2. 根据美工设计人员的页面来取舍，如果页面块状结构很清晰，可以随处迁移，使用table控制布局，也不失为一个方案；但本人推荐使用div的方式，因为现在的用户多样化，很难预料一些特殊情况，比如大多数员工都是使用的IE8，而有些领导升级之后，就不同，还有电脑配置等情况。

所以，尽量使用div布局方式。

2.3.3 登录页面、应急页面等特殊页面开发

这块一般也是必须要开发的模块，一般独有个性化的登录页面等，当然这个不是重中之重。在此就不一一说明了。

2.3.4 Portlet开发

Portlet的开发，这块绝对是占据整个项目的开发，也是耗时最多的开发。

使用工具为IBM的IDE工具，安装时，必须要选好Portlet开发一项。博主使用的是RAD7.5版本。

下面就不介绍Portlet的原理了，只介绍一些在开发过程中，常见的，还有必须要遵守的规则。

Portlet基础介绍

下面使用名为Test的Portlet，简单的讲述一下。

结构：

项目结构与普通的Java项目类似，不过其中原理有一些区别。

当然一般情况下只要根据现在提供的示例开发即可，对代码已经进行了简化和规范。

下面贴出一些主要的代码（具体代码需要根据创建的Portlet来写）：

package com.ibm.test;

import java.io.*;

import javax.portlet.*;

/**

* A sample portlet based on GenericPortlet

*/

public class TestPortlet extends GenericPortlet {

public static final String JSP_FOLDER = “/page/jsp/”; // JSP folder name

public static final String VIEW_JSP = “todo.jsp”; // JSP file name to be rendered on the view mode

/**

* @see javax.portlet.Portlet#init()

*/

public void init() throws PortletException{

super.init();

}

/**

* Serve up the <code>view</code> mode.

* @see javax.portlet.GenericPortlet#doView(javax.portlet.RenderRequest, javax.portlet.RenderResponse)

*/

public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {

// Set the MIME type for the render response

response.setContentType(request.getResponseContentType());

// Invoke the JSP to render

PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(JSP_FOLDER + VIEW_JSP);

rd.include(request,response);

}

}

代码就如此简单，除了需要写接口，一般就这样就可以了（写好页面路径），只需要将目标转向前端组件的开发。

Todo.jsp代码如下：

<%@page session=”false” contentType=”text/html” pageEncoding=”UTF-8″ import=”java.util.*,javax.portlet.*,com.ibm.test.*” %>

<%@ taglib uri=”http://java.sun.com/portlet_2_0″ prefix=”portlet”%>

<%@taglib uri=”http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model” prefix=”portlet-client-model” %>

<portlet:defineObjects/>

<portlet-client-model:init>

      <portlet-client-model:require module=”ibm.portal.xml.*”/>

      <portlet-client-model:require module=”ibm.portal.portlet.*”/>

</portlet-client-model:init>

<%

String path = renderRequest.getContextPath();//当前portlet路径

String remoteUserName = renderRequest.getRemoteUser();//当前登录用户的登录名

PortletPreferences pp = renderRequest.getPreferences();//获取portal中portlet配置的参数

String dataUrl = pp.getValue(“todoData”,”/getData.json”);//获取portlet中配置的属性值为todoData的参数，如果没有配置该属性，则使用后面的默认

%>

<div class=”text1″>

<div class=”text3″>

<div class=”tp1″></div>

<div class=”text2″>

<h1><%=remoteUserName %></h1>

<span class=”tt4″><%=path %></span>

<span class=”tt4″><%=dataUrl %></span>

</div>

<div class=”clearfloat”></div>

</div>

</div>

以上就是需要主要开发的jsp了，其中列举了几项必须要了解且使用较多的几个值，也有注释。如果不使用jQuery等其他的js库，只需要开发一些常见的dojo组件即可，组件也同样重用性很好，可以加快开发效率，也能提高页面的加载速度等。

以上只是个人的一些理解和实施经验，如果有不对的地方，还欢迎大家多来交流啊。

如有问题，欢迎指出；如需转载，请标明出处，谢谢！

参考资料

IBM developerWorks

一	二	三	四	五	六	日
« 5月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Stark'blog

天行智博

IBM Portal的开发流程及注意项.