JPA 与Websphere的兼容性问题解决方案

这几天一直在忙Portal v6的主题和外表的开发改善。相信用过Portal v5版都知道，V6相对于5在界面方面的最大的改进就是增加了用户对portlet布局的拖拽功能，但是这个功能IBM没有给出任何的说明和API接口，这也使我们在开发自己的主题和外表的时候对这一功能的完全使用增加了难度，只能一点点去分析IBM默认提供的主题，从中找出在自定义主题里使用此功能的方法。

     我们先介绍一下主题和外表开发的基本思路，然后先从IBM主题那里进行修改生成我们自己的基本主题和外表，最后说一下如何改造这个自定义主题和外表将IBM拖拽功能增加到我们自己的主题和外表上来。

     1.主题和外表的基本结构

这一块在InfoCenter中有基本说明，在这里我简单说明一下。
  主题路径                    profiles/wp_profile/installedApps/nodename/wps.ear/wps.war/themes/html/
  外表路径                   profiles/wp_profile/installedApps/nodename/wps.ear/wps.war/skins/html/
  主题JSP和JSPF

1.  default.jsp
   这个文件是主题的主文件，在这个文件中决定了整个布局，在这个文件中直接引用head.jspf，flyout.jspf，banner.jspf，topnav.jspf,sidenav.jspf,footer.jspf,所有jspf文件进行编辑要生效必须修改此文件并保存。
2. style.jsp
   1. 所有style开头的jspf都是在这个文件里调用的
3. head.jspf
   在这个文件中定义了所有头信息，包含JS，样式表引用等，另外还有选项板和上下文菜单的JS扩展。
4. banner.jspf
   所有banner_*.jspf文件在这里引用，这个也是可以修改的，我就是直接把这个文件改掉了：），当然增加了自己要的元素。在这里要说明一下，banner_crumbtrail.jspf文件是路径轨迹显示，banner_searchControl.jspf搜索控件显示，banner_toolbar.jspf包含增加portlet，人员搜索、帮助按钮及注销及登录按钮（我的拖拽改造也集中这个文件）
5. topnav.jspf
   显示顶部导航
6. sidenav.jspf
   显示侧边导航
7. footer.jspf
   显示页脚

外表JSP和JSPF

1. UnlayeredContainer-V.jsp
   布局列
2. UnlayeredContainer-H.jsp
   布局行
3. Control.jsp
   具体每一个portlet控制容器

主题和外表自定义
   在这里我要提醒一下，并不是从头开始自己写一套和IBM样的主题和外表文件（这样子做也可以，只要你有这个耐心和心境），最好是复制IBM目录，然后安装到成新主题进行修改（外表也一样），并且在测试的时候建立自己的测试页来试用这个主题和外表，不要把这些测试的主题和外表设在默认主题和外表

   default.jsp文件修改，在这里可以修改default.jsp文件的布局，建立自己的布局格式，具体可以参照图片，我只说一下这里有几点地方注意，一不要去掉这个文件所定义的DIV或改变DIV的ID名称，以备个性化portlet之用。原来所有的样式不要删除，你可以修改style_*.jspf文件或者增加文件到链接到style.jsp文件或head.jspf，但是一定要去掉默认定义的样式。

   head.jspf增加自己的样式表文件或JS文件引用。格式参照文件里的引用方法，这样子可以有缓存。在这个文件修改的过程中不要去掉里面的脚本文件，你可以增加：）

   banner.jspf 增加自己的标志，对其它的几个banner_*.jspf在这里都有引用，如果不需要可以注释掉。或者你可以把这些整合进自己的主题，可以修改指定样式，在style_theme.jspf文件里

   topnav.jspf文件建立自己的导航格式（结合原来默认文件和CSS），这个没什么好说的。

 sidenav.jspf文件建立自己的侧边导航，这个文件的修改要注意TAG的参数应用，我刚开始就弄错了：），结果导航多级就有问题了。

 footer.jspf文件就没什么好说的了，你修改成你想要的就可了：）

以上我只是简要说明了一下修改顺序，具体并没有详说，我觉得每个人针对的项目不一样，所以有问题可以一直再讨论，这只是修改的基本过程。后面我会写一下针对个性化定制需要修改的内容和不足。下面是一个基本效果。由于涉及到具体项目，我只截了部分图片：）

 

前面简单介绍了一下自定义和外表的过程:),这一篇着重说明一下最终用户个性化的改造过程,将默认主题和外表里的个性化放到自定义的主题和外表上.
我们知道,最终用户要实现可拖拽有两点：一是最终用户对这个页面和页面上的portlet有自定义的权限（这个属于的权限范围，请设置相应的资源许可权，这里就不做介绍了），二是要有办法让有权限的用户可以对当前个性化页面进行portlet的增加、删除、移动并保存这些设置，下面几点说明了这个过程：

1.关于主题相关的修改：
default.jsp：保留所有定义的DIV，只改变布局，所有定义的名称不要改变，因为在flyout.jspf要用到这个页面里的这几个DIV来计算flyout的高度和位置

if ( document.getElementById( 'wpsFLYflyout' ) && document.getElementById( 'footer' ) && document.getElementById( 'mainContent' ) ) { document.getElementById( 'wpsFLYflyout' ).style.top = getTop( document.getElementById( 'mainContent' ), true ) + "px"; document.getElementById( 'wpsFLYflyout' ).style.height = Math.max( (getTop( document.getElementById( 'footer' ), true ) - getTop( document.getElementById( 'mainContent' ), true ) - 2 ), 300 ) + "px"; document.getElementById( 'wpsFLY_flyoutIFrame' ).style.height = Math.max( (getTop( document.getElementById( 'footer' ), true ) - getTop( document.getElementById( 'mainContent' ), true ) - 2 ), 300 ) + "px";}

          head.jspf：这个文件中的

var javascriptEventController = new ElementJavascriptEventController(), flyOut = [      {   url: "",   icon: "",   activeIcon: "",   hoverIcon: "",   active:false,   altText:"",   activeAltText:""   }              ,   {   ",   icon: "",   activeIcon: "",   hoverIcon: "",   active:false,   altText:"",   activeAltText:""   }                     ,{    ",    activeIcon: "",    hoverIcon: "",    active:false,    altText: "",    activeAltText:""}                      ];

这些内容不能去掉。可以把有关人员查找的内容可以注释掉。

             banner_toolbar.jspf:
 

wpsFLY_markupLoop( flyOut );         以上代码可以放到不同的地方，这样子就有一个加号选择出来，可以弹出portlet选择项。

     这样，就可以和IBM默认的主题一样显示flyout选用板了，剩下的就是对选用板portlet进行改造，以适合我们的主题和外表样式。

        2.外表：

              要继续用IBM下拉的菜单项。因为这一块内容没办法更改只能扩展，我还没有找到如何将菜单一部分单独使用的方法，在外表里也不能去掉关于dnd标志的内容，只能修改，这样子才能拖拽。菜单项里有删除。

         以上内容简要说明了如何将要实现的功能合在一起形成一个完整的个性化定制的功能，本人才疏学浅，有不妥之处希望一起讨论。
        在整个主题自定义过程中感觉有一点特别不好，就是样式的定义，很多样式是不能更改的，还有用DIV做拖拽的锚点，有一个display:block引起portlet间隔没有办法调整，也不能更改该标记。等等，希望IBM不断的完善，最好能提供详细的说明或自定义功能。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14789789/viewspace-618164/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14789789/viewspace-618164/