人人IT網

人人IT網

當前位置: 主頁 > 服務器軟件 > Websphere >

使用 WebDAV 簡單定制 Business Space 外觀

時間:2012-10-31 18:01來源:Internet 作者:Internet 點擊:
Business Space 可定制工件簡介 用戶體驗是衡量一個圖形化的用戶界面系統很重要的一個因素,而靈活性和可定制則在用戶體驗中占有相當的比重。許多企業級的用戶都有定制化的需求,他們往往

Business Space 可定制工件簡介

用戶體驗是衡量一個圖形化的用戶界面系統很重要的一個因素,而靈活性和可定制則在用戶體驗中占有相當的比重。許多企業級的用戶都有定制化的需求,他們往往希望看到的是一些與他們相關的信息,例如帶他們公司圖標(logo)的圖片、帶公司名稱的文字等等,而不是看到所有的信息都是系統自帶的。因此,Business Space 系統在版本 7.5 提供了一些關於靈活性的定制化工作功能,從而给用戶帶來更好的使用體驗。

本文將描繪一個定制場景,內容包括:

  • 如何定制登錄頁面的背景和圖片;
  • 如何定制條幅(包含對只具有查看者權限的用戶隱藏部分操作菜單、除去空間標題和圖標、更改條幅顯示的顏色和背景圖像);
  • 如何定制業務空間样式(包含定制對話框的頁眉和頁腳背景色、定制業務空間頁腳、定制菜單顏色配色);

配置 WebDAV

WebDAV (Web-based Distributed Authoring and Versioning,基於萬維網的分布式創作和版本控制 ) 是一種基於 HTTP 1.1 協議的通信協議,它使用戶可以協作編輯和管理遠程 Web 服務器上的文件。WebDAV 技術使得網络客戶端用戶可以方便地使用網络服務端的文件系統,就如同使用本地操作系統的文件系統一下方便快捷。Business Space 系統使用 WebDAV 來存儲和部署用於登錄頁面、样式、條幅和主題的工件。

配置可以訪問到 Business Space 系統的 WebDAV 客戶端的步驟如下:

在 Windows 操作系統中,右鍵單擊“我的電腦”>“映射網络驅動器”,單擊“注冊聯機存儲或連接到網络服務器”,單擊“下一步”,單擊“選擇其他網络位置”,單擊“下一步”,在“Internet 或網络地址” 輸入 http://<BSPACE_HOST>:<BSPACE_PORT>/mum/mycontenthandler/mm/dav/filestore,然後單擊下一步, 輸入 WebSphere 管理員標識和密碼,接受或輸入網络位置的名稱,然後單擊下一步, 單擊“完成”。


定制登錄頁面背景和圖片

定位登錄頁面目錄

打開 WebDAV 文件夾 http://<BSPACE_HOST>:<BSPACE_PORT>/mum/mycontenthandler/mm/dav/filestore/login(本例中为 http://9.123.125.87:9081/mum/mycontenthandler/mm/dav/filestore/login),如圖所示,這是系統管理登錄文件的目錄位置。复制其中的 bspace 文件夾至本地,重命名为 customstyle1。


圖 1. 系統管理登錄文件目錄
圖 1. 系統管理登錄文件目錄

更改登錄頁面背景色

  1. 創建新的背景圖片文件,這裏我們選取了一個示例圖片,注:背景圖片可被程序拉伸;

    圖 2. 示例背景圖片
    圖 2. 示例背景圖片

  2. 將新的背景圖片文件复制至本地的文件夾 customstyle1/images 中;
  3. 編輯 customstyle1/login.css 文件,找到 .topDiv 字段,更新 background-image 後面的文件名指向新的背景圖片文件。

    清單 1. login.css 中 .topDiv 字段
    				  
     .topDiv { 
     height: 100%; 
     font: 300 11px Arial, Verdana, Geneva, Helvetica, sans-serif; 
     color: #ffffff; 
     background-image: url(images/login-page-bg-GraudatedGreen.png); 
     background-position: center; 
     } 
    

