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標誌的內容，只能修改，這樣子才能拖拽。選單項裡有刪除。