IBM WebSphere Portal 6.0的主題與面板開發
1.1 入門：Portal的主題與面板開發
要了解如何開發Portal的主題，首先要了解IBM WebSphere Portal的顯示流程。IBM WebSphere Portal 使用不同的 Java Server Page（JSP）、級聯樣式表（Cascading Style Sheet，CSS）和影象來顯示門戶頁面。它使用位於X:\WebSphere\AppServer\installedApps\YourNodeName\ wps.ear\wps.war 目錄下 themes、skins 和 screens 目錄中的 JSP
所謂Portal的主題，指的是系統的整體介面風格與顯示方式，主要包括網站頁面初始化以前的呼叫、徽標logo、一級選單、二級選單、網站下邊的版權資訊，以及頁面初始化完成後的善後邏輯處理。我們要開發一套主題，可以直接複製themes/html下的一個包含有各個頁面檔案的資料夾，重新命名並在管理介面中新增、指定給相關頁面就可以了。在這個資料夾中，預設的初始呼叫檔案是
1.1.1 Default.jsp
Portal系統的主題與面板的始化是從Default.jsp開始的，用於預設主題的
1.1.2 Head.jsp
Head.jsp 位於Default.jsp初始化表格的最上一行單元格內，負責生成標題並嵌入指向級聯樣式表文件的連結。它還定義了支援BiDi（雙向）文字所需的變數。這個頁面一般沒有實質性的顯示內容，例外的是，開發者喜歡在這裡初始化網頁的標題，通常是讀取屬性檔案，比如位於web_inf/下的engine.properties。這樣安排比較靈活，後期維護可以直接在屬性檔案裡面進行。當然，如果使用者的網頁標題是確定的而且不再更改，那麼也可以通過<title></title>在這裡定死，這比IBM公佈的以標籤方式寫容易，也更易使用。如果你開發了多套主題，而且這幾套主題的網頁標題也一樣（除了虛擬門戶，一般是這樣），那麼可以把這個檔案放到themes/html的根目錄下，其他主題的Default.jsp都來呼叫這個檔案就可以了。
1.1.3 AdminLinkBarInclude.jsp
AdminLinkBarInclude.jsp主要用來顯示“新建頁面”、“編輯頁面”和“分配頁面許可權”三個標籤。該檔案在Default.jsp初始化表格的第二行被呼叫。使用者使用這三個連結來建立、修改自己的個性化頁面，也可以由入口網站管理員來佈局整個網站的風格，管理頁面資源的許可權。不過，在開發實踐中你會發現，大部分客戶不喜歡這幾個標籤，他們要求將這些標籤放到管理頁面，取而代之的是一些歡迎資訊，比如：“某某員工，歡迎您登入！”。要實現這個也很容易，只要稍微修改一下這個頁面就可以了。實現方法是：我們在系統中新增一個標籤，這個標籤對應的Java檔案負責讀出登入使用者的姓名，並使用像JSP中新增JSTL一樣的方法，新增一個Label。在進行主題與面板開發時，只要在顯示歡迎資訊的地方應用這個標籤就可以了。
1.1.4 ToolBarInclude.jsp
ToolBarInclude.jsp用來顯示歡迎訊息，以及為使用者提供的連結工具欄。入口網站上顯示什麼樣的連結工具欄取決於使用者上下文。例如，登入的使用者會看到“我的入口網站”、“管理”（僅管理員可見）、“編輯我的‘概要檔案’”、“登出”之類的工具；而登出的使用者會看到“忘記密碼”、“登入”、“幫助” 之類的工具。通常的做法是將“管理”連結放到一個Portlet中，只有當登入的使用者是Portal系統管理員時，才在該Portlet中顯示歡迎資訊，或者其他的資源連結。
1.1.5 PlaceBarInclude.jsp
PlaceBarInclude.jsp用來顯示一級選單，即“首頁”、“文件管理器”、“公司概況”、“業務簡介”等，屬於最高層的目錄。在任何一個一級選單上都可以通過“新建頁面”來建立二級選單，所建立的內容將被儲存到資料庫（原始使用的是Cloundscape），也可以匯入到DB2、Oracle等任何一個Portal所支援的資料庫中。
1.1.6 PageBarInclude.jsp
PageBarInclude.jsp用來顯示二級選單，當點選一級選單中的任何一個標籤時，系統會呼叫該檔案，並檢索出該選單的所有子選單，預設顯示在PlaceBar的下面。該檔案在Default.jsp初始化表格的第三行被呼叫，如果不呼叫該檔案，那麼包含子選單的一級選單被呼叫時，其子選單將在螢幕的左側顯示。該檔案位於面板資料夾下，具體的檔案操作我們將在後面的面板開發中介紹。
1.1.7 Portal 6.0中的檔案呼叫關係
現在介紹一下Portal 6.0中的檔案呼叫關係及其作用。如圖1-1所示為Portal開發一套主題需要呼叫的頁面清單。
圖1-1 Portal開發一套主題需要呼叫的頁面清單
其中幾個主要檔案的作用如圖1-2所示。
圖1-2 檔案的作用
1.2 初級：如何更換Portal系統的logo圖示
1.2.1 Default.jsp的工作原理
門戶系統的初始化頁面是從Default.jsp開始的。Default.jsp檔案呼叫其他不同的頁面分別顯示主頁上不同區域的內容。例如：
1.2.2 換一個logo
開啟Default.jsp，你會看到一個表格，在表格的左上角有這樣一段語句，用來顯示預設主題的logo圖示：
上面已經介紹過，整個Portal系統的頁面是Default.jsp初始化的一個大表格，用來顯示或者呼叫不同的JSP。我們在這個大表格的最左上角劃出一個<td>，用來顯示公司的徽標。這段語句的作用就是在這個單元格內插入一張圖片，名為Logo.gif。
你可以將這個檔名改為自己想插入的任意一張圖片的名字，只要將這張圖片放到.war/images/目錄下就可以了。這裡支援幾乎所有的圖片格式，你可以任意擺放，大小、位置等都是你說了算。這時你可能會問：如何插入一個Flash呢？彆著急，下面將會介紹。
1.2.3 用Flash動畫作Logo
用Flash作徽標是個不錯的注意，它可以使入口網站看起來更豐富、生動一些。但是，Flash即.swf格式的檔案，是不能直接通過這種方式來插入的，因為瀏覽器並不能識別它。要插入一個動畫，必須為它指定相應的驅動，你可以通過如下這段程式碼來生成。
這裡插入了一個名為firstpagelogo.swf的影片作公司徽標，它的大小是 510*81，請將這個影片檔案放在.war/images目錄下，重啟伺服器，看看首頁上是不是已經出現了Flash。
細心的讀者可能已經發現，在安裝了更新系統編號為KB912945的補丁後，凡是在一個頁面內使用<object>、<embed>或<applet>標籤的活動內容都不會被自動啟用，需要使用者手動單擊，Flash控制元件也不例外。這是微軟為了避免與Eolas公司和加利福尼亞大學發生專利侵權糾紛，而釋出的一個IE非安全更新，這不是Bug。但是安裝此更新後，在啟用ActiveX控制元件之前，無法在某些網頁與這些控制元件互動，要啟用 ActiveX 控制元件，請手動單擊該控制元件。這使得我們的入口網站看起來總有個虛框，好像一個疤痕。例如：
是不是很難看？沒關係，我們就在主題與面板開發中解決這個問題。
事實上，在head.jspf的<head></head>中我們已經呼叫了該主題下的JS檔案。你要確保沒有刪掉引用語句，否則其他的JS方法都不能使用，或者說，整個入口網站就被你這樣輕鬆地破壞了。如果確實已經刪除了，請確保加入以下語句。
然後開啟flyout.js檔案，加入如下函式。
最後在需要插入Flash檔案的地方插入以下程式碼。
重啟伺服器，再檢查一下，是不是虛框已經沒有了？
1.3 中級進階：開發個性化的Portal主題
1.3.1 理解各級選單
Default.jsp呼叫PlaceBarInclude.jsp檔案來顯示一級選單，如果一級選單下面還有二級選單，那麼當點選該一級選單時，Default.jsp將呼叫PageBarInclude.jsp來顯示二級選單。當然，也可以不呼叫該檔案，系統將預設呼叫Portlet面板中的LayerContainer.jsp檔案，用三級選單代替二級選單。這就是選單的個性化，這個方法使得系統的三級及三級以下的選單顯示在頁面的左側，就像Windows資源管理器一樣以樹形目錄顯示，使用者更容易接受。
開啟LayerContainer.jsp檔案，你會發現裡面的內容非常簡單。
首先有這樣一個標籤：
意思是說，如果選單是可用的，那麼當登入進去以後將執行下面的操作。使用這句程式碼，必須引入Portal的標籤庫，具體的過程這裡不再贅述。接下來繪製了一個表格，用來顯示裡面的操作。
選單的左右協調：如果一共定義了十幾個一級選單，而一欄只能顯示8個，那麼剩下的選單怎麼辦？我們在這裡放置了兩個三角形小圖示，如果右邊還有更多的選單，小圖示會自動出現，當點選時，就會顯示剩下的選單。具體的程式碼是通用的，這裡不再贅述。需要強調的是，選單條在這裡只劃分為兩種情況：一是在選中的情況下，二是在未選中的情況下。
例如：
我們首先新增一張背景圖片，然後左側放一張圖片做字首，中間列印該選單條的名字，右側又放一張圖片做字尾，這樣整個選單條看起來就非常漂亮了。
接下來是顯示工具欄的情況：
這裡的操作將使具有許可權的使用者通過點選這張圖片，直接編輯相應的Portal頁面。不過，根據我的開發經驗，大部分使用者會隱藏這個入口，以免引起管理上的混亂。
最後的程式碼用來顯示系統收藏夾。登入後，會發現在一級選單的最右邊多出一個“我的最愛”，這是Portal系統自帶的收藏夾，可以通過這個入口將自己喜歡的頁面新增到收藏夾，然後就可以通過點選這裡直接進入到所收藏的頁面了。
1.3.2 個性化工具欄
要獲得個性化的工具欄，可以修改ToolBarInclude.jsp檔案，這個檔案提供了Portal系統管理員進到管理介面的入口。
在這裡可以編輯自己的“概要檔案”，針對個人的使用者資訊，修改自己的姓名、密碼等。更進一步，可以在這裡顯示歡迎資訊，例如，張三同志登入後，會顯示出：“歡迎您，張三同志！”。要實現這個功能實際上非常簡單，請看：
當然，需要引入相應的標籤庫。具體的應用屬於普通的JSP開發，你可以借鑑平常的開發經驗去實現。
1.3.3 個性化管理標籤
所謂的個性化，指的是可以刪除一個或者多個管理標籤，也可以根據自己的喜好新增標籤。這需要修改AdminLinkBarInclude.jsp檔案。例如：
這段程式碼用來顯示“新建頁面”的管理標籤，通過點選這個標籤，可以為當前頁面建立一個子頁面。同理，可以個性化“編輯頁面”和“分配頁面許可權”。當然，也可以隱藏這個入口。
1.4 高階探索：開發自適應解析度下的主題與面板
1.4.1 1024*768解析度下的主題
剛安裝好Portal系統後，上面介紹的幾個JSP檔案會在預設的.war/theme目錄下，你可以新建一個資料夾，將這幾個JSP檔案拷貝至該目錄下，然後在管理介面下新增該主題，該主題預設是1024*768解析度的。你可以開發多套主題。注意：請充分利用一些公共的資源，因為這些主題可能使用的是同樣的版權資訊，這樣就可以將PageEnd.jsp放到themes/entention下，然後讓所有的主題呼叫這個檔案。
當然，為了保險起見，可以在Default.jsp最外層的表格中這樣寫死：
1.4.2 800*600解析度下的主題
開發800*600解析度下的主題非常簡單，程式碼如下：
將這個表格覆蓋到原來Default.jsp檔案中最外層的表格就可以了。注意：在Default.jsp呼叫的各個檔案中，可能都有表格存在，如果這些表格中有的寬度超過了800，或者兩個並列的表格寬度超過了800，請適當調小；否則裡面的表格會將此表格向兩側撐開，從而導致表格不協調。
1.4.3 1024和800下自適應主題
要開發自適應主題就更簡單了！請設定一個變數w，先寫一個JavaScript指令碼，用來讀取客戶端的瀏覽器解析度，如果是800的，則給變數賦值w=800；如果是1024的，就賦值為w=1024。這樣Default.jsp初始化表格的寬度就以w來替代，對具體JSP檔案呼叫的單元格的長和寬都在原來的基礎上乘以1或者乘以0.78。
1.5 高手過招：更改Portal系統的登入方式
1.5.1 從首頁登入
我們需要用WSAD開發一個Portlet，並在JSP中寫一個代理，將使用者憑證提交給系統自帶的認證Action中。這個Portlet可以這樣來設計：
<wps:if loggedIn="no"> //在沒有登入的情況下，提醒使用者輸入使用者名稱和密碼（見圖1-3）
</wps:if>
圖1-3 登入介面
使用者單擊“登入”按鈕後，將使用者名稱和密碼提交到系統自帶的Action中。
<wps:if loggedIn="yes">
//如果已經登入了，則可以顯示使用者的常用資訊。比如，讀取使用者的Lotus郵箱，然後顯示有幾封郵件等（見圖1-4）
</wps:if>
圖1-4 顯示郵件資訊
甚至可以利用url-mapping自定義幾個頁面，從首頁直接進入業務系統，這樣就可以封死Portal頁面右上角自帶的“登入”標籤。也許你會問：我又想用系統自帶的頁面，怎麼辦呢？沒關係，你也可以在瀏覽器中輸入http://hostname:9081/wps/myportal，或者，乾脆直接輸入一個錯誤的使用者名稱和密碼，系統自然會帶你回到系統自帶的頁面。
1.5.2 拒絕系統自帶的登入頁面
但是採用上面介紹的方式，可能會出現這種情況：當用戶名或者密碼錯誤的時候，系統會返回到系統自帶的登入框上面。為避免這種情況，可以封死這個開關。
系統自帶的登入頁面是.war/screen/html下的login.jsp檔案，可以刪除該檔案裡的所有內容，然後加入這麼一句：
這樣是不是帶你又回到了首頁呢？是的，確實如你所想，這樣就封死了系統自帶的登入頁面。如果你的使用者名稱或者密碼錯誤，或者你通過myportal直接呼叫，系統就會帶你回到首頁的登入介面，重新輸入。從這裡我們可以延伸開來，比如說Session過期、修改使用者的個人資訊等，都可以通過這種方式封掉這個介面。
1.6 Portlet的面板開發
1.6.1 更換標題背景圖片
在.war/skin/html下，系統已經存在了好幾套面板，開啟其中任意一個資料夾，你都能發現Control.jsp這個檔案。該檔案初始化一個小表格，該表格有兩行：第一行用來顯示Portlet的標題，後面是最大化、最小化、編輯按鈕；第二行是Portlet的body，用來顯示Portlet的內容。一般來說，使用者喜歡在Portlet名稱前面或者後面放個小圖示等之類的裝飾，我們可以直接在這個單元格里面操作，這符合基本的HTML語法。當然，如果Portlet的名稱是固定的，我們也可以像開發Portal主題的選單一樣，用圖片來替代。其實只要判斷一下Portlet標題，如果符合，就呼叫相應的圖片，或者單獨為這個標題的Portlet開發一個面板，用於呼叫專門的圖片，或者直接顯示，或者作為背景，都很容易。
要換掉Portlet標題的背景圖片非常簡單，在第一個<td>裡面加上這麼一句程式碼：
就一切OK了。
下面這個頁面是面板開發結合比較好的例子（見圖1-5），大家可以思考一下如何實現。
圖1-5 面板開發結合比較好的頁面
1.6.2 隱藏工具圖示
有些使用者不喜歡Portlet有太複雜的操作介面，要求去掉“最大化”、“最小化”、“還原”等功能，當然也就不顯示了。其實這非常容易，看如下一段程式碼：
這段程式碼是用來顯示“最小化”按鈕的，直接去掉就行了。而且，可以對此進行編輯，包括新增什麼顯示內容，甚至新增什麼新的事件等。同樣的道理，我們可以用相同的方法來操作“最大化”和“還原”兩個圖示。
1.6.3 個性化左側選單
在專案實施中我發現這樣一個有趣的現象：IBM產品的忠實使用者，往往鍾情於IBM系列產品的一貫風格。比如，某客戶幾年前實施的OA系統，“收件箱”、“發件箱”、“垃圾箱”等一系列選單全部豎排在螢幕的左側，那麼，客戶在實施Portal系統的時候，他就比較傾向於二級甚至一級選單全在左側豎排的情況。其實實現很簡單，只要我們不再呼叫原來用於顯示一級選單和二級選單的JSP頁面，一級選單就會以豎排的方式自動排列到螢幕的左側。那麼我們要想美化這種選單怎麼辦呢？我們可以很容易地找到這個檔案。
開啟skin目錄，你會發現有這樣一個檔案：LayeredContainer.jsp。不錯，就是它，它首先初始化一個表格：
該表格左側就是三級選單（如果在Default.jsp中不再呼叫PageBar的話，這就是二級選單；如果連一級選單PlaceBar都不呼叫了，那麼它就是一級選單了）。右邊則是整個Portal系統的body部分，顯示了所有的Portlet。不曉得IBM為什麼要這樣安排，似乎有點不合理。不過，確實是在這裡修改的，可能是把它看做一個容器了吧！在左側的表格部分，你可以像編輯普通的網頁一樣，只要稍微有些美工知識，就可以隨心所欲地製作出個性化的左側管理選單了。
1.7 合理使用CSS樣式表
看圖1-6所示的頁面效果，是不是非常漂亮。
圖1-6 頁面效果
其實實現很簡單，看LayeredContainer.jsp檔案，下面是它的表格程式碼，稍微加一些CSS，就能實現這種效果了。比如面板右側漂亮的弧線，其實只要這麼簡單的一句話就OK了。
們再來看看某電力公司的首頁（見圖1-7），這也是面板開發結合比較好的例子。請留意紅色框裡面的內容，裡面的弧線、角度堪稱美工與主題面板開發人員黃金搭檔的一個好例子。
圖1-7 面板開發結合比較好的首頁
當然，這需要素質比較高的美工配合，也需要工程師在長期的開發中仔細琢磨。
1.8 主題與面板的部署
假設我們現在已經開發出一套主題和面板，那麼如何將這套主題和面板部署到門戶系統呢？下面是詳細的方法。
1.8.1 面板的部署
①將面板檔案傳送到這個路徑下（見圖1-8）：
/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/skins/html/
圖1-8 傳送面板檔案
②以門戶超級管理員身份登入，並依次單擊“Launch”（啟動）→“Administration”（管理）→“WebSphere Portal”（Portal主門戶）→“Portal User Interface”（門戶介面）→“Themes and Skins”（主題和面板管理），如圖1-9所示。
圖1-9 設定主題和面板
③單擊“Add new theme”（新增新面板）按鈕，輸入面板的名稱和目錄名稱，如圖1-10所示。注意：目錄名稱必須與你上傳的目錄名稱一致，而且只填相對路徑。
圖1-10 新增新面板
④單擊“OK”按鈕，面板新增成功，如圖1-11所示。
圖1-11 面板新增成功
⑤如果需要將該面板設為系統的預設面板，則可以選中該面板後，單擊右側的“Set as default portal skin”（設為預設面板）按鈕，那麼以後當你沒有為主題或頁面上的Portlet指定面板時，系統將自動呼叫該面板，如圖1-12所示。
圖1-12 設定預設面板
1.8.2 主題的部署
①將主題檔案上傳到這個目錄下（見圖1-13）：
/opt/IBM/WebSphere/AppServer/profiles/ installedApps\cell-name/wps.ear/wps.war/themes/html/
圖1-13 上傳主題檔案
②單擊“Add new theme”（新增新主題）按鈕，並在接下來的介面中為主題指定名稱和所在目錄，如圖1-14所示。同面板的新增一樣，主題的目錄名稱也必須與主題的資料夾名稱一致。同時，還需要為該主題指定可能會用到的面板，如果希望使用預設面板，則可以將已經新增的面板設定為該主題的預設面板，那麼以後當你沒有為該主題下的Portlet指定面板時，系統將預設呼叫這套面板。
圖1-14 新增新主題並指定面板
③單擊“OK”按鈕，完成該主題的部署，如圖1-15所示。
圖1-15 完成主題的部署
④如果希望將該主題設定為系統預設的主題，則可以選中該主題後，單擊右側的“Setas default portal theme”（設為預設主題）按鈕，那麼以後當你沒有為門戶系統的頁面指定主題時，系統將自動呼叫該主題，如圖1-16所示。
圖1-16 設定預設主題
1.8.3 使用XmlAccess命令匯入已經建立好的頁面
將主題與面板檔案解壓到/opt/IBM/WebSphere/，如圖1-17所示。
到/opt/IBM/WebSphere/主題目錄名/theme/目錄下確認檔案 updateJKThemePolicies.sh 具有正確的引數。
在SSH命令列執行命令 updateJKThemePolicies.sh，如圖1-18所示。
圖1-18 執行命令
為匯入的頁面分配主題，選擇主題“JKEnterprises”，然後單擊“OK”按鈕，如圖1-19所示。
圖1-19 選擇主題
1.8.4 檢查新主題是否已經起作用
退出並重新以wpsadmin身份登入Portal系統，單擊“管理”進入管理介面，單擊“編輯頁面屬性”按鈕進入頁面屬性頁，確認該頁面的Theme（主題）所使用的主題是否為剛剛部署的新主題，如圖1-21所示。
圖1-20 應用新主題與面板
確認是否發生變化，如圖1-21所示。
圖1-21 應用了新主題與面板的登入介面
登入進去後，發現主頁也已經應用了新主題與面板，如圖1-22所示。
圖1-22 應用了新主題與面板的主頁
1.9 主題與面板的除錯
除錯主題與面板一般採用兩種方法：一是修改reload以便快速自動裝載的方法，二是複製並新增主題與面板的方法。
1.9.1 自動裝載法
我們知道，P<