`
java_frog
  • 浏览: 254705 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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|a g;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的主题与皮肤开发:~1dR
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*`gMIb5.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#U qCMvB4HM
YE7Z]d5tp:O
                 图:Portal6.0开发一套主题需要调用的页面清单.E%Jm5]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爱好者sFFNo
c!U6Q!O/A#np
PageEnd.jsp用来显示页面生成以后的东西。例如公司版权信息等。9?z,COWB@.A        p

G1[vgmc7N!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

iMU v\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>');Zvjpd%K�qbI
    document.write('</object>');www.portalfan.com1a2c,xk Td]9C9zw
}
:Ud&rJEWB)R kportal爱好者
9I$\uU qqwww.portalfan.com然后在需要插入Flash的地方插入以下代码:@e
^Ic
<tr>0CD        {"tkL9P.|9q^
    <td align="center" valign="middle">
~`8N HSwww.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(ZX,r4]
菜单的左右协调:如果您一共定义了十几个一级菜单,而一栏只能显示8个,剩下的菜单怎么办?我们在这里放置了两个三角形的小图标,如果右边还有更多的菜单,小图标会自动出现,当您点击时,就会显示出剩余的菜单。  具体的代码是通用的,这里不再赘述。我们需要强调的是:菜单条在这里支划分为两种情况:一是选中的情况下,一是为选中的情况下,即:sQ:D NM!IO$Q
     
'F1C(h4j$osI@y8J例如:portal爱好者x"n*^&I;t$QG*d$K

1K-x^m}n
"d V`!])]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这段代码用来显示“新建页面”的管理标签,通过电机这个标签,您可以为当前页面创建一个子页面。同理,您可以个性化“编辑页面”和“分配页面权限”,当然,您也可以之间隐藏掉这个入口。^1y q'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
X Hd
<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         拒绝从系统自带的登录界面%a Jz]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
x9jts5\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&WEw有些用户不喜欢portlet有着太复杂的操作界面,要求去掉“最大化”、“最小化”、“还原”等功能,当然,也就不显示了。其实这非常容易,请再打开我们的表格,看这么一段代码:PH+r5epefC
        www.portalfan.coma_ U$w/tk
