在 IBM Lotus Quickr 8.5 for WebSphere Portal 中定製主題

簡介： 本文概述了 IBM® Lotus® Quickr® 8.5 for WebSphere® Portal 中的主題特性，詳細向您介紹了建立主題和皮膚並進行更新定製的相關知識，如更改標識，修改配色方案，進行高階佈局更改和整合定製元件。

先決條件

本文假定您已經很好地理解基本的 HTML、JavaServer™ Pages (JSP)、Cascading Stylesheets (CSS) 和 JavaScript™ 等技術。Lotus Quickr 8.5 是基於 Websphere Portal V6.1.5 構建的，它的主題實現是現有 Portal 頁面構建器主題的一個擴充套件。要從本文中得到最大受益，您還必須熟悉 IBM WebSphere Porta V6.1.5 的頁面構建器主題。請參考 WebSphere Portal Information Center 6.1.5 瞭解更多關於 Portal 主題定製的資訊。

一個主題是由組成父 JSP 檔案（Default.jsp）的一組檔案及父 JSP 的其餘部分所組成。各部分的 JSP 是包含在父 JSP 中的，而且通常它們被儲存為 JSPF 副檔名。除了主題的 JSP 檔案之外，這個主題還包含一些影像檔案（主題圖片）、樣式表、JavaScript. 檔案和 Dojo 小部件。下一節將詳細介紹主題的佈局和如何修改主題的各個元素。

主題佈局

正如在上一節所介紹的，主題是分成許多片段的，它們是通過一個父 JSP 檔案拼湊成為一個主題的。下面是其中主要的主題片段：

• 全域性導航
• 標題欄
• 位置欄
• 側邊導航欄
• Portlet 顯示區
• 頁尾

各部分的佈局如圖 1 所示。

圖 1. 主題佈局

為了保持主題簡單，這裡佈局的每一部分只使用一個 JSP 或 JSP 片段。例如，globalNav.jsp 用於生成全域性導航欄。類似地，topNav.jspf 和 sideNav.jspf 則分別用來渲染標題欄和側邊導航欄。圖 2 顯示了一個簡化的主題 JSP 結構。

圖 2. 主題結構

主題定製包括簡單的樣式表修改，如新增新的配色方案到頁面，也包括高階修改，如修改主題的現有元素，以及整合定製應用和元件。下面的章節將討論主題定製的基本機制，以及修改主題佈局和新元件整合的高階場景。

建立定製的主題

預設主題和皮膚本身是能夠在生產環境使用的，它們被部署在一個名為 QuickrThemeApp.ear 的 EAR 檔案中。要對其進行修改，您必須擁有伺服器的管理員許可權。要建立一個定製主題或皮膚，您需要複製 QuickrThemeApp.ear 到一個臨時位置，然後進行修改。您的新主題將打包為一個新的 EAR 檔案進行部署。

要點：在修改這個主題之前，您需要建立一個定製主題。原始的 Lotus Quickr 主題可以在應用主題的臨時修改或增加普通的修復包後重新部署。

下面是建立一個主題 EAR 檔案的詳細步驟。

1. 將預設的主題檔案 wp_profile/installableApps/QuickrThemeApp.ear 複製到一個臨時位置。
2. 解壓 QuickrThemeApp.ear 檔案。
3. 修改 QuickrThemeApp.ear/META-INF/application.xml 檔案，新增一個惟一顯示名稱、模組 ID 和上下文根目錄。
4. 重新建立 EAR 檔案。新的 EAR 檔案的名稱必須與原始的 QuickrThemeApp.ear 檔案不同。
5. 將新的 EAR 檔案複製回伺服器進行部署。請參考 WebSphere Portal 6.1.5 Information Center 的 部署主題。
6. 註冊這個新主題和皮膚。請參考清單 1 所示的示例 xmlaccess 指令碼，它用於匯入所定製的主題。

注意：在指令碼中，您必須提供一個惟一的上下文根目錄（在步驟 3 中提供）來標識這個定製主題應用。

清單 1. DeployYourTheme.xml

欲瞭解更多資訊，請參考 WebSphere Portal 6.1.5 Information Center 的 匯入一個主題。

您會看到您定製的主題和皮膚位於 Home – Advanced Administration – Portal User Interface – Themes and Skins。