更改登錄區域背景圖像

  1. 創建登錄區域圖像文件,這裏我們選取了一個示例圖片。

    圖 3. 示例登錄區域圖像
    圖 3. 示例登錄區域圖像

  2. 將新的登錄區域圖像文件复制至本地的文件夾 customstyle1/images 中;
  3. 編輯 login.css 文件,找到 .login-bg 字段,修改字段的值指向新的登錄區域圖像文件。

    清單 2. login.css 中 .login-bg 字段
    				  
     .login-bg { 
     background-image: url(images/bspace_login_pic_custom.png); 
     background-repeat: no-repeat; 
     height: 428px; 
     width: 579px; 
     } 
    

部署定制的工件

將修改後的 customestyle1 文件夾上傳至相應的服務器 WebDAV 目錄 http://<BSPACE_HOST>:<BSPACE_PORT>/mum/mycontenthandler/mm/dav/filestore/login。此時 login 文件夾下會包含兩個目錄,如圖所示。


圖 4. 將 customestyle1 上傳於 login 目錄中
圖 4. 將 customestyle1 上傳於 login 目錄中

修改系統設置值

在服務器端,定位到 WebSphere 應用服務器的概要文件安裝路徑(注:如果是集群環境下,需要定位到部署管理器的概要文件)下的 BusinessSpace/< 節點名稱 >/< 服務器名稱 >/mm.runtime.prof/config 或 BusinessSpace/< 集群名稱 >/mm.runtime.prof/config 子目錄,找到名为 ConfigService.properties 的文件,在文件中找到名为 com.ibm.bspace.login.style 的屬性,將其值修改成自定義文件夾的名稱 customstyle1,保存文件。

使用 WebSphere 應用服務器的 wsadmin 腳本編制客戶機運行 updatePropertyConfig 命令,wsadmin 命令在概要文件安裝路徑的 bin 子目錄下。注:集群環境下需要使用部署管理器的概要文件。

 $AdminTask updatePropertyConfig {-serverName server_name 
 -nodeName node_name -propertyFileName 
 "profile_root\BusinessSpace\node_name\server_name
 \mm.runtime.prof\config\ConfigService.properties" 
 -prefix "Mashups_"} 
 $AdminConfig save 

 $AdminTask updatePropertyConfig {-clusterName 
 cluster_name -propertyFileName 
 "deployment_manager_profile_root\BusinessSpace
 \cluster_name\mm.runtime.prof\config\ConfigService.properties"
  -prefix "Mashups_"} 
 $AdminConfig save 


圖 5. wsadmin 命令運行示例
圖 5. wsadmin 命令運行示例

清除瀏覽器緩存,重新登錄 Business Space 系統,可以看見頁面背景色和登錄區域背景圖像都已更新,如圖所示。


圖 6. 定制後的登錄頁面
圖 6. 定制後的登錄頁面

定制條幅

定位條幅目錄

打開 WebDAV 文件夾 http://<BSPACE_HOST>:<BSPACE_PORT>/mum/mycontenthandler/mm/dav/filestore/public/themes/bspaceTheme/banner。(本例中为 http://9.123.125.87:9081/mum/mycontenthandler/mm/dav/filestore/public/themes/bspaceTheme/banner),如圖所示,复制其中的 bspace 文件夾至本地,重命名为 custombanner1。


圖 7. 條幅管理目錄
圖 7. 條幅管理目錄

編輯文件 custombanner1\banner.html, 更新 banner.css 的路徑 , 如下

linkElement.href = ibmCfg.themeConfig.themeRootURI + "/banner/custombanner1/banner.css";

對查看者權限的用戶隱藏管理空間和操作鏈接

打開文件 custombanner1\banner.css,去掉如下部分的注釋標記,使 “管理空間”鏈接和“操作”下拉菜單對現有空間的所有查看者(viewer)不可見,並保存。


清單 3. 對查看者屏蔽“管理空間”鏈接和“操作”下拉菜單的代碼
				  
 .bspace-viewer .bannerActionLinksDiv #gotoSpacesLinkSeparator { 
	 display: none; 	
 } 
 .bspace-viewer .bannerActionLinksDiv #manageSpacesLink { 
	 display: none; 
 } 
 .bspace-viewer .bannerActionLinksDiv #manageSpacesLinkSeparator { 
	 display: none; 
 } 
 .bspace-viewer .bannerActionLinksDiv .actionsDropDown { 
	 display: none; 
 } 

