cmd

統計

隨筆 - 13
文章 - 44
評論 - 9
引用 - 0

常用鏈接

留言簿(2)

隨筆檔案

文章分類

文章檔案

收藏夾

搜索

閱讀排行榜

評論排行榜

IBM Websphere Portal 主題與皮膚開發

內容簡介：
Portal 的主題與皮膚開發說穿了還是普通jsp的開發，只不過大量使用了ibm自帶的標簽庫，開發起來顯得比較麻煩。但是，如果您深刻洞悉了與主題、皮膚相關的這幾個文件之間的調用關系，使用起來就能運用自如了。這里是作者從大量的項目經驗中總結出的幾點體會，貢獻出來，希望與大大家分享。
在這篇文章里我想從以下幾個方面來介紹websphere portal的主題與皮膚開發：
1、初級入門：什么是Portal的主題與皮膚開發？
2、中級開發：如何更換Portal系統的logo圖標；
3、中級進階：開發個性化的主題；
4、高級探索：開發自適應分辨率的主題與皮膚；
5、高手過招：更改Portal系統的登錄方式；
6、Portal的皮膚開發簡介。

一、初級入門：Portal的主題與皮膚開發：

要了解如何開發portal的主題，首先要了解websphere portal的顯示流程。IBM WebSphere Portal 使用不同的 Java Server Page（JSP）、級聯樣式表（Cascading Style Sheet，CSS）和圖像來顯示門戶頁面。它使用位于X:\WebSphere\AppServer\installedApps\ YourComputerName \wps.ear\wps.war 目錄下 themes、skins 和 screens 目錄中的 JSP 來構造門戶頁面。這些目錄中的每一個都包含 html、wml 和 chtml 子目錄，WebSphere Portal 將它們用于服務不同客戶機，例如桌面瀏覽器和移動設備。我們這里以通常使用的html方式下的主題開發為例，介紹Portal的主題開發。

用于顯示門戶頁面的 JSP 流程：本文描述了缺省主題定義的 Default.jsp、Head.jsp 、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js以及延伸出來的 PageBeginInclude.jsp、 PageEndInclude.jsp的內容和流程。下面簡單介紹這幾個jsp。注意：這部分內容屬于最初級的開發，您要弄懂這些介紹，必須具備一定的 jsp基礎、css基礎和標簽庫的基礎，最好做過相應的開發。
1、Default.jsp：
所有屏幕聚集都從 Default.jsp 開始。用于缺省主題的 Default.jsp 位于wp_root\app\wps.ear\wps.war\themes\html。這個 JSP 包含其它用于顯示標題、公司徽標、工具欄的 JSP 以及用于往可用位置及頁面植入內容的 JSP。在 Default.jsp 的末尾處，screenRender JSP 標記選擇被請求的屏幕（例如 login 或 forgotpassword）。以下介紹的jsp是以這樣的順序先后調用的。
2、Head.jsp
Head.jsp 生成標題并嵌入指向樣式表文件的鏈接。它還定義了支持 BIDI（雙向）文本所需的變量。這個 JSP 的內容將在這里描述。您也可以通過<title></title>在這里定死portal網站的標題，這比IBM公布的以標簽的方式寫來的容易，也更易使用。如果您開發了多套主題，而且這幾套主題的page title如果也一樣的話（除了虛擬門戶，一般是這樣子），您可以把這幾個文件放到themes/html的根目錄下，其他主題的default.jsp 都來調用這個文件就可以了。

3、AdminLinkBarInclude.jsp
        AdminLinkBarInclude.jsp主要用來顯示了“新建頁面”、“編輯頁面”、“分配頁面許可權”三個標簽
4、ToolBarInclude.jsp
ToolBarInclude.jsp 顯示歡迎消息以及為用戶提供的鏈接工具欄。門戶網站上顯示什么樣的鏈接工具欄取決于用戶上下文。例如，登錄的用戶看到“我的門戶網站”、“管理”（盡管理員可見）、“編輯我的‘概要文件’”、“注銷”等之類的鏈接；而注銷的用戶看到 “忘記密碼”、“登錄”、“幫助” 之類的鏈接。
5、PlaceBarInclude.jsp
PlaceBarInclude.jsp 用來顯示一級菜單，即“首頁”、“文檔管理器”、“公司概況”、“業務簡介”等，屬于最高層的目錄，您在任何一個一級菜單上都可以通過“新建頁面”來創建二級菜單，你創建的內容將被存儲到數據庫（原始使用的是cloundscape），您也可以把它倒入到db2、oracle等任何一個portal所支持的數據庫中，此內容將在我的下一篇文章中詳細論述，這里不再一一提及。

