IBM Websphere Portal 主题与皮肤开发

IBM Portal 开发系列讲座:

 

IBM Websphere Portal 主题与皮肤开发

 

北京东华合创数码科技公司 郑文平

 

内容简介:

Portal的主题与皮肤开发说穿了还是普通jsp的开发,只不过大量使用了ibm自带的标签库,开发起来显得比较麻烦。但是,如果您深刻洞悉了与主题、皮肤相关的这几个文件之间的调用关系,使用起来就能运用自如了。这里是作者从大量的项目经验中总结出的几点体会,贡献出来,希望与大大家分享。

在这篇文章里我想从以下几个方面来介绍websphere portal的主题与皮肤开发:

1、初级入门:什么是Portal的主题与皮肤开发?

2、中级开发:如何更换Portal系统的logo图标;

3、中级进阶:开发个性化的主题;

4、高级探索:开发自适应分辨率的主题与皮肤;

5、高手过招:更改Portal系统的登录方式;

6、Portal的皮肤开发简介。

 

一、初级入门:Portal的主题与皮肤开发:

 

要了解如何开发portal的主题,首先要了解websphere portal的显示流程。IBM WebSphere Portal 使用不同的 Java Server PageJSP、级联样式表(Cascading Style SheetCSS)和图像来显示门户页面。它使用位于X:/WebSphere/AppServer/installedApps/YourComputerName /wps.ear/wps.war 目录下 themesskins screens 目录中的 JSP 来构造门户页面。这些目录中的每一个都包含 htmlwml chtml 子目录,WebSphere Portal 将它们用于服务不同客户机,例如桌面浏览器和移动设备。我们这里以通常使用的html方式下的主题开发为例,介绍Portal的主题开发。

 

用于显示门户页面的 JSP 流程:本文描述了缺省主题定义的 Default.jspHead.jsp AdminLinkBarInclude.jsp ToolBarInclude.jspPlaceBarInclude.jspPageBarInclude.js以及延伸出来的PageBeginInclude.jsp PageEndInclude.jsp的内容和流程。下面简单介绍这几个jsp。注意:这部分内容属于最初级的开发,您要弄懂这些介绍,必须具备一定的jsp基础、css基础和标签库的基础,最好做过相应的开发。

1Default.jsp

所有屏幕聚集都从 Default.jsp 开始。用于缺省主题的 Default.jsp 位于wp_root/app/wps.ear/wps.war/themes/html。这个 JSP 包含其它用于显示标题、公司徽标、工具栏的 JSP 以及用于往可用位置及页面植入内容的 JSP。在 Default.jsp 的末尾处,screenRender JSP 标记选择被请求的屏幕(例如 login forgotpassword)。以下介绍的jsp是以这样的顺序先后调用的。

2Head.jsp

Head.jsp 生成标题并嵌入指向样式表文件的链接。它还定义了支持 BIDI(双向)文本所需的变量。这个 JSP 的内容将在这里描述。您也可以通过在这里定死portal网站的标题,这比IBM公布的以标签的方式写来的容易,也更易使用。如果您开发了多套主题,而且这几套主题的page title如果也一样的话(除了虚拟门户,一般是这样子),您可以把这几个文件放到themes/html的根目录下,其他主题的default.jsp都来调用这个文件就可以了。

 

3AdminLinkBarInclude.jsp

        AdminLinkBarInclude.jsp主要用来显示了“新建页面”、“编辑页面”、“分配页面许可权”三个标签

4ToolBarInclude.jsp

ToolBarInclude.jsp 显示欢迎消息以及为用户提供的链接工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如,登录的用户看到“我的门户网站”、“管理”(尽管理员可见)、“编辑我的‘概要文件’”、“注销”等之类的链接;而注销的用户看到 “忘记密码”、“登录”、“帮助” 之类的链接。

5PlaceBarInclude.jsp

PlaceBarInclude.jsp用来显示一级菜单,即“首页”、“文档管理器”、“公司概况”、“业务简介”等,属于最高层的目录,您在任何一个一级菜单上都可以通过“新建页面”来创建二级菜单,你创建的内容将被存储到数据库(原始使用的是cloundscape),您也可以把它倒入到db2oracle等任何一个portal所支持的数据库中,此内容将在我的下一篇文章中详细论述,这里不再一一提及。

 

6PageBarInclude.jsp

