In the fifth installment on the Software Metrics series, I show how to display the results that have been gathered in the previous posts.

XML Transformation

Each of the tools that have been used to generate metrics on projects so far has saved their output in some sort of XML format. While a handy format for information storage, it is notso handy for displaying it in a user-friendly manner. Enter XSLT. Convieniently enough, the authors of these packages recognize this and have provided stylesheets to turn the raw XML into pretty HTML. It is still however up to you to mash them together.

First, a bit about the tree structure I am using in order for the transformation JavaScript to make more sense.

|
+-- index.html
|
`-- reports
    +-- html
    |   `-- project-findbugs.html
    |
    +-- xml
    |   `-- project-findbugs.xml
    |
    `-- xsl
        `-- findbugs.xsl

All reports are accessed via index.html which acts as a metrics dashboard. The tools dump their output into the xml directory and I have moved the xsl files from their respective installs into xsl to make the whole directory portable.

Finding examples of JavaScript to do the transformation was simple. Finding ones that worked as advertised and in both browsers was not. So after a number of days of tweaking, here is what project-findbugs.html looks like. It works in both IE and FF.

<html>
<head>
	<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
	<title>Findbugs Report</title>

<script type="text/javascript">
function transform() {
	var xmlDoc;
	var xslDoc;

	// code for IE
	if (window.ActiveXObject) {
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async = false;
		xmlDoc.load("../xml/project-findbugs.xml");

		xslDoc = new ActiveXObject("Microsoft.XMLDOM");
		// this is important on faster machines, otherwise you find yourself in a race
		xslDoc.async = false;
		xslDoc.load("../xsl/findbugs.xsl");

		document.write(xmlDoc.transformNode(xslDoc));
	  }

	// code for Mozilla, Firefox
	else if (document.implementation && document.implementation.createDocument) {
		var transformed;
		var output;
		var processor;

		xmlDoc = document.implementation.createDocument("","",null);
		xmlDoc.async = false;
		xmlDoc.load("../xml/project-findbugs.xml");

		xslDoc = document.implementation.createDocument("","",null);
		// this is important on faster machines, otherwise you find yourself in a race
		xslDoc.async = false;
		xslDoc.load("../xsl/findbugs.xsl");

		processor = new XSLTProcessor()
		processor.importStylesheet(xslDoc);

		transformed = processor.transformToFragment(xmlDoc, document);
		document.body.appendChild(transformed);

	}
	else {
	  alert('Your browser cannot handle this script');
	}
}

</head>

<body onload="transform()">

</body>
</html>

</body></html>