A simple code compare functionality

One of the most important aspect of any development cycle is deployment and while deployment, it is very important to note the changes done before pushing your code bits to production environment. Although WCS does provides as way to manage code repository with eclipse plugin, it does not have any simple utility to compare code changes done within Admin UI itself. One has to always compare with repository code and versions for the changes, which is little bit time consuming if you want to just simply compare a single Template or CSElement change.

In past I used to use Notepad++ or other editors to compare code or version repository with or without some IDE like eclipse. But what to do when you suddenly need to compare code and make the changes & publish? That's where I thought to develop compare functionality within WCS Admin UI itself.

If you check the source code of compare plugin of editors, you will find that mostly they use simple JS functions to compare and thus, you really don't need very complex plugins to compare code. After some search, I found the following project quite useful: jsdifflib which presents a simple user interface and 2 options to check the differences between texts: Inline differences and Side-by-Side differences. You may want to fetch 2 JS files and 1 CSS file mentioned in that library.

Now, the point of customization is while checking the version history of CSElement and Template (It is understood that this functionality which I have presented, one needs to enable Revision Tracking for CSElement and Template assettype). When you check the version history of any asset in Admin UI, following element is called: OpenMarket/Xcelerate/Actions/RevisionTracking/ShowTrackedHistory.xml. So it is obvious that you would need to customize this element as presented below. In this element, it only checks if current assettype is Template/CSElement and if yes, just enable the compare button. Code can be simply as show below:

	<?xml version="1.0" ?>
	<!DOCTYPE FTCS SYSTEM "futuretense_cs.dtd">
	<FTCS Version="1.1">
	<!--
	CustomElements/OpenMarket/Xcelerate/Actions/RevisionTracking/ShowTrackedHistory
	DESCRIPTION
	Display the revision history of an item
	INPUTS
	ItsHistory is a list that contains the
	History to be displayed
	HISTORY
	-->
	<!-- Custom code: Start -->
	<SETVAR NAME="codelist" VALUE="CSElement,Template"/>
	<ISINLIST ITEM="Variables.AssetType" STR="Variables.codelist" />
	<IF COND="Variables.errno=1">
	<THEN>
	<SETVAR NAME="displayCompareButton" VALUE="true"/>
	</THEN>
	</IF>
	<!-- fatwire/Alloy/UI/Compare -->
	<!-- Custom code: End -->
	<!-- if we are not allowed to inspect the asset, we will not display links to the versions either -->
	<WORKFLOWASSET.LOAD ASSETTYPE="Variables.AssetType" ID="Variables.id" OBJVARNAME="workflowasset" />
	<WORKFLOWENGINE.ISFUNCTIONLEGAL OBJECT="workflowasset" FUNCTIONNAME="inspect" SITE="SessionVariables.pubid" VARNAME="isLegal" MUSTBEASSIGNED="false"/>
	<callelement NAME="OpenMarket/Xcelerate/Scripts/ShowRevisionPopup"/>
	<if COND="ItsHistory.#numRows!=0">
	<then>
	<SETCOUNTER NAME="colspan_count" VALUE="12"/>
	<IF COND="Variables.dorollback=true">
	<THEN>
	<INCCOUNTER NAME="colspan_count" VALUE="2"/>
	</THEN>
	</IF>
	<table BORDER="0" CELLSPACING="0" CELLPADDING="0" class="width-inner-100">
	<tr>
	<td></td><td class="tile-dark" VALIGN="TOP" HEIGHT="1"><IMG WIDTH="1" HEIGHT="1" src="Variables.cs_imagedir/graphics/common/screen/dotclear.gif" REPLACEALL="Variables.cs_imagedir"/></td><td></td>
	</tr>
	<tr>
	<td class="tile-dark" VALIGN="top" WIDTH="1" NOWRAP="nowrap"><BR /></td>
	<td >
	<table class="width-inner-100" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff"><tr><td colspan="Counters.colspan_count" REPLACEALL="Counters.colspan_count" class="tile-highlight"><IMG WIDTH="1" HEIGHT="1" src="Variables.cs_imagedir/graphics/common/screen/dotclear.gif" REPLACEALL="Variables.cs_imagedir"/></td></tr>
	<tr><td class="tile-a" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;</td>
	<td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;</td><td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;</td>
	<IF COND="Variables.dorollback=true">
	<THEN>
	<td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;</td><td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir"><DIV class="new-table-title"><XLAT.STREAM KEY="dvin/Common/Rollback"/></DIV></td>
	</THEN>
	</IF>
	<td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;&nbsp;&nbsp;&nbsp;</td><td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir"><DIV class="new-table-title"><XLAT.STREAM KEY="dvin/Common/Version"/></DIV></td>
	<if cond="Variables.displayCompareButton=true">
	<then>
	<td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;&nbsp;&nbsp;&nbsp;</td><td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir"><DIV class="new-table-title"><XLAT.STREAM KEY="fatwire/Alloy/UI/Compare"/></DIV></td>
	</then>
	</if>
	<td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;&nbsp;&nbsp;&nbsp;</td><td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir"><DIV class="new-table-title"><XLAT.STREAM KEY="dvin/Common/Date"/></DIV></td>
	<td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;&nbsp;&nbsp;&nbsp;</td><td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir"><DIV class="new-table-title"><XLAT.STREAM KEY="dvin/Common/User"/></DIV></td>
	<td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;&nbsp;&nbsp;&nbsp;</td><td class="tile-b" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir"><DIV class="new-table-title"><XLAT.STREAM KEY="dvin/Common/Comments"/></DIV></td>
	<td class="tile-c" background="Variables.cs_imagedir/graphics/common/screen/grad.gif" REPLACEALL="Variables.cs_imagedir">&nbsp;</td>
	</tr>
	<tr><td colspan="Counters.colspan_count" REPLACEALL="Counters.colspan_count" class="tile-dark"><IMG WIDTH="1" HEIGHT="1" src="Variables.cs_imagedir/graphics/common/screen/dotclear.gif" REPLACEALL="Variables.cs_imagedir"/></td></tr>
	<!-- Loop over all search results. -->
	<setvar NAME="rowStyle" VALUE="tile-row-normal"/>
	<SETVAR NAME="separatorLine" VALUE="0"/>
	<loop LIST="ItsHistory">
	<IF COND="Variables.separatorLine=1">
	<THEN>
	<tr>
	<!--<td colspan="Counters.colspan_count" REPLACEALL="Counters.colspan_count" class="light-line-color"><img height="1" width="1" src="Variables.cs_imagedir/graphics/common/screen/dotclear.gif" REPLACEALL="Variables.cs_imagedir"/></td>-->
	</tr>
	</THEN>
	</IF>
	<SETVAR NAME="separatorLine" VALUE="1"/>
	<tr class="Variables.rowStyle" REPLACEALL="Variables.rowStyle"><td><BR /></td>
	<td>
	<IF COND="Variables.isLegal=true">
	<THEN>
	<XLAT.LOOKUP KEY="dvin/Common/InspectThisRevision" VARNAME="_XLAT_"/>
	<XLAT.LOOKUP KEY="dvin/Common/InspectThisRevision" VARNAME="mouseover" ESCAPE="true"/>
	<SATELLITE.LINK ASSEMBLER="query" pagename="OpenMarket/Xcelerate/Actions/RevisionDetailsFront" outstring="urlrevdetfront">
	<satellite.argument name="cs_environment" value="Variables.cs_environment"/>
	<satellite.argument name="cs_formmode" value="Variables.cs_formmode"/>
	<satellite.argument name="AssetType" value="Variables.AssetType"/>
	<satellite.argument name="id" value="ItsHistory.asset"/>
	<satellite.argument name="rev" value="ItsHistory.versionnum"/>
	</SATELLITE.LINK>
	<if cond="Variables.cs_environment=ucform">
	<then>
	<A href="javascript:void(0)" onclick="showRevision(ItsHistory.versionnum, ItsHistory.asset, 'Variables.AssetType');" OnMouseOver="window.status='Variables.mouseover'; return true" OnMouseOut="return window.status='';" REPLACEALL="Variables.urlrevdetfront,Variables.mouseover,ItsHistory.versionnum,ItsHistory.asset,Variables.AssetType">
	<img height="14" width="14" vspace="4" src="Variables.cs_imagedir/graphics/common/icon/iconInspectContent.gif" HSPACE="2" border="0" alt="Variables._XLAT_" title="Variables._XLAT_" REPLACEALL="Variables.cs_imagedir,Variables._XLAT_"/>
	</A>
	</then>
	<else>
	<A href="javascript:void(0)" onclick="showRevision('Variables.urlrevdetfront',ItsHistory.versionnum);" OnMouseOver="window.status='Variables.mouseover'; return true" OnMouseOut="return window.status='';" REPLACEALL="Variables.urlrevdetfront,Variables.mouseover,ItsHistory.versionnum">
	<img height="14" width="14" vspace="4" src="Variables.cs_imagedir/graphics/common/icon/iconInspectContent.gif" HSPACE="2" border="0" alt="Variables._XLAT_" title="Variables._XLAT_" REPLACEALL="Variables.cs_imagedir,Variables._XLAT_"/>
	</A>
	</else>
	</if>
	</THEN>
	</IF>
	</td>
	<td><BR /></td>
	<IF COND="Variables.dorollback=true">
	<THEN>
	<td><BR /></td>
	<td VALIGN="TOP" NOWRAP="NOWRAP" ALIGN="LEFT">
	<DIV class="small-text-inset">
	<if COND="ItsHistory.createdby!=SYSTEM">
	<then>
	<INPUT TYPE="Radio" NAME="rollbackversion" VALUE="ItsHistory.versionnum" REPLACEALL="ItsHistory.versionnum"/>
	</then>
	<else>
	&nbsp;
	</else>
	</if>
	<BR />
	</DIV>
	</td>
	</THEN>
	</IF>
	<td><BR /></td><td VALIGN="TOP" NOWRAP="NOWRAP" ALIGN="LEFT">
	<DIV class="small-text-inset">
	<STRING.STREAM VALUE="ItsHistory.versionnum"/><BR />
	</DIV>
	</td>
	<if cond="Variables.displayCompareButton=true">
	<then>
	<SATELLITE.LINK ASSEMBLER="query" pagename="Tools/CompareFront" outstring="urlcomparefront">
	<satellite.argument name="cs_environment" value="Variables.cs_environment"/>
	<satellite.argument name="cs_formmode" value="Variables.cs_formmode"/>
	<satellite.argument name="AssetType" value="Variables.AssetType"/>
	<satellite.argument name="id" value="ItsHistory.asset"/>
	<satellite.argument name="rev" value="ItsHistory.versionnum"/>
	</SATELLITE.LINK>
	<td><BR /></td><td VALIGN="TOP" NOWRAP="NOWRAP" ALIGN="LEFT">
	<DIV class="small-text-inset">
	<CALLELEMENT NAME="OpenMarket/Xcelerate/UIFramework/Util/TextButton">
	<ARGUMENT NAME="buttonkey" VALUE="fatwire/Alloy/UI/Compare"/>
	<ARGUMENT NAME="clickEvent" VALUE="showRevision('Variables.urlcomparefront',ItsHistory.versionnum);"/>
	</CALLELEMENT><BR />
	</DIV>
	</td>
	</then>
	</if>
	<td><BR /></td><td VALIGN="TOP" NOWRAP="NOWRAP" ALIGN="LEFT">
	<DIV class="small-text-inset">
	<callelement NAME="OpenMarket/Xcelerate/Util/SetClientRevisionTime">
	<argument NAME="versionDate" value="ItsHistory.versiondate" />
	</callelement>
	<BR />
	</DIV>
	</td>
	<td><BR /></td><td VALIGN="TOP" NOWRAP="NOWRAP" ALIGN="LEFT">
	<DIV class="small-text-inset">
	<STRING.STREAM VALUE="ItsHistory.createdby"/><BR />
	</DIV>
	</td>
	<td><BR /></td><td VALIGN="TOP" ALIGN="LEFT">
	<DIV class="small-text-inset">
	<STRING.STREAM VALUE="ItsHistory.annotation"/><BR />
	</DIV>
	</td>
	<td><BR /></td></tr>
	<IF COND="Variables.rowStyle=tile-row-normal">
	<THEN><SETVAR NAME="rowStyle" VALUE="tile-row-highlight"/>
	</THEN>
	<ELSE><SETVAR NAME="rowStyle" VALUE="tile-row-normal"/>
	</ELSE>
	</IF>
	</loop>
	</table>
	</td>
	<td class="tile-dark" VALIGN="top" WIDTH="1" NOWRAP="nowrap"><BR /></td>
	</tr>
	<tr>
	<td colspan="3" class="tile-dark" VALIGN="TOP" HEIGHT="1"><IMG WIDTH="1" HEIGHT="1" src="Variables.cs_imagedir/graphics/common/screen/dotclear.gif" REPLACEALL="Variables.cs_imagedir"/></td>
	</tr>
	<tr>
	<td></td><td background="Variables.cs_imagedir/graphics/common/screen/shadow.gif" REPLACEALL="Variables.cs_imagedir"><IMG WIDTH="1" HEIGHT="5" src="Variables.cs_imagedir/graphics/common/screen/dotclear.gif" REPLACEALL="Variables.cs_imagedir"/></td><td></td>
	</tr>
	</table>
	</then>
	<else>
	<XLAT.STREAM KEY="dvin/UI/Norevisionsfound"/><BR/>
	</else>
	</if>
	</FTCS>

