学习怎样在 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）的一些知识，编辑哪里的哪个文件，以及编辑什么段落。

许多公司具有网站样式及外观的公司内部标准。试着让您发布的网页符合这些标准，或者您有更高的追求，让您的网页看起来独一无二。