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:""}];*/ 這些內容不能去掉。可以把有關人員查找的內容可以註釋掉。 banner_toolbar.jspf: /**/ 以上代碼可以放到不同的地方，這樣子就有一個加號選擇出來，可以彈出portlet選擇項。 這樣，就可以和IBM默認的主題一樣顯示flyout選用板了，剩下的就是對選用板portlet進行改造，以適合我們的主題和外表樣式。 外表： 要繼續用IBM下拉的菜單項。因爲這一塊內容沒辦法更改只能擴展，我還沒有找到如何將菜單一部分單獨使用的方法，在外表裏也不能去掉關於dnd標誌的內容，只能修改，這樣子才能拖拽。菜單項裏有刪除。