view raw CustomShowTrackedHistory.xml hosted with ❤ by GitHub

Once you create this custom element, you should you see compare button for CSElement / Template when you click on "Show versions" toolbar button:



Now, the magic part comes from the plugin: jsdifflib. Create a SiteEntry + CSElement: Tools/CompareFront and copy the same HTML code from this demo page within CSElement. Deploy the JS and CSS files to your app directory under /cs/ folder. Make small changes like call to JS and CSS files within Tools/CompareFront and add the following code to fetch the current version of code and the requested revision to compare with.

	<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
	<%@ taglib prefix="ics" uri="futuretense_cs/ics.tld" %>
	<%@ taglib prefix="asset" uri="futuretense_cs/asset.tld" %>
	<%@ taglib prefix="string" uri="futuretense_cs/string.tld" %>
	<%@ taglib prefix="xlat" uri="futuretense_cs/xlat.tld" %>
	<%//
	// Tools/CompareFront
	//
	// INPUT
	//
	// OUTPUT
	//%>
	<%@ page import="COM.FutureTense.Interfaces.FTValList" %>
	<%@ page import="COM.FutureTense.Interfaces.ICS" %>
	<%@ page import="COM.FutureTense.Interfaces.IList" %>
	<%@ page import="COM.FutureTense.Interfaces.Utilities" %>
	<%@ page import="COM.FutureTense.Util.ftErrors" %>
	<%@ page import="COM.FutureTense.Util.ftMessage"%>
	<cs:ftcs>
	<string:encode varname="id" variable="id"/>
	<string:encode varname="AssetType" variable="AssetType"/>
	<string:encode varname="rev" variable="rev"/>
	<style type="text/css">
	body {
	font-size: 12px;
	font-family: Sans-Serif;
	}
	h2 {
	margin: 0.5em 0 0.1em;
	text-align: center;
	}
	.top {
	text-align: center;
	}
	.textInput {
	display: block;
	width: 49%;
	float: left;
	}
	textarea {
	width:100%;
	height:300px;
	}
	label:hover {
	text-decoration: underline;
	cursor: pointer;
	}
	.spacer {
	margin-left: 10px;
	}
	.viewType {
	font-size: 16px;
	clear: both;
	text-align: center;
	padding: 1em;
	}
	#diffoutput {
	width: 100%;
	}
	table.diff {
	border-collapse:collapse;
	border:1px solid darkgray;
	white-space:pre-wrap
	}
	table.diff tbody {
	font-family:Courier, monospace
	}
	table.diff tbody th {
	font-family:verdana,arial,'Bitstream Vera Sans',helvetica,sans-serif;
	background:#EED;
	font-size:11px;
	font-weight:normal;
	border:1px solid #BBC;
	color:#886;
	padding:.3em .5em .1em 2em;
	text-align:right;
	vertical-align:top
	}
	table.diff thead {
	border-bottom:1px solid #BBC;
	background:#EFEFEF;
	font-family:Verdana
	}
	table.diff thead th.texttitle {
	text-align:left
	}
	table.diff tbody td {
	padding:0px .4em;
	padding-top:.4em;
	vertical-align:top;
	}
	table.diff .empty {
	background-color:#DDD;
	}
	table.diff .replace {
	background-color:#FD8
	}
	table.diff .delete {
	background-color:#E99;
	}
	table.diff .skip {
	background-color:#EFEFEF;
	border:1px solid #AAA;
	border-right:1px solid #BBC;
	}
	table.diff .insert {
	background-color:#9E9
	}
	table.diff th.author {
	text-align:right;
	border-top:1px solid #BBC;
	background:#EFEFEF
	}
	</style>
	<script type="text/javascript">
	var revision=window.document.URL ;
	var spos=revision.indexOf("rev") ;
	var verr ;
	if ( spos > -1 )
	{
	var mes=revision.substring(spos+4) ;
	var pPos = mes.indexOf('&') ;
	if ( pPos != -1 )
	verr="Comparing current versinon with Version "+mes.substring(0,pPos);
	else
	verr="Comparing current versinon with Version "+mes ;
	}else
	verr = "Comparing current versinon with Version " ;
	window.document.title=verr;
	function diffUsingJS(viewType) {
	"use strict";
	var byId = function (id) { return document.getElementById(id); },
	base = difflib.stringAsLines(byId("baseText").value),
	newtxt = difflib.stringAsLines(byId("newText").value),
	sm = new difflib.SequenceMatcher(base, newtxt),
	opcodes = sm.get_opcodes(),
	diffoutputdiv = byId("diffoutput"),
	contextSize = byId("contextSize").value;
	diffoutputdiv.innerHTML = "";
	contextSize = contextSize || null;
	diffoutputdiv.appendChild(diffview.buildView({
	baseTextLines: base,
	newTextLines: newtxt,
	opcodes: opcodes,
	baseTextName: "Base Text",
	newTextName: "New Text",
	contextSize: contextSize,
	viewType: viewType
	}));
	}
	</script>
	<ics:setvar name="assetname" value="theCurrentAsset"/>
	<asset:load name="thisAsset" type='<%= ics.GetVar("AssetType") %>' objectid='<%= ics.GetVar("id") %>'/>
	<asset:scatter name="thisAsset" prefix="asset"/>
	<ics:setvar name="currentVersionCode" value='<%= ics.GetVar("AssetType").equals("Template") ? ics.GetVar("asset:element:0:url") : ics.GetVar("asset:url") %>'/>
	<asset:loadrevision revision='<%= Integer.valueOf(ics.GetVar("rev")) %>' name='thisRevAsset' type='<%= ics.GetVar("AssetType") %>' objectid='<%= ics.GetVar("id") %>'/>
	<asset:scatter name="thisRevAsset" prefix="revAsset"/>
	<ics:setvar name="revVersionCode" value='<%= ics.GetVar("AssetType").equals("Template") ? ics.GetVar("revAsset:element:0:url") : ics.GetVar("revAsset:url") %>'/>
	<%-- OUTPUT --%>
	<div dojoType="dijit.layout.BorderContainer" class="bordercontainer">
	<div dojoType="dijit.layout.ContentPane" region="center">
	<table border="0" cellpadding="0" cellspacing="0" class="width-outer-70">
	<h1 class="top"><xlat:stream key="dvin/UI/CSElement"/>: <string:stream variable="asset:name"/> - Comparing current version with revision: <%= ics.GetVar("rev") %></h1>
	<ics:callelement element="OpenMarket/Xcelerate/UIFramework/Util/TitleBar">
	<ics:argument name="SpaceBelow" value="No"/>
	</ics:callelement>
	<div class="top">
	<strong>Context size (optional):</strong> <input type="text" id="contextSize" value="" />
	</div>
	<div class="textInput">
	<h2>Current</h2>
	<textarea id="baseText"><string:stream variable="currentVersionCode"/></textarea>
	</div>
	<div class="textInput spacer">
	<h2>Revision <%= ics.GetVar("rev") %></h2>
	<textarea id="newText"><string:stream variable="revVersionCode"/></textarea>
	</div>
	<div class="viewType">
	<input type="radio" name="_viewtype" id="sidebyside" onclick="diffUsingJS(0);"/> <label for="sidebyside">Side by Side Diff</label>
	&nbsp; &nbsp;
	<input type="radio" name="_viewtype" id="inline" onclick="diffUsingJS(1);" /> <label for="inline">Inline Diff</label>
	</div>
	<div id="diffoutput"> </div>
	</table>
	</div>
	</div>
	</cs:ftcs>

view raw CompareFront.jsp hosted with ❤ by GitHub

Now, when you click on compare button with any old version, you would be presented with similar kind of page as in demo but with pre-filled code of current and selected version. Just click on any of the options which would display the differences as shown below.

I hope this simplifies compare task for many developers.

Disclaimer: The code and/or the configurations posted are not official recommendations and should be used at sole's discretion with proper testing before deploying on live WebCenter Sites systems. Cheers!!