当前位置: 代码迷 >> Web前端 >> 【转】IBM Websphere Portal 正题与皮肤开发(3)
  详细解决方案

【转】IBM Websphere Portal 正题与皮肤开发(3)

热度:93   发布时间:2012-07-15 20:20:06.0
【转】IBM Websphere Portal 主题与皮肤开发(3)
三、中级进阶:开发个性化的Portal主题
1、理解、开发各级菜单;
Default.jsp调用PlaceBarInclude.jsp文件来显示一级菜单,如果一级菜单下面还有二级菜单,那么当您点击该一级菜单是,Default将调用PageBarInclude.jsp来显示二级菜单。当然,您也可以不再调用该文件,那么系统将缺省调用Portlet的皮肤里面的LayerContainer.jsp文件,用来以三级菜单代替二级菜单,这便是个性化的左侧管理菜单。

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

l         首先由这样一个标签:

<wps:if navigationAvailable="yes" screen="Home,LoggedIn,LoggedOut">

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

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

      <wps:if nodeInSelectionPath="yes">

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

</wps:if>

<wps:if nodeInSelectionPath="no">

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

</wps:if>

例如:

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

      <img  border="0" src=http://www.abcdown.net/InfoView/<%= wpsBaseURL %>/images/b01.jpg alt="">

<a href='<%=wpsNavModelUtil.createSelectionChangeURL(wpsNavNode)%>' class="wpsSelectedPlaceLink">

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

                   </a>

<img  border="0" src=http://www.abcdown.net/InfoView/<%= wpsBaseURL %>/images/b01.jpg alt="">

</td>

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

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

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

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

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





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

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

        <font color="#FF0000" size="5"><strong>

               <wps:if loggedIn="yes" screen="Home,LoggedIn">

                     <wps:text key="welcome" bundle="nls.engine">

                           <wps:textParam><wps:user attribute="givenName"/></wps:textParam>

                           <wps:textParam><wps:user attribute="familyName"/></wps:textParam>

                     </wps:text>

                </wps:if>

         </font>

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

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

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

                         <a href="<% wpsURL.write(out); %>" class="wpsLinkBarLink">

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

                            </a>

                 </td>

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



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

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

   <table>

<tr>

<td width=”1024”>

具体的调用!

</td>

         </tr>

    </table>



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

        <table>

<tr>

<td>&nbsp;</td>

<td width=”800” align=”center” valign=”top”>

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

</td>

<td>&nbsp;</td>

             </tr>

         </table>

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

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


  相关解决方案