IBM WebShere Portal主题与皮肤开发

所谓主题与皮肤，主要指门户系统的界面风格与显示方式。在企业门户项目的实施中，主题与皮肤的开发是重中之重。因为作为所有企业内外信息、应用的统一入口，可谓是一个企业的脸面。另一方面讲，在一个企业内，没有任何系统比他们的门户系统有更多的员工使用，在项目实践经验中我也发现，花在主题与皮肤开发上面的时间往往占很大的比重，对美工的要求也比较严格。所以本书把这一部分内容作为第一章讨论。
8{V4_v@Y
M!i        l-NPortal 的主题与皮肤开发，说穿了还是普通jsp的开发，只不过大量使用了ibm自带的标签库，而且页面之间的调用非常复杂，初级开发者甚至找不到页面元素所在的文件，所以开发起来显得比较麻烦。另外，IBM WebSphere Portal6.0较之以前的版本又做了较大的改动，或者说随着新版本的推出，我们将面对不断地技术更新与挑战。但是，如果您深刻洞悉了与主题、皮肤相关的这几个文件之间的调用关系，使用起来就能运用自如了。)^uE;z6Y{$Z
本章主要是对5.1的介绍，附加了对6.0的延伸，尤其是变化比较大的地方。我们将从一下部分来讨论：+f?;}3H#z