这段代码是用来显示“最小化”按钮,不用说,直接去掉就行了!而且,您可以对此做任何编辑,包括添加什么显示内容,甚至添加什么新的事件等等。同样的道理,我们可以相同的来操作“最大化”、“还原”两个图标。
A~#F9}5l*J
d)TA5.6.3         个性化左侧菜单portal爱好者T ZHu"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(eYqG%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
Ic(jPwww.portalfan.com5.9.1        自动装载法
F.d9{n/bu fy我们知道,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
如果您对某一主题做了部分修改,可以复制一下这个文件夹并换个名字,然后添加这个主题到系统并配置给相应的页面。第一次安装的新主题,当然后重新编译了。看得出来这种方法比较不方便,只适用于特殊情况。
分享到:
评论

相关推荐

    IBM WebSphere Portal主题与皮肤开发教程

    ### IBM WebSphere Portal主题与皮肤开发教程 #### 第1章 主题与皮肤开发 ##### 1.1 入门:Portal的主题与皮肤开发 要理解如何开发IBM WebSphere Portal的主题,首先需要掌握Portal的显示流程。IBM WebSphere ...

    IBM WebSphere Portal

    ### IBM WebSphere Portal 主题与皮肤开发全解析 #### 一、初级入门:理解Portal的主题与皮肤 在探讨IBM WebSphere Portal的主题与皮肤开发之前,我们先要明晰这两个概念的基本含义。主题(Theme)和皮肤(Skin)...

    websphere portal 6主题与皮肤开发相关资料

    "IBM Websphere Portal 主题与皮肤开发.doc"可能包含全面的主题和皮肤开发过程,包括如何创建、配置、测试和部署。此文档可能详细解释了WebSphere Portal提供的工具和技术,如使用XML布局文件定义页面结构,或者使用...

    IBM Websphere Portal Primer

    The dictionary defines a portal as a grand or imposing door or entrance; hence, that picture on the cover. In this book, you will learn why the word portal has become a major buzzword in the world of ...

    ibm websphere portal 学习资料

    IBM WebSphere Portal 提供了这种能力,并且支持多设备、多渠道的访问,使企业能够更有效地与员工、客户和合作伙伴进行交互。 IBM WebSphere Portal 的主要组件包括: 1. **Portal Server**:这是门户的核心,负责...

    IBM WebSphere Portal门户开发笔记01

    【IBM WebSphere Portal 门户开发笔记】 WebSphere Portal 是 IBM 提供的一款强大的企业级门户平台,用于构建和管理复杂的Web应用程序。这篇笔记涵盖了从搜索功能、页面导航到授权与用户管理等多个方面,深入探讨了...

    ibm portal 主题皮肤开发手册

    为了更好地理解 IBM WebSphere Portal 的主题开发过程,首先需要了解其显示流程及其关键组件: - **Default.jsp**:这是门户页面的起点,位于 `wp_root\app\wps.ear\wps.war\themes\html` 目录下。此 JSP 包含其他...

    websphere portal v6.0 主题和皮肤的开发

    在IBM Websphere Portal V6.0中,主题和皮肤是构建用户界面的关键元素,它们决定了门户的外观和交互体验。本教程将深入探讨主题和皮肤的开发,重点关注间距调整和拖动功能。 首先,我们要理解主题和皮肤的区别。...

    IBM WebSphere Portal 解决方案

    IBM WebSphere Portal 解决方案

    IBM WebSphere Portal Express配置文档

    ### IBM WebSphere Portal Express配置知识点 #### 一、概述 IBM WebSphere Portal Express是一款功能强大的企业门户解决方案,它能够帮助组织构建高度个性化且易于管理的门户站点。通过整合各种业务应用和服务,...

    IBM WebSphere Portal8主题开发详细教程

    IBM WebSphere Portal 8 主题开发涉及一系列专业知识和操作技巧,通过本教程可学习如何创建自定义主题,并以此来定制门户页面的外观和风格。以下知识点详细阐述了主题开发的各个步骤和概念: 1. 主题概念 IBM ...

    websphere portal 7 主题开发

    【WebSphere Portal 7 主题开发详解】 在WebSphere Portal V7中,为了实现自定义的用户界面体验,开发者需要创建自己的主题。WebSphere Portal 7 提供了两种内置主题,但为了满足特定需求,我们可以基于PageBuilder...

    IBM WebSphere Portal 6.0安装手册

    ### IBM WebSphere Portal 6.0安装手册知识点详解 #### 一、概述 IBM WebSphere Portal 6.0是一款功能强大的企业级门户解决方案,能够帮助组织整合应用和服务,为用户提供统一的信息访问入口。本手册旨在指导用户...

    IBM Websphere Portal 8.5 Cluster 创建 02

    IBM WebSphere Portal 8.5是一个企业级的Web内容管理和协作平台,它能够为用户提供个性化的Web体验和访问企业信息的途径。当涉及到大规模部署时,通常会采用Cluster(集群)的方式来保证服务的高可用性和负载均衡。...

    IBM演示WebSpherePortal教程

    IBM演示WebSpherePortal教程

    Linux环境安装IBM WebSphere Portal

    在Linux环境下安装IBM WebSphere Portal是一项复杂而关键的任务,它涉及到服务器配置、软件依赖和环境设置等多个方面。WebSphere Portal是IBM提供的一款企业级的门户平台,它允许组织创建、管理和部署具有高度交互性...

    自己整理的websphere portal主题皮肤开发资料

    【Websphere Portal主题皮肤开发详解】 在Websphere Portal V6.0中,开发主题皮肤涉及到对门户页面各个组成部分的定制,以实现独特的用户界面和交互体验。以下是对各个关键部分的详细解释: 1. **标题(Title)**...

Global site tag (gtag.js) - Google Analytics