Joel Holder's Salient Signal

I think that a rendered historical view of a source controlled software project can be a key asset in understanding how a piece of software got to be what it is at any point in time.  This seems to me to be a missing first class asset from our general tooling.  Gource provides this as a beautifully rendered video timeline of a software project’s birth and evolution over time.

Here I’ve provided a small sample showing John Resig’s initial commit activity in JQuery’s Git repository.

Most of the documentation and work with Gource appears to be targeted toward *nix.  To the end spreading this love a bit wider into the Windows community, I’ll now share with you my recipe for getting it working in Win32.

1. First you’ll need to get Git working in Windows.  For this I recommend downloading and installing the Full Official Version of MsysGit from its Google code page: http://code.google.com/p/msysgit/downloads/list.  Make sure you install it with the “Git Bash Here” option (see the install options in the wizard).  Also, you should allow the installer to put Git into your PATH environment variable, so that its globally accessible from the command-line.  The default location of  git.exe in Win32 is “C:\Program Files\Git\bin”

2. Next you’ll need Gource.  You can get it from its Google code page: http://code.google.com/p/gource/.  Download the binaries for Windows and place them into a directory at c:\gource.  Manually add this path to your PATH environment variable so that it too is globally accessible.

3. Now in order to save the video output of Gource, you’ll need a video capture program.  For this you can use the free ffmpeg, althrough I was not able to get the ppm output working in Windows to pipe it into ffmpeg.  Thus, I opted for the shareware version of Fraps: http://www.fraps.com/download.php.  Fraps can be used to create a video of any window, including in our case the Gource output.  Also while I have not tried it myself, I suspect that Techsmith’s Camtasia and/or Jing might do the trick nicely also.

4. Next its time to get some source and make a vid.  You can get the source of a Git project by cloning its repository to your local system.

• Create a local folder called c:\src
• In Windows Explorer right mouseclick and choose “Git Bash Here”.  Follow the instructions here: http://kylecordes.com/2008/git-windows-go to get your Git account and public key setup. 
• Clone JQuery’s Git repository by typing into your Bash command prompt the following: git clone http://github.com/jquery/jquery.git.  Now you’ll have a new folder at c:\src\jquery with the jquery project’s src.
• Now to create a video of the project history do the following:
  • Start up Fraps and minimize it to your system tray.
  • open up a new cmd window and type the following command: c:\gource\gource --stop-at-end  c:\src\jquery.  This will start Gource from the beginning of the project’s historical timeline.  You’ll the see the video begin at this point.
  • Finally, with the Gource video window focussed, hit F9 which is Fraps’ default video capture key to get it to begin to capture the Gource output.
  • After Gource finishes, Fraps will save the video to its default video location, which is c:\Fraps\Videos.

Tada!…  Pretty nifty tools.  Gource works with Git, Mercurial, and SVN to date.  I’ve seen a few ppl out there claiming to have it working with TFS also.

See what kind of fun you can have with it..  Go forth and be fruitful..

Recently I had to do some work in ColdFusion.  Imagine my surprise and delight to find that CF components support a missing_method construct. 

It works like this.  When you attempt a method call against a .cfc and the method does not exist, CF automatically calls a method called “onMissingMethod”, if it exists.  With this, you get a chance to handle the call in onMissingMethod itself, redispatch the call to another method in the .cfc, or dispatch the the call to another component all together, such as a ServiceLocator that could resolve the message to some external responder.  This is the tip of the meta programming carrot, and it tastes great.  I use a base component from which I extend the other components in my app that takes care of this for me.  My base.cfc has an onMissingMethod that looks for the presence of a well known named service locator component.  If its there, it passes any method calls that it cannot resolve locally to a “forwardingContext” component.  This allows us to externalize the logic for finding the resolver as well as opens up our ability to have it proxy objects that are proxied by other facades. 

Here’s the implementation of base.cfc:

<cfcomponent> 

<cfset  forwardContext=createObject("component", "responderLocator")>