6、PageBarInclude.jsp
用來顯示二級菜單，當您點擊一級菜單中的任一標簽時，系統會調用該文件，并檢索出該菜單的所有子菜單，默認顯示在PlaceBar的下面。

二、中級開發：如何更換Portal系統的logo圖標；
1、Default.jsp的工作原理：

我們看這個例子，Default.jsp大致上將Portal系統的默認頁面劃分為這樣一個表格：

表-1： Default.jsp總體調用效果

PageBegin: 用來顯示頁面生成以前的提示文字，例如：Portal系統正在加載，請稍候……
Portal系統主體部分：用來顯示詳細的Portal頁面；
PageEnd.jsp用來顯示頁面生成以后的東西。例如公司版權信息等。

表-2：Portal系統正文部分的調用關系：
徽標部分，在default中調用我的門戶菜單，在ToolBar中調用
個性化菜單，在AdminLink中調用

Portal的Body部分，用來顯示各個portlet以及高層次的三級菜單。
頁面的結尾，用來顯示公司版權信息等。


2、換一個logo：
打開Default.jsp，您會開到一個表格，在表格的左上角，有這樣一段語句，用來顯示默認主題的Logo徽標：

<td width="100%" valign="top" align="<%=bidiAlignLeft%>" nowrap>
         <img align="absmiddle" alt='<wps:text key="title" bundle="nls.engine">Portal Title</wps:text>' title='<wps:text key="title" bundle="nls.engine"/>' src='<wps:urlFindInTheme file="logo.gif"/>'>
             <a href="#wpsMainContent"><img width="1" height="1" border="0" src='<%= wpsBaseURL %>/images/dot.gif' alt='<wps:text key="link.skiptocontent" bundle="nls.engine"/>' title='<wps:text key="link.skiptocontent" bundle="nls.engine"/>'>
</a>
      </td>
   上面已經介紹過，整個Portal系統的頁面由Default.jsp分割成一個大的表格，用來顯示或者調用不同的jsp。我們在這個大表格的最左上角化出一個<td>,用來顯示公司的徽標。這段語句就是在這個單元格內插入一個圖片，叫做Logo.gif。
明白了嗎？您可以將這個文件名改稱您想插入的任意一張圖片的名字，只要將這張圖片放到.war/images/目錄下就可以了。這里支持幾乎所有的圖片格式，您可以任意擺放，大小、位置等都有您說了算。到這里，您可能已經想到了：那么，我養插入一個Flash呢？別著急，下面將會提到這點。
3、用flash作logo：
      用Flash作徽標是個不錯的注意，它可以使您的門戶網站看起來更豐富、生動一些。但是，Flash，也就是.swf格式的文件，是不能直接通過這種方式來插入的，因為我們的瀏覽器并不能識別它。要插入一個動畫，必須位置制定相應的驅動。您可以用以下這段代碼，為之生成：

<td width="510" border="0" cellpadding="0" cellspacing="0" height="81" valign="middle" align="left">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="510" height="81">
               <param name=movie value="<%= wpsBaseURL %>/images/firstpagelogo.swf">
               <param name=quality value=high>
                    <embed src="firstpagelogo.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="510" height="81">
                    </embed>
</object>
</td>

這里在插入了一個名字為firstpagelogo.swf的影片做公司徽標，他的大小是 510*81，請將這個影片文件放在.war/images目錄下，重啟服務器，看看您的首頁上，是不是已經出現了？

三、中級進階：開發個性化的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='<%= 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='<%= 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> </td>
<td width=”800” align=”center” valign=”top”>
   將Default.jsp中最外層的table里面所有的內容拷貝到這里！
</td>
<td> </td>
             </tr>
         </table>
      將這個表格覆蓋到原來Default.jsp文件中最外層的表格就可以了。注意：在default.jsp中調用的各個文件中，可能都有表格存在，如果這些表格中有的寬度超過了800，或者兩個并列一行的表格寬度超過了800，請適當調小。