用来显示二级菜单,当您点击一级菜单中的任一标签时,系统会调用该文件,并检索出该菜单的所有子菜单,默认显示在PlaceBar的下面。

 

二、中级开发:如何更换Portal系统的logo图标;

1Default.jsp的工作原理:

 

 我们看这个例子,Default.jsp大致上将Portal系统的默认页面划分为这样一个表格:

 

-1 Default.jsp总体调用效果

 

PageBegin: 用来显示页面生成以前的提示文字,例如:Portal系统正在加载,请稍候……

Portal系统主体部分:用来显示详细的Portal页面;

PageEnd.jsp用来显示页面生成以后的东西。例如公司版权信息等。

 

-2Portal系统正文部分的调用关系:

徽标部分,在default中调用

我的门户菜单,在ToolBar中调用

个性化菜单,在AdminLink中调用

PortalBody部分,用来显示各个portlet以及高层次的三级菜单。

页面的结尾,用来显示公司版权信息等。

  

 

2、换一个logo

  打开Default.jsp,您会开到一个表格,在表格的左上角,有这样一段语句,用来显示默认主题的Logo徽标:

 

  width="100%" valign="top" align="<%=bidiAlignLeft%>" nowrap>

         <wps:text key="title" bundle="nls.engine">Portal Title</wps:text>

             <wps:text key="link.skiptocontent" bundle="nls.engine"/>

     

   上面已经介绍过,整个Portal系统的页面由Default.jsp分割成一个大的表格,用来显示或者调用不同的jsp。我们在这个大表格的最左上角化出一个,用来显示公司的徽标。这段语句就是在这个单元格内插入一个图片,叫做Logo.gif

明白了吗?您可以将这个文件名改称您想插入的任意一张图片的名字,只要将这张图片放到.war/images/目录下就可以了。这里支持几乎所有的图片格式,您可以任意摆放,大小、位置等都有您说了算。到这里,您可能已经想到了:那么,我养插入一个Flash呢?别着急,下面将会提到这点。

3、用flashlogo

      Flash作徽标是个不错的注意,它可以使您的门户网站看起来更丰富、生动一些。但是,Flash,也就是.swf格式的文件,是不能直接通过这种方式来插入的,因为我们的浏览器并不能识别它。要插入一个动画,必须位置制定相应的驱动。您可以用以下这段代码,为之生成:

 

  border="0" cellpadding="0" cellspacing="0" height="81" valign="middle" align="left">

  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"  width="510" height="81">

                 %>/images/firstpagelogo.swf">

               

                      pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  type="application/x-shockwave-flash" width="510" height="81">

                    

 

这里在插入了一个名字为firstpagelogo.swf的影片做公司徽标,他的大小是 510*81,请将这个影片文件放在.war/images目录下,重启服务器,看看您的首页上,是不是已经出现了?

 

三、中级进阶:开发个性化的Portal主题

1、理解、开发各级菜单;

Default.jsp调用PlaceBarInclude.jsp文件来显示一级菜单,如果一级菜单下面还有二级菜单,那么当您点击该一级菜单是,Default将调用PageBarInclude.jsp来显示二级菜单。当然,您也可以不再调用该文件,那么系统将缺省调用Portlet的皮肤里面的LayerContainer.jsp文件,用来以三级菜单代替二级菜单,这便是个性化的左侧管理菜单。

打开这两个文件,您会发现里面的内容非常简单。请看下面的清单:

l         首先由这样一个标签:

        意思是如果菜单时可用的,那么当您登录进去以后将执行如下操作。使用这句代码,必须引入Portal的标签库,具体的过程这里不再赘述。接下来绘制了一个表格,用来显示里面的操作。表格内的内容,下面将作介绍。

l         菜单的左右协调:如果您一共定义了十几个一级菜单,而一栏只能显示8个,剩下的菜单怎么办?我们在这里放置了两个三角形的小图标,如果右边还有更多的菜单,小图标会自动出现,当您点击时,就会显示出剩余的菜单。  具体的代码是通用的,这里不再赘述。我们需要强调的是:菜单条在这里支划分为两种情况:一是选中的情况下,一是为选中的情况下,即:

     

       

这里用来显示选中该菜单的情况下该菜单条的显示方式。

       

这里用来显示未选中该菜单的情况下该菜单条的显示方式。

例如:

  Background="<%= wpsBaseURL %>/images/title_back01.jpg" height="30">                                                      

        border="0" src='<%= wpsBaseURL %>/images/b01.jpg' alt="">