<!--- MISSING_METHOD: pass the call to a service locator --->
<cffunction name="onMissingMethod" access="public" returnType="any" output="true" description="DELEGATE TO A FORWARDCONTEXT OBJECT">
	<cfargument name="missingMethodName" type="string" required="true">
	<cfargument name="missingMethodArguments" type="struct" required="true">
	<cfset var local = {} />
    <cfset local.returnValue = "" />
    <cfif IsDefined("forwardContext")> 
    	<cfif StructKeyExists(forwardContext, arguments.missingMethodName)>
        	<cfset local.meta = getMetadata(forwardContext[arguments.missingMethodName]) />
			<cfset local.i = 1 />
            <cfinvoke component="#forwardContext#" method="#arguments.missingMethodName#" returnvariable="local.returnValue">
                    <cfloop array="#arguments.missingMethodArguments#" index="local.arg">
                        <cfinvokeargument name="#local.meta.parameters[local.i++].name#" value="#local.arg#"> 
                    </cfloop>
              </cfinvoke>
        <cfelse>
        	<cfinvoke component="#forwardContext#" method="#Arguments.missingMethodName#" argumentcollection="#Arguments.missingMethodArguments#" returnvariable="local.returnValue" />
        </cfif>
    <cfelse>
        <cfset arguments.missingMethodArguments.calledMethodName = Arguments.missingMethodName />
        <cfdump var="#arguments.missingMethodArguments#" expand="yes" label="MISSING METHOD ARGUMENTS" />
    </cfif>
   	<cfreturn local.returnValue />
    <cfif NOT StructKeyExists(local,"returnValue")>
	<cfset local.returnValue = "" />
    </cfif>
    <cfreturn local.returnValue />
</cffunction>

</cfcomponent>

A simple responderLocator.cfc could look like this (note that in this case I’ve put the method being proxied directly on to it, so it does not have to pass the call elsewhere):

<cfcomponent> 

<cffunction name="onMissingMethod" access="public" returnType="any" output="false">
	<cfargument name="missingMethodName" type="string" required="true">
	<cfargument name="missingMethodArguments" type="struct" required="true">
    <cfset tmpReturn = ""> 
 	 <cfset functionToCallName = Arguments.missingMethodName> 
     <cfset arguments.missingMethodArguments.calledMethodName = Arguments.missingMethodName>     
	<cfscript>
		dump(missingMethodArguments, true);
	</cfscript>
    <cfreturn tmpReturn> 
</cffunction>

<cffunction name="DontExist" access="public" returnType="any" output="false">
	<cfargument name="data" required="true">
    <!--- ECHO BACK FOR EXAMPLE --->
    <cfreturn "You sent me: " & data>
</cffunction>

<cffunction name="dump">
    <cfargument name="data" required="true">
    <cfargument name="bAbort" required="false" default="0">

    <cfdump var="#arguments.data#">
    <cfif arguments.bAbort eq 1>
    	<cfabort>
    </cfif>
    <cfreturn true>
</cffunction>

</cfcomponent>

Given the above implementation of the responderLocator, I can expect to call a method called “DontExist” on base.cfc or one extended from it that does not have the method, it would pass the call to reponderLocator and expect it to respond.  Base.cfc would then pass the response back to the caller.

Here’s an example:

<cfscript>
    myCfc = createObject("component","base"); <!--- or some component derived from base.cfc --->
    myVal = myCfc.dontExist("foo");
</cfscript>

In this case, myVal will equal “You sent me: foo”, which demonstrates that the call to DontExist was delegated to responderLocator, invoked, and returned to this calling code. 

This is a fairly contrived example just to show the pattern off in its simplest form.  Beefier implementations might use an Array of responseLocators and loop through them trying to resolve the call.  Additionally, note that if all the components participating in the pattern are extended from base.cfc, and each has its own spools of locators, you can see how the call resolution attempts could spread across potentially hundreds of components until a responder was located.

Pretty nifty feature..  Enjoy..

Today I’m going to demonstrate a straight-forward and very effective technique for markup templating.  I’ve borrowed the supplant prototype function from Douglas Crockford’s - And Then There Was Javascript presentation, in order to show you how to inject values from custom data structures directly into into strings.  We’ll be doing a minimal implementation here in order to show the great outcomes you can get without requiring buy in to one of the many over engineered frameworks that do this. 

First we extend the prototype of the built in String type.

String.prototype.supplant = function(o) {

    return this.replace(/{([^{}]*)}/g,

        function(a, b) {

            var r = o[b];

            return typeof r === 'string' || typeof r === 'number' ? r : a;

        }

    );

};

With this minimalist formatter in place we are able to do string manipulation like this:

            var result = "{a}-{b}-{c}".supplant({"a": "Foo", "b": "Bar", "c": "Baz" });

