定製 IBM Rational Method Composer V7.2 的釋出外觀

學習怎樣在 IBM® Rational® Method Composer 中建立您自定義的“皮膚”（頁面外觀）。 通過使用這個選項，您可以迅速且輕鬆地改變一個網站的外觀。

IBM® Rational® Method Composer 是過程工程師、專案領導人，以及為開發組織或個人專案維護執行過程負責的專案管理人員的一個平臺。他們可以使用 Rational Method Composer 去建模，以及記錄他們的開發方案及過程，並對IBM Rational 過程庫中的資源進行再利用。這些過程可以輸出到不同的格式中，如專案方案以及商業模型，併發布到網站上的。然後該網站以一種普通的外觀，提供對方案以及過程元素的選擇。

皮膚改變了一個網站的外觀，例如顏色方案，影像方案以及其他各種元素。通過使用皮膚，您可以改變皮膚，以適合您的需求。

V7.2 版本新增了使用皮膚的功能，以滿足 Rational Method Composer 使用者，關於能夠對可視介面做自定義改變的要求。 例如，有的使用者想要改變不同頁面中資訊顯示的順序；有的使用者則想忽略掉相同的模型資訊 ；有的想要改變樣式風格，如字型及顏色，以和公司的主題原則相匹配；而還有些使用者甚至想要在某些地方使用不一樣的術語（例如，把一次 activity 叫做 procedure ）。現在，您可以通過使用皮膚，輕鬆而快捷地對公佈的網站做以上改變。

本篇文章將教您建立，能夠符合您公司網站主題風格，或您自己個人愛好的自定義皮膚。

必要文件的定位及目的

通過複製 Rational Method Composer 預設的皮膚，然後對其樣式模板（CSL 和 XSL 檔案）及原檔案做一些改變，您可以建立自定義的皮膚。因此，您需要了解的第一件事情，便是找到需要複製及改變的檔案，以及這樣做的目的，下面就是一個步驟概括：

• 在 Microsoft®Windows ®作業系統條件下，當您第一次公佈或瀏覽一個網站後，Rational Method Composer 預設的皮膚檔案將位於
  C:\Documents and Settings\\RMC\Skins\RMC 目錄下。
• Microsoft®Windows Vista ®作業系統下，預設的皮膚檔案位於 C:\Users\\RMC\Skins\RMC 目錄下。
• Linux 使用者將在
  /home//RMC/Skins/RMC 目錄下找到該檔案。
• 名為 RMC 的目錄包含以下子目錄：
  • app_skin, app_widget
  • content_css
  • content_xsl
• 其中的 content_css 目錄包含了，在釋出的網站中定義佈局及顏色的 default.css 檔案。
• 而 content_xsl 目錄包含了 .xsl 檔案，該檔案用於定義釋出網頁的佈局。
• 在 content_xsl 目錄下的 resources.properties 檔案，則定義了所有的文字串

建立一個皮膚

為了建立您自己的皮膚，您需要完成以下步驟：

1. 複製一下已存在的 Rational Method Composer 皮膚目錄。
2. 對該目錄進行重新命名，並開始編輯它。例如，將新的皮膚目錄命名為 MyCompany_Skin。

在編輯後，您可以使用您的 MyCompany_Skin 皮膚，在 Rational Method Composer 中釋出及瀏覽網頁：

3. 選擇 Windows > Preferences ，然後進入 Look and Feel 選項，如圖 1 的截圖所示。
4. 在右邊的目錄中，使用下拉選單，檢視上面提到過的皮膚目錄中，可使用的皮膚列表。在目前的條件下，選擇 MyCompany_Skin。

每次您都要對皮膚做盡可能多的改變（例如，按下面章節中提到的步驟進行改變），通過選擇 File > Open 再次開啟列表，並在 Rational Method Composer Browsing 檢視下預查結果。您也可以通過選擇，如圖 2 所示的 Publishing 目錄中的 MyCompany_Skin 選項，使用您自定義的皮膚，併發布您的網站。

接下來的章節將向您展示，怎樣以以下任何一種方式，來編輯您自定義的皮膚：

