WAS Portal Theme Development And Configuration

我们先介绍一下主题和外表开发的基本思路，然后先从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:default.jsp 这个文件是主题的主文件，在这个文件中决定了整个布局，在这个文件中直接引用head.jspf，flyout.jspf，banner.jspf，topnav.jspf,sidenav.jspf,footer.jspf,所有jspf文件进行编辑要生效必须修改此文件并保存。 style.jsp:所有style开头的jspf都是在这个文件里调用的 head.jspf:在这个文件中定义了所有头信息，包含JS，样式表引用等，另外还有选项板和上下文菜单的JS扩展。 banner.jspf:所有banner_*.jspf文件在这里引用，这个也是可以修改的，我就是直接把这个文件改掉了：），当然增加了自己要的元素。在这里要说明一下， banner_crumbtrail.jspf文件是路径轨迹显示，banner_searchControl.jspf搜索控件显示，banner_toolbar.jspf包含增加portlet，人员搜索、帮助按钮及注销及登录按钮（我的拖拽改造也集中这个文件） topnav.jspf:显示顶部导航 sidenav.jspf:显示侧边导航 footer.jspf:显示页脚 外表JSP和JSPF:UnlayeredContainer-V.jsp 布局列:UnlayeredContainer-H.jsp 布局行: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文件就没什么好说的了，你修改成你想要的就可了 补充： 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：这个文件中的 /*{ url: "", icon: "", activeIcon: "", hoverIcon: "", active:false, altText:"", activeAltText:"" },{ url:"", icon: "", activeIcon: "", hoverIcon: "", active:false, altText:"", activeAltText:"" },{ url:"", icon: "", activeIcon: "", hoverIcon: "", active:false, altText: "", activeAltText:""}];<script type="text/javascript"> var javascriptEventController = new ElementJavascriptEventController(), flyOut = [ <c-rt:if test = "${themePolicy.renderContentPalette}"> { url: "<portal-navigation:urlGeneration contentNode='ibm.portal.Content Palette' layoutNode='ibm.portal.Content Palette Control' newWindow='true' portletWindowState='Maximized'><portal-navigation:urlParam name='WCN' value='<%=pageOidStr%>' type='render' /><% wpsURL.write(out); %></portal-navigation:urlGeneration>", icon: "<portal-logic:urlFindInTheme file='images/toolBar/content.gif'/>", activeIcon: "<portal-logic:urlFindInTheme file='images/toolBar/Active_content.gif'/>", hoverIcon: "<portal-logic:urlFindInTheme file='images/toolBar/EnabledHover_content.gif'/>", active:false, altText:"<portal-fmt:text key='link.palette.portlet' bundle='nls.engine'/>", activeAltText:"<portal-fmt:text key='link.palette.close' bundle='nls.engine'/>" } <%arrayPosition++;%> </c-rt:if> <c-rt:if test = "${false}"> <%--<c-rt:if test = "${themePolicy.renderPeoplePalette}">--%> <%if(arrayPosition != 0){%>,<%}%> { url:"<portal-navigation:urlGenerationcontentNode='ibm.portal.People Palette' layoutNode='ibm.portal.People Palette Control' newWindow='true' portletWindowState='Normal'><% wpsURL.write(out); %></portal-navigation:urlGeneration>", icon: "<portal-logic:urlFindInTheme file='images/toolBar/people.gif'/>", activeIcon: "<portal-logic:urlFindInTheme file='images/toolBar/Active_people.gif'/>", hoverIcon: "<portal-logic:urlFindInTheme file='images/toolBar/EnabledHover_people.gif'/>", active:false, altText:"<portal-fmt:text key='link.palette.people' bundle='nls.engine'/>", activeAltText:"<portal-fmt:text key='link.palette.close' bundle='nls.engine'/>" } <%arrayPosition++;%> </c-rt:if> <c-rt:if test = "${themePolicy.renderExtensions}"> <portal-theme-ext:themeExtension id="com.ibm.portal.theme.plugin.Flyouts" > <portal-theme-ext:themeExtensionLoop> <%if(arrayPosition != 0){%>,<%}%>{ url:"<portal-theme-ext:themeExtensionItemUrl/>", icon: "<portal-theme-ext:themeExtensionItemIconUrl state='STATE_ENABLED' />", activeIcon: "<portal-theme-ext:themeExtensionItemIconUrl state='STATE_ACTIVE' />", hoverIcon: "<portal-theme-ext:themeExtensionItemIconUrl state='STATE_ENABLED_HOVER' />", active:false, altText: "<portal-fmt:title varname='<%=(com.ibm.portal.theme.plugin.ThemeItem) themeExtension%>' />", activeAltText:"<portal-fmt:text key='link.palette.close' bundle='nls.engine'/>"} <%arrayPosition++;%> </portal-theme-ext:themeExtensionLoop> </portal-theme-ext:themeExtension> </c-rt:if> ]; </script>*/ 这些内容不能去掉。可以把有关人员查找的内容可以注释掉。 banner_toolbar.jspf: /*<if test="${!isSafari}"><if loggedin="yes" portletsolo="no"><script type="text/javascript"> wpsFLY_markupLoop( flyOut ); </script></if></if>*/ 以上代码可以放到不同的地方，这样子就有一个加号选择出来，可以弹出portlet选择项。 这样，就可以和IBM默认的主题一样显示flyout选用板了，剩下的就是对选用板portlet进行改造，以适合我们的主题和外表样式。 外表： 要继续用IBM下拉的菜单项。因为这一块内容没办法更改只能扩展，我还没有找到如何将菜单一部分单独使用的方法，在外表里也不能去掉关于dnd标志的内容，只能修改，这样子才能拖拽。菜单项里有删除。