自定義 WebSphere Business Monitor 業務空間的外觀

Business Space 概述

在 V6.1.2 前，WebSphere Business Monitor（以下稱為 Monitor）的使用者介面是業務儀表板，供使用者建立業務資料的個性化檢視。以前有兩種儀表板：基於 WebSphere Portal 的儀表板和基於 Web 2.0 的儀表板。Monitor V6.1.2 引入了稱為 Business Space 的新使用者介面，提供了用於隨時隨地訪問業務資料的更為強大的功能。

通過使用新的 Web 2.0 Business Space 介面，使用者可以建立包含來自多個源的業務資料的個人業務空間。每個業務空間都由若干自定義頁面組成，每個頁面上使用一個或多個檢視顯示內容。頁面上的檢視由小部件提供支援，這些小部件均針對不同型別的動態和靜態內容進行自定義，如業務流程資訊、人工任務活動、流程關係圖、關鍵業務效能指標（Key Performance Indicators，KPI）、維度檢視和文件（如電子表格和簡報）。內容源可以位於本地，也可以位於遠端位置。每個使用者可以建立多個業務空間。

由於 Business Space 支援 WebSphere Business Monitor、WebSphere Process Server、WebSphere Business Modeler Publishing Server 和 WebSphere Business Services Fabric，因此可通過其向使用者提供大量的業務資料。可以將單個 Business Space 安裝配置為訪問來自這些產品的多個安裝的資料，從而為使用者提供與多個業務資料來源互動的單個介面。

像業務儀表板一樣，業務空間的視覺外觀是由主題確定的。主題由層疊樣式表（Cascading Style. Sheet，CSS）和樣式檔案中引用的影像定義。影像為業務空間、小部件和使用者介面的其他方面提供總體框架和邊界。Business Space 提供了預設主題，可以使用自定義主題對其進行替換，以為業務空間提供公司或組織所需的外觀。

在本文中，您將瞭解可以如何對隨 Monitor 安裝的預設 Business Space 進行自定義。我們將說明如何建立自定義主題、安裝主題以及自定義不由主題控制的視覺外觀，如頁面和小部件標題。儘管本文的重點是自定義隨 Monitor 安裝的 Business Space，但這些資訊也適用於其他產品的 Business Space 安裝。

提供了名為 ClipsAndTacksTheme 的主題供下載。此示例設計為與 BPM V6.1.1 Clips and Tacks 教程中的 Clips and Tacks 示例一起使用。更新 Clips and Tacks 示例使用 Business Space 的方法在姊妹篇文章 Getting started with WebSphere Business Monitor Business Space: Running the BPM V6.1.1 Clips and Tacks tutorial in Business Space V6.1.2 進行了描述。如果您安裝了 V6.1.2 Clips and Tacks 示例，則可以使用示例自定義主題來更改示例應用程式的外觀

檢視內建主題

業務空間的視覺外觀由一組外部 CSS 檔案控制。主樣式表是主題的 CCS。隨 Monitor 或其他 V6.12 產品安裝 Business Space 時，會有一個名為 Default 的內建主題應用到使用者建立的每個個人業務空間。此主題也會應用到與業務空間關聯的頁面和小部件。圖 1 顯示了應用了預設主題的業務空間。

圖 1. 應用到業務空間的預設主題

Business Space 還提供了其他主題。要檢視這些空間的縮略檢視，請執行以下操作：

1. 登入到 Business Space。
2. 在 Business Space Manager 中，單擊某個業務空間的標題欄的空白區域。如果未列出任何業務空間，請單擊 圖示，以從內建模板之一建立業務空間。名稱、主題和關於業務空間的其他資訊顯示在 Business Space Manager 的右側部分。
3. 在 Theme 行上，單擊 Change。將會隨即顯示 Change Theme 視窗，如圖 2 中所示。
   
   圖 2. 檢視內建主題的縮圖
   
   
   