對於最初的開發，您可以建立一個測試頁面或者位置，然後將定製主題應用到它上面。這個主題可以使用 Place Actions – Edit Place 進行分配。在修改主題並完成單元測試後，將伺服器的預設主題修改為您所定製的主題。這個操作可以在高階管理的主題和皮膚頁面進行。除非已經有一個位置已經設定非預設主題，否則所有位置都會自動更新為使用這個定製（預設）主題。

修改主題檔案

正如上一節所介紹的，這個主題是由一組 JSP 和樣式表組成的，它們定義了主題的呈現語義。在 Lotus Quickr 8.5 中，主題樣式表是在多個元件中共享的，包括主題、位置目錄和單個 Lotus Quickr 元件，如部落格、庫等。同時，這其中還有一些佈局，如頁尾，這在 Lotus Quickr 的 teamplace、位置目錄和位置管理中是很常見的。為了簡單起見，所有這些資源都會在一個通用資源應用程式中單獨繫結。主題應用程式和通用資源應用程式的位置都列在下面。

主題：

wp_profile\installedApps\\
QuickrThemeApp.ear\wp.theme.quickrtheme.war\themes\html\Quickr

普通資源：

wp_profile\installedApps\\
QuickrCommonResourcesApp.ear\qkr.common.resources.war

在本文的其餘部分，我們將上面的主題位置引用為 theme_root 目錄，而通用資源應用程式位置則為 common_resources_root 目錄。

要點：建立和部署一個定製的普通資源 EAR 檔案。請根據 "建立一個定製主題” 中的步驟進行操作。

新增樣式表

Lotus Quickr 8.5 包含了一組即用型樣式表。這些樣式表可以從 Lotus Quickr 定製調色盤中選擇和應用。圖 3 顯示的是已有的樣式表和應用到一個 teamplace 的示例配色方案。

圖 3. 定製架樣式

如果沒有任何一個現有樣式表提供了您需要的配色方案，您可以建立一個新的樣式表，然後將它們新增到定製調色盤上，然後選擇性地將它們應用到位置中。此外，您也可以修改預設的樣式表（在通用資源應用程式中）來修改所有位置和 Lotus Quickr 首頁的配色方案。

建立定製的樣式表

建立樣式表是非常簡單的。由於主題中只使用了少數的顏色，所以通過將現有的顏色程式碼替換成您的新顏色，您就可以使用現有的樣式表來建立新樣式表。樣式表中需要修改的顏色主要有：

• 正文背景
• 文字、按鈕文字、標題，包括選擇和未選擇的樣式
• 按鈕背景顏色
• 側邊導航欄，包括背景和邊框

前面的元素顏色會被用在幾個樣式類中，以實現主題的整體配色方案。在確定這裡每一個元素的新顏色程式碼後，樣式表中每一個現有的顏色程式碼都可以替換成新的顏色程式碼。

下面的步驟介紹瞭如何建立樣式表，以及如何將它們新增到定製調色盤中。

1. 開啟
   
   custom_common_resources_root \css 中的 QuickrCommonResourcesApp.ear 檔案

   這裡有一些資料夾（greyTheme、purpleTheme 等），每一個都與定製調色盤中所列的樣式相關聯。每一個資料夾都包含一個樣式表，它定義了配色方案以及與配色方案匹配的影像。

2. 通過複製現有的樣式檔案來定義您的定製樣式表。例如，greyTheme。將這個資料夾重新命名為 。同時將這個樣式表重新命名為 .css。
3. 修改定製的 CSS 檔案，使之包含您公司的主題顏色。儲存修改。

   下一步，您需要將您定製的樣式表新增到定製調色盤上。