3、開發1024和800下自適應得主題
     要開發自適應的主題就更簡單了！請設定一個變量w,先寫一個JavaScript，用來讀取客戶端的瀏覽器分辨率，如果是800的，則給給變量賦值w=800，反之如果是1024的，就給賦值為w=1024。剩下的事，不用我說了吧！
五、高手過招：更改Portal系統的登錄方式；
1、從首頁上登錄
      您需要用wsad開發一個portlet，并在jsp中寫一個代理，將用戶憑證提交給系統自帶的認證action中。這個portlet可以這樣來設計：
     <wps:if loggedIn="no"> //如果沒有登陸的情況下，提醒用戶輸入它的用戶名與密碼：

     </wps:if>
     用戶按下“登錄“后，將用戶名和密碼提交到系統自帶的action中：
<form method="POST" action='/wps/portal/!ut/p/.cmd/li' enctype="application/x-www-form-urlencoded" name="LoginPage">
    //在這里將用戶名和密碼付給系統自帶的登錄框。
</form>
<wps:if loggedIn="yes"> //如果已經登陸了，可以顯示用戶的常用信息，比如，讀取用戶的Lotus郵箱，然后顯示他喲年級封郵件等：

甚至，您可以利用url-mapping自定義幾個頁面，從首頁上直接進入到您的業務系統（如上）。
這樣的話，您甚至可以封死portal頁面右上角自帶的“登錄”標簽，也許您會問我又想用系統自帶的頁面呢？沒關系，您也可以在瀏覽器中輸入：http: //machinename:9081/wps/myportal，當然，干脆您直接輸入一個錯誤的用戶名和密碼，系統自然后帶您會帶系統自帶的頁面了。
2、拒絕從系統自帶的登錄界面
      但是在上面這種情況下，可能會出現這種情況：當用戶名或者密碼錯誤的時候，系統會返回到系統自帶的登錄框上面，為避免這種情況，您可以封死這個開關。這個非常簡單，我在這里順便一提：
      系統自帶的登錄頁面是.war/screen/html下的login.jsp文件，您可以刪掉該文件里的所有內容，然后加入這么一句：
<script language="JavaScript">
    alert("用戶名或者密碼輸入有誤，請重新輸入！");
    window.location='http://xxjsb-scdd2.portal.com:9081/wps/portal';
</Script>
呵呵，是不是帶您又回到了首頁呢？是的，確實如您所想，這樣就封死了系統自帶的登錄頁面。如果您的用戶名和者密碼錯誤，或者您通過myportal直接調用，都不起作用了吧！系統會帶您回到首頁的登錄界面，請重新輸入！

3、遺留問題：
   在實際開發中，您也許會發現還有其他一些意想不到的問題，是的，這個地方確實有許多值得注意的地方，也許只有您親自來試過了，才知道其中的玄機。我也希望在開發中大家相互交流，把發現的好地方貢獻出來，大家一起分享。好吧，祝您成功！

六．主體開發的調試
調試主題與皮膚一般采用兩種方法，一是修改reload，一是復制法：

1、修改reload法。我們知道，portal系統的主題一切都是從default.jsp聚焦的，在通常的應用服務器上都有一個reload開關，用以控制服務器是否自動更新，ibm websphere portal也不例外。如果我們打開這個開關（這個開關您可以打開was,在管理控制臺里面設定，完了還有重啟一下機器），并設定了reload的時間，那么每個一個時間段，系統會自動讀取主題與皮膚文件。換言之，只有我們把這個時間差設的足夠小，就能立刻觀察到我們的修改結果。（在這里要注意一種情況：就是既然是從default.jsp開始聚焦，那么，如果您修改了由default.jsp調用的別的文件比如說BeginPage.jsp，而單單沒有修改default.jsp的話，系統會默認您沒有做任何修改，所以也就沒有任何改動了）同時我也想聲明一點，這種做法帶來的系統開銷特別大，只可是用于開發環境，在生產環境中是萬萬不可的！

2、復制主題或皮膚法：如果您對某一主題做了部分修改，可以復制一下這個文件夾并換個名字，然后添加這個主題到系統并配置給相應的頁面。第一次安裝的新主題，當然后重新編譯了。看得出來這種方法比較不方便，只適用于特殊情況。
我經常使用的就是這兩種了，大家在開發中有什么好的注意，可以在這里交流。

