WebSphere Portal 7.0的主题与皮肤部署方法

分手后的思念是犯贱 2021-09-20 01:12 370阅读 0赞

所谓主题与皮肤，主要指门户系统的界面风格与显示方式。在企业门户项目的实施中，主题与皮肤的开发是重中之重。因为作为所有企业内外信息、应用的统一入口，可谓是一个企业的脸面。从另一方面讲，在一个企业内，没有任何系统比门户系统有更多的员工使用，在项目实践中我也发现，花在主题与皮肤开发上面的时间往往占很大的比重，对美工的要求也比较严格。

Portal的主题与皮肤开发，说穿了还是普通JSP的开发，只不过大量使用了IBM自带的标签库，而且页面之间的调用非常复杂，初级开发者甚至找不到页面元素所在的文件，所以开发起来显得比较麻烦。另外，各个版本的Portal其主题与皮肤构成元素都在变化，看起来似乎很难掌握。但是，如果你深刻洞悉了与主题、皮肤相关的几个文件之间的调用关系，使用起来就能游刃有余了。

## 2  WebSphere Portal 7.0的主题与皮肤部署方法 ##

### 2.1  主题与皮肤应用程序部署 ###

WebSphere Portal 7.0和8.0比较相似，相对于6.0来说有了较大的变化。由于8.0版本在国内的客户不超过3家（截至2013年），而7.0版本的客户较多且目前最流行，所以本节详细介绍IBM WebSphere Portal 7.0的主题与皮肤开发。

#### 2.1.1  主题与皮肤应用程序（动态文件） ####

使用工具：AnyClient。

首先下载并安装AnyClient工具。

![spacer.gif][] 如果计算机上已经存在该工具，则可直接运行，界面如图2-23所示。

![spacer.gif][] 单击“File”，选择“Site Manager”，如图2-24所示。

![spacer.gif][] 单击左下角的“New”按钮，右侧显示了需要填写的常规信息，更改Protocol为“WebDAV”，如图2-25所示。

![微信图片\_20181115182239.png][20181115182239.png]

图2-23  AnyClient界面

![微信图片\_201811151822391.png][201811151822391.png]            ![微信图片\_201811151822392.png][201811151822392.png]

图2-24  选择“Site Manager”                                   图2-25  常规信息

按要求填写信息，如图2-26所示。其中，Host表示计算机IP地址或者域名。

各常规选项如下。

**— ****Host****：**添加ThemeList，http://hostname:10039/wps/mycontenthandler/dav/themelist/；添加SkinList，http://hostname:10039/wps/mycontenthandler/dav/skinlist/；添加fs-type1，http:// hostname:10039/wps/mycontenthandler/dav/fs-type1/。

**— ****Username****：**wpsadmin。

**— ****Password****：**wpsadmin。

**— ****Protocol****：**WebDAV。

**— ****Local**** ****Directory****：**选择本地计算机需要上传文件的目录。

**— ****Remote**** ****Directory****：**不填。

**— ****Debug****：**不填。

**— ****Prompt for password****：**选填。

![微信图片\_201811151822393.png][201811151822393.png]

图2-26  按要求填写信息

![spacer.gif][] 待上述操作完成，开始文件传输操作。

通过ThemeList传输主题文件，例如：wanhua.default.theme；通过SkinList传输皮肤文件，例如：wanhua.default.Standard。

上述文件传输完毕后，动态文件已经全部部署。

#### 1.2  主题与皮肤应用程序（静态文件） ####

借助应用程序打包工具，将主题与皮肤的静态文件打成EAR包，然后上传到管理控制台的“应用程序类型”下的“WebSphere企业应用程序”中。这个过程比较简单，这里不再一一详述。初学者如果不懂，则可以到IBM官方网站查阅入门教程。

文件部署完成后，主题与皮肤即可用了。

### 2.2  主题与皮肤文件的导出/导入 ###

通过FlashFXP工具进行主题与皮肤的导出/导入操作。配置文件导出/导入中的wpsadmin为管理员账号。

#### 2.2.1  配置文件导出 ####

![spacer.gif][] 使用FlashFXP工具连接到计算机上，如图2-27所示。

![微信图片\_201811151822394.png][201811151822394.png]

图2-27  使用FlashFXP连接计算机

![spacer.gif][] 进入到执行主题与皮肤命令所在的目录，如图2-28所示。

![微信图片\_201811151822395.png][201811151822395.png]