下面兩張圖列出定制前後的區別。


圖 8. 缺省的查看者所見條幅
圖 8. 缺省的查看者所見條幅

圖 9. 定制後查看者所見條幅部分鏈接被隱藏
圖 9. 定制後查看者所見條幅部分鏈接被隱藏

注:此更改需要在應用步驟 4.5 部署定制工件的方法之後才可生效。

除去業務空間標題和圖標

打開文件 custombanner1\banner.html,找到表示業務空間的標題行的具體信息的元素 <div class="titleBannerRepeat"> …… </div>。編輯文件,刪除如下所示內容,使此標題行對用戶不可見


清單 4. 含業務空間的標題行具體信息的代碼
				  
 <div class="titleBannerRepeat"> 
 <div class="titleBanner"> 
 <table id="bannerTable" class="bannerTable" cellpadding=0 cellspacing=0> 
 <tr> 
 <td width="100%"> 
 <div class="iw-iWidget iw-Standalone" id="spaceTitle"> 
 <a class="iw-Definition" 
 href="/BusinessSpace/iWidget/widgets/system/spaceTitle/spaceTitle.xml"
  style="display:none;"> 
 </a> 
 </div> 
 <div id="bspacePerformanceMetrics" class="navigationPanel" 
 style="float:right;padding-right:20px"> 
 </div> 
 </td> 
 </tr> 
 </table> 
 </div> 
 </div> 

下面兩張圖列出定制前後的區別。


圖 10. 缺省標題行可見
圖 10. 缺省標題行可見

圖 11. 定制後標題行被隱藏
圖 11. 定制後標題行被隱藏

注:此更改需要在應用步驟 4.5 部署定制工件的方法之後才可生效。

更改 upper 條幅的背景顏色和圖片

接下來繼續更改條幅的背景顏色和圖片,此時需要添加新 css 規則。

將以下內容添加至 custombanner1\banner.css 文件中,以覆蓋控制條幅操作鏈接的 <div> 標記,將漸變圖像替換为純背景色 415B2F。


清單 5. 更改條幅左側背景色代碼
				  
 .headerDivRepeat { 
 background: # 415B2F !important; 
 } 

將以下內容添加至 custombanner1\banner.css 文件中,以覆蓋控制常用操作的 <div> 標記,將向條幅添加定制圖像 BackgroundBanner.PNG(此文件須被添加至 custombanner1/images 文件夾中)。