七、Portal的皮膚開發簡介
1、該改portlet的標題背景圖片
     非常簡單，請找到.war/skin/html下，發現系統已經呆了好幾套皮膚，打開其中任意一個文件夾，您都能發現這個文件：
Control.jsp。這里面也是一個table。該table有兩行：第一行用來顯示portlet的標題，后面是最大化、最小化、編輯按鈕；第二行是portlet的 body，用來顯示portlet的內容。要換掉portlet標題的背景圖片其實非常簡單：在第一個<td>里面加上這么一句代碼：
    <td width="100%" height="21" border="0" cellpadding="0" cellspacing="0" background='<wps:urlFindInSkin file="wave.jpg"/>'>
    一切OK！
2、隱藏掉“最大化”、“最小化”、“還原”等圖標。
<wps:portletMinimize>
<a href='<%=wpsPortletMinimizeURL%>'></a>
    </wps:portletMinimize>
       這段代碼是用來顯示“最小化”按鈕，不用說，直接去掉就行了！同理，您可以對此做任何編輯。
3、高級：加入個性化的左側管理菜單
在skin目錄下看到這個文件了嗎？LayeredContainer.jsp不錯，就是它，它是一個表格：
<table border="0" cellpadding="0" cellspacing="0" width="778" height="100%">
該表格左側就是三級菜單（您如果再Default.jsp中部調用PageBar的話，這就是二級菜單了）。右邊呢，則是整個Portal系統得Body部分，顯示了所有的portlet。不曉得IBM為什么要這樣安排，似乎有點不合理。不過，趨勢是在這里修改的，可能是把它看作一個容器了吧！在左側的表格部分，您可以向編輯普通的網頁一樣，只要您稍微有些美工知識，就可以隨心所欲的制作出個性化的管理菜單了。
4、高級：與CSS結合，開發出漂亮的效果。

看上面的效果，是不是非常漂亮？其實這很簡單，看LayeredContainer.jsp這個文件，下面是他的表格，稍微加一些CSS，就能實現這種效果了。如：
<table border="2" bordercolor="#ffffff" cellpadding="0" cellspacing="0" <%=tableHeight%> width="100%" >。
當然，這需要素質比較高的美工配合，也需要工程師在長期的開發中仔細琢磨。再次祝您在Portal開發中信手拈來、出神入化！

參考資料：
1、 Sukumar Konduru 顧問軟件工程師達拉斯，IBM Developer Technical Support Center 先生的論文：了解 WebSphere 門戶網站如何顯示門戶頁面 — 第 I 部分：描述 Default.jsp、Head.jsp 和 ToolBarInclude.jsp
        2、IBM系列紅皮書。

致謝：
作者在開發及寫作中得到了趙建業先生的大力幫助，IBM公司李女士、王女士，曹先生、丁先生、陳先生、胡先生的大力幫助，在此一并鳴謝。

作者簡介：鄭文平，北京東華合創數碼科技公司軟件工程師，Portal信息化專員，長期從事Portal（尤其是IBM Websphere Portal）開發，曾參與并引領了北京馳普企業門戶、山東新汶礦務局遠程調度系統、中國石化齊魯公司綜合數據平臺、北京供電局等多個Portal項目的開發。

posted on 2006-02-23 15:37 靜夜思閱讀(1499) 評論(1) 編輯收藏所屬分類: server

Give please. Sometime they'll give a war and nobody will come.
I am from Panama and also now'm speaking English, give true I wrote the following sentence: "Offers search engine optimisation seo internet marketing, website development, website design and search engine optimization australia by mitash online.Seo companies must provide testimonials and client ranking results in order for."

Thanks for the help ;-), Nona. 回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: Jetty 源碼分析 IBM Websphere Portal 主題與皮膚開發 Tomcat配置技巧Top 10 Tomcat中文手冊 tomcat安全驗證

# Unikal'Nyi Kontent 2009-05-18 08:06 Unikal'Nyi Kontent

cmd

導航

統計

常用鏈接

留言簿(2)

隨筆檔案

文章分類

文章檔案

收藏夾

other

優秀blog

優秀官方

搜索

最新評論

閱讀排行榜

評論排行榜

IBM Websphere Portal 主題與皮膚開發

評論