图2-28  进入到执行主题与皮肤命令所在的目录

![spacer.gif][] 将本地的“export.xml”文件上传到该目录下，通过SecureCRT工具连接到该机器，执行图2-29所示的命令，完成主题与皮肤的导出。

![微信图片\_201811151822396.png][201811151822396.png]

图2-29  执行命令

![spacer.gif][] 配置文件导出完成。

#### 2.2.2  配置文件修改 ####

![spacer.gif][] 完成“配置文件导出”操作后，使用FlashFXP查看时，右侧会多出一个Out\_Export.xml文件，如图2-30所示。

![微信图片\_201811151822397.png][201811151822397.png]

图2-30  查看文件

![spacer.gif][] 选择Out\_Export.xml并下载到本地，修改或添加图2-31所示方框中的内容（放大后查看）。

![微信图片\_201811151822398.png][201811151822398.png]

图2-31  修改或添加内容

![spacer.gif][] 修改完成后，保存。配置文件修改完成。

#### 2.2.3  配置文件导入 ####

![spacer.gif][] 配置文件修改完成后，通过FlashFXP上传至![微信图片\_201811151822399.png][201811151822399.png]目录，并使用SecureCRT工具上传至服务器，如图2-32所示。

![微信图片\_2018111518223910.png][2018111518223910.png]

图2-32  执行命令

![spacer.gif][] 配置文件导入完成。

### 2.3  主题与皮肤应用程序的应用 ###

![spacer.gif][] 进入Portal首页的“管理”中，单击左侧栏中的“主题和外表”，如图2-33所示。

![微信图片\_2018111518223911.png][2018111518223911.png]

图2-33  主题和外表

![spacer.gif][] 选择“主题”列表中的主题名称，单击,如图2-34所示。

![微信图片\_2018111518223912.png][2018111518223912.png]

图2-34  设置默认的门户网站主题

![spacer.gif][] 设置成功后，单击右侧的“编辑主题”，如图2-35所示。

![微信图片\_2018111518223913.png][2018111518223913.png]

图2-35  编辑主题

![spacer.gif][] 将左侧“所有外观”列表中所需要的Skin添加到右侧列表中，并且选择一种外观，设置为默认值，如图2-36所法。

![微信图片\_2018111518223914.png][2018111518223914.png]

图2-36  设置默认的外观

![spacer.gif][] 单击“确定”按钮，完成主题与皮肤的设置，如图2-37所示。

![微信图片\_2018111518223915.png][2018111518223915.png]

图2-37  完成主题与皮肤的设置

![spacer.gif][] 主题与皮肤样式应用成功。

### 2.4  主题与皮肤修改文件的上传操作 ###

（1）修改后的动态文件

通过AnyClient工具链接到fs-type1上，依次找到“/themes/wanhua.default.theme/”，将对应的文件上传到相应的文件目录下即可。

（2）修改后的静态文件

通过EAR打包上传到管理控制台即可

转载于:https://blog.51cto.com/134834/2320084

[spacer.gif]: /images/20210726/882906f7f6b740e0af7f446014f4a2f8.png
[20181115182239.png]: https://s1.51cto.com/images/20181121/1542792865769077.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822391.png]: https://s1.51cto.com/images/20181121/1542792870789253.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822392.png]: https://s1.51cto.com/images/20181121/1542792873843327.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822393.png]: https://s1.51cto.com/images/20181121/1542792962132616.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822394.png]: https://s1.51cto.com/images/20181121/1542792999961390.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822395.png]: https://s1.51cto.com/images/20181121/1542793025970067.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822396.png]: https://s1.51cto.com/images/20181121/1542793041885950.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822397.png]: https://s1.51cto.com/images/20181121/1542793069746118.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822398.png]: https://s1.51cto.com/images/20181121/1542793083528121.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[201811151822399.png]: https://s1.51cto.com/images/20181121/1542793135736314.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[2018111518223910.png]: https://s1.51cto.com/images/20181121/1542793142700502.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[2018111518223911.png]: https://s1.51cto.com/images/20181121/1542793159845103.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[2018111518223912.png]: https://s1.51cto.com/images/20181121/1542793186397702.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[2018111518223913.png]: https://s1.51cto.com/images/20181121/1542793203490822.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[2018111518223914.png]: https://s1.51cto.com/images/20181121/1542793239270953.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[2018111518223915.png]: https://s1.51cto.com/images/20181121/1542793272439100.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=