<%= com.ibm.wps.model.LocaleHelper.getTitle((com.ibm.portal.Localized)wpsNavNode, com.ibm.wps.engine.RunData.from( pageContext.getRequest()).getLocale())%>

                  

  border="0" src='<%= wpsBaseURL %>/images/b01.jpg' alt="">

 我们首选添加一张背景图片,然后左侧放一张前缀,中间打印该菜单条的名字,后面又放一张图片做后缀,这样整个菜单条看起来就非常漂亮了。

l         接下来是显示工具栏的情况下:

这里的操作将使具有权限的用户通过点击这张图片,直接编辑相应的portal页面。不过据笔者的开发经验,大部分的用户会隐藏掉这个入口,以免引起管理上的混乱,具体的开发内容将在以后的文章中提及,智利将不再详细介绍。

l         最后的代码用来显示系统收藏夹:

当您登录后,会发现在一级菜单的最右边多出一个“我的最爱”的东西,这是portal系统自带的收藏夹,您可以通过这个入口将自己喜欢的页面添加到您的收藏夹,然后您就可以通过点击这里直接进入到你收藏的页面了。

 

 

2、开发个性化工具栏

      要获得个性化的工具栏,您可以修改ToolBarInclude.jsp这个文件。这个文件提供了Portal管理员进到管理界面的入口。

在这里你可以编辑自己的“概要文件”,就个人的用户信息,修改自己的姓名、密码等。更深一层的话,您可以在这里显示欢迎信息,例如张三同志登录后,会打印出:“欢迎您,张三同志!”的语句。要实现这个功能实际上非常简单,请看:

       

               

                     

                           

                           

                     

                

         

当然,您需要引入相应的标签库,具体的应用属于普通的jsp开发,您可以参照平常的开发经验去实现。

3、开发个性化的管理标签

     所谓的个性化指的是,您可以删掉管理标签的一个或者多个,也可以根据喜好添加自己需要的标签。这需要您来修改AdminLinkBarInclude.jsp文件。例如:

  valign="middle" align="<%=bidiAlignRight%>" nowrap>

                        

                                 

                           

                

    这段代码用来显示“新建页面”的管理标签,通过电机这个标签,您可以为当前页面创建一个子页面。同理,您可以个性化“编辑页面”和“分配页面权限”,当然,您也可以之间隐藏掉这个入口。

 

四、高级探索:开发自适应分辨率的主题与皮肤

1、开发1024下的主题

     刚安装完Portal系统后,刚才介绍的几个jsp会在默认的.war/theme目录下,您可以新建一个文件夹,将这几个jsp文件拷贝至该目录下,然后在管理界面下添加该主题。该主题默认下就是1024的。您可以开发多套主题,注意:请充分利用一些公共的资源,例如这些主题可能使用的是同样的版权信息,这样,您可以将PageEnd.jsp页面放到themes/entention下,然后让所有的主题调用这个文件。

当然,为了保险起见,您可以在Default.jsp最外层的表格中这样写死:

  

        

   

具体的调用!

 

2、开发800分辨率下的主题

     开发800下的主题说穿了非常简单,您可以会出这么一个表格:

       

            

        

 

   Default.jsp中最外层的table里面所有的内容拷贝到这里!

 

      将这个表格覆盖到原来Default.jsp文件中最外层的表格就可以了。注意:在default.jsp中调用的各个文件中,可能都有表格存在,如果这些表格中有的宽度超过了800,或者两个并列一行的表格宽度超过了800,请适当调小。

3、开发1024800下自适应得主题

     要开发自适应的主题就更简单了!请设定一个变量w,先写一个JavaScript,用来读取客户端的浏览器分辨率,如果是800的,则给给变量赋值w=800,反之如果是1024的,就给赋值为w=1024。剩下的事,不用我说了吧!

