chris carter's web log

I Heart Balsamiq Mockups

Mon, 06 Oct 2008 00:16:16 GMT

This post is a little info on how I went about coming up with a design for a winform app I'm building.

OK. I still use paper. This is what I started with today(very bad quality photo of paper):

Although simple, it took me awhile to figure out where to start on the UI. Once this was on paper, I had a better idea of where I wanted to start with Balsamiq Mockups. After a pretty short amount of time(like maybe 30 minutes), I came up with this(click to enlarge):

I spent very little time in the winform designer once i mocked up what I wanted. I ended up with this as a first cut:

Part 2: Test Driven Development In Practice

Fri, 03 Oct 2008 22:40:39 GMT

OK. Here's part 2 of the TDD in practice dealio. I decided a screencast would be appropriate. I'm just getting over a cold so my voice is shot, this is a silent movie.

In part 1 I typed in code that I want, to solve my problem. Most of the code did not exist. So in part 2, we need to create everything that's missing and make the test pass. Play the video to see how I did it(I used all CodeRush features to generate code - with a little manual intervention; but most of this can also be done with raw Visual Studio shortcuts).

Part 1: Test Driven Development In Practice

Fri, 03 Oct 2008 16:23:43 GMT

Go here for part 2.

Ok, so I've been meaning to do a screencast on this, i've done one but it's lame. I figured I'd do more a photo slash journal-ish type thing and describe my real world(yes this is for an actual project) usage of TDD. So here goes, I just typed the following into my test, this is what I want to do:

And that's pretty much it. Notice the red squiggly lines? Yep, I haven't created that stuff yet, cuz this is what I want to do, not what I've done. Next part will be making those red lines go away...

Muppet F*cker

Fri, 03 Oct 2008 16:09:16 GMT

That's one of the funniest terms I've heard in awhile. I heard it during the brilliant presentation by Giles Bowkett recorded at RubyFringe.

IModelBinder with AutoBinder

Thu, 02 Oct 2008 22:16:51 GMT

Today I noticed this post on the ModelBinder attribute that ships with Preview 5 of ASP.NET MVC. I looked at the example and it doesn't make any sense. I had come up with something I call AutoBinder and until today didn't think it was anything worth mentioning. I could swear I saw somewhere that something like this would be included in the RTM of MVC but I can't remember where I saw that.

IModelBinder

IModelBinder is a simple interface with one method to implement, it looks like this:


public interface IModelBinder {
  object GetValue(ControllerContext controllerContext, string modelName, Type modelType, ModelStateDictionary modelState);
}


1
2
3

AutoBinder

AutoBinder simply implements that interface like this:


public class AutoBinder<TModel> : IModelBinder where TModel : class, new(){
  public object GetValue(ControllerContext controllerContext, string modelName,
    Type modelType, ModelStateDictionary modelState){
    return AutoBinder.UpdateFrom<TModel>(controllerContext);
  }
}


1
2
3
4
5
6

And AutoBinder.UpdateFrom looks like this:


public static T UpdateFrom<T>(ControllerContext controllerContext) where T : class, new(){
  T result = new T();
  NameValueCollection form = controllerContext.HttpContext.Request.Form;
  foreach (PropertyDescriptor property in TypeDescriptor.GetProperties(result)){
	object value = null;
	//if the property type is boolean, make sure it's not an array, the
	//default behavior of Html.CheckBox is to create the checkbox, plus
	//a hidden field with the same name as the checkbox, to cover the behavior
	//of when a checkbox is unchecked, it won't get posted
	if (property.PropertyType == typeof(bool)){
	  string[] values = form[property.Name].Split(',');
	  if (values.Length > 0){
		value = ConvertUtils.ChangeType(values[0], property.PropertyType);
	  }
	}else{
	  value = ConvertUtils.ChangeType(form[property.Name], property.PropertyType);
	}
	property.SetValue(result, value);
  }
  return result;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Using AutoBinder

Using this requires either registering the types with their appropriate binder at app startup or adorning your models with the ModelBuilder attribute like so:


[ModelBinder(typeof(AutoBinder<Customer>))]
public class Customer{
//guts of Customer here
}


1
2
3
4

Now in a controller we might have a method that looks like this:


[AcceptVerbs("POST")]
public ActionResult Edit(Customer customer){
//blah blah blah
}


1
2
3
4

Assuming that all of the fields on the form have the same name attribute as the properties on the model, the customer arg will be mapped up with the posted form values automagically through the ModelBinder attribute.

Anyway, here's the spectacular example: ModelBinder.zip. It assumes that you have Preview 5 of ASP.NET MVC installed.

Holy Shitballs Batman! jQuery and Microsoft? Seriously??

Sun, 28 Sep 2008 22:18:48 GMT

Wow. This was only posted 6 hours ago and i feel like I'm the last to hear the news.

Partyin with Balsamiq Mockups

Sun, 28 Sep 2008 17:58:09 GMT

I'm havin alot of fun with Balsamiq Mockups today. Here's my latest endeavor, I'm still learning so it's not great but it did help get over a hump with the project i'm working on.

Quick, Somebody Give Me A Credit Card Number

Mon, 22 Sep 2008 12:54:10 GMT

Sketchy Food Tracker

Tue, 16 Sep 2008 11:23:36 GMT

via Tobin, i decided to check out Balsamiq Mockups. Wow. This tool is frickin awesome.

Food Tracker

As part of starting a cross fit program, I'm tracking(trying to anyway), I want to get better at tracking what I eat. Since I suck at coming up sample project ideas, i figured that a food tracking app would be a good way to play around with ASP.NET MVC and MonoRail as a sample application. I had come up with a sketch of the input form this weekend, but this morning the one I did with Balsamiq's online tool came out WAY better. Check out the sketch:

The tools is surprisingly fun to use. There are a ton of controls to pick from and anything you choose you can customize the text and data.

The grid in my sketch was a snap to set up, drag a grid, type in what you want for the header text, and a few rows beneath and you're done.

The designer also hasguidelines, so when you drag a control, similar to Visual Studio's WinForm designer, you get the vertical and horizontal guidelines that help you make stuff look good.

Anyway, if you have drawn diagrams of screen layouts before on paper, it's worth takin a look at.

More Html.ValidateTextBox

Mon, 15 Sep 2008 16:32:43 GMT

OK. So I added some server side rule checking as a backup to the client side stuff. In order to test this out, I had to turn off client side validation. Right now it only returns a list of validation error messages, but I have some plans for that mechanism. The controller method that handles the form post now looks like this:

[AcceptVerbs("POST")]
public ActionResult Edit(int id, Customer customer)
{
  customer.ID = id;
  if (!Model.IsValid(customer))
  {
    ViewData["errormessages"] = Model.GetErrorMessages(customer);
    return View(customer);
  }

  RepoFactory.Get<Customer>().Save(customer);
  return this.RedirectToAction("index");
}

The only change i made to the Customer class so far was that I added a custom model binder attribute to the customer. That attribute looks like this:

public class CustomerBinder : IModelBinder
{
  public object GetValue(ControllerContext controllerContext,
    string modelName,
    Type modelType,
    ModelStateDictionary modelState)
  {
    NameValueCollection form = controllerContext.HttpContext.Request.Form;
    return new Customer
    {
      FirstName = form["FirstName"],
      LastName = form["LastName"]
    };
  }
}

And the customer class looks like this(i updated the validation attribute constructors to match the changes i made.

[ModelBinder(typeof(CustomerBinder))]
public class Customer : IModel
{
  public int ID { get; set; }

  [ValidateLength(3, 30,
    "First name must be between 3 and 30 characters in length.", true)]
  public string FirstName { get; set; }

  [ValidateMaxLength(30,
    "Last name is required and cannot exceed 30 characters.", true)]
  public string LastName { get; set; }
}

and the server side validation ends up rendering the following view(reminiscent of lammo validation summary in webforms):

	public interface IModelBinder { object GetValue(ControllerContext controllerContext, string modelName, Type modelType, ModelStateDictionary modelState); }
1 2 3

	[ModelBinder(typeof(AutoBinder<Customer>))] public class Customer{ //guts of Customer here }
1 2 3 4

	[AcceptVerbs("POST")] public ActionResult Edit(Customer customer){ //blah blah blah }
1 2 3 4