The resulting string would be: "Foo-Bar-Baz".  As you can see, we’ve essentially got a string formatting extension to all objects of type String here.  Where this becomes immediately useful to us in our web pages, is for injecting objects directly into markup strings, which can then be programmatically added to the DOM.  This technique is shown below in only  4 lines (statements) of Javascript.

      <div id="container" />

      <script type="text/javascript">

        var template = '<table border="{border}">' +

                        '<tr><th>Last</th><td>{last}</td></tr>' +

                        '<tr><th>First</th><td>{first}</td></tr>' +

                       '</table>';

        var data = {

            "first": "Carl",

            "last": "Hollywood",

            "border": 2

        };

        var container = document.getElementById("container");

        container.innerHTML = template.supplant(data);

      </script>

As you can see, we start with a template String and a JSON data Object.  Then we get our target DOM node and simply set its .innerHTML property to the output of the template running its own .supplant() function against the data object.  Very sparse, no heavy framework..  Its just the bare bones Javascript and a helper function.  Here’s an example of using this technique to set the .src property of an <img> DOM node.

Assuming I have an image file that I want to be targetable based on some script logic, it looks like this.

The code that I need to target this file at runtime looks like this:

            <img id="logo" src="" />

      <script type="text/javascript">

          var param = { domain: 'memecannon.com', media: '/Content/ninja' };

          var url = "{media}.jpg".supplant(param);

          var logo = document.getElementById("logo");

          logo.setAttribute("src", url);

    </script>

The output looks like this:

Using this approach, its quite easy to do targeting of custom skin artifacts and layout structures.  Other uses of this approach are to programmatically inject variables into CSS strings and runtime script includes.  As you can see, the basics for screen templating are exposed near the surface of DOM scripting with Javascript.  That said, I do typically use JQuery plugins for this type of screen composition.  I’ve surveyed most of the JQuery plugins in this space.  I recommend JSRepeater for ease of use and support for automatic iterating over collections and dealing with heirarchal data structures.  For an extremely unobtrusive templating solution, you can’t beat NoTemplate.  It provides a level of externalized purity, in that you don’t need to hack replacement ${targets} into your markup at all; rather, it uses selectors to reach down into your markup for mapping data to screen targets. 

Hopefully, in this article I’ve informed, if not convinced you that you have the power to blend your data and markup in whatever ways you need purely with Javascript and with a minimum of effort.  In a successive post,  I’ll show you how to interact this approach with Ajax Services to bring your screens to life.

Enjoy..

    public override bool TryInvokeMember(InvokeMemberBinder binder, object[] args, out object result)

    {

        if (_methods.ContainsKey(binder.Name) && _methods[binder.Name] is Delegate)

        {

            result = (_methods[binder.Name] as Delegate).DynamicInvoke(args);

            return true;

        }

        else if (_methods.ContainsKey("missing_method") && _methods["missing_method"] is Delegate)

        {

            var missing_method = _methods["missing_method"] as Delegate;

            var ctxParam = missing_method.Method.GetParameters().Where(p => p.Position == 0 &&

                                                                        p.ParameterType == typeof(DynamicObject)).FirstOrDefault();

            if (ctxParam != null && forwardContext != null)

            {

                dynamic context = forwardContext;

                result = missing_method.DynamicInvoke(context, binder, args);

                return true;

            }

            else

            {

                result = missing_method.DynamicInvoke(binder, args);

                return true;

            }

        }

        else

        {

            return base.TryInvokeMember(binder, args, out result);

        }

    }

}

The scenario:  We have an ASP.NET CheckListBox from which we want to ensure at least one option has been selected before allowing the user to click a button.  Sounds simple enough, but we're going to use JQuery to do all of this work on the client. 

ASP.NET MARKUP:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FileDownloadUserControl.ascx.cs" Inherits="FileDownloadUserControl" %>

<asp:CheckBoxList ID="chklstFilesAvailable" runat="server">

<asp:Button style="display: none" ID="btnDownload" runat="server" Text="Download" OnClick="btnDownload_Click" />

Simple and straightforward..  Now lets have a look at the HTML that this code results in.  With three items bound to our CheckListBox, we get this:

RENDERED HTML MARKUP:

WebForms has created a table, labels, and checkboxes.  Note that the IDs have been changed from the original names we gave them.  We have effectively lost control of our ID naming at this point.  This makes it difficult to use JavaScript to target these elements after they've been rendered.  Here is a workaround to target the CheckListBox and the Button post render.

First we get the mangled IDs and use those values in JQuery selectors to create JQuery objects.  Then we pass them as parameters to the wireButtonShowToCheckListBox function in order to wire the click event of each checkbox to a nested anonymous function, which checks to see if at least one of the boxes are checked and, if so, shows the button.

JAVASCRIPT:

<script type="text/javascript" language="javascript">

    $(document).ready(function() {

        var id = "<%= chklstFilesAvailable.ClientID %>";

        var chklist = $("#" + id);

        var btnId = "<%= btnDownload.ClientID %>";

        var button = $("#" + btnId);

        //reusable show/hide button wiring

        wireButtonShowToCheckListBox(chklist, button);

    });

function wireButtonShowToCheckListBox(chklist, button) {

    chklist.find('input:checkbox').each(function() {

        var cb = $(this);

        cb.click(function() {

            var hit = false;

            chklist.find('input:checkbox').each(function() {

                var checked = $(this).attr('checked');

                if (checked)

                    hit = true;

            });

            if (hit == true) {

                button.show();

            } else {

                button.hide();

            }

        });

    });

}

</script>

Thats it.. With this approach we can pass any CheckListBox and any Button to this function and achieve a very fast pure client-side solution to control when and if the user can click the button.  The same basic approach can be used to target and wire other rendered WebForms controls.  Enjoy..

One of the main advantages of JSON is that, like XML, it can represent an object graph of any shape.  JSON allows for the natural structure of entity Types to be expressed in the form of nested and aggregated object literals.  The simplicity and small footprint of this format has made it a popular choice for data interchange with the dynamic languages crowd, where JSON can be parsed into native objects with basic language constructs.  This is what makes it most appealing for JavaScript developers.  This article will demonstrate a straight forward way of doing Ajax with WCF Rest, MS Ajax, Object Bakery, and JQuery.

1.       Create a new WebForms project.

2.       Drag in a ScriptManager to Default.aspx's form element.

3.       Add JQuery-1.3.2.min.js to the project.

4.       Drag JQuery-1.3.2.min.js into the head section.

5.       Add an empty <p /> to the form.

6.       Switch to design view.

7.       Drag in an HTML input button and double click it.

Your markup should now look something like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="OBWeb._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server"> 

     <title></title>

          <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

          <script type="text/javascript">

               function Button1_onclick() {

              }

          </script>

</head>

<body>

<form id="form1" runat="server">

     <div>

          <asp:ScriptManager ID="ScriptManager1" runat="server" />

          <input id="Button1" type="button" value="submit" onclick="return Button1_onclick()" />

          <p />

     </div>

</form>

</body>

</html>

  Notice that we have a stubbed out JavaScript function wired to our button.

8.       Add a reference to ObjectBakery.dll, available here.

9.       Add a new “Ajax-enabled WCF Service” to your project.

10.   Name it Service1.

11.   Create a sample POCO that we can use for the demo.  Here’s mine:

 public class TestObject

 {

     public int ID { get; set; }

     public string Description { get; set; }

 }

13.   In the page designer right mouse click your ScriptManager and go to properties.

14.   In the property designer click the ellipsis next to Services

15.   Add a Service, setting the Path property to the url of Service1, i.e. “/Service1.svc”.

16.   Now lets write some JavaScript.

<script type="text/javascript">

     function Button1_onclick() {

          var service = new Service1();

          service.DoWork(3, onSuccess, null, null);

     }

            function onSuccess(result) {

               var objects = eval("(" + result + ")");

               for (var i in objects) {

                    $("p").append(objects[i].Description + "<br />");

               }

          }

          </script>

What  we did here is fill out our Button1_onclick with code that news up a Service1 reference and invokes its DoWork.  The first argument will be passed as the id parameter to our WebMethod.  The second argument is a callback, in our case the onSuccess method.  Notice the signature of onSuccess takes a result param.  This will be our JSON string returned from DoWork.  Note that we can parse the result into a native JavaScript object graph with a single line of code.

var objects = eval("(" + result + ")");

This is pretty cool.   We trust our own service, so there’s no issue with using eval, instead of parseJSON().  In our for loop, we use JQuery to add new DOM elements holding the Description property from each of our objects.

