定制 IBM Rational Method Composer V7.2 的发布外观

文档选项 未显示需要 JavaScript 的文档选项 英文原文

级别： 中级

Tushara Gangavaram, 技术服务工程师, IBM
Peter Haumer, 方案架构师, IBM　

2008 年 10 月 31 日

学习怎样在 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\<user name>\RMC\Skins\RMC 目录下。
• Microsoft®Windows Vista ®操作系统下，默认的皮肤文件位于 C:\Users\<username>\RMC\Skins\RMC 目录下。
• Linux 用户将在
  /home/<username>/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 所示）。

				
<xsl:call-template name="relationshipsSection"/>
<xsl:call-template name="generalTextFieldSection">
<xsl:with-param name="fieldLabel" select="$descriptionText"/>
<xsl:with-param name="fieldText" select=
"$contentDescription/attribute[@name='mainDescription']"/>
</xsl:call-template>
<xsl:call-template name="propertiesSection">
<xsl:with-param name="contentDescription" select=
"$contentDescription"/>
</xsl:call-template>
<xsl:call-template name="IllustrationsSection"/>
<xsl:call-template name="generalTextFieldSection">
<xsl:with-param name="fieldLabel" select="$staffingText"/>
<xsl:with-param name="fieldText" select=
"$contentDescription/attribute[@name='howtoStaff']"/>
</xsl:call-template>
<xsl:call-template name="usageSection">
<xsl:with-param name="contentDescription" select="$contentDescription"/>
</xsl:call-template>
<xsl:call-template name="generalTextFieldSection">
<xsl:with-param name="fieldLabel" select="$keyConsiderationsText"/>
<xsl:with-param name="fieldText" select=
"$contentDescription/attribute[@name='keyConsiderations']"/>
</xsl:call-template>

您可以在列表 6（上面）中发现位于以下标签之间的 XSL 代码：

<xsl:template match="/Element">
以及
<xsl:template>
，它位于
<xsl:templatename="activityTabs">之前。

2. 从代码中删去 call-template 元素，以去掉布局中的Properties 段落，如列表 7 所示。

				
<xsl:call-template name="propertiesSection">
<xsl:with-param name="contentDescription" select="$contentDescription"/>
</xsl:call-template>

结果得到的动态页面如图 10 发布的那样。

如果您想将 Properties 段移到另一个位置，例如移到 Usage 段的后面，您只需简单地剪切，并在右边位置处粘贴上 call-template 元素，刚好位于名为 usageSection 的 call-template 元素之后 。

修改任务的页面布局

在任务页面，您会发现如图 11 所示的顺序排列的段落：

• 目的
• 关系
• 主要描述
• 步骤
• 更多信息

为了改变这些段落的顺序（例如，把 Relationships 移到 Main Description 之下），您需要修改 task.xsl 文件：

1. 在文本或 XML 编辑器中打开这个文件，并搜索字符串 relationships 。您将在如列表 8 所示的代码中发现它。

				
<xsl:call-template name="purposeSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
<xsl:call-template name="relationshipsSection"/>
<xsl:call-template name="mainDescriptionSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
<xsl:call-template name="stepsSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
      

2. 从以上代码中移走 <xsl:call-template name=&quot;relationshipsSection&quot;/>：

<xsl:call-template name="relationshipsSection"/>
	<xsl:call-template name="mainDescriptionSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
      

现在得到的结果如列表 9 所示：

				
<xsl:call-template name="purposeSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
<xsl:call-template name="mainDescriptionSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
<xsl:call-template name="relationshipsSection"/>
<xsl:call-template name="stepsSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>

结果得到的任务界面如图 12 显示的那样。

修改传递过程的页面布局

一个传递过程描述页面包含以下段落(如图 13 所示)：

• 关系
  • 内容
  • 包含模板
• 描述
• 属性
• 使用

其中的 Patterns 段落包含了一系列的容量模板，该模板用于构建这个特定的 Delivery Process 。有时候，您可能想对网站用户隐藏建模信息。为了删除关系段落中的小段落，编辑 activity_desc.xsl 文件。

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

				
<xsl:call-template name="addReferences">
	<xsl:with-param name="refName" select="$includedPatternsText"/>
	<xsl:with-param name="refElement" select=
"referenceList[@name='includesPatterns']/Element"/>
</xsl:call-template>
      

可以在 <xsl:templatename="relationshipsSection">与 </xsl:template>标签之间找到该元素

为了从描述中移除包含的 Patterns ，从列表 11 中的代码中，删除以下的 call-template 元素。

				
<xsl:call-template name="addReferences">
	<xsl:with-param name="refName" select="$includedPatternsText"/>
	<xsl:with-param name="refElement" select="referenceList[@name=
'includesPatterns']/Element"/>
</xsl:call-template>

结果得到的页面如图 14 所示。

通过添加一个图标，修改所有页面的标题

Rational Method Composer 网站的所有方法元素页面，都有一个共同的标题形式，该标题中含有元素的种类，名称，图标，以及一些简单的介绍，还有在右上角有一系列的工具按钮（如图 15 所示）。

在本例中，您将学到怎样添加内容，例如，在每个页面的右角落，为您公司的图标添加一个图形 URL。为了完成这点，您必须要修改 overview.xsl 文件，该文件包含了所有其他文件中都有的，共同标题元素的定义。

