溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
要了解如何開發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 來構造門戶頁面，其中每一個目錄下都包含html、wml和chtml子目錄，WebSphere Portal用它們服務于不同的客戶機，例如桌面瀏覽器和移動設備。這里我們以通常使用的HTML方式下的主題開發為例，介紹Portal的主題開發。
所謂Portal的主題，指的是系統的整體界面風格與顯示方式，主要包括網站頁面初始化以前的調用、徽標logo、一級菜單、二級菜單、網站下邊的版權信息，以及頁面初始化完成后的善后邏輯處理。我們要開發一套主題，可以直接復制themes/html下的一個包含有各個頁面文件的文件夾，重新命名并在管理界面中添加、指定給相關頁面就可以了。在這個文件夾中，默認的初始調用文件是Default.jsp，這個文件繪制了一張表格，然后在各個單元格內調用不同的文件。在IBM WebSphere Portal 6.0中調用的文件有：Head.jsp、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js，以及延伸出來的PageBeginInclude.jsp、 PageEndInclude.jsp。下面進行詳細介紹。
Portal系統的主題與皮膚的始化是從Default.jsp開始的，用于默認主題的Default.jsp位于wp_root\app\wps.ear\ wps.war\themes\html下。這個JSP包含了其他用于顯示標題、公司徽標、工具欄的JSP，以及用于向頁面中插入內容的 JSP。在Default.jsp的末尾處，screenRender JSP指向被請求處理的頁面，例如login或forgotpassword。Default.jsp初始化一張表格，表格內部劃分為單元格，每個單元格內可以直接顯示內容，也可以調用其他的JSP頁面。我們以從上到下、從左到右的順序來分別介紹開發主題所用到的頁面。下面介紹的JSP就是以這樣的順序先后調用的。
Head.jsp 位于Default.jsp初始化表格的最上一行單元格內，負責生成標題并嵌入指向級聯樣式表文件的鏈接。它還定義了支持BiDi（雙向）文本所需的變量。這個頁面一般沒有實質性的顯示內容，例外的是，開發者喜歡在這里初始化網頁的標題，通常是讀取屬性文件，比如位于web_inf/下的engine.properties。這樣安排比較靈活，后期維護可以直接在屬性文件里面進行。當然，如果用戶的網頁標題是確定的而且不再更改，那么也可以通過<title></title>在這里定死，這比IBM公布的以標簽方式寫容易，也更易使用。如果你開發了多套主題，而且這幾套主題的網頁標題也一樣（除了虛擬門戶，一般是這樣），那么可以把這個文件放到themes/html的根目錄下，其他主題的Default.jsp都來調用這個文件就可以了。
AdminLinkBarInclude.jsp主要用來顯示“新建頁面”、“編輯頁面”和“分配頁面許可權”三個標簽。該文件在Default.jsp初始化表格的第二行被調用。用戶使用這三個鏈接來創建、修改自己的個性化頁面，也可以由門戶網站管理員來布局整個網站的風格，管理頁面資源的權限。不過，在開發實踐中你會發現，大部分客戶不喜歡這幾個標簽，他們要求將這些標簽放到管理頁面，取而代之的是一些歡迎信息，比如：“某某員工，歡迎您登錄！”。要實現這個也很容易，只要稍微修改一下這個頁面就可以了。實現方法是：我們在系統中添加一個標簽，這個標簽對應的Java文件負責讀出登錄用戶的姓名，并使用像JSP中添加JSTL一樣的方法，添加一個Label。在進行主題與皮膚開發時，只要在顯示歡迎信息的地方應用這個標簽就可以了。
ToolBarInclude.jsp用來顯示歡迎消息，以及為用戶提供的鏈接工具欄。門戶網站上顯示什么樣的鏈接工具欄取決于用戶上下文。例如，登錄的用戶會看到“我的門戶網站”、“管理”（僅管理員可見）、“編輯我的‘概要文件’”、“注銷”之類的工具；而注銷的用戶會看到“忘記密碼”、“登錄”、“幫助” 之類的工具。通常的做法是將“管理”鏈接放到一個Portlet中，只有當登錄的用戶是Portal系統管理員時，才在該Portlet中顯示歡迎信息，或者其他的資源鏈接。
PlaceBarInclude.jsp用來顯示一級菜單，即“首頁”、“文檔管理器”、“公司概況”、“業務簡介”等，屬于最高層的目錄。在任何一個一級菜單上都可以通過“新建頁面”來創建二級菜單，所創建的內容將被存儲到數據庫（原始使用的是Cloundscape），也可以導入到DB2、Oracle等任何一個Portal所支持的數據庫中。
PageBarInclude.jsp用來顯示二級菜單，當點擊一級菜單中的任何一個標簽時，系統會調用該文件，并檢索出該菜單的所有子菜單，默認顯示在PlaceBar的下面。該文件在Default.jsp初始化表格的第三行被調用，如果不調用該文件，那么包含子菜單的一級菜單被調用時，其子菜單將在屏幕的左側顯示。該文件位于皮膚文件夾下，具體的文件操作我們將在后面的皮膚開發中介紹。
現在介紹一下Portal 6.0中的文件調用關系及其作用。如圖1-1所示為Portal開發一套主題需要調用的頁面清單。
圖1-1 Portal開發一套主題需要調用的頁面清單
其中幾個主要文件的作用如圖1-2所示。
圖1-2 文件的作用
門戶系統的初始化頁面是從Default.jsp開始的。Default.jsp文件調用其他不同的頁面分別顯示主頁上不同區域的內容。例如：
打開Default.jsp，你會看到一個表格，在表格的左上角有這樣一段語句，用來顯示默認主題的logo圖標：
上面已經介紹過，整個Portal系統的頁面是Default.jsp初始化的一個大表格，用來顯示或者調用不同的JSP。我們在這個大表格的最左上角劃出一個<td>，用來顯示公司的徽標。這段語句的作用就是在這個單元格內插入一張圖片，名為Logo.gif。
你可以將這個文件名改為自己想插入的任意一張圖片的名字，只要將這張圖片放到.war/images/目錄下就可以了。這里支持幾乎所有的圖片格式，你可以任意擺放，大小、位置等都是你說了算。這時你可能會問：如何插入一個Flash呢？別著急，下面將會介紹。
用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文件的地方插入以下代碼。
重啟服務器，再檢查一下，是不是虛框已經沒有了？
Default.jsp調用PlaceBarInclude.jsp文件來顯示一級菜單，如果一級菜單下面還有二級菜單，那么當點擊該一級菜單時，Default.jsp將調用PageBarInclude.jsp來顯示二級菜單。當然，也可以不調用該文件，系統將默認調用Portlet皮膚中的LayerContainer.jsp文件，用三級菜單代替二級菜單。這就是菜單的個性化，這個方法使得系統的三級及三級以下的菜單顯示在頁面的左側，就像Windows資源管理器一樣以樹形目錄顯示，用戶更容易接受。
打開LayerContainer.jsp文件，你會發現里面的內容非常簡單。
首先有這樣一個標簽：
意思是說，如果菜單是可用的，那么當登錄進去以后將執行下面的操作。使用這句代碼，必須引入Portal的標簽庫，具體的過程這里不再贅述。接下來繪制了一個表格，用來顯示里面的操作。
菜單的左右協調：如果一共定義了十幾個一級菜單，而一欄只能顯示8個，那么剩下的菜單怎么辦？我們在這里放置了兩個三角形小圖標，如果右邊還有更多的菜單，小圖標會自動出現，當點擊時，就會顯示剩下的菜單。具體的代碼是通用的，這里不再贅述。需要強調的是，菜單條在這里只劃分為兩種情況：一是在選中的情況下，二是在未選中的情況下。
例如：
我們首先添加一張背景圖片，然后左側放一張圖片做前綴，中間打印該菜單條的名字，右側又放一張圖片做后綴，這樣整個菜單條看起來就非常漂亮了。
接下來是顯示工具欄的情況：
這里的操作將使具有權限的用戶通過點擊這張圖片，直接編輯相應的Portal頁面。不過，根據我的開發經驗，大部分用戶會隱藏這個入口，以免引起管理上的混亂。
最后的代碼用來顯示系統收藏夾。登錄后，會發現在一級菜單的最右邊多出一個“我的最愛”，這是Portal系統自帶的收藏夾，可以通過這個入口將自己喜歡的頁面添加到收藏夾，然后就可以通過點擊這里直接進入到所收藏的頁面了。
要獲得個性化的工具欄，可以修改ToolBarInclude.jsp文件，這個文件提供了Portal系統管理員進到管理界面的入口。
在這里可以編輯自己的“概要文件”，針對個人的用戶信息，修改自己的姓名、密碼等。更進一步，可以在這里顯示歡迎信息，例如，張三同志登錄后，會顯示出：“歡迎您，張三同志！”。要實現這個功能實際上非常簡單，請看：
當然，需要引入相應的標簽庫。具體的應用屬于普通的JSP開發，你可以借鑒平常的開發經驗去實現。
所謂的個性化，指的是可以刪除一個或者多個管理標簽，也可以根據自己的喜好添加標簽。這需要修改AdminLinkBarInclude.jsp文件。例如：
這段代碼用來顯示“新建頁面”的管理標簽，通過點擊這個標簽，可以為當前頁面創建一個子頁面。同理，可以個性化“編輯頁面”和“分配頁面權限”。當然，也可以隱藏這個入口。
剛安裝好Portal系統后，上面介紹的幾個JSP文件會在默認的.war/theme目錄下，你可以新建一個文件夾，將這幾個JSP文件拷貝至該目錄下，然后在管理界面下添加該主題，該主題默認是1024*768分辨率的。你可以開發多套主題。注意：請充分利用一些公共的資源，因為這些主題可能使用的是同樣的版權信息，這樣就可以將PageEnd.jsp放到themes/entention下，然后讓所有的主題調用這個文件。
當然，為了保險起見，可以在Default.jsp最外層的表格中這樣寫死：
開發800*600分辨率下的主題非常簡單，代碼如下：
將這個表格覆蓋到原來Default.jsp文件中最外層的表格就可以了。注意：在Default.jsp調用的各個文件中，可能都有表格存在，如果這些表格中有的寬度超過了800，或者兩個并列的表格寬度超過了800，請適當調小；否則里面的表格會將此表格向兩側撐開，從而導致表格不協調。
要開發自適應主題就更簡單了！請設定一個變量w，先寫一個JavaScript腳本，用來讀取客戶端的瀏覽器分辨率，如果是800的，則給變量賦值w=800；如果是1024的，就賦值為w=1024。這樣Default.jsp初始化表格的寬度就以w來替代，對具體JSP文件調用的單元格的長和寬都在原來的基礎上乘以1或者乘以0.78。
我們需要用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，或者，干脆直接輸入一個錯誤的用戶名和密碼，系統自然會帶你回到系統自帶的頁面。
但是采用上面介紹的方式，可能會出現這種情況：當用戶名或者密碼錯誤的時候，系統會返回到系統自帶的登錄框上面。為避免這種情況，可以封死這個開關。
系統自帶的登錄頁面是.war/screen/html下的login.jsp文件，可以刪除該文件里的所有內容，然后加入這么一句：
這樣是不是帶你又回到了首頁呢？是的，確實如你所想，這樣就封死了系統自帶的登錄頁面。如果你的用戶名或者密碼錯誤，或者你通過myportal直接調用，系統就會帶你回到首頁的登錄界面，重新輸入。從這里我們可以延伸開來，比如說Session過期、修改用戶的個人信息等，都可以通過這種方式封掉這個接口。
在.war/skin/html下，系統已經存在了好幾套皮膚，打開其中任意一個文件夾，你都能發現Control.jsp這個文件。該文件初始化一個小表格，該表格有兩行：第一行用來顯示Portlet的標題，后面是最大化、最小化、編輯按鈕；第二行是Portlet的body，用來顯示Portlet的內容。一般來說，用戶喜歡在Portlet名稱前面或者后面放個小圖標等之類的裝飾，我們可以直接在這個單元格里面操作，這符合基本的HTML語法。當然，如果Portlet的名稱是固定的，我們也可以像開發Portal主題的菜單一樣，用圖片來替代。其實只要判斷一下Portlet標題，如果符合，就調用相應的圖片，或者單獨為這個標題的Portlet開發一個皮膚，用于調用專門的圖片，或者直接顯示，或者作為背景，都很容易。
要換掉Portlet標題的背景圖片非常簡單，在第一個<td>里面加上這么一句代碼：
就一切OK了。
下面這個頁面是皮膚開發結合比較好的例子（見圖1-5），大家可以思考一下如何實現。
圖1-5 皮膚開發結合比較好的頁面
有些用戶不喜歡Portlet有太復雜的操作界面，要求去掉“最大化”、“最小化”、“還原”等功能，當然也就不顯示了。其實這非常容易，看如下一段代碼：
這段代碼是用來顯示“最小化”按鈕的，直接去掉就行了。而且，可以對此進行編輯，包括添加什么顯示內容，甚至添加什么新的事件等。同樣的道理，我們可以用相同的方法來操作“最大化”和“還原”兩個圖標。
在項目實施中我發現這樣一個有趣的現象：IBM產品的忠實用戶，往往鐘情于IBM系列產品的一貫風格。比如，某客戶幾年前實施的OA系統，“收件箱”、“發件箱”、“垃圾箱”等一系列菜單全部豎排在屏幕的左側，那么，客戶在實施Portal系統的時候，他就比較傾向于二級甚至一級菜單全在左側豎排的情況。其實實現很簡單，只要我們不再調用原來用于顯示一級菜單和二級菜單的JSP頁面，一級菜單就會以豎排的方式自動排列到屏幕的左側。那么我們要想美化這種菜單怎么辦呢？我們可以很容易地找到這個文件。
打開skin目錄，你會發現有這樣一個文件：LayeredContainer.jsp。不錯，就是它，它首先初始化一個表格：
該表格左側就是三級菜單（如果在Default.jsp中不再調用PageBar的話，這就是二級菜單；如果連一級菜單PlaceBar都不調用了，那么它就是一級菜單了）。右邊則是整個Portal系統的body部分，顯示了所有的Portlet。不曉得IBM為什么要這樣安排，似乎有點不合理。不過，確實是在這里修改的，可能是把它看做一個容器了吧！在左側的表格部分，你可以像編輯普通的網頁一樣，只要稍微有些美工知識，就可以隨心所欲地制作出個性化的左側管理菜單了。
看圖1-6所示的頁面效果，是不是非常漂亮。
圖1-6 頁面效果
其實實現很簡單，看LayeredContainer.jsp文件，下面是它的表格代碼，稍微加一些CSS，就能實現這種效果了。比如皮膚右側漂亮的弧線，其實只要這么簡單的一句話就OK了。
們再來看看某電力公司的首頁（見圖1-7），這也是皮膚開發結合比較好的例子。請留意紅色框里面的內容，里面的弧線、角度堪稱美工與主題皮膚開發人員黃金搭檔的一個好例子。
圖1-7 皮膚開發結合比較好的首頁
當然，這需要素質比較高的美工配合，也需要工程師在長期的開發中仔細琢磨。
假設我們現在已經開發出一套主題和皮膚，那么如何將這套主題和皮膚部署到門戶系統呢？下面是詳細的方法。
①將皮膚文件傳送到這個路徑下（見圖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-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 設置默認主題
將主題與皮膚文件解壓到/opt/IBM/WebSphere/，如圖1-17所示。
到/opt/IBM/WebSphere/主題目錄名/theme/目錄下確認文件 updateJKThemePolicies.sh 具有正確的參數。
在SSH命令行運行命令 updateJKThemePolicies.sh，如圖1-18所示。
圖1-18 運行命令
為導入的頁面分配主題，選擇主題“JKEnterprises”，然后單擊“OK”按鈕，如圖1-19所示。
圖1-19 選擇主題
退出并重新以wpsadmin身份登錄Portal系統，單擊“管理”進入管理界面，單擊“編輯頁面屬性”按鈕進入頁面屬性頁，確認該頁面的Theme（主題）所使用的主題是否為剛剛部署的新主題，如圖1-21所示。
圖1-20 應用新主題與皮膚
確認是否發生變化，如圖1-21所示。
圖1-21 應用了新主題與皮膚的登錄界面
登錄進去后，發現主頁也已經應用了新主題與皮膚，如圖1-22所示。
圖1-22 應用了新主題與皮膚的主頁
調試主題與皮膚一般采用兩種方法：一是修改reload以便快速自動裝載的方法，二是復制并添加主題與皮膚的方法。
我們知道，Portal系統的主題一切都是從Default.jsp文件開始初始化的，在通常的應用服務器上都有一個reload開關，用來控制服務器是否自動更新，IBM WebSphere Portal也不例外。如果打開這個開關（這個開關可以打開was，在管理控制臺里面設定，然后重啟機器），并設定了reload的時間，那么每隔一個時間段，系統會自動讀取主題與皮膚文件。換言之，只要我們把這個時間差設得足夠小，就能立刻觀察到修改結果（注意：既然是從Default.jsp開始聚焦的，那么，如果修改了由Default.jsp調用的其他文件，比如BeginPage.jsp，而沒有修改Default.jsp，系統會默認你沒有做任何修改，所以也就沒有任何改動了）。同時我也想聲明一點，這種方法帶來的系統開銷特別大，只可用于開發環境，在生產環境中是萬萬不可用的！
復制法指的是從已經有的主題文件夾里復制一份，然后在復制出的文件夾里修改相關的頁面代碼。這種方法適用于對已經存在的主題僅做少量的修改，如果是做大量的修改，甚至對整個頁面結構做大的改動，那就沒必要使用這種方法了，因為修改頁面框架的時間可能會遠遠大于重新開發的時間。復制出類似主題所在的文件夾后，重新命名新文件夾，然后將這個主題添加到系統，并指定給相應的測試頁面。因為復制出來的主題是第一次安裝，當然會“重新編譯”了。看得出來，這種方法比較不方便，只適用于特殊情況。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
