<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CruiseControl Widgets</title>
<style type="text/css" media="all">
@import "cruisecontrol.css";
@import "dashboard.css";
</style>
<link href="print.css" type="text/css" rel="stylesheet" media="print" />
</head>
<body>
<div class="header">
<div class="hostedby">Hosted By:<br />
<a href="http://sourceforge.net"><img src="http://sourceforge.net/sflogo.php?group_id=23523&type=1" width="88"
height="31" alt="SourceForge" /></a></div>
<div class="logo"><img alt="CruiseControl" src="banner.png" /></div>
</div>
<div class="container">
<div id="menu">
<ul id="menulist">
<li class="top"><a href="index.html">home</a></li>
<li><a href="download.html">download</a></li>
<li><a href="license.html">license</a></li>
<li>
<h2>documentation</h2>
</li>
<li><a href="overview.html">overview</a></li>
<li><a class="expandmenu" href="main/index.html">build loop</a></li>
<li><a class="expandmenu" href="reporting/jsp/index.html">results jsp</a></li>
<li><a class="expandedmenu" href="dashboard.html">dashboard</a>
<ul>
<li><p id="menuselected">widgets</p></li>
<li><a href="buildgrid.html">build grid</a></li>
</ul>
</li>
<li><a class="expandmenu" href="gettingstarted.html">getting started</a></li>
<li><a href="main/configxml.html">config ref</a></li>
<li><a href="faq.html">faq</a></li>
<li><a class="external" href="http://confluence.public.thoughtworks.org/display/CC/Home">wiki</a></li>
<li>
<h2>contributing</h2>
</li>
<li><a class="expandmenu" href="developers.html">developers</a></li>
<li><a href="contact.html">mailing lists</a></li>
<li><a href="svn.html">source repository</a></li>
<li>
<p id="menubottom">Release: 2.7.3</p>
</li>
</ul>
</div>
<div class="content">
<h1>Developer Guide: How to write a Widget?</h1>
<h2>What is a CruiseControl Widget?</h2>
<p>A CruiseControl Widget is a customized component for displaying arbitrary build result in the detail page of a build.</p>
<p>The CruiseControl binary build ships with a Panopticode Widget which allows SVG results generated by <a href="http://www.panopticode.org">Panopticode</a> to be displayed.</p>
<h2>Widget Setup</h2>
<p>To enable a widget, you should edit the widget's configuration file located at CRUISE_HOME/widgets.cfg.</p>
<pre>
#simply type the name of widget class
net.sourceforge.cruisecontrol.dashboard.service.PanopticodeWidget
</pre>
<p>Make sure that you configure CruiseControl properly that it can copy the svg files into desired location as artifact: $ARTIFACTS_ROOT/{project name}/{build}/interactive-complexity-treemap.svg and $ARTIFACTS_ROOT/{project name}/{build}/interactive-coverage-treemap.svg</p>
<h2>Using Widgets</h2>
<p>From the build detail page you can see an additional tab named Panopticode Summary. If the project build has Panopticode output, charts will be shown as below.</p>
<p><img src="dashboard/panopticode.jpg" alt="panopticode" /></p>
<p>Note that we are now only providing an SVG formatted report so you will need to have an SVG browser plugin installed. Firefox supports SVG by default. You may need to <a href="http://www.adobe.com/svg/viewer/install/">setup adobe SVG viewer</a> for IE.</p>
<h2>Implement your own Widget</h2>
<p>You can also implement your own favourite widgets by implementing the following interface:</p>
<pre>
package net.sourceforge.cruisecontrol.dashboard.widgets;
import java.util.Map;
/**
* <pre>
* Widget is designed to help faciliate developers to contribute new output services,
* like emma, checkstyle, panopticode. the main function is getOutput which takes Map as parameter,
* CruiseControl reporting will pass in embedded values with keys:
*
* PARAM_PJT_ARTIFACTS_ROOT : Artifacts root of project, e.g. artifacts/project1
* PARAM_BUILD_ARTIFACTS_ROOT : Artifacts root of build, e.g. artifacts/project1/20051209122103
* PARAM_CC_ROOT : Parent folder of config.xml
* PARAM_PJT_NAME : Name of project e.g. project1
* PARAM_PJT_LOG_ROOT : Root of project log e.g.logs/project1
* PARAM_BUILD_LOG_FILE : Log file of build e.g. log20051209122103.xml
*
* <p> In order to enable your service in the system, go to the root directory of cruisecontrol,
* and simply add/edit widgets.cfg to include the class name. e.g. com.foo.Class <p>
* </pre>
*/
public interface Widget {
/**
* Widgets framework will associate artifacts root path with the following key.
*/
public static final String PARAM_PJT_ARTIFACTS = "PJT_ARTIFACTS";
/**
* Widgets framework will associate artifacts root path of the build with the following key.
*/
public static final String PARAM_BUILD_ARTIFACTS_ROOT = "BUILD_ARTIFACTS_ROOT";
/**
* Widgets framework will associate CruiseControl root path with the following key.
*/
public static final String PARAM_CC_ROOT = "CC_ROOT";
/**
* Widgets framework will associate project name with the following key.
*/
public static final String PARAM_PJT_NAME = "PJT_NAME";
/**
* Widgets framework will associate log root path with the following key.
*/
public static final String PARAM_PJT_LOG_ROOT = "PJT_LOG_ROOT";
/**
* Widgets framework will associate log file name with the following key.
*/
public static final String PARAM_BUILD_LOG_FILE = "BUILD_LOG_FILE";
/**
* CC Reporting system will pass in its web context root e.g. "/dashboard"
*/
public static final String PARAM_WEB_CONTEXT_PATH = "WEB_CONTEXT_ROOT";
/**
* @param parameters all the parameters user defined in widget, besides the embedded values.
* @return the Object to be displayed in the tab of build detail page
*/
public Object getOutput(Map parameters);
/**
* The displayed title in tab view in build detail page.
*
* @return the name displaied in tab view.
*/
public String getDisplayName();
}
</pre>
</div>
</div>
</body>
</html>