• 自定義顏色
• 改變內容的佈局
• 改變頁面顯示文字的字串源

自定義顏色

在本例中，您可以通過系統地向一些樣式定義，新增一個顏色屬性，來改變 default.css 檔案。

首先，通過向 pageTitle 類新增顏色屬性，以及一個 HEX 顏色，來改變頁面標題顏色：

1. 在一個文字編輯器中，從 Content_css 目錄中開啟 default.css 檔案。您可以使用 Notepad 或者 CSS 樣式編輯器，如果其中一個是可用的，例如 IBM Rational Application Developer 中的 Pager Designer 。
2. 搜尋 .pageTitle。
3. 然後編輯類，程式碼如列表 1 所示。

				
.pageTitle {
             color: #8B2500;
             font-family: arial, helvetica, sans-serif;
	font-size: 14pt;
	font-weight: normal;
	font-color: #8B0000;
}

觀察圖 3，瞭解結果得到的皮膚，是怎樣釋出的，使用 task 標題。以作為一個例子。

為了改變段落標題顏色，向 sectionHeading 類新增顏色屬性，程式碼如列表 2 所示。

				
.sectionHeading {
             color: #8B2500;
	font-color: #00688B;
	font-family: arial, helvetica, sans-serif, kanji2;
	font-size: 10pt;
	font-weight: bold;
}

圖 4 顯示出了改變後的結果。

為了改變表格標題顏色，向 sectionTableHeading 類新增另一個顏色屬性，程式碼如列表 3 所示。

				
.sectionTableHeading {
            color: #8B2500;
	background: #f8f8f8;
	border-bottom: #e8e8e8 solid 1px;	
	border-left: #e8e8e8 solid 0px;
	border-right: #e8e8e8 solid 0px;
	border-top: #e8e8e8 solid 0px;	
	height: 20;
	text-align: left;
	width: 20%;	
}

圖 5 顯示出了改變後的結果。

為了改變表格單元標題部分的顏色，為 sectionTableCelHheading 類新增一個顏色屬性，代表如列表所示。

				
.sectionTableCellHeading {
             color: #8B2500;
	font-family: arial, helvetica, sans-serif, kanji2;
	font-size: 8pt;
	font-weight: normal;
	font-color: #666666;
}
      

最後，通過改變類 stepHeading 顏色屬性的程式碼，改變步驟標題的顏色，程式碼如列表 5 所示。

				
.stepHeading {
background-color: #ffffff;
color: #8B2500; 
font-family: arial, helvetica, sans-serif, kanji2;
font-size: 10pt;
font-weight: bold;
padding-bottom: 2px;
padding-left: 2px;
padding-top: 2px;
text-decoration: none;
}

圖 7 顯示出了結果。

以上所有的改變綜合在一起，結果的頁面如圖 8 所示。

控制您的頁面的佈局

通過改變 content_xsl 目錄下的 .xsl 檔案，您可以控制 Rational Method Composer 釋出網站的內容網頁的佈局。命名該目錄中的 XSL 檔案，這樣您就可以識別出，需要為哪一個元素種類編輯哪一個檔案。但是，也有一些定義共享佈局元素的檔案，例如，“包含於”其他檔案中的公共標題及標題欄，以最優化在頁面種類間對標準佈局的再使用。表 1 顯示出了大多數 content_xsl 資料夾中 .xsl 檔案包含的一些檔案 。

接下來，我們將舉例說明，怎樣為三種不同型別的元素修改頁面佈局：

• 活動
• 任務
• 公司圖示（在所有元素頁面的公共區域，向公司圖示新增一個影像連結）

修改動態頁面的佈局

在 Activity 頁面的 Description 標籤中，一般您可以發現，諸如 Relationships，Description，Properties ，Usage， More Information 以及等等之類的相關段落。在下一個例子中，通過編輯 content_xsl 目錄下的 activity_desc.xsl 檔案，您可以在頁面中去除 Properties 段落。

圖 9 向您顯示了，怎樣以 activity_desc.xsl 標準檔案的形式，釋出動態頁面的描述標籤。