2F B[r
b hBportal爱好者1、初级入门：什么是Portal的主题与皮肤开发？portal爱好者e6|ag;en#LK
2、中级开发：如何更换Portal系统的logo图标；
SEu
C�l3、中级进阶：开发个性化的主题；%[UX:e R(r*?3I]
4、高级探索：开发自适应分辨率的主题与皮肤；
$M|0_z7H*t^r4B5、高手过招：更改Portal系统的登录方式；FJ2x9Z$pG x|*g1On
6、Portal的皮肤开发简介。
g9^[%ic3YfO!?7、主体与皮肤开发调试方法。E aF4Za
O(@
,i{.Ty`2p#r
portal爱好者
EXJXJW;J.~2b
www.portalfan.com.sH        K1E"Xu0o�r|t6[

l/|5bH,v U5.1         入门：Portal的主题与皮肤开发：~1d
R
p        F

fc!x;I[@:C$Dwww.portalfan.com要了解如何开发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的主题开发。
:Hjig5l;f所谓Portal的主题，指的是系统的整体界面风格与显示方式，主要包括网站页面初始化以前的调用，徽标Logo，一级菜单、二级菜单，网站下边的版权信息，以及页面初始化完成后的善后逻辑处理。我们要开发一套主题，可以直接复制themes/html下的一个包含有各个页面的文件的文件夹，重新命名并在管理界面里面添加、赋给县官页面就可以了。在这个文件夹里面，默认的初始调用文件为Default.jsp，这个文件绘制了一张表格，然后在各个格内调用不同的文件。在IBM Portal5.1中调用了如下几个文件：Head.jsp 、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js以及延伸出来的 PageBeginInclude.jsp、 PageEndInclude.jsp；在IBM Portal6.0中引入了jspf技术，所以调用也相应的发生了变化，主要有：head.jspf，topNav.jspf，foot.jspf， footfly.jspf等文件。下面主要针对5.1座以下介绍。 gbd\]%?`&Zg
注意：这部分内容属于最初级的开发，您要弄懂这些介绍，必须具备一定的jsp、jspf基础、css基础和标签库的基础，最好做过相应的开发。-e        pZJ`5z

d        n s Qof4A5.1.1         Default.jsp：
@a_o#Z
iQP\W*b所有屏幕聚集都从 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就是以这样的顺序先后调用的。
        m"ag*C9I4\        \:E5.1.2         Head.jsp][7`*b[;v
Head.jsp 位于Default.jsp所初始化的表格的最上一行单元格，负责生成标题并嵌入指向样式表文件的链接。它还定义了支持 BIDI（双向）文本所需的变量。这个页面一般没有实质性的显示内容，例外的是，开发者喜欢在这里初始化网页的标题，通常是读取属性文件，比如位于 web_inf/下的engine.properties。这样安排比较灵活，后期维护可以直接在属性文件里面进行。当然，如果用户的网站标题是确定的而且是不在更改的，您也可以通过<title></title>在这里定死，这比IBM公布的以标签的方式写来的容易，也更易使用。如果您开发了多套主题，而且这几套主题的page title如果也一样的话（除了虚拟门户，一般是这样子），您可以把这几个文件放到themes/html的根目录下，其他主题的default.jsp 都来调用这个文件就可以了。@5e{        OEm1o&H1l

.v3G$C�W6\\nportal爱好者5.1.3         AdminLinkBarInclude.jsp"g)B-L*s+My
AdminLinkBarInclude.jsp主要用来显示了“新建页面”、“编辑页面”、“分配页面许可权”三个标签。Default.jsp初始化表格中的第二行被调用。用户使用这三个链接来创建、修改自己的个性化页面，也可以由门户网站管理员来布局整个网站的风格，管理页面资源的权限。不过在开发实践中您会发现，大部分客户不喜欢这几个标记，他们宁肯要求我们将这些标签放到管理界面，取而代之的是一些欢迎信息，比如：“某某员工，欢迎您登陆！”。要实现这个也很容易，我们只要稍微修改一下这个页面页就可以了。比如我们可以写个标签，读出登陆用户的姓名，然后添加一个Label就解决了。
|"qx6Ki$W5.1.4         ToolBarInclude.jspz2`7S
_-IS#wMq
ToolBarInclude.jsp 显示欢迎消息以及为用户提供的链接工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如，登录的用户看到“我的门户网站”、“管理”（仅管理员可见）、“编辑我的‘概要文件’”、“注销”等之类的工具；而注销的用户看到 “忘记密码”、“登录”、“帮助” 之类的工具。通常的做法是将“管理”链接放到一个portlet中，只有当登陆的用户是Portal系统管理员时才在该portlet中显示，或者先是为欢迎信息，或是其它的资源链接。@�m;U(OJp HT;U
5.1.5         PlaceBarInclude.jsp
L:m!{aSQ,RPlaceBarInclude.jsp用来显示一级菜单，即“首页”、“文档管理器”、“公司概况”、“业务简介”等，属于最高层的目录，您在任何一个一级菜单上都可以通过“新建页面”来创建二级菜单，你创建的内容将被存储到数据库（原始使用的是cloundscape），您也可以把它导入导出到db2、oracle等任何一个portal所支持的数据库中，此内容将在我的下一篇文章中详细论述，这里不再一一提及。
yaq/k}\j&I$Eportal爱好者
+}-OC[I*`gMI
b5.1.6         PageBarInclude.jsp
o@YA4]yR用来显示二级菜单，当您点击一级菜单中的任一标签时，系统会调用该文件，并检索出该菜单的所有子菜单，默认显示在PlaceBar的下面。该文件在Default.jsp初始化表格的第三行被调用，如果我们不调用该文件，那么，包含子菜单的一级菜单被调用时，其子菜单将在屏幕的左侧显示，该文件位于皮肤文件夹下，具体的文件操作我们将在接下来的皮肤开发中介绍。
v`{ C,Gn
Q{5.1.7        Portal6.0中的调用关系www.portalfan.com|2c1_y;]
V3q
现在我们拿出一节的篇幅来简要介绍Portal6.0中的文件调用关系以其职责。如图：&o#UqCMvB4HM
YE7Z]d5tp:O
                 图：Portal6.0开发一套主题需要调用的页面清单.E%J
m5]FZ_,No
我们通常使用的是这几个：;d)dA5C3?8{4h)Oiz

CI[!_Q+nPU ff详细的开发内容下面将一一介绍。
noC l0T.O9D
;cd;N$Z^portal爱好者5.2         初级：如何更换Portal系统的logo图标；
/KQ%{t5|5.2.1         Default.jsp的工作原理：
}Y$k8ysSI
@X
3w6d0d:]Vs-]5P
w\;Gq&W8a�T我们看这个例子，Default.jsp大致上将Portal系统的默认页面划分为这样一个表格：
:Fc;O!U)`7l.e
i6z+HgN+V1nwww.portalfan.com表-1： Default.jsp总体调用效果
au/Iln F
v
kwww.portalfan.comPageBegin: /O@?
Yk'jK!^
用来显示页面生成以前的提示文字，例如：Portal系统正在加载，请稍候……d2IN
u:t1gTt6~
PageContent：\~2d&]Lg-C,`\
Portal系统主体部分：用来显示详细的Portal页面；portal爱好者s
FFNo
c!U6Q!O/A#np
PageEnd.jsp用来显示页面生成以后的东西。例如公司版权信息等。9?z,COWB@.A        p

G1[v
gmc7N!O5.2.2         换一个logo：6A]UW\q5Pg
  打开Default.jsp，您会开到一个表格，在表格的左上角，有这样一段语句，用来显示默认主题的Logo徽标：
F�h+oQ#Y%R*F
?V3O
/Tbg|]t9^
?S'W-}portal爱好者
(d eC6x0}XP/siportal爱好者上面已经介绍过，整个Portal系统的页面由Default.jsp分割成一个大的表格，用来显示或者调用不同的jsp。我们在这个大表格的最左上角化出一个<td>,用来显示公司的徽标。这段语句就是在这个单元格内插入一个图片，叫做Logo.gif。
aELw
V1XW
明白了吗？您可以将这个文件名改称您想插入的任意一张图片的名字，只要将这张图片放到.war/images/目录下就可以了。这里支持几乎所有的图片格式，您可以任意摆放，大小、位置等都有您说了算。到这里，您可能已经想到了：那么，我养插入一个Flash呢？别着急，下面将会提到这点。
7i'KxS-EX5.2.3         用flash作logo：
r        n3D9` Ywww.portalfan.com用Flash作徽标是个不错的注意，它可以使您的门户网站看起来更丰富、生动一些。但是，Flash，也就是.swf格式的文件，是不能直接通过这种方式来插入的，因为我们的浏览器并不能识别它。要插入一个动画，必须位置制定相应的驱动。您可以用以下这段代码，为之生成：&W F7`)Y5w�_
x(z0i

G3`y [1l P.n�q这里在插入了一个名字为 firstpagelogo.swf的影片做公司徽标，他的大小是 510*81，请将这个影片文件放在.war/images目录下，重启服务器，看看您的首页上，是不是已经出现了？实际效果参考上面，该企业集团的企业门户守夜上就是个Flash。portal爱好者 wVN-B/df.[&qG
细心的读者可能已经发现，在安装了更新系统编号为KB912945的补丁, 凡是一个页面内使用<object>、<embed>或<applet>标签的活动内容都不会被自动激活，需要用户手动点击，因而flash控件也不能幸免。微软为了避免与Eolas公司和加利福尼亚大学之间的专利侵权纠纷,而发布的一个IE非安全更新,这不是什么 BUG。但是安装此更新后，在启用 ActiveX 控件之前，您无法从某些网页与这些控件交互。要启用 ActiveX 控件，请手动单击该控件。这使得我们的门户网站看起来总有个虚框，好像一个疤痕。例如：www.portalfan.com4e        ^i(m:kJ!c^Q%`

b*?@Y_;N0U0dfAwww.portalfan.comportal爱好者 Y&j5N,o8xFS3q        y)n

iMUv
\iportal爱好者是不是很难看？没关系，在wps里我们有办法解决。9Hq0m*L�u
事实上在head.jspf的<head></head>中我们已经调用了该主题下的js文件，你要确保没有删掉引用语句（当然了，你几乎没有删掉的可能性，因为你要是删除了对这个文件的引用，那么其他的js方法泥浆都不能使用，或者说，整个门户网站就被你这样轻松的破坏掉了）。如果确实已经删除了，请确保加入以下语句： u+].m.B5re&g        txC+Q
portal爱好者*PX;wB6W(O-}
然后打开文件flyout.js文件，加入如下函数：www.portalfan.comW)t2li/y6V
/*≡≡≡═══───────── t5s+[.O#P'n#E
*页面文件中的flash文件嵌入的代码符合W3C标准8jV+UaN{:[9I$B
*配合<noscirpt>清除windows xp打了SP1补丁后ie中的flash会出现要求激活的虚线边框

lBH0l*D5U+HH*将 <object type="application/x-shockwave-flash..." 标签放到<noscript></noscript>标签中的好处:
(`C#A/F-j1S0ijnportal爱好者*　　1.可以很方便的修改flash代码；
^t
k
n-[1EC
\4I*　　2.再利用性强；5@a&@8V8NXeJ
*　　3.如果浏览器禁用了js脚本 flash依然可以显示出来%aku'NRT5_
dk
*/
"?a2r@
k/xrs2Dwww.portalfan.comfunction addFlash(ur,w,h){+g1C;hAMwF0\
        document.write('<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/sho ... h/swflash.cab#version=6,0,29,0" width="'+w+'" height="'+h+'">'); [aF�}"T'q#k
    document.write('<param name="movie" value="'+ur+'">');
3X+s@?K    document.write('<param name="quality" value="high">');
1o7L(~;j2WF    document.write('<paramname="wmode" value="transparent">');
gI1RLowww.portalfan.com    document.write('<param name="menu" value="false">');
&k{5Z#G'nvJportal爱好者document.write('<embed  src="'+ur+'" quality="high"
r�B~]2d1b`d%Spluginspage="http://www.macromedia.com/go/getflashplayer"  type="application/x-shockwave-flash" height="'+h+'"></embed>');Zvjp
d%K�qbI
    document.write('</object>');www.portalfan.com1a2c,xkTd]9C9zw
}
:Ud&rJEWB)R kportal爱好者
9I$\uU qqwww.portalfan.com然后在需要插入Flash的地方插入以下代码：@e
^Ic
<tr>0CD        {"tkL9P.|9q^
    <td align="center" valign="middle">
~`8NHSwww.portalfan.com           <script language="javascript" type="text/javascript">_.T(oOYB
H9\]"[
addFlash('personal.swf','600','400');
$Qyp U
F!Y,B uI</script>portal爱好者5Q�]1\Si8D
        </td>
'vL5^)@B  </tr>d'S(p!g"H6^a
重起服务器，再检查一下，是不是虚框已经没有了？
U
i(x$a*UO5.3         中级进阶：开发个性化的Portal主题t,o]
mfc
5.3.1         理解各级菜单；
BSuKz,J&ao;B;o
NDefault.jsp 调用PlaceBarInclude.jsp文件来显示一级菜单，如果一级菜单下面还有二级菜单，那么当您点击该一级菜单时，Default将调用 PageBarInclude.jsp来显示二级菜单。当然，您也可以不调用该文件，那么系统将缺省调用Portlet的皮肤里面的 LayerContainer.jsp文件，用来以三级菜单代替二级菜单，这就是个性化的左侧管理菜单。"uo9i        rG }x/M;ZU
打开这两个文件，您会发现里面的内容非常简单。请看下面的清单：H5pb�P;~
首先由这样一个标签：/f/u I^�S?P
:rVP&utn6|?#~
意思是如果菜单是可用的，那么当您登录进去以后将执行如下操作。使用这句代码，必须引入Portal的标签库，具体的过程这里不再赘述。接下来绘制了一个表格，用来显示里面的操作。表格内的内容，下面将作介绍。/S(Z
X,r4]
菜单的左右协调：如果您一共定义了十几个一级菜单，而一栏只能显示8个，剩下的菜单怎么办？我们在这里放置了两个三角形的小图标，如果右边还有更多的菜单，小图标会自动出现，当您点击时，就会显示出剩余的菜单。  具体的代码是通用的，这里不再赘述。我们需要强调的是：菜单条在这里支划分为两种情况：一是选中的情况下，一是为选中的情况下，即：
sQ:D NM!IO$Q
     
'F1C(h4j$osI@y8J例如：portal爱好者x"n*^&I;t$QG*d$K

1K-x^m
}n
"dV`!])]C
Q;z我们首选添加一张背景图片，然后左侧放一张前缀，中间打印该菜单条的名字，后面又放一张图片做后缀，这样整个菜单条看起来就非常漂亮了。
8M4f,KUbc
J:Zig{t接下来是显示工具栏的情况下：        J\8Q?/?)E

wx6Z+YSFN7g%f
z这里的操作将使具有权限的用户通过点击这张图片，直接编辑相应的portal页面。不过据笔者的开发经验，大部分的用户会隐藏掉这个入口，以免引起管理上的混乱，具体的开发内容将在以后的文章中提及，这里将不再详细介绍。
FJ
W7EB8z最后的代码用来显示系统收藏夹：
)i gi-kJ+P&n当您登录后，会发现在一级菜单的最右边多出一个“我的最爱”的东西，这是portal系统自带的收藏夹，您可以通过这个入口将自己喜欢的页面添加到您的收藏夹，然后您就可以通过点击这里直接进入到你收藏的页面了。9B,e�d9C7t e7a `
#rX%[}[
t*a?R        g8d
5.3.2         个性化工具栏
6h h*RG.P.x要获得个性化的工具栏，您可以修改ToolBarInclude.jsp这个文件。这个文件提供了Portal管理员进到管理界面的入口。www.portalfan.com3hz0e5y*]G$F
在这里你可以编辑自己的“概要文件”，就个人的用户信息，修改自己的姓名、密码等。更深一层的话，您可以在这里显示欢迎信息，例如张三同志登录后，会打印出：“欢迎您，张三同志！”的语句。要实现这个功能实际上非常简单，请看：T        i\_
OJ3xpW$];H
         Zp}(y�H
iV8j        P
当然，您需要引入相应的标签库，具体的应用属于普通的jsp开发，您可以参照平常的开发经验去实现。portal爱好者Tl8?'Z
e%xZ^k
5.3.3         个性化的管理标签
}Rw9?W0?0a/s!wyC,}www.portalfan.com所谓的个性化指的是，您可以删掉管理标签的一个或者多个，也可以根据喜好添加自己需要的标签。这需要您来修改AdminLinkBarInclude.jsp文件。例如：+q1GMv2MQ^E
 
u\7u#H
~(ywww.portalfan.com这段代码用来显示“新建页面”的管理标签，通过电机这个标签，您可以为当前页面创建一个子页面。同理，您可以个性化“编辑页面”和“分配页面权限”，当然，您也可以之间隐藏掉这个入口。^1yq'erQf3s

m#X%rBn
yYP5.4         高级探索：开发自适应分辨率的主题与皮肤www.portalfan.comulxk[
5.4.1         1024*768分辨率下的主题
of]+_}5n刚安装完Portal系统后，刚才介绍的几个jsp 会在默认的.war/theme目录下，您可以新建一个文件夹，将这几个jsp文件拷贝至该目录下，然后在管理界面下添加该主题。该主题默认下就是 1024*768的。您可以开发多套主题，注意：请充分利用一些公共的资源，例如这些主题可能使用的是同样的版权信息，这样，您可以将 PageEnd.jsp页面放到themes/entention下，然后让所有的主题调用这个文件。Ol/X-o#B%~`cG
当然，为了保险起见，您可以在Default.jsp最外层的表格中这样写死：www.portalfan.com,\q1mL_7`
           
$^U^7Ih4dI n5.4.2         800*600分辨率下的主题6r9L O*l
jv.^H/rD
开发800下的主题说穿了非常简单，您可以会出这么一个表格：
yj'\5kue(^$h:V         oY2ekU%H5o
将这个表格覆盖到原来Default.jsp文件中最外层的表格就可以了。注意：在default.jsp中调用的各个文件中，可能都有表格存在，如果这些表格中有的宽度超过了800，或者两个并列一行的表格宽度超过了800，请适当调小。否则里面的表格辉将此表格向两侧撑开，从而导致表格不协调。
gb'@&_Twww.portalfan.com5.4.3         1024和800下自适应得主题
v1s$e&]4o*w w(uP2cwww.portalfan.com要开发自适应的主题就更简单了！请设定一个变量w,先写一个JavaScript，用来读取客户端的浏览器分辨率，如果是800的，则给变量赋值w= 800，反之如果是1024的，就给赋值为w=1024。这样Default.jsp初始化的表格宽度就以w来替代，对具体jsp的调用的单元格的长和宽都在原来的基础上乘以1或者乘以0.78。剩下的事，不用我说了吧！1nk;i e6?:\]P
5.5         高手过招：更改Portal系统的登录方式；Pm!I
RA(?
}G
5.5.1         从首页上登录
#`1?6|l*D3C        { ZKzwww.portalfan.com您需要用wsad开发一个portlet，并在jsp中写一个代理，将用户凭证提交给系统自带的认证action中。这个portlet可以这样来设计：www.portalfan.com0CQ|[:i|(t
XHd
<wps:if loggedIn="no">  //如果没有登陆的情况下，提醒用户输入它的用户名与密码：
6N+yFsQ-m.T6~                    
w^1a&RR    
d~9}d�S8M_</wps:if>portal爱好者9D;z5s0o{*O
xC
用户按下“登录“后，将用户名和密码提交到系统自带的action中：
h\1c`/n.D     <wps:if loggedIn="yes"> 
4w6e0s-s9OUJwww.portalfan.com//如果已经登陆了，可以显示用户的常用信息，比如，读取用户的Lotus邮箱，然后显示他有几封邮件等：portal爱好者lad#^f1D"v j4h9Q
        
        PJ)x fA0o9l</wps:if>
m4J3E-r6Ik甚至，您可以利用url-mapping自定义几个页面，从首页上直接进入到您的业务系统（如上）。www.portalfan.comsg? |;z-B1U
^/yQ
  这样的话，您甚至可以封死portal页面右上角自带的“登录”标签，也许您会问我又想用系统自带的页面呢？没关系，您也可以在浏览器中输入：http://hostname:9081/wps/myportal，当然，干脆您直接输入一个错误的用户名和密码，系统自然后带您会带系统自带的页面了。}:E!nU mW%ltH
5.5.2         拒绝从系统自带的登录界面%aJz]5A$RxXc        ~9x
但是在上面这种情况下，可能会出现这种情况：当用户名或者密码错误的时候，系统会返回到系统自带的登录框上面，为避免这种情况，您可以封死这个开关。这个非常简单，我在这里顺便一提：yvH!g1f:Ex.f:ez/aA
系统自带的登录页面是.war/screen/html下的login.jsp文件，您可以删掉该文件里的所有内容，然后加入这么一句：&}6}#I;V*ds^q
  A        i~]r]b"th'X
呵呵，是不是带您又回到了首页呢？是的，确实如您所想，这样就封死了系统自带的登录页面。如果您的用户名和者密码错误，或者您通过myportal直接调用，都不起作用了吧！系统会带您回到首页的登录界面，请重新输入！从这里我们可以延伸开来，比如说Session过期，修改用户的个人信息等，都可以通过这种方式封掉这个接口。  ^ F E(t.Z2nT
5.5.3         遗留问题：
-C/vBbj;s&K*ufk有人问，Portal系统的菜单可以用图片吗？答案是肯定的。例如：以下是某航天系统的Portal系统，菜单就是采用的图片，如下图：
HrxM'ku!{portal爱好者
'{q%S(@}1U-_YQ?portal爱好者!W;G%X
x9j
ts5\Mba

?2e-e4mL2H?6`其实开发起来倒是很简单，只要在PageBarInclude.jsp中判断一下，当字符匹配时就调用相应的图片也就可以了。
_
fr?u#s-@:tLwww.portalfan.com2. 在实际开发中，您也许会发现还有其他一些意想不到的问题，是的，这个地方确实有许多值得注意的地方，也许只有您亲自来试过了，才知道其中的细节。0?'q-\(BYS
Z4MtR
t
5.6         Portlet的皮肤开发
D`ckd�DC4}&Oportal爱好者5.6.1         更换标题背景图片
n@,dX:`%I)T({portal爱好者非常简单，请找到.war/skin/html下，发现系统已经存在了好几套皮肤，打开其中任意一个文件夹，您都能发现这个文件：^R N1f!},y"PO|
Control.jsp。
0md(i"R
U4W$r
uwww.portalfan.com该文件初始化一个小的表格，该table有两行：第一行用来显示portlet的标题，后面是最大化、最小化、编辑按钮；第二行是portlet的 body，用来显示portlet的内容。一般来说，用户喜欢在Portlet名称前面或者后面，放上个小图标等等之类的装饰，我们可以直接在这格单元格里面操作，符合基本的html语法。当然，如果portlet的名称是固定的话，我们也可以像上面开发portal主题的菜单时候一样，用图片来替代。其实只要判断一下portlet的标题，如果符合的话，就调用相应的图片，或者单独为这个标题的portlet开发一个皮肤，用于调用专门的图片。或者直接显示，或者作为背景，都很容易。T$OgVi
要换掉portlet标题的背景图片其实非常简单：在第一个<td>里面加上这么一句代码：
8{9`"R)I&{`        k&Ywww.portalfan.coma-cQk2]ZO)^        g
  就一切OK了。
fJ,F*g
Nr'MQportal爱好者下面这张页面是皮肤结合比较好的例子，大家可以思考一下如何实现。
)V csy)[6Kwww.portalfan.comb Nm jZf
portal爱好者;[6qs
Ud$Vc

S0u)]VS�F;\8K5.6.2         隐藏工具图标。
6NGtAV&WE
w有些用户不喜欢portlet有着太复杂的操作界面，要求去掉“最大化”、“最小化”、“还原”等功能，当然，也就不显示了。其实这非常容易，请再打开我们的表格，看这么一段代码：PH+r5epefC
        www.portalfan.coma_ U$w/tk
这段代码是用来显示“最小化”按钮，不用说，直接去掉就行了！而且，您可以对此做任何编辑，包括添加什么显示内容，甚至添加什么新的事件等等。同样的道理，我们可以相同的来操作“最大化”、“还原”两个图标。
A~#F9}5l*J
d)TA5.6.3         个性化左侧菜单portal爱好者TZHu"U\,G
在项目实施中我发下这样一个有趣的现象：IBM产品的忠实用户，往往钟情于IBM系列产品的一贯风格。比如，某客户几年前实施的OA系统，使用的是“收件箱”、“发件箱”、“垃圾箱”等一系列菜单全部竖排在屏幕的左侧，那么，客户在实施Portal系统的时候，他就比较倾向于二级甚至以及菜单全在左侧竖排的情况。其实这个也很简单，只要我们不再调用原来用于显示一级菜单和二级菜单的jsp页面，一级菜单就会以竖排的方式自动的排列到屏幕的左侧。那么我们要想美化这种菜单呢？没关系，我们可以很容易的找到这个文件。
vkH._$L9[�S5c\f打开skin目录，你会发现有这样一个文件：LayeredContainer.jsp不错，就是它，它首先初始化一个表格：'V{BiY MFC

-W G%@"P
}q["hqQ该表格左侧就是三级菜单（您如果再 Default.jsp中不再调用PageBar的话，这就是二级菜单；如果您链一级菜单PlaceBar都不调用了的话，她就是一级菜单了）。右边呢，则是整个Portal系统得Body部分，显示了所有的portlet。不晓得IBM为什么要这样安排，似乎有点不合理。不过，确实是在这里修改的，可能是把它看作一个容器了吧！在左侧的表格部分，您可以向编辑普通的网页一样，只要您稍微有些美工知识，就可以随心所欲的制作出个性化的左侧管理菜单了。
y        b@M
H+e%yIportal爱好者5.7        合理使用CSS样式表
U/e`?&w9HT)n([portal爱好者
&v2y/~
a!a7sz�O
,[r        zO�lK8uoy3I6B.Rportal爱好者看上面的效果，是不是非常漂亮？
%{d!X!p8Qwww.portalfan.com其实这很简单，看LayeredContainer.jsp这个文件，下面是他的表格，稍微加一些CSS，就能实现这种效果了。比如皮肤右侧漂亮的弧线，其实只要这么简单的一句话就OK了：portal爱好者-v        j!Jt+I8G
portal爱好者Nz        sxB.q
     我们再来看看某电力公司的首页，这也是皮肤开发结合比较好的例子：
G|2XH#O:IVy.CSN1t0@RT1N&CCl
当然，这需要素质比较高的美工配合，也需要工程师在长期的开发中仔细琢磨。再次祝您在Portal开发中信手拈来、出神入化！portal爱好者KV.s~#b,b%us
5.8         主题与皮肤的安装portal爱好者3IhQ:fU�[
假设我们现在已经开发出一套主题，如何将这套主题部署到我们的门户系统？下面是详细的方法。
U(eYq
G%oI#l(t.mwww.portalfan.comwww.portalfan.come\(ue*glq+j"C
u8l9|df"f0YZ9c
                 
:t+K/N @
yu4ex
*p8T-~a}'~
C
KF
h        UV_V+q U!Tportal爱好者
&`W3^
wv        c~        dE1pportal爱好者5.9        主题与皮肤开发的调试方式

K)@z6e)zc|1PA7vwww.portalfan.com调试主题与皮肤一般采用两种方法，一是修改reload以便快速自动装载的方法，另一种是复制并添加主题/皮肤法：
3Bc
t;E1E6f
I
c(jPwww.portalfan.com5.9.1        自动装载法
F.d9{n/b
ufy我们知道，portal系统的主题一切都是从 default.jsp聚焦的，在通常的应用服务器上都有一个reload开关，用以控制服务器是否自动更新，ibm websphere portal也不例外。如果我们打开这个开关（这个开关您可以打开was,在管理控制台里面设定，完了还有重启一下机器），并设定了reload的时间，那么每个一个时间段，系统会自动读取主题与皮肤文件。换言之，只有我们把这个时间差设的足够小，就能立刻观察到我们的修改结果。（在这里要注意一种情况：就是既然是从default.jsp开始聚焦，那么，如果您修改了由default.jsp调用的别的文件比如说BeginPage.jsp，而单单没有修改default.jsp的话，系统会默认您没有做任何修改，所以也就没有任何改动了）同时我也想声明一点，这种做法带来的系统开销特别大，只可是用于开发环境，在生产环境中是万万不可的！
"t@Y9X\-Zrportal爱好者5.9.2        复制目录法portal爱好者7`*R({ ^
W
如果您对某一主题做了部分修改，可以复制一下这个文件夹并换个名字，然后添加这个主题到系统并配置给相应的页面。第一次安装的新主题，当然后重新编译了。看得出来这种方法比较不方便，只适用于特殊情况。