1. 在文本编辑器中，打开 overview.xsl 文件，并搜索 contentPageToolbar 字符串。您将看到如列表 12 显示的部分。

				
<div align="right" id="contentPageToolbar"/>
</td>
<xsl:if test="$showTreeBrowser">
	<td width="100%" class="expandCollapseLink" align="right">
	      <a name="mainIndex" href="{$backPath}index.htm"/>
	      <script language="JavaScript" type="text/javascript"                 
src="{$backPath}scripts/treebrowser.js"/>
	</td>
</xsl:if>
Now add the following code above <div align="right" id="contentPageToolbar"/>. 
<td width="100%">
      <div align="right">
	<a href="http://www.ibm.com/">
	 <img src="http://www.ibm.com/i/v16/t/ibm-logo.gif" style="background:  black"/>
	</a>
     </div>
     <div align="right" id="contentPageToolbar"/>
</td>

这将会在页面的右上角添加图形。该处使用的 href 链接将会带您来到 IBM.com 网站，但是您可以用您公司的 URL 来替换此处的 URL。最终的源代码如列表 13 所示 。

				
<td width="100%">
	<div align="right">
		<a href="http://www.ibm.com">
		<img src="http://www.ibm.com/i/v16/t/ibm-logo.gif"/>
		</a>
	</div>
<div align="right" id="contentPageToolbar"/>
</td>
<xsl:if test="$showTreeBrowser">
	<td width="100%" class="expandCollapseLink" align="right">
	      <a name="mainIndex" href="{$backPath}index.htm"/>
	      <script language="JavaScript" type="text/javascript"                 
src="{$backPath}scripts/treebrowser.js"/>
	</td>
</xsl:if>

结果发布的网页如图 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）的一些知识，编辑哪里的哪个文件，以及编辑什么段落。

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

参考资料

• 您可以参阅本文在 developerWorks 全球网站上的 英文原文。
  
  
• 通过 “IBM Rational Method Composer 入门介绍” 了解 IBM Rational Method Composer 的入门基础知识。
  
  
• 要了解更多内容，请阅读 IBM Rational Method Composer, 第 1 部分: 关键概念”，Peter Haumer 所作，本文的合作者之一（IBM developerWorks，2003 年 3 月）。
  
  
• 请阅读 “IBM Rational Method Composer, 第 2 部分: 创建方法内容和过程”。
  
  
• 访问 W3C Web Style Sheets 主页 以了解更多有个 CSS 和 XSL 样式表单的内容。
  
  
• 了解更多有关 Extensible Stylesheet Language (XSL) 的内容。
  
  
• 浏览 W3Schools 在线 CSS 教程，以了解如何使用 CSS 控制和定制您的 Web 页面的外观和感受。
  
  
• 访问 XML Master 站点，查找有关 CSS Colors 的有益的参考手册。
  
  
• 了解更多 Web Design Group 站点上有关 HTML 元素 的内容。
  
  
• 访问 developerWorks 上的 Rational 软件专区，了解有关 Rational 软件交付平台产品的技术资源和最佳实践。
  
  
• 订阅 Rational Edge 中文版，获得了解高效软件开发背后概念的文章。
  
  
• 订阅 IBM developerWorks 时事通讯，获得有关最佳的 developerWorks 教程、文章、下载、社区活动、网络广播和事件的每周更新。
  
  
• 浏览 技术书店，获得有关这些和其它技术主题的书籍。
  
  

• 访问 IBM Rational Method Composer 产品专题，了解关于 Rational 统一过程 (RUP) 和 RMC 的相关文档和最新产品信息。
  
  
• 下载免费的 IBM Rational Method Composer 试用版。
  
  
• 下载 IBM Rational 软件的试用版。
  
  
• 下载这些 IBM 产品评估版，并着手使用来自于 DB2®，Lotus®，Tivoli®，以及 WebSphere® 的应用程序开发工具和中间件产品。
  
  

• 查看 developerWorks 博客，并加入 developerWorks 社区。

作者简介

		Tushara Gangavaram 向 Rational Unified Process 内容团队和 Rational Method Composer 开发团队提供技术服务。 她也负责 G11N，对 Rational Unified Process 内容和库进行发布和质量保证。

		Peter Haumer 是 IBM Rational Method Composer 产品平台的一名解决方案架构师。他负责定义下一代过程工程工具，并且他在 SPEM 2.0 计划中，在 OMG 中作为 IBM 的代表。在加入 Rational Unified Process 团队，他作为一个高级专业服务咨询师，服务于 IBM Rational 品牌。他执行在线咨询和培训，并且他帮助和培训客户成功地应用 Rational Unified Process 和其它 Rational 工具。他的兴趣领域包括需求管理，企业应用架构的面向对象分析与设计，以及软件过程实施。在加入 Rational 之前，他从事于基础研究，主要在需求工程和灵活的集成过程的 CASE 工具架构方面。Peter 获得到德国亚琛技术大学的计算机科学博士学位。

对本文的评价

太差！ (1) 需提高 (2) 一般；尚可 (3) 好文章 (4) 真棒！(5) 建议？

回页首