$("p").append(objects[i].Description + "<br />");

That’s the basic story.  What we’ve been able to do here is enable the basic async data exchange paradigm between an ASPX page and data enabled Rest services.  There are some fun bits here when you couple this approach with ORM frameworks, such as Entity Framework or NHibernate.  We now have the capability to move objects between JavaScript and C# seamlessly.  Object Bakery has helper methods to move between JSON and CLR graphs with a single line of code.  I have found this approach helpful when I need to share objects between client and server, and  I don’t want to worry about the details of data interchange.   Note that Object Bakery also works with Anonymous Types, which allows us to project out objects containing only the data our front-end needs and thus keeps our graphs and their isomorphic JSON strings as small as possible.  Your users will appreciate every bit of responsivity you can give them.

You can download the code for this project here.

Enjoy..

Enterprise Library’s Logger is powerful and convenient.  It's default TextFormatter provides a suitable human readable format, and it also allows you to implement custom formatters to suite your needs.  I think that being able to work with log data without having to manually parse strings, can really simplify the development of tools for mining logs.   To this end, I whipped up a small WinForms app that demonstrates how to take log entries originating from a text spool, convert them into objects, and query them with Linq.  The primary goal was to provide simple UI that enables log search, filter, and find, with sorting, grouping, etc.

First off, the heavy lifting in this sample is provided by the EntLib Contrib LogParser.  Their FilteredLogReader class drives a tokenizer, which creates and populates LogEntry objects out of log text.   The tokenizer will use any formatting template, in our case, I’ve used the built in “Text Formatter”.   When it executes, it generates a RegularExpression capable of matching and trapping the values involved in populating our collection of LogEntry objects.  Ultimately, we are provided with a simple API for driving all of this.  Here’s a brief sample:

string configFile = "abc.config";

            string traceLog = "trace.log";

            FilteredLogFileReader reader =

new FilteredLogFileReader(traceLog, configFile,

                        new TimeStampParser(CultureInfo.CurrentCulture));

            Filter filter = new Filter

            {

                StartTime = DateTime.Now.AddHours(-1),

                StopTime = DateTime.Now

            };

            IEnumerable<LogEntry> entries = reader.ParseLogFile(filter);

The basic idiom here is:

1.       Get a FilteredLogFileReader

2.       Setup a Filter

3.       Feed the filter to the reader’s ParseLogFile

To facilitate a flexible set of filtering concepts at the UI, I decided to use a simple FilterExpression class to represent a set of keys, values, and match operators.  Here’s a quick way to get the intersection result set from applying a set of filters with a single pass through the logs.

        private IList<LogEntry> FilterLogEntries(List<LogEntry> lst,

                                                 List<FilterExpression> exprs)

        {

            var matchAllExprs = new List<LogEntry>();

                       List<PropertyInfo> props = typeof(LogEntry).GetProperties().ToList();

            lst.ForEach(entry =>

                {

                    int matchCount = 0;

                    exprs.ForEach(expr =>

                    {

                        string value = props.Find(prop => prop.Name.Equals(expr.Key))

                                                      .GetValue(entry, null).ToString();

                        switch (expr.Operator.ToLower())

                        {

                            case "contains":

                                if (value.Contains(expr.Value))

                                    matchCount++;

                                break;

                            case "!contains":

                                if (!value.Contains(expr.Value))

                                    matchCount++;

                                break;

                            case "regex match":

                                if (new Regex(expr.Value).IsMatch(value))

                                    matchCount++;

                                break;

                            case "==":

                                if (expr.Value.Equals(value))

                                    matchCount++;

                                break;

                            case "!=":

                                if (!expr.Value.Equals(value))

                                    matchCount++;

                                break;

                            default:

                                throw new Exception("operator not found");

                        }

                    });

                    if (exprs.Count == matchCount)

                        matchAllExprs.Add(entry);

                });

            return matchAllExprs;

        }

If any of the LogEntries match all of the expressions, then those are returned to the caller.  Now we can place the log data onto our screen for users.

this.dataGridView1.DataSource = 

    new BindingList<LogEntry>(FilterLogEntries(lst,

        lbxFilterExpressions.Items.Cast<FilterExpression>().ToList()));

The sample app that I’ve included, gives users the ability to create, configure, and apply FilterExpressions on the fly.  Here’s a screenshot.

You can get the source for this sample here.  Enjoy..