Customizing Publication Skins IBM Rational Method Composer 7.2 Tushara Gangavaram (tgang@us.ibm.com), Tech Services Engineer, IBM Peter Haumer (phaumer@us.ibm.com), RMC Solution Architect, IBM Copyright IBM Corporation 2008. All Rights Reserved. Level: Intermediate Introduction IBM Rational Method Composer (RMC) is a tool platform for process engineers, project leads, and project and program managers who are responsible for maintaining and implementing processes for development organizations or individual projects. They can use RMC to model and document their development methods and processes as well as reuse from IBM Rational s process library [1]. These processes can then be exported in various formats such as project plans, business models, as well as published into a Web site. This site presents a selection of method and process elements in one common look and feel. Skins is a new capability in RMC 7.2 that allows you to modify this lookand-feel of the published Web site to your requirements. It has been added to the 7.2 release as a response to RMC user s requests for being able to make specific changes to the presentation. Some user wanted to change the order in which information is presented on the various pages, other wanted to omit some model information all together, some wanted to change the styles such as fonts and colors to match their company s guidelines, other wanted to even use a different terminology in places (e.g. call an activity a procedure instead). All of these changes can be made to the published site using Skins. This tutorial will teach you how to create your own custom skins that reflect your companies Web style guide or your own personal taste. Where to find files and what are they for You can create your own skin by copying RMC s default skin and then making changes to style sheets (CSS and XSL files) and resource files. Hence, the first thing you need to know is where to find which files to copy and modify and what they are for. On a Microsoft Windows system the default skin for Rational Method Composer is located at C:\Documents and Settings\<user name>\rmc\skins\rmc after you publish or browse a site for the first time. Linux user will find the directory in /home/<username>/rmc/skins/rmc. The directory RMC contains the sub-directories app_skin, app_widget, content_css, content_xsl. The content_css directory contains the default.css Page 1 of 15
file which defines layout and colors settings in the published website. The content_xsl directory contains.xsl files which are used for defining the layout of the published pages. Finally, there is the resources.properties file in the content_xsl directory that defines all text strings. To create your own skin, make a copy of the existing RMC skin directory, rename it and then start modifying it. For example, name the new skin directory MyCompany_Skin. Once you have made your modifications to your skin you can then use your MyCompany_Skin skin for publishing and browsing in Rational Method Composer. You do this by selecting the Windows->Preferences.. menu and drilling into the Look and Feel section as shown in the screen shot below. In the dialog on the right hand side use the drop-down menu for the list of skins available in the skins directory mentioned above. In your case select the MyCompany_Skin. Every time you made more changes to your skin (e.g., by following the steps in the next sections), reopen the library using the File -> Open menu and preview the results in RMC s Browsing perspective. You can also publish your sites using your skin by selecting MyCompany_Skin in the publishing dialog as shown below: Copyright IBM Corporation 2008. All Rights Reserved. Page 2 of 15
The following sections will walk you through examples on how to: - Customize colors - Change the layout of content - Modify the string resources for text displayed on the pages Customize colors In this example you will change the default.css file by systematically adding a color attribute to several style definitions. First, change the page title s color by adding the color attribute and a color HEX value to the pagetitle class. Open the default.css file from the Content_css directory in a text editor such as Notepad or if available css style editor such as Pager Designer in IBM Rational Application Developer and search for.pagetitle. Then modify the class in the following way:.pagetitle { color: #8B2500; font-family: arial, helvetica, sans-serif; font-size: 14pt; font-weight: normal; font-color: #8B0000; } See below how the resulting skin would be published using a task title as an example. To change the section heading color, add the color attribute to the sectionheading class as shown below:.sectionheading { color: #8B2500; font-color: #00688B; font-family: arial, helvetica, sans-serif, kanji2; font-size: 10pt; font-weight: bold; } Copyright IBM Corporation 2008. All Rights Reserved. Page 3 of 15
The result is: To change the color of the section table heading, add another color attribute to the sectiontableheading class:.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%; } resulting in : To change the color of section table cell, add the following color attribute in the sectiontablecelhheading class:.sectiontablecellheading { color: #8B2500; font-family: arial, helvetica, sans-serif, kanji2; font-size: 8pt; font-weight: normal; font-color: #666666; } The result is: Copyright IBM Corporation 2008. All Rights Reserved. Page 4 of 15
Finally, change the color of the Steps heading by changing the code in color attribute stepheading class:.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; } The result is: Copyright IBM Corporation 2008. All Rights Reserved. Page 5 of 15
With all these changes taken together, the resulting page will look like this: Control the layout of your pages By modifying the.xsl files in content_xsl directory you can control the layout of the content pages in RMC s published Web sites. The XSL files in this directory are named in such a way that you can identify which files you need to modify for which element type. However, there also are some files that define shared layout elements such as common headers and title bars that are actually included by other files to optimize reuse of standard layout across page types. Find an overview to these files at the end of this tutorial. This tutorial will provide you with examples for layout changes for three different element types: Copyright IBM Corporation 2008. All Rights Reserved. Page 6 of 15
--modify the page layout for activities --modify the page layout for tasks --modify the page layout for all element pages by adding an image link in a common area representing a company s logo. Modify the page layout for activities In the description tab of an activity page, you normally find sections such as Relationships, Description, Properties, Usage, More Information etc. In the following example you are going to remove the properties section from the page by editing the activity_desc.xsl file in the content_xsl directory. This is how the activity page s description tab is published with the out-ofthe-box activity_desc.xsl: To remove the Properties section open activity_desc.xsl in a text or XML editor and search for the string propertiessection. <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 name="propertiessection"> <xsl:with-param name="contentdescription" select="$contentdescription"/> Copyright IBM Corporation 2008. All Rights Reserved. Page 7 of 15
<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 name="usagesection"> <xsl:with-param name="contentdescription" select="$contentdescription"/> <xsl:call-template name="generaltextfieldsection"> <xsl:with-param name="fieldlabel" select="$keyconsiderationstext"/> <xsl:with-param name="fieldtext" select="$contentdescription/attribute[@name='keyconsiderations']"/> The xsl code listed above can be found in between the tags <xsl:template match="/element"> and <xsl:template> which is before <xsl:template name="activitytabs"> Delete the following call-template element from the code to remove the properties section from the layout. <xsl:call-template name="propertiessection"> <xsl:with-param name="contentdescription" select="$contentdescription"/> The resulting activity page will be published like this: Copyright IBM Corporation 2008. All Rights Reserved. Page 8 of 15
If you wanted to move the properties section to another location such as behind the Usage section, you could simply cut and paste this call-template element to the right position, i.e. just behind the call-template element with the name usagesection. Copyright IBM Corporation 2008. All Rights Reserved. Page 9 of 15
Modify the page layout for tasks In the task page, you normally find sections presented in the following order: To change the order of these sections, say for example to move Relationships below Main Description ; modify the task.xsl file. Open this file in a text or XML editor and search for relationships. You will find it in the following code. <xsl:call-template name="purposesection"> <xsl:with-param name="description" select="$taskdescription"/> <xsl:call-template name="relationshipssection"/> <xsl:call-template name="maindescriptionsection"> <xsl:with-param name="description" select="$taskdescription"/> <xsl:call-template name="stepssection"> <xsl:with-param name="description" select="$taskdescription"/> Move <xsl:call-template name="relationshipssection"/> below <xsl:call-template name="relationshipssection"/> <xsl:call-template name="maindescriptionsection"> <xsl:with-param name="description" select="$taskdescription"/> So now it will be: <xsl:call-template name="purposesection"> <xsl:with-param name="description" select="$taskdescription"/> <xsl:call-template name="maindescriptionsection"> <xsl:with-param name="description" select="$taskdescription"/> <xsl:call-template name="relationshipssection"/> <xsl:call-template name="stepssection"> Copyright IBM Corporation 2008. All Rights Reserved. Page 10 of 15
<xsl:with-param name="description" select="$taskdescription"/> The resulting task page will be published like this: Modify the page layout for delivery processes A delivery process description page contains following sections: The Included Patterns section contains a list of all the capability patterns that have been used to construct this particular Delivery Process. Sometimes you might want to hide this modeling information from the Web site users. Hence, to delete this sub-section in the Relationships section, edit the activity_desc.xsl file. Find the following element: Copyright IBM Corporation 2008. All Rights Reserved. Page 11 of 15
<xsl:call-template name="addreferences"> <xsl:with-param name="refname" select="$includedpatternstext"/> <xsl:with-param name="refelement" select="referencelist[@name='includespatterns']/element"/> It can be found in between the tags <xsl:template name="relationshipssection"> and </xsl:template> To remove Included Patterns from the description, delete the following calltemplate element from the code: <xsl:call-template name="addreferences"> <xsl:with-param name="refname" select="$includedpatternstext"/> <xsl:with-param name="refelement" select="referencelist[@name='includespatterns']/element"/> The resultant page will be published like this: Modify the header of all pages by adding a logo All method element pages in a published RMC site present a common header comprising of the element s type, name, icon, brief description as well as a list of tool buttons in the top right hand corner. Copyright IBM Corporation 2008. All Rights Reserved. Page 12 of 15
In this example you will learn how to add some additional content such as an image URL to your company s logo into the right hand corner of every page. To do so, you have to modify the file overview.xsl which contains the definition of these common header elements, which is included by all other pages. Open overview.xsl in a text editor and search for contentpagetoolbar. You should see something like this: <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> This will add the image on the top right hand side corner of the page. The href link used here will take you to IBM.com Website. This URL can be substituted with your company s URL. Final source code will look like: <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"/> Copyright IBM Corporation 2008. All Rights Reserved. Page 13 of 15
<script language="javascript" type="text/javascript" src="{$backpath}scripts/treebrowser.js"/> </td> </xsl:if> The resultant published pages will look like this: Click on the company logo to visit the Web site. Change the terminology of the user interface In the next example you will replace text strings in the published pages to change the terminology Rational Method Composer uses to present information. In the example you are going to change the text Team Allocation to Roles to label the respective tab in the Activity page. To change the string, open the resources.properties file in content_xsl directory in a text editor and search for the word Team Allocation. You will find the following declaration: tbstext=team Allocation Change it to tbstext=roles When you publish or browse an activity page after this change, the result will look like this: Summary This tutorial showed you how you can customize your IBM Rational Method Composer- published Web site look-and-feel. All it takes is some knowledge of Web style sheets (CSS and XSL), where and which files to edit, and what sections to edit. Many companies have corporate standards on Web site style and look-andfeel. Give it a try and get your published Web pages to conform to those corporate Web standards, or if you don t have standards, make your Web pages look unique! Copyright IBM Corporation 2008. All Rights Reserved. Page 14 of 15
Reference Following are some of the files that are included in most of the.xsl files in content_xsl folder. Activity_desc.xsl Activity_helper.xsl Common.xsl Maindescription.xsl Mapping.xsl Overview.xsl Purpose.xsl Contains information about the sections in Capability Patterns and Delivery Process description page. Contains information about activity diagrams. This includes files like common.xsl, overview.xsl, mapping.xsl. This file acts as a helper to activity.xsl or activity.xsl includes this file. Contains meta information of method elements. It is included in most of the other.xsl files. Contains information about main description of method elements. It is included in most of the other.xsl files Contains information about mapping elements to element type. For e.g., Deliverable is mapped to an artifact, Outcome is mapped to an artifact Contains information about element type, element presentation name, page title separators. It is included in most of the other.xsl files. Contains information about purpose of method elements. It is included in most of the other.xsl files Resources [1] IBM Rational Method Composer: Part 1: Key concepts, Rational Edge, Dec. 2005. [2] W3C Web Style Sheets Home Page: Learn more about what CSS and XSL style sheets are. [3] What is XSL: Learn more about XSL. [4] W3C CSS Home: Online CSS tutorial to get you started on how to use CSS to control and customize Web page look-and-feel. [5] CSS Colors: Useful site listing color HEX values. [6] HTML Elements: Learn more about HTML elements. Copyright IBM Corporation 2008. All Rights Reserved. Page 15 of 15