4. 單擊主題的名稱，以顯示其縮略檢視。
5. 如果希望更為仔細地分析主題，請在 Change Theme 視窗中選擇主題，並單擊 OK。單擊 Save，以顯示更改，然後開啟業務空間。

   建立自定義主題

   建立自定義主題的最簡單方法是從內建主題著手。找到與您所需的調色盤最接近的主題，然後修改該主題的 CSS 和影像。業務空間的很多區域的顏色都是由小型影像檔案控制，而不受 CSS 檔案中的顏色設定控制。選取與所需調色盤接近的主題，可以減少製作自定義主題所需修改的影像檔案的數量。

   1. 請按照檢視內建主題中的相同步驟來標識希望重用的主題。請注意主題的名稱。
   2. 在 Monitor 安裝上，轉到包含內建主題的影像檔案的目錄。例如：
      monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\img
      其中，monitor_root 是 Monitor 安裝的根目錄，monitor_profile 是 Monitor 配置檔名稱，monitor_cell 是計算單元名稱。
   3. 在 \img 目錄下建立新資料夾。將此資料夾命名為自定義主題的名稱，例如，executiveTheme。
   4. 找到希望重用的主題的資料夾。資料夾名稱中包含了 Change Theme 視窗中顯示的主題的名稱。例如，Objectives 主題影像位於 objectivesTheme 資料夾中。
   5. 將目標主題的以下四個資料夾複製到新主題資料夾中：
      • Frame：包含組成業務空間的邊界和選項卡的影像。
      • Palette：包含提供皮膚的邊界和工具欄的影像，皮膚提供用於向頁面新增小部件的控制元件。
      • SpaceBrowser：包含與 Business Space Manager 關聯的影像，此工具提供各種控制元件，用於建立和匯入業務空間與頁面，更改業務空間的名稱、所有者和主題以及與其他使用者共享業務空間。
      • Wframe：包含定義小部件邊界和標題欄的檔案。
   6. 在伺服器系統上為自定義主題建立目錄。在本文中，我們將此目錄稱為主題擴充套件目錄。此目錄具有以下特點：
      • 不應位於 Monitor 安裝路徑中，以免在安裝 Monitor 更新時被覆蓋。
      • 是自定義主題 CSS 和 JavaScript. 檔案的儲存庫。
      • 支援使用稍後將設定的 Java™ 執行時變數動態載入對應的兩個檔案。
   7. 轉到包含主題的 CSS 和 JavaScript. 檔案的目錄。例如：
      monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\themes。
      
   8. 找到希望重用的主題的 CSS 和 JavaScript. 檔案。這些檔案包含 Change Theme 視窗中顯示的主題的名稱。例如，Objectives 主題檔案為 objectivesTheme.css 和 objectivesTheme.js。
   9. 將這兩個檔案複製到剛剛建立的主題擴充套件目錄中。
   10. 將檔名更改為新主題的名稱，例如，executiveTheme.css 和 executiveTheme.js。
   11. 編輯主題 JavaScript. 檔案，並進行以下更改：
       • 將 className 屬性更改為主題 CSS 檔案的檔名，不包含副檔名。
       • 將 name 屬性更改為主題的顯示名稱。安裝了自定義主題後，顯示名稱將在 Change Theme 視窗中列出，並會顯示在使用該主題的任何個人業務空間的 Theme 欄位中。
       • 對於 locale 屬性，請刪除括號之間的程式碼行，但請保留括號。這些程式碼行是原始主題名稱的翻譯。如果稍後獲得了您的主題名稱的翻譯，請將經過翻譯的字串新增到 locale 屬性中。
   12. 編輯 CSS 檔案，並進行以下更改：
       • 使用您的主題類名稱替換對舊主題類名稱的所有引用。例如，如果修改 Objectives 主題，請將字串 .objectivesTheme 的所有匹配項更改為 .executiveTheme。
       • 將字串 background-image: url 的所有例項的值更改為您的主題的目錄路徑。例如，如果在修改 Objectives 主題，請將 background-image: url(../img/objectivesTheme/Frame/bg.jpg); 更改為 background-image: url(../img/executiveTheme/Frame/bg.jpg);。

         注意：正如我們稍後要討論的，CSS 檔案在執行時複製到 Monitor themes 子資料夾中，從而使CSS 檔案中的 URL 為相對於 themes 資料夾的相對路徑。不要更改目標檔案的名稱，只修改檔案的路徑即可。

       • 查詢屬性 .bspacelogo。將為屬性 background-image: url 指定的值更改為 background-image: url(../img/yourTheme/yourImage.extension);，即自定義旗幟的路徑和資料夾。如果尚未建立自定義檔案，請設定佔位符名稱，待知道最終的名稱後更改。
   
   

   修改 CSS 和影像檔案

   自定義主題的基礎檔案現在已經就位。接下來 Web 設計人員、圖形設計人員和其他專業人員需要修改 CSS 和影像，以根據需要設定顏色、字型和其他屬性。修改檔案時，請遵循以下建議：

   • 建立業務空間，並將空間主題設定為您的自定義主題，以便在開始前瞭解其呈現情況。有關如何設定業務空間的主題的說明，請參見檢視內建主題。
   • 使用工具來標識向業務空間的不同區域應用了哪些樣式。該資訊將幫助您標識控制這些方面的視覺外觀的影像檔案或 CSS 樣式。Firebug 就是一個這樣的工具，它是 Mozilla® Firefox® 的外掛，支援對 CSS 進行編輯和除錯。
   • 編輯用於框架和邊界的影像時，請根據需要更改顏色，以使其與主題的調色盤相配。避免更改影像的尺寸。
   • 主題 CSS 檔案和 theme 資料夾中的影像控制業務空間的大部分視覺外觀，可以在不影響其他主題的情況下進行編輯。不過，業務空間的某些方面由共享影像和 CSS 檔案控制。例如，img\iconsCommon 和 img\controlsCommon 資料夾中包含跨業務空間主題使用的影像。在編輯 \img 子資料夾外的任何主題檔案或主題 CSS 檔案前，請對原始檔案進行備份。
   • 如果建立了自定義旗幟，將會在該安裝的所有業務空間使用。圖 1 顯示了 Default 主題的旗幟。請將自定義旗幟放在主題的影像資料夾的根目錄 img\yourTheme 中，並驗證主題 CSS 檔案在樣式 .bspacelogo 的 URL 中引用了該檔名。如果旗幟在業務空間中的顯示尺寸不對，請編輯 banner.jsp 檔案：
     1. 轉到 Monitor 安裝上的以下目錄：
        monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war。
     2. 建立 banner.jsp 檔案的備份副本。
     3. 在文字編輯器中開啟 banner.jsp 檔案。
     4. 找到樣式引用 bspacelogo。
     5. 根據旗幟影像的大小調整 width 和 height 屬性的值。
   • 如果您為登入頁建立了自定義背景，將會在該安裝的所有業務空間使用。圖 3 顯示了預設登入頁。將自定義背景影像放入主題的影像資料夾的根目錄 img\yourTheme 中。
   
   圖 3. 預設登入頁
    

   建立自定義登入頁

   業務空間主題不會應用到登入頁。登入頁的外觀由 CSS 檔案 login.css 控制。此檔案中定義的樣式包括頁的背景影像。通過樣式，可以方便地設定登入頁來顯示公司徽標或其他獨特的圖形。對 login.css 檔案的更改會影響該 Business Space 安裝的所有使用者的登入頁的外觀。要修改登入頁的 CSS，請進行以下操作：

   1. 在安裝 WebSphere Business Monitor 的伺服器上，轉到以下目錄：
      monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\css。
   2. 儲存 login.css 檔案的備份副本。
   3. 在文字編輯器中開啟 login.css 檔案。
   4. 找到名為 .login-bg 的樣式。
   5. 將 background-image: url 屬性設定為放在 img\yourTheme 目錄中的自定義背景檔案的路徑。
   6. 儲存 login.css 檔案。
   7. 為了對更改進行測試，請登入到 Business Space。login.css 檔案中的自定義背景影像和任何其他更改都應呈現在登入頁上。圖 4 顯示了自定義登入頁。
   
   圖 4. 自定義登入頁
   

   配置 Java 執行時變數

   完成了所有主題更改後，需要設定指向主題擴充套件目錄的 Java 執行時變數。使用該擴充套件變數確保主題 CSS 和 JavaScript. 檔案不會在更新安裝時被覆蓋。如果不希望使用擴充套件變數動態地將這些檔案複製到 Monitor themes 目錄，請直接將這些檔案的最終版本放入以下路徑，並跳過此過程：
   monitor_root\profiles\monitor_profile\installedApps\monitor_cell\BusinessSpaceManager.ear\BSpaceManager.war\themes。

   1. 登入到 Monitor 安裝的管理控制檯。
   2. 選擇 Servers => Application servers => server_name ，其中 server_name 是 Monitor 安裝的應用伺服器名稱，如 server1。
   3. 在 Server Infrastructure 部分，選擇 Java Process Management => Process Definition => Environment Entries。
   4. 單擊 New。將會顯示圖 6 中所示的對話方塊。
   5. 在 Name 欄位中鍵入 WBM_WEB_DASHBOARD_EXT_DIR。
   6. 在 Value 欄位中，指定在建立自定義主題部分中建立的主題擴充套件目錄。
   7. 單擊 OK。從現在起，任何時候使用者登入，伺服器都會檢查主題擴充套件目錄。
      
      圖 6. 設定 Java 執行時變數
      
      
      
   8. 從管理控制檯登出。
   9. 重新啟動伺服器。
   
   

   更改業務空間或頁面的名稱

   建立空白業務空間或使用模板時，可為業務空間指定名稱。如果通過匯入業務空間資料檔案建立業務空間，新業務空間的名稱與資料檔案中定義的名稱相同。如果後面希望更改業務空間名稱，請使用 Business Space Manager。要重新命名資源，您必須為其所有者，或具有編輯許可權。業務空間或某個頁面的名稱更改會應用到該業務空間的所有使用者。

   要更改業務空間或頁面的名稱，請進行以下操作：

   1. 開啟 Business Space Manager。
   2. 在右側，單擊業務空間或頁面的標題欄（但不是標題本身）。
   3. 在右側的 Name 欄位中輸入業務空間或頁面的新名稱。
   4. 單擊 Save。

   重新命名頁面的另一個方法是，在業務空間中開啟頁面時更改名稱，具體操作如下：

   1. 開啟希望重新命名的頁面。
   2. 在頁工具欄上，顯示頁面選單並選擇 Rename，如圖 7 中所示。
      
      圖 7. 更改頁面名稱
      
      
      
   3. 在 Name 欄位中鍵入新名稱。
   4. 單擊 Save。
   
   
   
   

   更改小部件標題

   小部件顯示業務空間頁中一個部分的內容。除非更改了標題，否則會顯示預設小部件標題。名稱更改僅僅應用於該例項。如果向頁面新增了此小部件的另一個例項，新例項在更改前都會使用預設標題。要更改單個小部件例項的小部件標題，請進行以下操作：

   1. 轉到希望重新命名的小部件。
   2. 單擊標題。標題將突出顯示，並會顯示標題輸入欄位，如圖 8 中所示。
      
      圖 8. 更改小部件標題
      
      
      
   3. 鍵入小部件的新標題。
   4. 單擊標題欄位外的任意位置。欄位將關閉，新標題將顯示在標題欄上，並應用了主題顏色。

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