Steve Jobs

I couldn’t quite put my finger on why I was so upset at the passing of Steve Jobs; I’ve never personally met him. Then I read Marco Ament’s post and then I understood.

I didn’t know Steve. I never met him. I never worked for him. I never even got one of his famous one-liner email responses.

But it feels like someone close to me has died. He was so intimately involved in his company and its products (which have become critical parts of my career and hobby life), and he has publicly injected so much vision, personality, and care into our entire industry for so long, that I do feel like I knew him, even though I really didn’t.

So thank you Steve. You made us imagine.

Windows 8 Hack-a-Thon Update 2

Sorting out “Saw it in the keynote, but it’s not in the product we have” fun right now. Visual Studio 11 Developer Preview apparently doesn’t have the nice new Blend style editing of XAML in it yet. Also Expression Blend 5 apparently only supports HTML5/JavaScript projects and not C#/XAML projects.

Small roadblock, but would have been nice to use Blend for the XAML; especially with how nice it looked in VS in yesterdays keynote. Good job blend team.

Completed Tasks Tasks

- Specify features for app.
- Sketch Application Layout

Current Tasks

- Edit Grid Template C#/XAML app to reflect our UI (Bryan)
- Replace sample data with our own data using roaming profile storage (Dan)

Windows 8 Hack-a-Thon Update 1

So we’ve setup TFS using the cool hosted TFS accounts they handed out. So we’re setup with source control. Very nice and easy to use. We’ve installed the Visual Studio 11 Developer Preview from the thumb drives they gave us. We’ve found the appropriate documentation via Microsoft Connect, and the solution and project are created.

Time wise this took one Corona and a small latte to complete (yay for free drinks).

Now starts the fun part!

Windows 8 Hack-a-Thon

So I’m at Microsoft Build with a buddy of mine (Dan). We’ve had a day and a half of keynotes showing us how to make just one too many RSS readers; but overall we’re both pretty impressed with what we’re seeing in Windows 8. I’m actually writing this post on the Samsung Tablet’s that were handed out.

To really get to know the changes coming out we’ve decided to do a Hack-a-Thon and use these tablets with the new Visual Studio tools to create a “Metro Style” app (I’m already tired of that phrase). Our plan is to hit a session later this afternoon but to skip the party tonight and see just how far we can get with an app.

We’ve got a couple of ideas so far. But right now the only things we know for sure are we’re going to use the new hosted TFS account we were given, create an app that uses the new contracts for sharing and searching using C# w/ XAML.

Updates to come throughout the rest of the day/evening.

Let the Hack-a-Thon start!

Quote: “The brands that curate their products well…”

The brands that curate their products well, with thoughtfulness and consideration for the customer, end up the winners.

In reference to the past success of Sony and the current success of Apple.

How Steve Jobs ‘out-Japanned’ Japan via Daring Fireball.

Happy New Years

Happy New Years!

How to build a Check Box Group Helper with ASP.Net MVC 2.0

ASP.Net MVC 2.0 comes with great HTML helpers right out of the box, which include a check box helper. Unfortunately the way in which the check box helper renders a check box is not the traditional way most web developers use check boxes. Microsoft instead went with a true/false scenario for check boxes, which is great for many uses of check boxes. However, it does not support a named group of check boxes that many web developer’s use.

What We Want

So with that in mind we’re going to create a MVC Check Box Group Helper.

First let’s look at what the well formed html for the check box group with labels looks like:

<input id="Color1" name="Colors" type="checkbox" value="Blue" />
<label for="Color1">Blue</label>

<input id="Color2" name="Colors" type="checkbox" value="Red" />
<label for="Color2">Red</label>

<input id="Color3" name="Colors" type="checkbox" value="Green" />
<label for="Color3">Green</label>

<input id="Color4" name="Colors" type="checkbox" value="Yellow" />
<label for="Color4">Yellow</label>

<input id="Color5" name="Colors" type="checkbox" value="Orange" />
<label for="Color5">Orange</label>

Obviously the check box group is for selecting colors and the values are hex color codes.

The check box group name is “Colors”; each check box has a unique value and a unique ID. The unique ID allows you to use the labels “for” attribute to specify which check box it is for, thus when you click on an associated label it toggles the check box.

Constraints

Now for some constraints for the check box group:

  • Easy to use
  • Maps to an IEnumerable
  • Does not use JavaScript
  • Does not use hidden form elements
  • If possible reuse preexisting MVC classes