五、高手过招:更改Portal系统的登录方式;

 1、从首页上登录

      您需要用wsad开发一个portlet,并在jsp中写一个代理,将用户凭证提交给系统自带的认证action中。这个portlet可以这样来设计:

       //如果没有登陆的情况下,提醒用户输入它的用户名与密码:

               

    

     用户按下“登录“后,将用户名和密码提交到系统自带的action中:

    //在这里将用户名和密码付给系统自带的登录框。

  //如果已经登陆了,可以显示用户的常用信息,比如,读取用户的Lotus邮箱,然后显示他哟年级封邮件等:

  
         

 甚至,您可以利用url-mapping自定义几个页面,从首页上直接进入到您的业务系统(如上)。

  这样的话,您甚至可以封死portal页面右上角自带的“登录”标签,也许您会问我又想用系统自带的页面呢?没关系,您也可以在浏览器中输入:http://machinename:9081/wps/myportal,当然,干脆您直接输入一个错误的用户名和密码,系统自然后带您会带系统自带的页面了。

 2、拒绝从系统自带的登录界面

      但是在上面这种情况下,可能会出现这种情况:当用户名或者密码错误的时候,系统会返回到系统自带的登录框上面,为避免这种情况,您可以封死这个开关。这个非常简单,我在这里顺便一提:

      系统自带的登录页面是.war/screen/html下的login.jsp文件,您可以删掉该文件里的所有内容,然后加入这么一句:

 呵呵,是不是带您又回到了首页呢?是的,确实如您所想,这样就封死了系统自带的登录页面。如果您的用户名和者密码错误,或者您通过myportal直接调用,都不起作用了吧!系统会带您回到首页的登录界面,请重新输入!  

 3、遗留问题:

   在实际开发中,您也许会发现还有其他一些意想不到的问题,是的,这个地方确实有许多值得注意的地方,也许只有您亲自来试过了,才知道其中的玄机。我也希望在开发中大家相互交流,把发现的好地方贡献出来,大家一起分享。好吧,祝您成功!

 

六、Portal的皮肤开发简介

1、该改portlet的标题背景图片

     非常简单,请找到.war/skin/html下,发现系统已经呆了好几套皮肤,打开其中任意一个文件夹,您都能发现这个文件:

Control.jsp。这里面也是一个table。该table有两行:第一行用来显示portlet的标题,后面是最大化、最小化、编辑按钮;第二行是portletbody,用来显示portlet的内容。要换掉portlet标题的背景图片其实非常简单:在第一个里面加上这么一句代码:

   

    一切OK

2、隐藏掉“最大化”、“最小化”、“还原”等图标。

                                    

                        

       这段代码是用来显示“最小化”按钮,不用说,直接去掉就行了!同理,您可以对此做任何编辑。

3、高级:加入个性化的左侧管理菜单

skin目录下看到这个文件了吗?LayeredContainer.jsp不错,就是它,它是一个表格:

该表格左侧就是三级菜单(您如果再Default.jsp中部调用PageBar的话,这就是二级菜单了)。右边呢,则是整个Portal系统得Body部分,显示了所有的portlet。不晓得IBM为什么要这样安排,似乎有点不合理。不过,趋势是在这里修改的,可能是把它看作一个容器了吧!在左侧的表格部分,您可以向编辑普通的网页一样,只要您稍微有些美工知识,就可以随心所欲的制作出个性化的管理菜单了。

4、高级:与CSS结合,开发出漂亮的效果。

 


   看上面的效果,是不是非常飘亮?其实这很简单,看
LayeredContainer.jsp这个文件,下面是他的表格,稍微加一些CSS,就能实现这种效果了。如:

width="100%" >

当然,这需要素质比较高的美工配合,也需要工程师在长期的开发中仔细琢磨。再次祝您在Portal开发中信手拈来、出神入化!

 

参考资料:

1 Sukumar Konduru 顾问软件工程师 达拉斯,IBM Developer Technical Support Center 先生的论文:了解 WebSphere 门户网站如何显示门户页面 I 部分:描述 Default.jspHead.jsp ToolBarInclude.jsp

        2IBM系列红皮书。

        

致谢:

作者在开发及写作中得到了 赵建业 先生的大力帮助,IBM 公司李 女士、 王 女士, 曹 先生、 丁 先生、 陈 先生、 胡 先生的大力帮助,在此一并鸣谢。

 

作者简介:郑文平,北京东华合创数码科技公司软件工程师,Portal信息化专员,长期从事Portal(尤其是IBM Websphere Portal)开发,曾参与并引领了北京驰普企业门户、山东新汶矿务局远程调度系统、中国石化齐鲁公司综合数据平台、北京供电局等多个Portal项目的开发。

您可以通过 [email protected]或者[email protected]与作者取得联系。作者的msn是:[email protected]

你可能感兴趣的:(websphere,ibm,portlet,jsp,border,table)