4. 開啟並編輯 custom_theme_root\system\styles.json 檔案。

   這個 JSON 檔案包含了定製調色盤上所列的每一個樣式表的條目。要為定製樣式表新增一個條目，您需要複製一個現有條目，然後編輯 ID，將它指向您定製的樣式表的路徑。下面是一個新條目示例：

   {'label':'','id':'/
   .css','thumbnail':ibmPortalConfig.themeRootURI+'/images/changeStyle/
   .gif','help':''}

注意：這個檔案如果出現任何錯誤，您都會無法將這個定製調色盤載入到伺服器上。如果出現這樣的問題，您需要檢查檔案是否有漏掉逗號、大括號，或者出現其他語法錯誤。

在完成這些步驟之後，您就可以在定製架（Customize shelf）中看到您定製的樣式表。圖 4 顯示的是這個定製的樣式表。

圖 4. 帶有定製主題按鈕的定製架

修改位置目錄樣式

登入之後的頁面（位置目錄）顯示了包含所有位置的列表。這個頁面的樣式是使用儲存在通用資源應用程式的一個 JSP 設定的。以下步驟展示如何將您定製的樣式表應用到位置目錄頁面。

1. 將 custom_common_resources_root\defaultTheme\commonstyles.jsp 檔案複製到 custom_common_resources_root \ 資料夾。
2. 開啟 custom_common_resources_root \\commonStyles.jsp 檔案，使用 .css 檔案替換 defaultTheme.css 檔案。
3. 最後，編輯所列的 JSP 檔案，替換以下所示的內容：
   
   

   要替換的 JSP：

   1. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/catalog.jsp
   2. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/search.jsp
   3. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/templates.jsp
   4. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/noPermission.jsp
   5. wp_profile/installedApps/qkr/searchApp.ear/searchCenterUI.war/WEB-INF/jsp/PlaceSearchCenter.jsp
   6. wp_profile/installedApps/qkr/searchApp.ear/searchCenterUI.war/WEB-INF/jsp/ECMSearchCenter.jsp

   將文字行

   替換為

儲存您的修改，然後重新整理瀏覽器，您就可以看到定製的樣式表已經應用到位置目錄頁面了。

標識

要修改您的公司標識，您需要用新的標識檔案替換下面的檔案：

• custom_theme_root\css\images\logo_black.png
• custom_theme_root \css\images\logo_white.png
• custom_theme_root \css\images\logo.png

標識樣式類位於 themeroot\css\themeStyles.jsp 檔案。修改這個檔案可以調整標識的高度、寬度、背景顏色等。

全域性導航和位置標籤

位於頁面頂部的導航連結在 Lotus Quickr 的所有頁面上都是保持不變的。這些連結是作為全域性導航連結使用的。圖 5 顯示了所呈現的現成全域性導航欄。

圖 5. 現成的全域性導航欄

現有的全域性導航欄是使用 Dojo 小部件生成的。您可以在不修改 Dojo 程式碼的情況下修改導航欄。下面的例子說明了如何新增一個導航項到導航欄中，如圖 6 和清單 2 所示。

圖 6. 定製的全域性導航欄


清單 2. 全域性導航：globalNav.jspf

類似地，您可以通過編輯 custom_theme_root\topNav.jspf 檔案在位置標籤行上增加一個標籤。清單 3 就是在位置標籤行上增加一個標籤的程式碼段，如圖 7 所示。

清單 3. 頂部導航欄：topNav.jspf

此外，您也可以使用現有的小部件程式碼來建立指向 LotusQuickr-config 檔案中所增加的定製服務的連結。關於如何新增一個定製服務到 Lotus Quickr 配置服務的更詳細資訊，請參考 Lotus Quickr 8.5 Information Center 中的步驟。

側邊導航欄

側邊導航欄，也稱為左側導航欄，它是用來在一個 Lotus Quickr 位置內呈現頁面的。預設情況下，側邊導航欄是使用 Dojo 小部件建立的。使用者可以修改側邊導航欄，如編輯配色方案或元素佈局，或者新增條目。雖然諸如修改顏色或其他呈現語義等修改是可以通過修改通用資源應用程式的 CSS 來實現，但是其他的修改，如新增類似於已有的 Members 連結的連結，則需要修改位於 的 sideNav.jspf 檔案。

清單 4 是一個說明如何在側邊導航欄中新增更多條目的例子。

清單 4. 側邊導航欄：sideNav.jspf

圖 8 顯示的是修改了顏色、選單樣式和佈局的示例側邊導航選單。應用到這些側邊導航欄的樣式儲存在通用資源應用程式中。

圖 8. 側邊導航欄

定製架

定製架是位置管理員用來定製其位置的工具，其中包括選擇頁面佈局、顏色主題和 Lotus Quickr 元件。非管理員的使用者是不能使用這個定製架的。

在處於可用狀態時，定製架由三個標籤組成：Add Content、Change Layout 和 Change Styles。您可以使用 Add Content 來給一個位置新增一些元件，您也可以使用 Change Layout 和 Change Styles 來定製位置呈現的佈局和樣式。

上一節 “新增樣式表” 描述瞭如何為一個定製主題建立和新增樣式表。類似地，您可以修改 custom_theme_root\new_quickr.json 檔案，新增定製的元件到定製架上。在新增之後，您的定製元件就可以被 Lotus Quickr 的所有位置管理員使用。

下面的步驟說明了新增元件到定製架所需要的更改。

1. 開啟並編輯 custom_theme_root\new_quickr.json 檔案。
   
   

   JSON 檔案包含了定製調色盤所列的每一個元件的條目。要為這個定製元件新增一個條目，您需要複製現有條目，然後編輯您的定製元件的值標籤：component_title、description, portletID (uid for portlet)、id (uid for portlet) 和 thumbnail。清單 5 是一個新條目示例。

   
   
   清單 5. 示例條目：new_quickr.json
   

   {'label':'CustomComponent’, 'component_title':' CustomComponent ', 'description':'This is my custom component', 'applicationID':ibmPortalConfig.appID, 'portletID':'wps.p.teamCalendar', 'id':'wps.p.teamCalendar', 'redirect':'true', 'nodesOnLevel':ibmPortalConfig.nodesOnLevel, 'samePage':'true', 'cmdUrl':ibmPortalConfig.myurl, 'thumbnail': 'class:qkrSprite-components qkrSprite-components-events-16x16'}

   
   

在完成這些步驟之後，您可以看到定製架上會出現您定製的元件。

提示：如果在 JSON 檔案中新增一個新條目作為最後的條目，您需要在前一行末尾插入一個逗號，保證檔案格式是正確的。如果這個檔案出現任何錯誤，您可能就無法在伺服器上載入這個定製調色盤。

請參考 Lotus Quickr wiki 文章，“ 新增元件到定製架上：qp85”，瞭解更多關於新增元件到定製架的資訊。

頁尾

主題頁尾位於主題頁面的底部，它在 Lotus Quickr 位置、位置目錄或位置管理頁面上的所有頁面都是通用的。這個通用頁尾位於 Lotus Quickr 通用資源應用程式中。可以定製頁尾 JSP，如增加或刪除條目，修改佈局，或者修改頁尾樣式等。您可以通過編輯 custom_common_resources_root/jsp/footer.jsp 檔案來修改主題頁尾。

Portlet 皮膚是 Portlet 的包裝層。Portlet 標題、Portlet 選單操作和標記 Portlet 區域的邊框都是由皮膚所渲染的。皮膚附帶在主題 EAR 打包檔案內，它位於：

wp_profile\installedApps\\
\wp.theme.quickrtheme.war\skins\html

圖 9 顯示的是 Lotus Quickr 的預設皮膚。

圖 9. Portlet 預設皮膚

在可用狀態下，Lotus Quickr 帶有兩種主要的皮膚：

• XQkrSkin（Lotus Quickr 主題使用的預設皮膚）
• QkrThinSkin

使用者可以根據需要選擇使用其中一種皮膚。圖 9 顯示的是預設的 QkrSkin，而 QkrThinSkin 則隱藏了皮膚包裝層，只有在滑鼠指標移動到 Portlet 區域時才會顯示這個皮膚包裝層。類似地，使用者也可以定製皮膚，並將它們應用到位置中。圖 10 顯示的是一個使用 QkrThinSkin 的位置。

圖 10. 未應用皮膚的 Portlet

注意這時 Portlet 周圍沒有皮膚包裝層。然而，如果您指向這個 Portlet，那麼這個包裝層就會顯示。可以定製這個包裝層為永遠不顯示皮膚，或者總是隻顯示 Portlet 選單。

Lotus Quickr 主題的語言包位於：

\portalserver\shared\app\nls\quickr_xx.properties

它們採用的命名模式是：quickr_[language].properties。您可以通過新增新的資源包到這個目錄來增加新的字串到主題。更多關於新增資源包的資訊可以參考 WebSphere Portal Information Center V6.1.5。

本文概括在 Lotus Quickr 8.5 中定製主題的一些常見場景。通過閱讀本文，您應該能夠動手建立主題，並將它們定製為您的主題。本文可用作理解如何修改主題各個部分的指南。

原文連結：http://www.ibm.com/developerworks/cn/lotus/quickr-custom-theme/index.html

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/14751907/viewspace-675102/，如需轉載，請註明出處，否則將追究法律責任。