All of these are pretty straight forward and will come into play as we design this.

If you’re not aware Microsoft released MVC’s source code under the MS-PL open source license. This is great as it lets us peak under the hood and see how they implement things. This is really great if you want to make your own helpers and take into consideration things that the official helpers do as well.

The Foundation

Since a check box group will obviously need some data it will need some sort of container which can represent a check box. It will need to keep track of just a few things:

  • The text to display
  • A value to use
  • And if it’s checked

In fact, just like SelectListItem. Here’s the source from the MVC project for SelectListItem.

namespace System.Web.Mvc {

    public class SelectListItem {

        public bool Selected {
            get;
            set;
        }

        public string Text {
            get;
            set;
        }

        public string Value {
            get;
            set;
        }
    }
}

It can’t be much simpler than that, and as it turns out we can make use of this perfectly for our check box. With SelectListItem we can either use SelectList or IEnumerable<SelectListItem> to keep our list.

With that out of the way we now have something to hold the data for our check boxes in that is easy to translate our own data into, people are familiar with it already, and it satisfies our fourth constraint.

The Helper

Okay, now for our helper. If you’re not familiar with how to create a basic helper with extension methods you can read this great article and then come back here.

Let’s look at the constructor of our new helper whose parameters are quite simple.

public static string CheckBoxGroup(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList)

And you’ll use it in your view like so:

<%= Html.CheckBoxGroup("Colors", Model.Colors) %>

As you can see, the name of the group will be “Colors” and I’m passing an IEnumerable<Color> from my View’s model (you’re using strongly typed views right?).

Now here’s the actual helper code:

public static string CheckBoxGroup(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList)
{
    name = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
    if (string.IsNullOrEmpty(name))
    {
        throw new ArgumentException("Parameter must be specified.", "name");
    }

    StringBuilder listItemBuilder = new StringBuilder();

    int count = 0;
    foreach (SelectListItem item in selectList)
    {
        listItemBuilder.AppendLine(ListItemToCheckBox(item, name, count) + ListItemToLabel(item, name, count) + "<br />");
        count++;
    }

    return listItemBuilder.ToString();
}

This is obviously modeled after the Drop Down List helper that comes with MVC.

The guts of the helper come down to the for loop. For each of the select list items we’re building a line of HTML that includes both our check box and our label. The code for which is here:

internal static string ListItemToCheckBox(SelectListItem item, string name, int count)
{
    TagBuilder builder = new TagBuilder("input");

    builder.Attributes["type"] = "checkbox";
    builder.Attributes["name"] = name;
    builder.Attributes["id"] = name + count;

    if (item.Value != null)
    {
        builder.Attributes["value"] = item.Value;
    }
    if (item.Selected)
    {
        builder.Attributes["checked"] = "checked";
    }
    return builder.ToString(TagRenderMode.Normal);
}

internal static string ListItemToLabel(SelectListItem item, string name, int count)
{
    TagBuilder builder = new TagBuilder("label")
    {
        InnerHtml = item.Text
    };

    builder.Attributes["for"] = name + count;

    return builder.ToString(TagRenderMode.Normal);
}

And there you have it. Put the constructor and the two internal static methods in a class and you have a Html.CheckBoxGroup helper.

What Next?

There is room for improvement on this model. I didn’t handle everything, if you want to expand it some things I’ve done or looked into are:

  • Custom HTML Attributes
  • More customization on how check boxes are separated
  • Creating a Strongly Typed version

Microsoft Project Crescent

Have you heard about Microsoft’s “Project Crescent” yet? If not you can go here or here.

The basic premise of Crescent is data visualization. The example Microsoft uses to show off Cresecent takes movie revenue data to show the impact of one movie on a genre. It convey’s the potential of the technology, to show data in multiple dimensions in a manner that is understandable to a broad audience.

The video below, Hans Rosling’s “200 Countries, 200 Years, 4 Minutes”, I think does a better job presenting why Crescent is needed. What’s funny is I don’t think it uses Crescent. In the beginning of the video Hans states the need to visualize data to be able to share it, then does an outstanding job showing lifespan, income and countries over a 200 year timespan. It’s an amazing presentation that conveys so much in just one graph.

This Developer’s Life

If your not listening to This Developer’s Life you should be.

Running Visual Studio 2010 in Mac OSX via Parallels

Now time for some fun on my new MacBook Pro.