- 浏览: 243695 次
- 性别:
- 来自: 北京
最新评论
-
java_frog:
我之前resteasy用的3.6.0,周末过来降成3.1.0, ...
在本地环境ok,预发环境就老报这个,版本应该也没问题,有碰到过的人吗 -
yugouai:
另外还有可能是拿不到环境变量的,所以crontab的shell ...
linux下crontab定时任务不执行 -
wuchsh2013:
最好不要写在脚本里面,在执行脚本前设置权限。
linux下crontab定时任务不执行 -
原水小子:
给力哈~~~~~~~~~~~~~~
正则表达式限制输入框只能输入数字 -
qizhijun:
请问你找到原因了吗?我也遇到同样的问题。头疼好几天了。
java调用FlashPaper时printing failed for an unknown reason错误
所谓主题与皮肤,主要指门户系统的界面风格与显示方式。在企业门户项目的实施中,主题与皮肤的开发是重中之重。因为作为所有企业内外信息、应用的统一入口,可谓是一个企业的脸面。另一方面讲,在一个企业内,没有任何系统比他们的门户系统有更多的员工使用,在项目实践经验中我也发现,花在主题与皮肤开发上面的时间往往占很大的比重,对美工的要求也比较严格。所以本书把这一部分内容作为第一章讨论。
8{V4_v@Y
M!i l-NPortal 的主题与皮肤开发,说穿了还是普通jsp的开发,只不过大量使用了ibm自带的标签库,而且页面之间的调用非常复杂,初级开发者甚至找不到页面元素所在的文件,所以开发起来显得比较麻烦。另外,IBM WebSphere Portal6.0较之以前的版本又做了较大的改动,或者说随着新版本的推出,我们将面对不断地技术更新与挑战。但是,如果您深刻洞悉了与主题、皮肤相关的这几个文件之间的调用关系,使用起来就能运用自如了。)^uE;z6Y{$Z
本章主要是对5.1的介绍,附加了对6.0的延伸,尤其是变化比较大的地方。我们将从一下部分来讨论:+f?;}3H#z
2FB[r
b hBportal爱好者1、初级入门:什么是Portal的主题与皮肤开发?portal爱好者e6|ag;en#LK
2、中级开发:如何更换Portal系统的logo图标;
SEu
C�l3、中级进阶:开发个性化的主题;%[UX:eR(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#UqCMvB4HM
YE7Z]d5tp:O
图:Portal6.0开发一套主题需要调用的页面清单.E%Jm5]FZ_,No
我们通常使用的是这几个:;d)dA5C3?8{4h)Oiz
CI[!_Q+nPU ff详细的开发内容下面将一一介绍。
noCl0T.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/IlnF
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爱好者
(deC6x0}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>');Zvjpd%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');
$QypU
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/uI^�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
"dV`!])]C
Q;z我们首选添加一张背景图片,然后左侧放一张前缀,中间打印该菜单条的名字,后面又放一张图片做后缀,这样整个菜单条看起来就非常漂亮了。
8M4f,KUbc
J:Zig{t接下来是显示工具栏的情况下: J\8Q?/?)E
wx6Z+YSFN7g%f
z这里的操作将使具有权限的用户通过点击这张图片,直接编辑相应的portal页面。不过据笔者的开发经验,大部分的用户会隐藏掉这个入口,以免引起管理上的混乱,具体的开发内容将在以后的文章中提及,这里将不再详细介绍。
FJ
W7EB8z最后的代码用来显示系统收藏夹:
)igi-kJ+P&n当您登录后,会发现在一级菜单的最右边多出一个“我的最爱”的东西,这是portal系统自带的收藏夹,您可以通过这个入口将自己喜欢的页面添加到您的收藏夹,然后您就可以通过点击这里直接进入到你收藏的页面了。9B,e�d9C7te7a `
#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*ww(uP2cwww.portalfan.com要开发自适应的主题就更简单了!请设定一个变量w,先写一个JavaScript,用来读取客户端的浏览器分辨率,如果是800的,则给变量赋值w= 800,反之如果是1024的,就给赋值为w=1024。这样Default.jsp初始化的表格宽度就以w来替代,对具体jsp的调用的单元格的长和宽都在原来的基础上乘以1或者乘以0.78。剩下的事,不用我说了吧!1nk;ie6?:\]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"vj4h9Q
PJ)xfA0o9l</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过期,修改用户的个人信息等,都可以通过这种方式封掉这个接口。 ^FE(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爱好者TZHu"U\,G
在项目实施中我发下这样一个有趣的现象:IBM产品的忠实用户,往往钟情于IBM系列产品的一贯风格。比如,某客户几年前实施的OA系统,使用的是“收件箱”、“发件箱”、“垃圾箱”等一系列菜单全部竖排在屏幕的左侧,那么,客户在实施Portal系统的时候,他就比较倾向于二级甚至以及菜单全在左侧竖排的情况。其实这个也很简单,只要我们不再调用原来用于显示一级菜单和二级菜单的jsp页面,一级菜单就会以竖排的方式自动的排列到屏幕的左侧。那么我们要想美化这种菜单呢?没关系,我们可以很容易的找到这个文件。
vkH._$L9[�S5c\f打开skin目录,你会发现有这样一个文件:LayeredContainer.jsp不错,就是它,它首先初始化一个表格:'V{BiY MFC
-WG%@"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/bufy我们知道,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
如果您对某一主题做了部分修改,可以复制一下这个文件夹并换个名字,然后添加这个主题到系统并配置给相应的页面。第一次安装的新主题,当然后重新编译了。看得出来这种方法比较不方便,只适用于特殊情况。
8{V4_v@Y
M!i l-NPortal 的主题与皮肤开发,说穿了还是普通jsp的开发,只不过大量使用了ibm自带的标签库,而且页面之间的调用非常复杂,初级开发者甚至找不到页面元素所在的文件,所以开发起来显得比较麻烦。另外,IBM WebSphere Portal6.0较之以前的版本又做了较大的改动,或者说随着新版本的推出,我们将面对不断地技术更新与挑战。但是,如果您深刻洞悉了与主题、皮肤相关的这几个文件之间的调用关系,使用起来就能运用自如了。)^uE;z6Y{$Z
本章主要是对5.1的介绍,附加了对6.0的延伸,尤其是变化比较大的地方。我们将从一下部分来讨论:+f?;}3H#z
2FB[r
b hBportal爱好者1、初级入门:什么是Portal的主题与皮肤开发?portal爱好者e6|ag;en#LK
2、中级开发:如何更换Portal系统的logo图标;
SEu
C�l3、中级进阶:开发个性化的主题;%[UX:eR(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#UqCMvB4HM
YE7Z]d5tp:O
图:Portal6.0开发一套主题需要调用的页面清单.E%Jm5]FZ_,No
我们通常使用的是这几个:;d)dA5C3?8{4h)Oiz
CI[!_Q+nPU ff详细的开发内容下面将一一介绍。
noCl0T.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/IlnF
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爱好者
(deC6x0}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>');Zvjpd%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');
$QypU
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/uI^�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
"dV`!])]C
Q;z我们首选添加一张背景图片,然后左侧放一张前缀,中间打印该菜单条的名字,后面又放一张图片做后缀,这样整个菜单条看起来就非常漂亮了。
8M4f,KUbc
J:Zig{t接下来是显示工具栏的情况下: J\8Q?/?)E
wx6Z+YSFN7g%f
z这里的操作将使具有权限的用户通过点击这张图片,直接编辑相应的portal页面。不过据笔者的开发经验,大部分的用户会隐藏掉这个入口,以免引起管理上的混乱,具体的开发内容将在以后的文章中提及,这里将不再详细介绍。
FJ
W7EB8z最后的代码用来显示系统收藏夹:
)igi-kJ+P&n当您登录后,会发现在一级菜单的最右边多出一个“我的最爱”的东西,这是portal系统自带的收藏夹,您可以通过这个入口将自己喜欢的页面添加到您的收藏夹,然后您就可以通过点击这里直接进入到你收藏的页面了。9B,e�d9C7te7a `
#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*ww(uP2cwww.portalfan.com要开发自适应的主题就更简单了!请设定一个变量w,先写一个JavaScript,用来读取客户端的浏览器分辨率,如果是800的,则给变量赋值w= 800,反之如果是1024的,就给赋值为w=1024。这样Default.jsp初始化的表格宽度就以w来替代,对具体jsp的调用的单元格的长和宽都在原来的基础上乘以1或者乘以0.78。剩下的事,不用我说了吧!1nk;ie6?:\]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"vj4h9Q
PJ)xfA0o9l</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过期,修改用户的个人信息等,都可以通过这种方式封掉这个接口。 ^FE(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爱好者TZHu"U\,G
在项目实施中我发下这样一个有趣的现象:IBM产品的忠实用户,往往钟情于IBM系列产品的一贯风格。比如,某客户几年前实施的OA系统,使用的是“收件箱”、“发件箱”、“垃圾箱”等一系列菜单全部竖排在屏幕的左侧,那么,客户在实施Portal系统的时候,他就比较倾向于二级甚至以及菜单全在左侧竖排的情况。其实这个也很简单,只要我们不再调用原来用于显示一级菜单和二级菜单的jsp页面,一级菜单就会以竖排的方式自动的排列到屏幕的左侧。那么我们要想美化这种菜单呢?没关系,我们可以很容易的找到这个文件。
vkH._$L9[�S5c\f打开skin目录,你会发现有这样一个文件:LayeredContainer.jsp不错,就是它,它首先初始化一个表格:'V{BiY MFC
-WG%@"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/bufy我们知道,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
如果您对某一主题做了部分修改,可以复制一下这个文件夹并换个名字,然后添加这个主题到系统并配置给相应的页面。第一次安装的新主题,当然后重新编译了。看得出来这种方法比较不方便,只适用于特殊情况。
发表评论
-
生成AES密钥,网摘自留
2015-01-26 15:46 1067import java.security.NoSu ... -
转 BeanUtils.copyProperties与PropertyUtils.copyProperties用法及区别
2014-11-14 20:37 661BeanUtils.copyProperties与Proper ... -
tar命令--摘
2014-04-18 11:21 513tar 解压缩命令 tar -c: ... -
spring为ApplicationContext提供有三种实现(举例) (转)
2013-08-01 08:42 690spring为ApplicationContext提供的3种实 ... -
转:F5 APACHE WEBLOGIC取用户真实IP的问题
2012-10-23 08:32 1557应用环境如下: F5负载均衡16台apache,然后转到后台 ... -
查看端口被哪程序占用
2011-04-22 16:39 881怎么查看端口占用情况? 开始--运行--cmd ... -
转:struts2上传文件
2010-07-12 14:34 1287上传文件是很多Web程序都具有的功能。Struts2本身没有提 ... -
转:Spring中任务调度cronExpression配置说明
2010-06-25 12:56 673cronExpression配置说明 字段 允许值 ... -
flv 播放器
2009-10-11 15:36 1402flv 播放器 <script type="t ... -
domino介绍
2009-08-10 11:53 2139.前言 DOMINO是一个以电子邮件为基础发展起来的标准群 ... -
javadoc,在 Java 的注释上做文章-(转)
2009-07-21 18:58 738前言 一. Java 文档 ... -
转---MySQL导出导入数据库命令
2009-07-21 13:48 11521.mysql导出整个数据库 mysqldump ... -
myeclipse7.5注册码
2009-07-20 16:43 5341前几天装了一个myeclipse7.5,每天弹要注册,于是在网 ... -
IE与FireFox的js和css
2009-07-01 10:56 917png透明 AlphaImageLoader filter:p ... -
wpf和wdf的区别
2009-06-25 17:46 1981wpf&&wdf是两 ... -
top、clientTop、scrollTop、offsetTop
2009-06-17 20:49 838<html> <head> < ... -
marquee
2009-06-15 19:09 1056功能: 使文字或者图片 ... -
marquee参数详解
2009-06-15 19:08 19462008-04-25 09:51(文字滚动)参数详解 文字 ... -
onmousemove、onmouseover、 onmouseup及onclick的区别
2009-06-15 15:28 2000时间上 onmousemove 事件触发后,再触发 onmou ... -
eclipse快捷键
2009-06-03 16:18 744Eclipse 常用快捷键 Eclipse ...
相关推荐
郑老师之前发布的portal主题与皮肤开发的word文档,和大家一起分享
1.1 入门:Portal 的主题与皮肤开发: .................................................................................................. 3 1.1.1 Default.jsp................................................
ibm websphere portal 主题与皮肤开发
九、IBM WEBSPHERE PORTAL 主题与皮肤开发 153 一、初级入门:Portal的主题与皮肤开发: 153 二、中级开发:如何更换Portal系统的logo图标; 155 三、中级进阶:开发个性化的Portal主题 157 四、高级探索:开发...
IBM websphere portal V7 主题皮肤开发文档中文版
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 主题与皮肤开发 portal间距,
IBM WebSphere Portal 解决方案
ibm websphere portal 学习资料让你对portal 有个入门的了解.写边有一些学习portal 的站点.
IBM WebSphere Portal 6.0 安装手册,繁体中文
IBM演示WebSpherePortal教程
关于在Linux环境安装IBM WebSphere Portal详细描述
IBM WebSphere Portal Express配置文档
一步步带领你学会开发自定义的IBM WebSphere portal8主题,内部资料,仅供个人学习使用。
IBM Websphere Portal 8.5 Cluster 创建,集群副节点创建部分,文章最后的HttpServer的配置是有问题的,不用参照。
IBM WebSphere Portal安全性配置详细步骤(有图说明)
IBM WebSphere Portal 介绍,IBM门户解决方案,业务状况分析\门户解决方案
WebSphere Portal 是一个框架——包括运行时服务器、服务、工具和许多其他特性——您可以使用这些特性将企业集成到单个称为门户 的可自定义界面中。企业门户将各种来源的组件、应用程序、流程和内容组合到统一的表示...
关于IBM WebSphere Portal的入门资料