Binaryheap

Recently I’ve been doing a lot of work with Knockout. I’ve run into some scenarios where my screens and user interfaces are needing to be “richer” and I’ve not got the need for Flash or Silverlight. So I’ve been using and learning Knockout for the last few weeks. For those not familiar, Knockout is a Javascript library that lets you build dynamic screens and helps you make use of the MVVM pattern. Follow this link if you’d like to read more.

When working with Knockout you use the HTML5 attribute data-bind. Take the following code for example that puts a user’s name in the

<span data-bind="text: Name"></span>

var ViewModel = new function() {
var self = this;
self.Name = ko.observable("Sample User");
}

ko.applyBindings(ViewModel);

This code basically places “Sample User” inside of the span tag. Now let’s say that you would like to put a “date” in there. Maybe your ViewModel included a Date of Birth.

var ViewModel = new function() {
var self = this;
self.Name = ko.observable("Sample User");
self.DateOfBirth = ko.observable();
}

ko.applyBindings(ViewModel);

<span data-bind="text: Name"></span>
<span data-bind="dateString: DateOfBirth, datePattern: 'MM/DD/YYYY'"></span>

With Knockout, the dateString binding does not exist. However, like any great framework, you can extend behavior. What we need to do is create a Custom Binding. The following code will create our DateString formatter and it leverages the Moment.js library for date formatting. Check it out if you haven’t at this point.

ko.bindingHandlers.dateString = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor(),
            allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);        
        var pattern = allBindings.datePattern || 'mmmm d, yyyy';
        if (valueUnwrapped == undefined || valueUnwrapped == null) {
            $(element).text("");
        }
        else {
            var date = moment(valueUnwrapped, "YYYY-MM-DDTHH:mm:ss"); //new Date(Date.fromISO(valueUnwrapped));
            $(element).text(moment(date).format(pattern));
        }
    }
}

Just a quick basic, from the knockout documentation, “update” will be called once when the binding is first applied to an element, and again whenever the associated observable changes value. Update the DOM element based on the supplied values here. Now that’s out of the way, let’s get to the meat of our function.

The function takes the value of the object as well as any binding options. The value is unwrapped via the ko.utils function which returns the actual object value. The datePattern is fished out of the allBindingsAccessor to build the format that we would like to apply. You can of course customize the “default” behavior here in this method leaving datePattern unneeded in many occasions. Lastly, if the value is defined, I build a date from Moment in the ISO 8601 format and then output the date in the format represented in datePattern.

Pull all of this together, and you get nice and clean date formatting leveraging what Knockout gives you plus adding a little something extra.

When approached with building a tabular view of data on the iPad, my first thought was there has to be a grid control somewhere out there that does this.  Having spent a good portion of my development time in C# lately, I’m used to seeing all of the feature rich libraries that are either out there on Github or that can be purchased from any of the control vendors.  I did happen to find several solutions that would have worked, but my problem was just not that complex.  The table’s needs are very simple.  I need to be able to display rows of data that are laid out in a grid.

Here is how I accomplished that:

First thing was first, subclassing UITableViewCell

#import <UIKit/UIKit.h>

@interface CustomUITableViewCell : UITableViewCell
{
    NSMutableArray *columns;
}

- (void)addColumn:(float)column;
@end

Then in the implementation, I’m overriding drawRect:

- (void)drawRect:(CGRect)rect 
{	
    [super drawRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect rect = self.bounds;
    UIColor *separatorColor = [UIColor colorWithRed:208.0/255.0 green:208.0/255.0 blue:208.0/255.0 alpha:1.0];
	
    for (int i = 0; i < [columns count]; i++) 
    {
        CGFloat f = [((NSNumber*) [columns objectAtIndex:i]) floatValue];
	drawLine(context, CGPointMake(f, 1), CGPointMake(f, rect.size.height), separatorColor.CGColor);
    }
}

void drawLine(CGContextRef context, CGPoint startPoint, CGPoint endPoint, 
				   CGColorRef color) 
{
    CGContextSaveGState(context);
    CGContextSetLineCap(context, kCGLineCapSquare);
    CGContextSetStrokeColorWithColor(context, color);
    CGContextSetLineWidth(context, 1.0);
    CGContextMoveToPoint(context, startPoint.x + 0.5, startPoint.y + 0.5);
    CGContextAddLineToPoint(context, endPoint.x + 0.5, endPoint.y + 0.5);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);        
	
}

So what’s going on here, is I’m allowing the cell to keep track of the X positions where the line needs to be drawn. This is stored in the columns NSMutableArray. Then when the cell is being drawn, I’m iterating the columns and drawing a line that goes from the top of the cell down to the bottom.

And then in my Controller when the cell is being created, I call addColumn with the X coordinate that I want to draw the column at.

Like I said, my requirements were super light and this has worked out really well for me so far.