IBMWebSpherePortal6.0的主题与皮肤开发-创新互联
要了解如何开发Portal的主题，首先要了解IBM WebSphere Portal的显示流程。IBM WebSphere Portal 使用不同的 Java Server Page（JSP）、级联样式表（Cascading Style Sheet，CSS）和图像来显示门户页面。它使用位于X:\WebSphere\AppServer\installedApps\YourNodeName\ wps.ear\wps.war 目录下 themes、skins 和 screens 目录中的 JSP 来构造门户页面，其中每一个目录下都包含html、wml和chtml子目录，WebSphere Portal用它们服务于不同的客户机，例如桌面浏览器和移动设备。这里我们以通常使用的HTML方式下的主题开发为例，介绍Portal的主题开发。
所谓Portal的主题，指的是系统的整体界面风格与显示方式，主要包括网站页面初始化以前的调用、徽标logo、一级菜单、二级菜单、网站下边的版权信息，以及页面初始化完成后的善后逻辑处理。我们要开发一套主题，可以直接复制themes/html下的一个包含有各个页面文件的文件夹，重新命名并在管理界面中添加、指定给相关页面就可以了。在这个文件夹中，默认的初始调用文件是Default.jsp，这个文件绘制了一张表格，然后在各个单元格内调用不同的文件。在IBM WebSphere Portal 6.0中调用的文件有：Head.jsp、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js，以及延伸出来的PageBeginInclude.jsp、 PageEndInclude.jsp。下面进行详细介绍。
Portal系统的主题与皮肤的始化是从Default.jsp开始的，用于默认主题的Default.jsp位于wp_root\app\wps.ear\ wps.war\themes\html下。这个JSP包含了其他用于显示标题、公司徽标、工具栏的JSP，以及用于向页面中插入内容的 JSP。在Default.jsp的末尾处，screenRender JSP指向被请求处理的页面，例如login或forgotpassword。Default.jsp初始化一张表格，表格内部划分为单元格，每个单元格内可以直接显示内容，也可以调用其他的JSP页面。我们以从上到下、从左到右的顺序来分别介绍开发主题所用到的页面。下面介绍的JSP就是以这样的顺序先后调用的。
1.1.2 Head.jspHead.jsp 位于Default.jsp初始化表格的最上一行单元格内，负责生成标题并嵌入指向级联样式表文件的链接。它还定义了支持BiDi（双向）文本所需的变量。这个页面一般没有实质性的显示内容，例外的是，开发者喜欢在这里初始化网页的标题，通常是读取属性文件，比如位于web_inf/下的engine.properties。这样安排比较灵活，后期维护可以直接在属性文件里面进行。当然，如果用户的网页标题是确定的而且不再更改，那么也可以通过
AdminLinkBarInclude.jsp主要用来显示“新建页面”、“编辑页面”和“分配页面许可权”三个标签。该文件在Default.jsp初始化表格的第二行被调用。用户使用这三个链接来创建、修改自己的个性化页面，也可以由门户网站管理员来布局整个网站的风格，管理页面资源的权限。不过，在开发实践中你会发现，大部分客户不喜欢这几个标签，他们要求将这些标签放到管理页面，取而代之的是一些欢迎信息，比如：“某某员工，欢迎您登录！”。要实现这个也很容易，只要稍微修改一下这个页面就可以了。实现方法是：我们在系统中添加一个标签，这个标签对应的Java文件负责读出登录用户的姓名，并使用像JSP中添加JSTL一样的方法，添加一个Label。在进行主题与皮肤开发时，只要在显示欢迎信息的地方应用这个标签就可以了。
1.1.4 ToolBarInclude.jspToolBarInclude.jsp用来显示欢迎消息，以及为用户提供的链接工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如，登录的用户会看到“我的门户网站”、“管理”（仅管理员可见）、“编辑我的‘概要文件’”、“注销”之类的工具；而注销的用户会看到“忘记密码”、“登录”、“帮助” 之类的工具。通常的做法是将“管理”链接放到一个Portlet中，只有当登录的用户是Portal系统管理员时，才在该Portlet中显示欢迎信息，或者其他的资源链接。
1.1.5 PlaceBarInclude.jspPlaceBarInclude.jsp用来显示一级菜单，即“首页”、“文档管理器”、“公司概况”、“业务简介”等，属于最高层的目录。在任何一个一级菜单上都可以通过“新建页面”来创建二级菜单，所创建的内容将被存储到数据库（原始使用的是Cloundscape），也可以导入到DB2、Oracle等任何一个Portal所支持的数据库中。
1.1.6 PageBarInclude.jspPageBarInclude.jsp用来显示二级菜单，当点击一级菜单中的任何一个标签时，系统会调用该文件，并检索出该菜单的所有子菜单，默认显示在PlaceBar的下面。该文件在Default.jsp初始化表格的第三行被调用，如果不调用该文件，那么包含子菜单的一级菜单被调用时，其子菜单将在屏幕的左侧显示。该文件位于皮肤文件夹下，具体的文件操作我们将在后面的皮肤开发中介绍。
1.1.7 Portal 6.0中的文件调用关系现在介绍一下Portal 6.0中的文件调用关系及其作用。如图1-1所示为Portal开发一套主题需要调用的页面清单。
图1-1 Portal开发一套主题需要调用的页面清单
其中几个主要文件的作用如图1-2所示。
图1-2 文件的作用
1.2 初级：如何更换Portal系统的logo图标1.2.1 Default.jsp的工作原理门户系统的初始化页面是从Default.jsp开始的。Default.jsp文件调用其他不同的页面分别显示主页上不同区域的内容。例如：
打开Default.jsp，你会看到一个表格，在表格的左上角有这样一段语句，用来显示默认主题的logo图标：
上面已经介绍过，整个Portal系统的页面是Default.jsp初始化的一个大表格，用来显示或者调用不同的JSP。我们在这个大表格的最左上角划出一个
你可以将这个文件名改为自己想插入的任意一张图片的名字，只要将这张图片放到.war/images/目录下就可以了。这里支持几乎所有的图片格式，你可以任意摆放，大小、位置等都是你说了算。这时你可能会问：如何插入一个Flash呢？别着急，下面将会介绍。
1.2.3 用Flash动画作Logo用Flash作徽标是个不错的注意，它可以使门户网站看起来更丰富、生动一些。但是，Flash即.swf格式的文件，是不能直接通过这种方式来插入的，因为浏览器并不能识别它。要插入一个动画，必须为它指定相应的驱动，你可以通过如下这段代码来生成。
这里插入了一个名为firstpagelogo.swf的影片作公司徽标，它的大小是 510*81，请将这个影片文件放在.war/images目录下，重启服务器，看看首页上是不是已经出现了Flash。
细心的读者可能已经发现，在安装了更新系统编号为KB912945的补丁后，凡是在一个页面内使用
是不是很难看？没关系，我们就在主题与皮肤开发中解决这个问题。
事实上，在head.jspf的
中我们已经调用了该主题下的JS文件。你要确保没有删掉引用语句，否则其他的JS方法都不能使用，或者说，整个门户网站就被你这样轻松地破坏了。如果确实已经删除了，请确保加入以下语句。
然后打开flyout.js文件，加入如下函数。
最后在需要插入Flash文件的地方插入以下代码。
重启服务器，再检查一下，是不是虚框已经没有了？
1.3 中级进阶：开发个性化的Portal主题1.3.1 理解各级菜单Default.jsp调用PlaceBarInclude.jsp文件来显示一级菜单，如果一级菜单下面还有二级菜单，那么当点击该一级菜单时，Default.jsp将调用PageBarInclude.jsp来显示二级菜单。当然，也可以不调用该文件，系统将默认调用Portlet皮肤中的LayerContainer.jsp文件，用三级菜单代替二级菜单。这就是菜单的个性化，这个方法使得系统的三级及三级以下的菜单显示在页面的左侧，就像Windows资源管理器一样以树形目录显示，用户更容易接受。
打开LayerContainer.jsp文件，你会发现里面的内容非常简单。
首先有这样一个标签：
意思是说，如果菜单是可用的，那么当登录进去以后将执行下面的操作。使用这句代码，必须引入Portal的标签库，具体的过程这里不再赘述。接下来绘制了一个表格，用来显示里面的操作。
菜单的左右协调：如果一共定义了十几个一级菜单，而一栏只能显示8个，那么剩下的菜单怎么办？我们在这里放置了两个三角形小图标，如果右边还有更多的菜单，小图标会自动出现，当点击时，就会显示剩下的菜单。具体的代码是通用的，这里不再赘述。需要强调的是，菜单条在这里只划分为两种情况：一是在选中的情况下，二是在未选中的情况下。
例如：
我们首先添加一张背景图片，然后左侧放一张图片做前缀，中间打印该菜单条的名字，右侧又放一张图片做后缀，这样整个菜单条看起来就非常漂亮了。
接下来是显示工具栏的情况：
这里的操作将使具有权限的用户通过点击这张图片，直接编辑相应的Portal页面。不过，根据我的开发经验，大部分用户会隐藏这个入口，以免引起管理上的混乱。
最后的代码用来显示系统收藏夹。登录后，会发现在一级菜单的最右边多出一个“我的最爱”，这是Portal系统自带的收藏夹，可以通过这个入口将自己喜欢的页面添加到收藏夹，然后就可以通过点击这里直接进入到所收藏的页面了。
1.3.2 个性化工具栏要获得个性化的工具栏，可以修改ToolBarInclude.jsp文件，这个文件提供了Portal系统管理员进到管理界面的入口。
在这里可以编辑自己的“概要文件”，针对个人的用户信息，修改自己的姓名、密码等。更进一步，可以在这里显示欢迎信息，例如，张三同志登录后，会显示出：“欢迎您，张三同志！”。要实现这个功能实际上非常简单，请看：
当然，需要引入相应的标签库。具体的应用属于普通的JSP开发，你可以借鉴平常的开发经验去实现。
1.3.3 个性化管理标签所谓的个性化，指的是可以删除一个或者多个管理标签，也可以根据自己的喜好添加标签。这需要修改AdminLinkBarInclude.jsp文件。例如：
这段代码用来显示“新建页面”的管理标签，通过点击这个标签，可以为当前页面创建一个子页面。同理，可以个性化“编辑页面”和“分配页面权限”。当然，也可以隐藏这个入口。
1.4 高级探索：开发自适应分辨率下的主题与皮肤1.4.1 1024*768分辨率下的主题刚安装好Portal系统后，上面介绍的几个JSP文件会在默认的.war/theme目录下，你可以新建一个文件夹，将这几个JSP文件拷贝至该目录下，然后在管理界面下添加该主题，该主题默认是1024*768分辨率的。你可以开发多套主题。注意：请充分利用一些公共的资源，因为这些主题可能使用的是同样的版权信息，这样就可以将PageEnd.jsp放到themes/entention下，然后让所有的主题调用这个文件。
当然，为了保险起见，可以在Default.jsp最外层的表格中这样写死：
开发800*600分辨率下的主题非常简单，代码如下：
将这个表格覆盖到原来Default.jsp文件中最外层的表格就可以了。注意：在Default.jsp调用的各个文件中，可能都有表格存在，如果这些表格中有的宽度超过了800，或者两个并列的表格宽度超过了800，请适当调小；否则里面的表格会将此表格向两侧撑开，从而导致表格不协调。
1.4.3 1024和800下自适应主题要开发自适应主题就更简单了！请设定一个变量w，先写一个JavaScript脚本，用来读取客户端的浏览器分辨率，如果是800的，则给变量赋值w=800；如果是1024的，就赋值为w=1024。这样Default.jsp初始化表格的宽度就以w来替代，对具体JSP文件调用的单元格的长和宽都在原来的基础上乘以1或者乘以0.78。
1.5 高手过招：更改Portal系统的登录方式1.5.1 从首页登录我们需要用WSAD开发一个Portlet，并在JSP中写一个代理，将用户凭证提交给系统自带的认证Action中。这个Portlet可以这样来设计：
图1-3 登录界面
用户单击“登录”按钮后，将用户名和密码提交到系统自带的Action中。
//如果已经登录了，则可以显示用户的常用信息。比如，读取用户的Lotus邮箱，然后显示有几封邮件等（见图1-4）
图1-4 显示邮件信息
甚至可以利用url-mapping自定义几个页面，从首页直接进入业务系统，这样就可以封死Portal页面右上角自带的“登录”标签。也许你会问：我又想用系统自带的页面，怎么办呢？没关系，你也可以在浏览器中输入http://hostname:9081/wps/myportal，或者，干脆直接输入一个错误的用户名和密码，系统自然会带你回到系统自带的页面。
1.5.2 拒绝系统自带的登录页面但是采用上面介绍的方式，可能会出现这种情况：当用户名或者密码错误的时候，系统会返回到系统自带的登录框上面。为避免这种情况，可以封死这个开关。
系统自带的登录页面是.war/screen/html下的login.jsp文件，可以删除该文件里的所有内容，然后加入这么一句：
这样是不是带你又回到了首页呢？是的，确实如你所想，这样就封死了系统自带的登录页面。如果你的用户名或者密码错误，或者你通过myportal直接调用，系统就会带你回到首页的登录界面，重新输入。从这里我们可以延伸开来，比如说Session过期、修改用户的个人信息等，都可以通过这种方式封掉这个接口。
1.6 Portlet的皮肤开发1.6.1 更换标题背景图片在.war/skin/html下，系统已经存在了好几套皮肤，打开其中任意一个文件夹，你都能发现Control.jsp这个文件。该文件初始化一个小表格，该表格有两行：第一行用来显示Portlet的标题，后面是大化、最小化、编辑按钮；第二行是Portlet的body，用来显示Portlet的内容。一般来说，用户喜欢在Portlet名称前面或者后面放个小图标等之类的装饰，我们可以直接在这个单元格里面操作，这符合基本的HTML语法。当然，如果Portlet的名称是固定的，我们也可以像开发Portal主题的菜单一样，用图片来替代。其实只要判断一下Portlet标题，如果符合，就调用相应的图片，或者单独为这个标题的Portlet开发一个皮肤，用于调用专门的图片，或者直接显示，或者作为背景，都很容易。
要换掉Portlet标题的背景图片非常简单，在第一个
就一切OK了。
下面这个页面是皮肤开发结合比较好的例子（见图1-5），大家可以思考一下如何实现。
图1-5 皮肤开发结合比较好的页面
1.6.2 隐藏工具图标有些用户不喜欢Portlet有太复杂的操作界面，要求去掉“大化”、“最小化”、“还原”等功能，当然也就不显示了。其实这非常容易，看如下一段代码：
这段代码是用来显示“最小化”按钮的，直接去掉就行了。而且，可以对此进行编辑，包括添加什么显示内容，甚至添加什么新的事件等。同样的道理，我们可以用相同的方法来操作“大化”和“还原”两个图标。
1.6.3 个性化左侧菜单在项目实施中我发现这样一个有趣的现象：IBM产品的忠实用户，往往钟情于IBM系列产品的一贯风格。比如，某客户几年前实施的OA系统，“收件箱”、“发件箱”、“垃圾箱”等一系列菜单全部竖排在屏幕的左侧，那么，客户在实施Portal系统的时候，他就比较倾向于二级甚至一级菜单全在左侧竖排的情况。其实实现很简单，只要我们不再调用原来用于显示一级菜单和二级菜单的JSP页面，一级菜单就会以竖排的方式自动排列到屏幕的左侧。那么我们要想美化这种菜单怎么办呢？我们可以很容易地找到这个文件。
打开skin目录，你会发现有这样一个文件：LayeredContainer.jsp。不错，就是它，它首先初始化一个表格：
该表格左侧就是三级菜单（如果在Default.jsp中不再调用PageBar的话，这就是二级菜单；如果连一级菜单PlaceBar都不调用了，那么它就是一级菜单了）。右边则是整个Portal系统的body部分，显示了所有的Portlet。不晓得IBM为什么要这样安排，似乎有点不合理。不过，确实是在这里修改的，可能是把它看做一个容器了吧！在左侧的表格部分，你可以像编辑普通的网页一样，只要稍微有些美工知识，就可以随心所欲地制作出个性化的左侧管理菜单了。
1.7 合理使用CSS样式表看图1-6所示的页面效果，是不是非常漂亮。
图1-6 页面效果
其实实现很简单，看LayeredContainer.jsp文件，下面是它的表格代码，稍微加一些CSS，就能实现这种效果了。比如皮肤右侧漂亮的弧线，其实只要这么简单的一句话就OK了。
们再来看看某电力公司的首页（见图1-7），这也是皮肤开发结合比较好的例子。请留意红色框里面的内容，里面的弧线、角度堪称美工与主题皮肤开发人员黄金搭档的一个好例子。
图1-7 皮肤开发结合比较好的首页
当然，这需要素质比较高的美工配合，也需要工程师在长期的开发中仔细琢磨。
1.8 主题与皮肤的部署假设我们现在已经开发出一套主题和皮肤，那么如何将这套主题和皮肤部署到门户系统呢？下面是详细的方法。
1.8.1 皮肤的部署 ①将皮肤文件传送到这个路径下（见图1-8）：
/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/skins/html/
图1-8 传送皮肤文件
②以门户超级管理员身份登录，并依次单击“Launch”（启动）→“Administration”（管理）→“WebSphere Portal”（Portal主门户）→“Portal User Interface”（门户界面）→“Themes and Skins”（主题和皮肤管理），如图1-9所示。
图1-9 设置主题和皮肤
③单击“Add new theme”（添加新皮肤）按钮，输入皮肤的名称和目录名称，如图1-10所示。注意：目录名称必须与你上传的目录名称一致，而且只填相对路径。
图1-10 添加新皮肤
④单击“OK”按钮，皮肤添加成功，如图1-11所示。
图1-11 皮肤添加成功
⑤如果需要将该皮肤设为系统的默认皮肤，则可以选中该皮肤后，单击右侧的“Set as default portal skin”（设为默认皮肤）按钮，那么以后当你没有为主题或页面上的Portlet指定皮肤时，系统将自动调用该皮肤，如图1-12所示。
图1-12 设置默认皮肤
1.8.2 主题的部署 ①将主题文件上传到这个目录下（见图1-13）：
/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/themes/html/
图1-13 上传主题文件
②单击“Add new theme”（添加新主题）按钮，并在接下来的界面中为主题指定名称和所在目录，如图1-14所示。同皮肤的添加一样，主题的目录名称也必须与主题的文件夹名称一致。同时，还需要为该主题指定可能会用到的皮肤，如果希望使用默认皮肤，则可以将已经添加的皮肤设置为该主题的默认皮肤，那么以后当你没有为该主题下的Portlet指定皮肤时，系统将默认调用这套皮肤。
图1-14 添加新主题并指定皮肤
③单击“OK”按钮，完成该主题的部署，如图1-15所示。
图1-15 完成主题的部署
④如果希望将该主题设置为系统默认的主题，则可以选中该主题后，单击右侧的“Setas default portal theme”（设为默认主题）按钮，那么以后当你没有为门户系统的页面指定主题时，系统将自动调用该主题，如图1-16所示。
图1-16 设置默认主题
1.8.3 使用XmlAccess命令导入已经创建好的页面 将主题与皮肤文件解压到/opt/IBM/WebSphere/，如图1-17所示。
到/opt/IBM/WebSphere/主题目录名/theme/目录下确认文件 updateJKThemePolicies.sh 具有正确的参数。
在SSH命令行运行命令 updateJKThemePolicies.sh，如图1-18所示。
图1-18 运行命令
为导入的页面分配主题，选择主题“JKEnterprises”，然后单击“OK”按钮，如图1-19所示。
图1-19 选择主题
1.8.4 检查新主题是否已经起作用 退出并重新以wpsadmin身份登录Portal系统，单击“管理”进入管理界面，单击“编辑页面属性”按钮进入页面属性页，确认该页面的Theme（主题）所使用的主题是否为刚刚部署的新主题，如图1-21所示。
图1-20 应用新主题与皮肤
确认是否发生变化，如图1-21所示。
图1-21 应用了新主题与皮肤的登录界面
登录进去后，发现主页也已经应用了新主题与皮肤，如图1-22所示。
图1-22 应用了新主题与皮肤的主页
1.9 主题与皮肤的调试调试主题与皮肤一般采用两种方法：一是修改reload以便快速自动装载的方法，二是复制并添加主题与皮肤的方法。
1.9.1 自动装载法我们知道，Portal系统的主题一切都是从Default.jsp文件开始初始化的，在通常的应用服务器上都有一个reload开关，用来控制服务器是否自动更新，IBM WebSphere Portal也不例外。如果打开这个开关（这个开关可以打开was，在管理控制台里面设定，然后重启机器），并设定了reload的时间，那么每隔一个时间段，系统会自动读取主题与皮肤文件。换言之，只要我们把这个时间差设得足够小，就能立刻观察到修改结果（注意：既然是从Default.jsp开始聚焦的，那么，如果修改了由Default.jsp调用的其他文件，比如BeginPage.jsp，而没有修改Default.jsp，系统会默认你没有做任何修改，所以也就没有任何改动了）。同时我也想声明一点，这种方法带来的系统开销特别大，只可用于开发环境，在生产环境中是万万不可用的！
1.9.2 复制法复制法指的是从已经有的主题文件夹里复制一份，然后在复制出的文件夹里修改相关的页面代码。这种方法适用于对已经存在的主题仅做少量的修改，如果是做大量的修改，甚至对整个页面结构做大的改动，那就没必要使用这种方法了，因为修改页面框架的时间可能会远远大于重新开发的时间。复制出类似主题所在的文件夹后，重新命名新文件夹，然后将这个主题添加到系统，并指定给相应的测试页面。因为复制出来的主题是第一次安装，当然会“重新编译”了。看得出来，这种方法比较不方便，只适用于特殊情况。
分享文章：IBMWebSpherePortal6.0的主题与皮肤开发-创新互联
文章分享：http://ybzwz.com/article/iijhc.html