清單 6. 更改條幅右側背景圖片代碼
				  
 .mashups .headerDiv { 
 background-image: url("/mum/mycontenthandler/mm/dav/filestore
 /public/themes/bspaceTheme/banner/noSpaceTitle/images
 /BackgroundBanner.PNG") !important; 
 background-position: right !important; 
 } 

下面三張圖顯示的是定制後的條幅。


圖 12. 定制後的條幅整體
圖 12. 定制後的條幅整體

圖 13. 定制後條幅左側为純背景色
圖 13. 定制後條幅左側为純背景色

圖 14. 定制後條幅右側为定制圖片
圖 14. 定制後條幅右側为定制圖片

部署定制的工件

將修改完的 custombanner1 文件夾复制至 http://<BSPACE_HOST>:<BSPACE_PORT>/mum/mycontenthandler/mm/dav/filestore/public/themes/bspaceTheme/banner 目錄下。


圖 15. 將 customebanner1 上傳於 banner 目錄中
圖 15. 將 customebanner1 上傳於 banner 目錄中

在服務器端,定位到 WebSphere 應用服務器的概要文件安裝路徑(注:如果是集群環境下,需要定位到部署管理器的概要文件)下的 BusinessSpace/< 節點名稱 >/< 服務器名稱 >/mm.runtime.prof/config 或 BusinessSpace/< 集群名稱 >/mm.runtime.prof/config 子目錄,找到名为 ConfigService.properties 的文件,在文件中找到名为 com.ibm.bspace.login.style 的屬性,將其值修改成自定義文件夾的名稱 customstyle1,保存文件。

使用 WebSphere 應用服務器的 wsadmin 腳本編制客戶機運行 updatePropertyConfig 命令,wsadmin 命令在概要文件安裝路徑的 bin 子目錄下。注:集群環境下需要使用部署管理器的概要文件。

$AdminTask updatePropertyConfig 
{-serverName server_name -nodeName node_name
 -propertyFileName "profile_root\BusinessSpace
 \node_name\server_name\mm.runtime.prof\config\ConfigService.properties" 
 -prefix "Mashups_"}
 
$AdminConfig save 

$AdminTask updatePropertyConfig {-clusterName cluster_name 
-propertyFileName "deployment_manager_profile_root
\BusinessSpace\cluster_name\mm.runtime.prof
\config\ConfigService.properties" -prefix "Mashups_"} 

$AdminConfig save


圖 16. wsadmin 命令運行示例
圖 16. wsadmin 命令運行示例

清除瀏覽器緩存,重新登錄 Business Space 系統,可以看見條幅區域已更新。


5. 定制空間样式

5.1 定位空間样式目錄

一種定制样式的簡單方法是 在現有 style 文件基礎上進行編輯。

打開 WebDAV 文件夾 http://<BSPACE_HOST>:<BSPACE_PORT>/mum/mycontenthandler/mm/dav/filestore/public/themes/bspaceTheme/spaceStyles。(本例中为 http://9.123.125.87:9081/mum/mycontenthandler/mm/dav/filestore/public/themes/bspaceTheme/spaceStyles),如圖所示,复制 solutions 文件夾至本地並重命名为 custom1。相應地,复制 solutions.js 至本地並重命名为 custom1.js。


圖 17. 空間样式管理文件目錄
圖 17. 空間样式管理文件目錄

修改 Style Javascript File。 編輯 custom1.js, 其中 cp1 至 cp5 是版權信息,不做更改,需要修改 id、name、preview、className、css 字段的值。

修改 id 的值为唯一名稱,本例中使用 custom1。

修改 name 的值为創建空間對話框中希望顯示的名稱,本例中使用 Custom1。

將希望顯示的預覽圖像 Custom1_thumb_202x152.png 放在 custom1 文件夾下。預覽圖像的尺寸必須为 202 X 152 像素。修改 preview 的值为更新後預覽圖像的文件路徑,本例中为 custom1/Custom1_thumb_202x152.png。

修改 className 的值为新的 css 類名,本例中使用 custom1 Style。

修改 css 的值为更新後的 css 文件的路徑。


清單 7. custom1.js 代碼示例
				  
 { 
"cp1": 	"Licensed Materials - Property of IBM", 
"cp2": 	"5724-M22, 5724-M23, 5724-M24, 5724-L01, 5724-R31", 
"cp3": 	"(C) Copyright IBM Corporation 2009, 2011. All Rights Reserved.", 
"cp4": 	"US Government Users Restricted Rights- Use, duplication or disclosure", 
"cp5": 	"restricted by GSA ADP Schedule Contract with IBM Corp.", 

"id": "custom1", 
"name": "Custom1", 
"preview": "custom1/Custom1_thumb_202x152.png", 
"className": 	"custom1Style", 
"css": 	"custom1/custom1Style.css", 
"loadV7CompatiblityStyles": "false"  
 } 

修改 Style CSS File。在 custom1 文件夾中將 bankingStyle.css 重命名为 custom1Style.css ,以與 custom1.js 中的 css 指定的名稱相匹配。在文件 custom1Style.css 中查找"bankingStyle"並全部替換为"custom1Style",以確保所有現有規則僅應用於新的 custom1 样式。

更改對話框標題欄和頁腳

將以下規則添加到 custom1Style.css 文件中可更改對話框標題欄和頁腳的背景色,本例中使用紫色 #413094。


清單 8. 更改對話框標題欄背景色代碼示例
				  
 .custom1Style .dialog_titlebar, 
 .custom1Style .dialog_titlebar_notitle { 
    background-color: #413094; 
    background-image: none; 
    color: #FFFFFF; 
 } 


清單 9. 更改對話框頁腳背景色代碼示例
				  
 .custom1Style .lotusDialog .lotusDialogFooter, 
 .custom1Style .mmDialogBottomArea, 
 .custom1Style .spaceDialogBottomArea, 
 .custom1Style .spaceDialogBottomArea .spaceDialogBottomItems { 
	 background-color: #413094; 
	 background-image: none; 
	 color: #FFFFFF; 
 } 

更改後效果如圖所示。


圖 18. 定制後對話框配色
圖 18. 定制後對話框配色

注:此更改需要在應用步驟 5.5 部署定制工件的方法之後才可生效。

更改業務空間頁腳

要隱藏業務空間頁腳 IBM 徽標,可將以下規則添加到 custom1Style.css 文件中。


清單 10. 隱藏 IBM 徽標代碼示例
				  
 .custom1Style .bspaceFooterIBMLogo { 
 display: none; 
 } 

要隱藏業務空間頁腳 WebSphere 徽標,可將以下規則添加到 custom1Style.css 文件中。


清單 11. 隱藏 WebSphere 徽標代碼示例
				  
 .custom1Style .bspaceFooterWebSphereLogo { 
 display: none; 
 } 

要更改業務空間頁腳的背景色,可將以下規則添加到 custom1Style.css 文件中。


清單 12. 更改業務空間頁腳背景色代碼示例
				  
 .custom1Style .bspaceFooter { 
 background-image: none; 
 background-color: #413094; 
 margin-bottom: 0; 
 margin-top: 0; 
 } 

下面兩張圖列出定制前後業務空間頁腳的區別。


圖 19. 缺省的業務空間頁腳
圖 19. 缺省的業務空間頁腳

圖 20. 定制後的業務空間頁腳
圖 20. 定制後的業務空間頁腳

注:此更改需要在應用步驟 4.5 部署定制工件的方法之後才可生效。

更改菜單配色

如下圖所示,可以通過更改 css 規則,來定制空間中菜單的邊框顏色、文本、背景和分隔線。


圖 21. 菜單配色管理規則
圖 21. 菜單配色管理規則

將以下規則添加到 custom1Style.css 文件中,可獲得深灰色菜單配色方案。


清單 13. 更改菜單配色代碼示例
				  
 .custom1Style .dijitReset .dijitMenuItem { 
 background: none repeat scroll 0 0 #555555; 
 } 

 .custom1Style .dijitReset .dijitMenuItem .dijitMenuItemLabel { 
 color: #EEEEEE; 
 } 

 .custom1Style .dijitMenu .dijitReset .dijitMenuSeparator{ 
 background-color: #444444; 
 } 

 .custom1Style .dijitMenu .dijitReset .dijitMenuSeparator .dijitMenuSeparatorTop{ 
 margin: 0px 0px 0px 0px; 
 border-bottom: #444444 1px solid; 
 } 

 .custom1Style .dijitMenu .dijitReset .dijitMenuSeparator .dijitMenuSeparatorBottom{ 
 margin: 0px 0px 0px 0px; 
 border-bottom: #555555 1px solid; 
 border-top: #404040 1px solid; 
 } 

 .custom1Style .dijitPopup .dijitMenu { 
 border: 1px solid #444444 !important; 
 } 

 .custom1Style .dijitMenu .dijitMenuItemSelected { 
 background-color: #d8d2f0 !important; 
 } 

 .custom1Style .dijitMenu .dijitMenuItemSelected .dijitMenuItemLabel{ 
 color: #333333 !important; 
 } 

下面兩張圖列出定制前後菜單配色的區別。


圖 22. 缺省的菜單配色
圖 22. 缺省的菜單配色

圖 23. 定制後的菜單配色
圖 23. 定制後的菜單配色

注:此更改需要在應用步驟 5.5 部署定制工件的方法之後才可生效。

部署定制的工件

將修改完的 custom1 文件夾和 custom1.js 复制到 http://<BSPACE_HOST>:<BSPACE_PORT>/mum/mycontenthandler/mm/dav/filestore/public/themes/bspaceTheme/spaceStyles 目錄下。


圖 24. 將 custome1 和 custom1.js 上傳於 spaceStyle 目錄中
圖 24. 將 custome1 和 custom1.js 上傳於 spaceStyle 目錄中

清除瀏覽器緩存,並重新启動服務器。嘗試創建 Business Space 時,可在創建空間對話框中看見空間样式 custom1 選項 , 如下圖所示。


圖 25. Custom1 出現在空間样式列表中
圖 25. Custom1 出現在空間样式列表中

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容