1. 為了移除 Properties 段落，在文字或 XML 編輯器中開啟 activity_desc.xsl 檔案，並搜尋 propertiesSection 字串（如列表 6 所示）。

您可以在列表 6（上面）中發現位於以下標籤之間的 XSL 程式碼：

以及

，它位於
之前。

2. 從程式碼中刪去 call-template 元素，以去掉佈局中的Properties 段落，如列表 7 所示。

結果得到的動態頁面如圖 10 釋出的那樣。

如果您想將 Properties 段移到另一個位置，例如移到 Usage 段的後面，您只需簡單地剪下，並在右邊位置處貼上上 call-template 元素，剛好位於名為 usageSection 的 call-template 元素之後 。

修改任務的頁面佈局

在任務頁面，您會發現如圖 11 所示的順序排列的段落：

• 目的
• 關係
• 主要描述
• 步驟
• 更多資訊

為了改變這些段落的順序（例如，把 Relationships 移到 Main Description 之下），您需要修改 task.xsl 檔案：

1. 在文字或 XML 編輯器中開啟這個檔案，並搜尋字串 relationships 。您將在如列表 8 所示的程式碼中發現它。

2. 從以上程式碼中移走 ：

現在得到的結果如列表 9 所示：

結果得到的任務介面如圖 12 顯示的那樣。

修改傳遞過程的頁面佈局

一個傳遞過程描述頁面包含以下段落(如圖 13 所示)：

• 關係
  • 內容
  • 包含模板
• 描述
• 屬性
• 使用

其中的 Patterns 段落包含了一系列的容量模板，該模板用於構建這個特定的 Delivery Process 。有時候，您可能想對網站使用者隱藏建模資訊。為了刪除關係段落中的小段落，編輯 activity_desc.xsl 檔案。

找到如列表 10 所示的元素。

可以在 與 標籤之間找到該元素

為了從描述中移除包含的 Patterns ，從列表 11 中的程式碼中，刪除以下的 call-template 元素。

結果得到的頁面如圖 14 所示。

通過新增一個圖示，修改所有頁面的標題

Rational Method Composer 網站的所有方法元素頁面，都有一個共同的標題形式，該標題中含有元素的種類，名稱，圖示，以及一些簡單的介紹，還有在右上角有一系列的工具按鈕（如圖 15 所示）。

在本例中，您將學到怎樣新增內容，例如，在每個頁面的右角落，為您公司的圖示新增一個圖形 URL。為了完成這點，您必須要修改 overview.xsl 檔案，該檔案包含了所有其他檔案中都有的，共同標題元素的定義。

1. 在文字編輯器中，開啟 overview.xsl 檔案，並搜尋 contentPageToolbar 字串。您將看到如列表 12 顯示的部分。

這將會在頁面的右上角新增圖形。該處使用的 href 連結將會帶您來到 IBM.com 網站，但是您可以用您公司的 URL 來替換此處的 URL。最終的原始碼如列表 13 所示 。

結果釋出的網頁如圖 16 所示。

2. 點選圖示以訪問網站。

回頁首

改變使用者介面的術語

在接下來的例子中，您將改變釋出頁面中的字串，以改變 Rational Method Composer 用於顯示資訊的術語。在例子中，您將會把 Team Allocation 文字（圖 17）改為 Roles ，以為動態頁面貼上代表性的標籤。

1. 為了改變字串，在文字編輯器中開啟 content_xsl 目錄下的 resources.properties 檔案，並搜尋字串 Team Allocation。

您將會看到如下的申明：
tbsText=Team Allocation。

2. 將其改為：tbsText=Roles。

在作出以上改變後，當您釋出或瀏覽一個動態頁面時，得到的結果將如圖 18 所示。

總結

本篇文章向您展示了，怎樣自定義 IBM Rational Method Composer 釋出網站的外觀。它所需要的，是對網路樣式模板（CSS 以及 XSL）的一些知識，編輯哪裡的哪個檔案，以及編輯什麼段落。

許多公司具有網站樣式及外觀的公司內部標準。試著讓您釋出的網頁符合這些標準，或者您有更高的追求，讓您的網頁看起來獨一無二。

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