random.Next()

NCrunch

2012-05-18T19:18:00.000-05:00

If you haven’t seen NCrunch, it’s really worth it. http://www.ncrunch.net/ I recently upgraded it and found a few new features so I figured I would blog about it for those who haven't used it. It basically a plugin that is configurable to watch for code changes and re-run tests as you write the code. This way you have constant feedback as you write the code. It also puts little dots (or lines, it’s configurable) and has a nice little window you can dock to show you code coverage and # of failing tests. Checkout my setup below.

You’ll see the green lines on the left mean at least 1 passing test is covering that code. Gray lines are not being covered by any tests. Red means at least one test is failing. Red X is a line that is causing a test to fail (via an obvious exception in the example). Finally, yellow is a performance concern. You can configure it to turn yellow if any line of code is taking over x milliseconds during a unit test. Mine is set to 200ms and you can see the ViewBag call is trigging it. The lines are clickable and show you the tests that are related to that line of code as well as giving you a quick way to jump to each test. It’s really cool. You might have to tweak it for performance so that VS doesn’t slow down too much depending on your dev machine's specs. It’s totally configurable and you can go as far as only running “pinned” tests so you can choose which ones you care about while you are actively coding. Then running them all later once you’re done with your coding session.

Is ReSharper 5.1 slowing down Visual Studio?

2011-05-13T10:23:00.000-05:00

I recently had some slowdowns that I attributed to ReSharper. On every file save, the machine would freeze for a good 1-2 seconds. That gets old really quickly. Disabling ReSharper fixes the issue, but a fellow developer had no issues with speed with all the same settings. After fighting with it for a couple days I finally remember to try and turn off VisualHG, my source control plugin. After turning it off, the problem is gone and I can re-enable ReSharper. I would much rather have ReSharper than VisualHG. I typically never use VisualHG, it’s just never been a problem before so I left it on. I’m not sure which team is responsible (if any) for the conflict, but I hope this post helps someone out.

If you use Visual Studio 2010 and have random slowdowns or aren’t impressed with the speed in general, you should be running Visual Studio PerfWatson. Read more here. Developers owe it to themselves to run this plugin and report anything. I’m hoping the IE9 feature that tells you which plugins are resulting in a slow startup time makes its way to Visual Studio as well. That way the pressure for the best feature of any software, speed, is placed squarely on the developers of the plugins.

Setting up a Mercurial Server using IIS 7

2011-04-12T11:23:00.000-05:00

If you need to setup a central mercurial server, follow these steps.

http://www.sjmdev.com/blog/post/2011/03/30/setting-mercurial-18-server-iis7-windows-server-2008-r2.aspx

The only thing I would advice against would be using the re-write module. It has a query string length limitation of 2050 characters. Mercurial uses, in my opinion, the query string in a bad way when pushing changesets. It really should use the POST for any large amount of data, but it uses the query string currently for some part of the POST. This causes IIS to return a 404. The limitation is easily avoided by not using the rewrite module. You just have to deal with ugly URLs.

WCF Service Side Timeouts

2011-02-21T22:53:00.000-06:00

Recently I have discovered that WCF doesn’t support service-side timeouts. For a great code example and explanation of behavior check out this post on my favorite QA site, StackOverflow.

I know you’re probably thinking “don’t right code that runs too long” or something along those lines. In high concurrency systems, any number of things could cause code to run abnormally long lengths of time. Just think about DTS (Distributed Transactions) as well as 3rd party system integrations.

The basic problem is as stated in the post, the code running on the server never stops. This is the equivalent of IIS not having timeouts. Ludicrous. The current solution is to write error-prone thread abort code ourselves. It gets even weirder with WCF as you have client timeouts you can set. So you can set a nice 20 second client timeout and the client will get a nice fault saying the operation timed out. Good right? No. The client has been disconnected, but the code is continuing on like nothing happened on the service.

Well I know it probably doesn’t apply to a lot of people, but I needed somewhere to vent about it.

jQuery UI Sortable with tables

2011-02-03T11:48:00.000-06:00

note: If you have any other option besides trying to drag table rows, pretend this post doesn’t exist and use divs.

If you have a need for drag and drop functionality, look no further than jQuery UI’s sortable plugin. If you need to drag and drop table rows, you’ll need to help the plugin along to ensure your table looks correct when dragging rows around. Luckily the plugin exposes an option called helper. This function simply runs when a draggable item is being moved. This code below is pretty nasty, but it makes sure your dynamic width table looks great when dragging.

 var tableRowHelper = function(e, ui) {
 ui.children().each(function() {
  var newWidth = $(this).css('width');
  if (newWidth == 'auto' || newWidth == '') {
   newWidth = $(this).width() + 'px';
  }
  $(this).css('width', newWidth);
 });
 return ui;
 }; 

// usage
$('#someId').sortable({
 helper: tableRowHelper 
});

Thoughts on Orchard

2011-01-26T10:49:00.000-06:00

In case you aren’t aware, there is a new .NET based CMS system that just had it’s first release. Orchard.

Orchard is a free, open source, community-focused project aimed at delivering applications and reusable components on the ASP.NET platform.

I’ve been keeping my eye on this project for some time and almost replaced this very blog with it. In the end I decided against it, but mostly because the blog platform is “solved”. I don’t need to re-invent the wheel yet again.

If you’re looking to familiarize yourself with ASP.NET MVC and see how it scales to a very complex project, this is a great example. They use the latest bits of MVC 3, including razor as the view engine of choice. Download Orchard and start browsing the source. If you don’t care about the source and just want a good CMS, make sure to pick the web platform installer version, it’ll make setting it up a breeze.

Developing for Orchard is pretty straight forward. Every module is essentially a MVC Area. They even created a command line utility to generate out the default module layout. I really like some of the convention-based pieces like the data migrations. If you haven’t done so already, read the documentation and follow through with some tutorials on creating modules. It’s quite easy once you learn the lingo of the project. It has a very clear separation of concerns in all the layers. They also did a good job dogfooding their own module api with the default modules so browsing the existing modules is very useful. By the way, if you don’t have visual studio, you can still develop modules. Orchard uses a dynamic compilation process to compile source-only deployed modules. This should help Orchard when it comes to a growing community, paving the way for the the Mono enthusiasts to pick it up.

I’ll be looking to commit some modules in the not-so-distant future and I’ll post a how-to here when I do.

Mercurial: Named Branch Workflow

2011-01-21T09:00:00.007-06:00

Note: This is what works for us, you may decide this sounds insane. You are allowed that opinion ;)

We recently made the switch to using Mercurial (Hg) in our office and I dare say productivity has been through the roof compared to what now appears to be an archaic way of source control, known as subversion. I won’t go into why we decided on Mercurial in this post but rather how we are using it today and what rocks about it.

The Workflow

At our company we have many products under a single umbrella with many pieces of shared code and functionality between the products. I imagine many companies have very similar setups. We have around 8 developers divided into teams. Each team has their own set of goals and features for their next release for their product. As you can imagine, having this many developers working on a single codebase that shares a lot of core functionality can be a bit complex. For this example I’ll setup a blank repository and use TortoiseHg’s visual tools to help show the progress as we move along.

As you can see above, we have a brand new repository with a single commit. Now lest assume we have two teams and they both have features to develop simultaneously. In this workflow, we branch per feature. The branch also must be a named branch. This is great for clarity purposes, but we also use this for another reason I’ll explain later.

This is where things diverge from a “normal” mercurial workflow. Mercurial, by default, only allows one head per repository. This is how most projects work and for good reasons. There is only ever one release so there only needs to be one branch head.

TortoiseHg has an option called “Push New Branch” which we will use from both teams repositories. As the name implies, it pushes named branches to the central repo. This is important as we want to be able to see what the other teams are working on without pulling changesets directly from one of the team members. This is also important for Continuous Integration. We want each team to have a continuous build for their feature. This means we want their changes to be able to be pushed to the server’s copy of the repository. The CI is essentially setup to build all named branches.

Here is the updated workflow after a few changes from each team have been pushed to the central repo. *note that a central repo could be a codeplex or bitbucket account but in our case is just a locally hosted mercurial server

As you can clearly see, you have two distinct branches coming from the same origin. You’ll notice we named the branches Bug-1 and Bug-2. We named the branches this way for bug tracking purposes, you can name your branches however you like. Let’s say Team2 is done with their feature. Their next step is to check in their latest changes and close the branch. This is an important step as mercurial stops tracking closed branches. This becomes useful in CI scenarios as well, the CI will no longer monitor a closed branch. You can access the close branch command via the tortoise GUI using the branch button in the commit window.

Once the branch is closed and feature is complete, the team can merge the change back into default. If a team needs to go back to the branch, they can. Any commits will open the named branch automatically.

The other team is left finishing their bug and then merging in their changes in the same manner.

Now your cases are done and your stable branch is ready to be built by your favorite CI and published for the world to see!

Why bother?

There are many ways to deal with branches in mercurial and this is just the one we settled on. A lot of people use “branches as clones” or “branching with bookmarks”. This is a variation on “branching with named branches”. Steve Losh has some great source control posts on his blog and I highly recommend reading them all before making a decision.

There are some of the reasons we chose this workflow

Organization and Visibility
- It’s easy to look at the list of branches to see what’s being worked on by all contributors.
  - If you use bug ids in branch names you can easily search all branches in the future to help find the code your looking for.
    - Implicit branches don’t have any identifying markers besides the commit message so it’s hard to find them later when you need them.
- A single clone of the repository means no folder-shuffling between branch switches.
  - This is huge for productivity and sanity.
Easily get other contributors involved
- Since the unfinished features aren’t just sitting locally on a developer’s box, you can easily update to any branch and contribute without pulling from a developer’s clone.
Backups
- If you don’t allow force-push and don’t used named branches, backing up the main repo means only getting the main branch code in the backup.
- Developers can constantly push their unfinished branches to the source server and it will get backed up in case of computer failure.
Continuous Integration
- Products like TeamCity allow you to specify a branch name for the build you are setting up, this means each feature branch can have a build. This would normally be impossible with implicit branches.
Works well with experimental feature branches.
- Just close the branch if it doesn’t work out, no harm no foul.
You don’t have to use named branches for everything. Small html fixes or something can easily be just committed directly to default if needed.
- I highly recommend always using named branches though, they are virtually free and are little trouble for developers.
  - We all know how a small feature can turn into a month long project.
    - Creating a named branch allows for short term or long-term development with no side affects.

Enforcing the workflow

The workflow above is great, but mercurial is very flexible and doesn’t enforce such restrictions (rightfully so). It allows developers to push implicit branches and multiple heads to a repo. It doesn’t really “allow” it by default, but you can easily use the force push option and end up with a confusing situation for developers. It even reminds the developer to do so in the error message.

In our case, we want to enforce there there is only a single head per named branch. For simplicity sake, we will consider default a named branch as well, it’s treated as such in most situations. This makes things very clear for developers. You can’t push your changes to the main repo without merging if your teammate has modified the code and beat you to the push.

Here is the full server plugin we use to enforce this rule. As you can see, it’s quite simple. This plugin runs before a push is finished. So any developer that tries to push a changeset that contains more than one head on any branch would be rejected until the plugin passes the changesets. Mercurial plugins are a whole topic themselves so I won’t go into how to go about setting it up expect for the bit of notes in the comments from the plugin. If there is desire for such a tutorial in the future, I’ll write one up on the different ways of setting up mercurial and it’s plugins (client and server).

#!/usr/bin/env python

# Enforces that there is only a single head per named branch allowed

# this hooks section should go in the hgrc of the repository you want the rules applied to 
# [hooks] 
# pretxnchangegroup.single_head = python://someserver/location/singlehead.py:single_head

from mercurial.i18n import gettext as _

def single_head(ui, repo, hooktype, node, **kwargs): 
    for b in repo.branchtags():        
        if len(repo.branchheads(b)) > 1: 
            ui.warn(_("-----------------------------------------\n")) 
            ui.warn(_("-----------------------------------------\n")) 
            ui.warn(_("Two heads detected on branch '%s'\n" % b)) 
            ui.warn(_("Only one head per branch is allowed!\n")) 
            ui.warn(_("Pull changes, merge and try again\n")) 
            ui.warn(_("-----------------------------------------\n")) 
            ui.warn(_("-----------------------------------------\n")) 
            return 1 
    return 0

I’m back to blogging!

2011-01-20T09:00:00.002-06:00

I'm not dead! Neither is Caleb, though I don't know if he'll begin blogging again.

The lack of new posts here is quite depressing really. We both left the company we were previously with and moved on to greener pastures and the blogging stopped as we both ramped up at our new gigs.

I'm going try to pump out at least one quality blog post a month and perhaps some smaller posts in between. I've been diving into lots of new technology since I last posted and I'll try to remember the best bits and put them here.

Simple Silverlight Chat Client Using Sockets

2009-11-05T16:16:00.001-06:00

This code uses the excellent SocketsLight library to simplify socket connections in Silverlight. I’ve put together a simple example of a chat server and client where you can send a message back and forth immediately.

We plan to extend this idea to integrate with some hardware devices where the console application or Windows service connects to the hardware through drivers then we use sockets to communicate between that application and Silverlight.

Download

Download the example.

Launching the Server

Download the project and compile the solution.
Run LocalServer\bin\Debug\LocalServer.exe. This is the console application that the Silverlight application connects to via sockets. (Run this exe manually so you can F5 debug the Silverlight application. You can’t debug both of them at the same time).

Launching the Silverlight application

Set the SilverlightSockets.Web project as the startup project and run.
You should a message saying that the connection to the server succeeded.
Type in a message and verify that the message appears on the server.

Now you can type messages on the Silverlight client and on the server.

Console application (LocalServer.exe)

This is the console application that the Silverlight client connects to. The PolicyServer and MessageServer classes are included in the SocketsLight library, and provide a simple event driven model for dealing with sockets. The PolicyServer is just a simple web server that accepts requests to clientaccesspolicy.xml, which is necessary to use sockets in Silverlight.

TextMessage is a class that I defined on both the server and the Silverlight client. This stores data that’s sent over the wire in both directions.

In this example, I’m firing up the PolicyServer and MessageServer on different threads and reading in any input typed in by the user.

When a client connects, the ClientStatusChangedEventArgs contains a GUID that uniquely identifies the connection. You use this GUID when you want to send a message to the client. This example just supports a single connection, but you can easily keep track of the GUIDs for the different collections to support multiple connections.

class Program
{
    private static Guid _clientID = Guid.Empty;

    private static bool IsConnected
    {
        get { return _clientID != Guid.Empty; }
    }

    static void Main(string[] args)
    {
        var policyServer = new PolicyServer("../../clientaccesspolicy.xml");
        IMessageServer messageServer = new MessageServer(
            IPAddress.Any,
            4530,
            new JsonMessageSerializer(new List<Type>() { typeof(TextMessage) }));

        messageServer.ClientConnected += new EventHandler<ClientStatusChangedEventArgs>(messageServer_ClientConnected);
        messageServer.ClientDisconnected += new EventHandler<ClientStatusChangedEventArgs>(messageServer_ClientDisconnected);

        ThreadPool.QueueUserWorkItem((o) => { policyServer.Start(); });
        ThreadPool.QueueUserWorkItem((o) => { messageServer.Start(); });

        var textService = new TextService(messageServer);

        // Wait for messages to be typed and send to client.
        while (true)
        {
            string input = Console.ReadLine();
            if (IsConnected)
            {
                messageServer.SendMessageToClient(_clientID, new TextMessage { Text = input });
            }
            else
            {
                Console.WriteLine("Warning: there are not clients connected to receive the message.");
            }
        }
    }

    static void messageServer_ClientDisconnected(object sender, ClientStatusChangedEventArgs e)
    {
        _clientID = Guid.Empty;
        Console.WriteLine("Connection closed for " + e.ClientId);
    }

    static void messageServer_ClientConnected(object sender, ClientStatusChangedEventArgs e)
    {
        _clientID = e.ClientId;
        Console.WriteLine("Connection opened for " + e.ClientId);
    }
}

TextService.cs (runs on the console application)

The data contract I defined between the server and client. It needs to inherit from the Message class included in the SocketsLight library.

namespace LocalServer
{
    using Witcraft.SocketsLight.Server;
    using System.Runtime.Serialization;
    
    [DataContract]
    public class TextMessage : Message
    {
        [DataMember]
        public string Text { get; set; }
    }
}

TextService.cs (runs on the console application)

public class TextService
{
    private IMessageServer _messageServer;
    Guid _clientID = Guid.Empty;

    public bool IsConnected
    {
        get { return _clientID != Guid.Empty; }
    }

    public TextService(IMessageServer messageServer)
    {
        _messageServer = messageServer;
        _messageServer.ClientConnected += new EventHandler<ClientStatusChangedEventArgs>(_messageServer_ClientConnected);
        _messageServer.ClientDisconnected += new EventHandler<ClientStatusChangedEventArgs>(_messageServer_ClientDisconnected);
        _messageServer.MessageRecieved += new EventHandler<MessageRecievedEventArgs>(_messageServer_MessageRecieved);
    }

    void _messageServer_MessageRecieved(object sender, MessageRecievedEventArgs e)
    {
        if (IsConnected)
        {
            TextMessage message = e.Message as TextMessage;
            if (message != null)
            {
                Console.WriteLine("Message Received: " + message.Text);
            }
        }
    }

    void _messageServer_ClientDisconnected(object sender, ClientStatusChangedEventArgs e)
    {
        _clientID = Guid.Empty;
    }

    void _messageServer_ClientConnected(object sender, ClientStatusChangedEventArgs e)
    {
        _clientID = e.ClientId;
    }
}

Code-behind for Silverlight UserControl

public partial class MainPage : UserControl
{
    const int TCP_PORT = 4530;
    IMessageClient _messageClient;

    public MainPage()
    {
        InitializeComponent();
    }

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
        _messageClient = new MessageClient
        (
            TCP_PORT,
            new JsonMessageSerializer(new List<Type>() { typeof(TextMessage) })
        );
        _messageClient.MessageRecieved += 
            new EventHandler<MessageRecievedEventArgs>(_messageClient_MessageRecieved);
        _messageClient.ConnectCompleted += 
            new EventHandler<AsyncCompletedEventArgs>(
                _messageClient_ConnectCompleted);
        _messageClient.ConnectAsync();

        AddMessage("System", "Trying to connect on TCP port " + TCP_PORT + "...");

        SendText.Focus();
    }        

    void _messageClient_ConnectCompleted(object sender, AsyncCompletedEventArgs e)
    {
        AddMessage("System", "Connected!");
        this.Dispatcher.BeginInvoke(() => this.SendButton.IsEnabled = true );
    }

    void _messageClient_MessageRecieved(object sender, MessageRecievedEventArgs e)
    {
        TextMessage message = e.Message as TextMessage;
        if (message != null)
            AddMessage("Server", message.Text);
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        SendMessage();
    }

    private void SendText_KeyDown(object sender, KeyEventArgs e)
    {
        if (e.Key == Key.Enter)
            SendMessage();
    }

    private void SendMessage()
    {
        AddMessage("Me", SendText.Text);
        _messageClient.SendMessageAsync(new TextMessage { Text = SendText.Text });
        SendText.Text = string.Empty;
    }

    // Updates UI with messages sent/received.
    private void AddMessage(string sender, string message)
    {
        this.Dispatcher.BeginInvoke
        (() =>
            {
                this.Received.Text += string.Format("{0}: {1}", sender, message) + Environment.NewLine;
                this.Scroller.UpdateLayout();
                this.Scroller.ScrollToVerticalOffset(double.MaxValue);
            }
        );
    }        
}

To Return Early or Not From a Method?

2009-09-01T13:39:00.001-05:00

I remember always being told to not return early from a method. However, I think it makes sense in some cases when you would otherwise have a set of nested “if” statements.

Take this example I ran across while working in our production system:

private void GetDiscountCode(Registration registration, Registrant registrant)
{
    if (registration.EventProfile.DiscountCodesEnabled &&
        registration.EventProfile.DiscountCodes.Count > 0)
    {
        if (tbDiscountCode.Text.Trim() != string.Empty)
        {
            DiscountCode discountCode = registration.EventProfile.DiscountCodes.Find(tbDiscountCode.Text);
            if (discountCode != null)
            {
                if (discountCode.Active)
                {
                    if (!discountCode.Limited
                        || discountCode.DiscountsUsed < discountCode.MaximumAllowed)
                    {
                        if (registrant.DiscountCodeApplied != discountCode.DiscountCodeId)
                        {
                            if (registrant.DiscountCodePercentage <= discountCode.DiscountPercentage)
                            {
                                registrant.DiscountCodeApplied = discountCode.DiscountCodeId;
                                registrant.DiscountCodePercentage = discountCode.DiscountPercentage;
                                registrant.DiscountCodeAmountPerLineItem = discountCode.DiscountAmount;
                                
                            }
                        }
                    }
                    else
                    {
                        errorMessages.Add(string.Format("The {0} you entered is no longer available", registration.EventProfile.DiscountCodeLabel));
                    }
                }
                else
                {
                    errorMessages.Add(string.Format("The {0} you entered is not currently active", registration.EventProfile.DiscountCodeLabel));
                }
            }
            else
            {
                errorMessages.Add(string.Format("The {0} you entered is not valid for this event", registration.EventProfile.DiscountCodeLabel));
            }
        }
        else
        {
            registrant.DiscountCodeApplied = -1;
            registrant.DiscountCodePercentage = 0;
        }
    }
}

After refactoring (with the same behavior):

private void GetDiscountCode(Registration registration, Registrant registrant)
{
    if (!registration.EventProfile.DiscountCodesEnabled ||
        registration.EventProfile.DiscountCodes.Count == 0)
        return;

    string codeText = tbDiscountCode.Text.Trim();
    if (codeText == string.Empty)
    {
        registrant.DiscountCodeApplied = -1;
        registrant.DiscountCodePercentage = 0;
        registrant.DiscountCodeAmountPerLineItem = 0;
        return;
    }

    DiscountCode discountCode = registration.EventProfile.DiscountCodes.Find(codeText);
    if (discountCode == null)
    {
        errorMessages.Add(string.Format("The {0} you entered is not valid for this event",
            registration.EventProfile.DiscountCodeLabel));
        return;
    }

    if (!discountCode.Active)
    {
        errorMessages.Add(string.Format("The {0} you entered is no longer available",
            registration.EventProfile.DiscountCodeLabel));
        return;
    }

    if (discountCode.Limited && (discountCode.DiscountsUsed >= discountCode.MaximumAllowed))
    {
        errorMessages.Add(string.Format("The {0} you entered is no longer available",
            registration.EventProfile.DiscountCodeLabel));
        return;
    }

    if (registrant.DiscountCodeApplied != discountCode.DiscountCodeId)
    {
        if (registrant.DiscountCodePercentage <= discountCode.DiscountPercentage)
        {
            registrant.DiscountCodeApplied = discountCode.DiscountCodeId;
            registrant.DiscountCodePercentage = discountCode.DiscountPercentage;
            registrant.DiscountCodeAmountPerLineItem = discountCode.DiscountAmount;
        }
    }
}

I tend to think the refactored code is easier to read and maintain.

Mutually Exclusive HTML Select Elements Using jQuery

2009-08-14T13:21:00.001-05:00

This jQuery code snippet shows how to make a number of related html select elements mutually exclusive. That is, all of the select elements have the same list of options, but you should only be allowed to choose a given option once.

In this example, you’re given a list of books to choose. Every time you choose a book, it disables that book and crosses it out so the user knows it’s already been used and can’t select it again.

Here’s the code:

Example Markup

<p>
Book 1:
<select id="book_1">
    <option value="">-Select One-</option>
    <option value="1">Atlas Shrugged</option>
    <option value="2">Brave New World</option>
    <option value="3">Brothers Karamazov</option>
    <option value="4">Call of the Wild</option>
    <option value="5">For Whom the Bell Tolls</option>
    <option value="6">Lord of the Flies</option>
    <option value="7">The Catcher in the Rye</option>
    <option value="8">The Grapes of Wrath</option>
    <option value="9">The Great Gatsby</option>
    <option value="10">The Picture of Dorian Gray</option>
    <option value="11">The Prince</option>
    <option value="12">The Wealth of Nations</option>
</select>
</p>

<p>
Book 2:
<select id="book_2">
    <option value="">-Select One-</option>
    <option value="1">Atlas Shrugged</option>
    <option value="2">Brave New World</option>
    <option value="3">Brothers Karamazov</option>
    <option value="4">Call of the Wild</option>
    <option value="5">For Whom the Bell Tolls</option>
    <option value="6">Lord of the Flies</option>
    <option value="7">The Catcher in the Rye</option>
    <option value="8">The Grapes of Wrath</option>
    <option value="9">The Great Gatsby</option>
    <option value="10">The Picture of Dorian Gray</option>
    <option value="11">The Prince</option>
    <option value="12">The Wealth of Nations</option>
</select>
</p>

<p>
Book 3:
<select id="book_3">
    <option value="">-Select One-</option>
    <option value="1">Atlas Shrugged</option>
    <option value="2">Brave New World</option>
    <option value="3">Brothers Karamazov</option>
    <option value="4">Call of the Wild</option>
    <option value="5">For Whom the Bell Tolls</option>
    <option value="6">Lord of the Flies</option>
    <option value="7">The Catcher in the Rye</option>
    <option value="8">The Grapes of Wrath</option>
    <option value="9">The Great Gatsby</option>
    <option value="10">The Picture of Dorian Gray</option>
    <option value="11">The Prince</option>
    <option value="12">The Wealth of Nations</option>
</select>
</p>

JavaScript

$(function(){
    $('select[id^=book_]').change(function()
    {
        // List of ids that are selected in all select elements
        var selected = new Array();
        
        // Get a list of the ids that are selected
        $('[id^=book_] option:selected').each(function()
        {
            selected.push($(this).val());
        });
        
        // Walk through every select option and enable if not 
        // in the list and not already selected
        $('[id^=book_] option').each(function()
        {
            if (!$(this).is(':selected') && $(this).val() != '')
            {
                var shouldDisable = false;
                for (var i = 0; i < selected.length; i++)
                {
                    if (selected[i] == $(this).val())
                        shouldDisable = true;
                }
                
                $(this).css('text-decoration', '');
                $(this).removeAttr('disabled', 'disabled');
                if (shouldDisable)
                {
                    $(this).css('text-decoration', 'line-through');
                    $(this).attr('disabled', 'disabled');
                }
            }
        });
    });
});

Note: IE, of course, doesn’t support <option disabled=”disabled” />, so it will only change the font to strike through. You’ll need to add some validation to make sure a value isn’t chosen multiple times if you plan to support IE.

Generic Query String Helper for ASP.NET

2009-08-07T09:06:00.005-05:00

Query strings are something we deal with constantly. I’ve come up with a helper that uses .NET Generics to handle a lot of common cases that we usually write unnecessary code for.

Example Usage:

// Required.  Will throw exceptions if the query string value is null or empty string.
int personID = QS.Value<int>("personID");
string keywords = QS.Value<string>("keywords");
// Optional.  Use default value if query string value is null or empty.
int startIndex = QS.Value<int>("startIndex", 0);

This is short hand for writing:

int personID;
if (string.IsNullOrEmpty(Request.QueryString["personID"]))
    throw new InvalidOperationException("Expected the personID query string parameter to exist");
if (!int.TryParse(Request.QueryString["personID"], out personID))
    throw new InvalidOperationException(string.Format("Unable to convert query string parameter named 'personID' with value of '{0}' to type int", Request.QueryString["personID"]));

string keywords = Request.QueryString["keywords"];
if (string.IsNullOrEmpty(keywords))
    throw new InvalidOperationException("Expected the keywords query string parameter to exist");

int startIndex;
if (string.IsNullOrEmpty(Request.QueryString["startIndex"]))
    startIndex = 0;
else if (!int.TryParse(Request.QueryString["startIndex"], out startIndex))
    throw new InvalidOperationException(string.Format("Unable to convert query string parameter named 'startIndex' with value of '{0}' to type int", Request.QueryString["startIndex"]));

Here’s the source code for the query string helper class:

public class QS
{
    public static T Value<T>(string parameterName) where T : IConvertible
    {
        if (HttpContext.Current == null)
            throw new InvalidOperationException("Cannot call QS<T> when HttpContext.Current is null");

        if (string.IsNullOrEmpty(HttpContext.Current.Request[parameterName]))
            throw new InvalidOperationException(string.Format("Expected query string parameter named '{0}' to exist", parameterName));

        return Value<T>(parameterName, default(T));
    }

    public static T Value<T>(string parameterName, T defaultValue) where T : IConvertible
    {
        if (HttpContext.Current == null)
            throw new InvalidOperationException("Cannot call QS<T> when HttpContext.Current is null");

        HttpRequest request = HttpContext.Current.Request;

        string input;
        if (request.QueryString[parameterName] != null && !string.IsNullOrEmpty(request.QueryString[parameterName]))
            input = request.QueryString[parameterName];
        else
            return defaultValue;

        T value;
        try
        {
            value = (T)Convert.ChangeType(input, typeof(T));
        }
        catch (Exception ex)
        {
            throw new InvalidOperationException(string.Format("Unable to convert query string parameter named '{0}' with value of '{1}' to type {2}", parameterName, input, typeof(T).FullName), ex);
        }
        return value;
    }
}

Iterating a Complex DataList Hierarchy With Custom Iterators

2009-07-13T08:38:00.001-05:00

This is a follow-up post to Iterating a Complex DataList Hierarchy With Lambda Expressions, which showed one way to avoid code duplication when iterating a complex control hierarchy. This shows how to achieve roughly the same thing by taking advantage of the yield keyword.

Again, here’s the DataList we need to traverse (see the original post for more details on what the demo does).

<asp:DataList ID="dlFamilies" runat="server" DataKeyField="FamilyID">
    <ItemTemplate>
        <%# Eval("FamilyName") %>
        <asp:DataList ID="dlPeople" runat="server" DataSource='<%# Eval("FamilyMembers") %>' 
            DataKeyField="PersonID">
            <ItemTemplate>
                <asp:CheckBox 
                    CssClass="person-checkbox" 
                    ID="cbPerson" 
                    runat="server" 
                    Text='<%# Eval("Name") + " (" + Eval("Gender") + ")" %>'
                    AutoPostBack="true"
                    OnCheckedChanged="cbPerson_CheckedChanged"
                 />
            </ItemTemplate>
        </asp:DataList>
    </ItemTemplate>
</asp:DataList>

This boiler plate code might be copied multiple times to perform whatever action you need on the data.

// Loop through DataList that shows families.
foreach (DataListItem familyItem in dlFamilies.Items)
{
    // Find family object based on FamilyID
    int currentFamilyID = (int)dlFamilies.DataKeys[familyItem.ItemIndex];
    Family family = _families.Where(f => f.FamilyID == currentFamilyID).FirstOrDefault();

    // Grab the inner DataList that shows people in a family.
    DataList dlPeople = (DataList)familyItem.FindControl("dlPeople");
    foreach (DataListItem personItem in dlPeople.Items)
    {
        // Find person object based on PersonID
        int currentPersonID = (int)dlPeople.DataKeys[personItem.ItemIndex];
        Person person = family.FamilyMembers.Where(p => p.PersonID == currentPersonID).FirstOrDefault();

        // DO SOMETHING
    }
}

Instead of duplicating this code, we create a custom iterator that returns a PersonRow object for every person in the DataList. It includes a strongly typed reference to the Person, Family, and a boolean telling you whether or not the checkbox is checked.

private IEnumerable<PersonRow> GetPeople()
{
    // Loop through DataList that shows families.
    foreach (DataListItem familyItem in dlFamilies.Items)
    {
        // Find family object based on FamilyID
        int currentFamilyID = (int)dlFamilies.DataKeys[familyItem.ItemIndex];
        Family family = _families.Where(f => f.FamilyID == currentFamilyID).FirstOrDefault();

        // Grab the inner DataList that shows people in a family.
        DataList dlPeople = (DataList)familyItem.FindControl("dlPeople");
        foreach (DataListItem personItem in dlPeople.Items)
        {
            // Find person object based on PersonID
            int currentPersonID = (int)dlPeople.DataKeys[personItem.ItemIndex];
            Person person = family.FamilyMembers.Where(p => p.PersonID == currentPersonID).FirstOrDefault();

            CheckBox cb = (CheckBox)personItem.FindControl("cbPerson");

            PersonRow row = new PersonRow { Family = family, Person = person, Selected = cb.Checked };
            yield return row;
        }
    }
}

One advantage of using yield instead of a lambda expression is that the code is more readable. You just loop through a collection. A disadvantage is that you need to create a custom class to hold the result of your iterator.

public class PersonRow
{
    public Person Person { get; set; }
    public Family Family { get; set; }
    public bool Selected { get; set; }
}

Here’s code that uses the new iterator:

// Called when a checkbox is checked.
protected void cbPerson_CheckedChanged(object sender, EventArgs e)
{
    int maleCount = GetPeople()
        .Where(r => r.Person.Gender == Gender.Male && r.Selected)
        .Count();
    
    int femaleCount = GetPeople()
        .Where(r => r.Person.Gender == Gender.Female && r.Selected)
        .Count();

    btnGetPeople.Enabled = 
        maleCount == REQUIRED_MALE_COUNT &&
        femaleCount == REQUIRED_FEMALE_COUNT;

    lblState.Text = string.Format("{0} male(s) selected and {1} females selected",
        maleCount,
        femaleCount);
}

// Caled when the submit button is pressed
protected void btnGetPeople_Click(object sender, EventArgs e)
{
    lblSelectedPeople.Text = string.Empty;

    foreach (PersonRow row in GetPeople().Where(p => p.Selected).ToList())
    {
        lblSelectedPeople.Text += row.Person.ToString() + "<br />";
    }
}

I’ve included an updated sample available for download.

Iterating a Complex DataList Hierarchy With Lambda Expressions

2009-07-09T10:51:00.001-05:00

Update: I’ve added a new blog post on how to do the same thing with a custom iterator using the yield keyword.

This post demonstrates one way to use lambda expressions as part of a strategy to avoid code duplication when iterating over complex control hierarchies.

For example, if you have nested DataLists and you need to loop over the DataList to perform different actions, you might be tempted to copy and paste the code to perform whichever action you need to do.

In this made-up and useless example, we have a list of families and family members. You must choose a certain number of males and females then press the Submit button to get a list of the selected people.

<asp:DataList ID="dlFamilies" runat="server" DataKeyField="FamilyID">
    <ItemTemplate>
        <%# Eval("FamilyName") %>
        <asp:DataList ID="dlPeople" runat="server" DataSource='<%# Eval("FamilyMembers") %>' 
            DataKeyField="PersonID">
            <ItemTemplate>
                <asp:CheckBox 
                    CssClass="person-checkbox" 
                    ID="cbPerson" 
                    runat="server" 
                    Text='<%# Eval("Name") + " (" + Eval("Gender") + ")" %>'
                    AutoPostBack="true"
                    OnCheckedChanged="cbPerson_CheckedChanged"
                 />
            </ItemTemplate>
        </asp:DataList>
    </ItemTemplate>
</asp:DataList>

This boiler plate code might be copied multiple times to perform whatever action you need on the data.

// Loop through DataList that shows families.
foreach (DataListItem familyItem in dlFamilies.Items)
{
    // Find family object based on FamilyID
    int currentFamilyID = (int)dlFamilies.DataKeys[familyItem.ItemIndex];
    Family family = _families.Where(f => f.FamilyID == currentFamilyID).FirstOrDefault();

    // Grab the inner DataList that shows people in a family.
    DataList dlPeople = (DataList)familyItem.FindControl("dlPeople");
    foreach (DataListItem personItem in dlPeople.Items)
    {
        // Find person object based on PersonID
        int currentPersonID = (int)dlPeople.DataKeys[personItem.ItemIndex];
        Person person = family.FamilyMembers.Where(p => p.PersonID == currentPersonID).FirstOrDefault();

        // DO SOMETHING
    }
}

Instead of duplicating this code, I’d suggest creating a method to iterate over the DataList hierarchy. You would pass in a delegate to perform whatever action you need on the data.

private void IteratePeople(Action<Person, Family, DataListItem> action)
{
    // Loop through DataList that shows families.
    foreach (DataListItem familyItem in dlFamilies.Items)
    {
        // Find family object based on FamilyID
        int currentFamilyID = (int)dlFamilies.DataKeys[familyItem.ItemIndex];
        Family family = _families.Where(f => f.FamilyID == currentFamilyID).FirstOrDefault();

        // Grab the inner DataList that shows people in a family.
        DataList dlPeople = (DataList)familyItem.FindControl("dlPeople");
        foreach (DataListItem personItem in dlPeople.Items)
        {
            // Find person object based on PersonID
            int currentPersonID = (int)dlPeople.DataKeys[personItem.ItemIndex];
            Person person = family.FamilyMembers.Where(p => p.PersonID == currentPersonID).FirstOrDefault();

            // Call delegate passed in.
            action(person, family, personItem);
        }
    }
}

(Action<T1, T2, T3> is a helper built into the .NET framework)

Here is some code that uses the new IteratePeople method.

// Called when a checkbox is checked.
protected void cbPerson_CheckedChanged(object sender, EventArgs e)
{
    int maleCount = 0;
    int femaleCount = 0;

    IteratePeople((person, family, item) =>
    {
        CheckBox cb = (CheckBox)item.FindControl("cbPerson");
        if (cb.Checked)
        {
            if (person.Gender == Gender.Male)
                maleCount++;
            else
                femaleCount++;
        }
    });

    btnGetPeople.Enabled = 
        maleCount == REQUIRED_MALE_COUNT &&
        femaleCount == REQUIRED_FEMALE_COUNT;

    lblState.Text = string.Format("{0} male(s) selected and {1} females selected",
        maleCount,
        femaleCount);
}

// Caled when the submit button is pressed
protected void btnGetPeople_Click(object sender, EventArgs e)
{
    lblSelectedPeople.Text = string.Empty;

    IteratePeople((person, family, item) =>
    {
        CheckBox cb = (CheckBox)item.FindControl("cbPerson");
        if (cb.Checked)
            lblSelectedPeople.Text += person.ToString() + "<br />";
    });
}

As you can see, you still have full access to the Person, Family, and DataList item, but you don’t have to duplicate the code to iterate the list.

I’ve created a full sample available for download. This sample requires .NET 3.5.

Switching ViewControllers on Orientation Change

2009-06-23T07:52:00.001-05:00

Have you ever wondered how Apple achieves the smooth transition to Coverflow from the iPod app on the iPhone? Today I'll go over how you can accomplish the same feature with very little code.

First, there needs to be two view controllers with corresponding views. One for your portrait view and one for your coverflow view.

Then, you need to define which view supports which orientation

// coverflow view controller
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationLandscapeRight) || (interfaceOrientation == UIDeviceOrientationLandscapeLeft);
}

// portrait view controller
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

Pretty standard stuff here. Second, in your portrait view, you need to become a listener for the orientation change. The orientation events are published to the NSNotificationCenter. Here I am observing any UIDeviceOrientationDidChangeNotification events using the constant provided by Apple.

-(void)viewDidLoad
{

// here we are subscribing to the device rotation notification
[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];    
[[NSNotificationCenter defaultCenter] addObserver:self
                            selector:@selector(didRotate:)
                            name:UIDeviceOrientationDidChangeNotification 
                            object:nil];
}

When the device is rotated enough to trigger an orientation change our selector, didRotate:, will be fired. In this method we are
simply checking the current orientation and presenting the new coverflow view controller when it's in landscape. One thing to note
here is the modalTransitionStyle. This is new in 3.0 and made just for this purpose. It will fade in and out the views during
view and dismissal. Speaking of dismissing, it's done in the same method. Since we are already subscribed to orientation changes,
we are aware of when they rotate back to portrait.

Here is the implementation.

- (void)didRotate:(NSNotification *)notification
{        
    UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
    
    if ((orientation == UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight)) {
          // present the other viewController, it's only viewable in landscape
          CoverFlowViewController *coverFlowViewController = [[CoverFlowViewController alloc]init];
          coverFlowViewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
          [self presentModalViewController:coverFlowViewController Animated:YES];
          [coverFlowViewController release];
    }
    else{
          // get rid of the landscape controller
          [self dismissModalViewControllerAnimated:YES];
    }
}

That's it! Now you've got a rotating, view switching machine.

WWDC 2009

2009-06-05T08:36:00.006-05:00

Though things have been pretty slow here on the blog, you can expect more frequent posts after next week.

We will be at Apple's WWDC, learning new and exciting ways to develop apps on the iPhone and Mac OS X. We will hopefully be putting up some iPhone specific posts when we get back.

Are you going to WWDC? Follow us on twitter @calebt and @jabrown85!

Using NHibernate MultiCriteria and LINQ

2009-05-29T09:30:00.002-05:00

I’m really impressed with the NHibernate.Linq add-on that’s part of the NHContrib project. It’s considered alpha software and most likely will be replaced with the work Steve is doing on NHibernate to create a more fully featured LINQ provider. Knowing that, I still much prefer the strongly typed syntax of a LINQ query vs. a loosely typed ICriteria or HQL query.

One problem I ran into was wanting to use the MultiCriteria feature to batch two LINQ queries together. A common example where this is useful is paging where you want the database to only return the rows to display on the current page but you also need to know the total number of rows returned by the query. MultiCriteria allows you to do this in one round-trip to the database by batching the SQL together.

I needed a way to grab the ICriteria constructed by the LINQ query. Here’s what I came up with by looking at the source for the NHibernate.Linq project. I’d recommend wrapping this in some helper function, but I have it all inline for demonstration purposes.

var query = from q in session.Linq<Person>()
            where q.FirstName.StartsWith(firstName)
            && q.LastName.StartsWith(lastName)
            && q.Phones.Any(p => p.Number.Contains(phone))
            select q;

// This block of code was found in the NHibernate.Linq source
// using NHibernate.Linq.Visitors;
// using NHibernate.Engine;
System.Linq.Expressions.Expression expression = query.Expression;
expression = Evaluator.PartialEval(expression);
expression = new BinaryBooleanReducer().Visit(expression);
expression = new AssociationVisitor((ISessionFactoryImplementor)session.SessionFactory).Visit(expression);
expression = new InheritanceVisitor().Visit(expression);
expression = CollectionAliasVisitor.AssignCollectionAccessAliases(expression);
expression = new PropertyToMethodVisitor().Visit(expression);
expression = new BinaryExpressionOrderer().Visit(expression);
NHibernateQueryTranslator translator = new NHibernateQueryTranslator(session);
object results = translator.Translate(expression, ((INHibernateQueryable)query).QueryOptions);

// My LINQ query converted to ICriteria
ICriteria resultsCriteria = results as ICriteria;
// Convert to criteria that returns the row count
ICriteria rowCountCriteria = CriteriaTransformer.TransformToRowCount(resultsCriteria);

IList multiResults = session.CreateMultiCriteria()
    .Add(resultsCriteria.SetMaxResults(20))
    .Add(rowCountCriteria)
    .List();

IList people = (IList)multiResults[0];
int resultsCount = (int)((IList)multiResults[1])[0];

Creating a badge icon plugin with jQuery

2009-02-25T08:36:00.002-06:00

updated - I fixed a bug in the plugin when using it with no options

If you are familiar with Apple products, you've probably seen what are known as badges. These small icons usually represent a change in the application, sometimes with details on what has changed.

Today I'm going to go over how to create a jQuery plugin to provide a simple, static badge.

Here is our goal.

First I'll show the HTML I'm using.

<div id="firstBadge" class="badges">
   <img src="images/mail.png" />
</div>

Pretty simple. Now I want to show the user that they have new mail without having to create another image. I also want to be able to define the notification image in CSS. Here is the CSS class I want to use.

    .badge
   {{
       background-image: url(images/badge.png);
       width: 45px;
       height: 45px;
   }}

Now, here's the jQuery plugin I created.

(function($) {
    $.fn.badge = function(action, options) {
        // these are the default options
        var defaults = {
            top: 0,
            left: 0,
            cssClass: 'badge'
        };
        return this.each(function() {
            var obj = $(this);
            var eleId = this.id + "-badge";
            // these are the 2 additional options
            switch (action) {
                case 'toggle':
                    $('#' + eleId).toggle();
                    return;
                case 'hide':
                    $('#' + eleId).hide();
                    return;
            }
            // this merges the passed in settings with the default settings
            var opts = $.extend({}, defaults, options);
            if (!$("#" + eleId).length) {
                var badge_html = "<div style='position:relative;float:left;'><div id='" + eleId + "' /></div>";
                obj.prepend(badge_html);
            }
            var badgeEle = $('#' + eleId);
            badgeEle.addClass(opts.cssClass);
            badgeEle.show().css({
                position: 'absolute',
                left: opts.left,
                top: opts.top
            });
            return;
        });
    };
})(jQuery);

There are plenty of first jQuery plugin tutorials out on the net so I won't go over every line of this plugin. The method name is badge and it has 2(optional) parameters: action and options. The first parameter is used to alter the behavior of the plugin. This plugin will allow you not only to apply the badge, but also toggle and hide it. I didn't want the end user having to set some obscure property to hide and toggle the badge, that's the reason it's not just another option. The calling code for that call will look like this.

$('.badges').badge('toggle');

The default options for the plugin are listed above. The offset for each axis is 0 and the CSS class to apply is going to be 'badge'. This is just for ease-of-use, you can supply your own options as normal. Passing the options in as the second parameter.

$('.badges').badge('show',{
   cssClass: 'badge',
   left: '-5px'
});

If you don't need any specific options or action you can just call this, which will use the default settings.

$('.badges').badge();

The plugin returns the jQuery object, so you can chain method calls.

$('.badges').badge().click(function(){  });

That's it! This was a short exercise for me, being my first jQuery plugin and I hope it's of some use to someone else out there.

The Plugin

Download - I developed and tested this against jQuery 1.3.2.

I also added a zip file containing a demo of it. We will work on getting live demos up in the future!

*Note that I did see someone has a badge icon for an older version of jQuery, but it requires a dependency on jQuery UI. That is something I did not want.

jQuery live() and plugins

2009-02-19T08:43:00.001-06:00

Problem

jQuery .live() is a great solution to keep your jQuery code working in heavy ajax situations where you might be adding/recreating content that needs to have jQuery applied to it (as I mentioned in my previous post).

The problem is that .live() doesn't work very easily with certain plugins. I really wanted a way to use .live() and the hoverIntent plugin (hoverIntent basically waits to fire mouseover events until your mouse has slowed down over an element so you don't accidentally fire too many ajax requests). We found this to be necessary for our Ajax Tooltip to avoid unnecessary strain on the server if the user swipes the mouse over a list of links with the tooltip applied.

For example, here's the basic syntax for .live()

$('.personPopupTrigger').live('mouseover', function() { /* do something */ });

And here's the syntax for hoverIntent

$('.personPopupTrigger').hoverIntent(mouseOverFunction, mouseOutFunction);

Do you see the problem? The hoverIntent plugin replaces the mouseover and mouseout events with it's own. There's no obvious way to attach hoverIntent to a selector while using live().

Fortunately, we can do some jQuery magic to make it work.

Solution

We'll attach hoverIntent to the element the first time the user hovers the mouse over the link. The trick is to use .data() to store on an element whether hoverIntent has been attached yet. Then you have to manually fire the mouseover event on the element so hoverIntent can do its magic. The downside is that jQuery will check to see if hoverIntent is attached every time you mouseover, but I think this is a fair tradeoff for the functionality hoverIntent provides in return.

jQuery(function()
{
    $('.personPopupTrigger').live('mouseover', function()
    {
        if (!$(this).data('init'))
        {
            $(this).data('init', true);
            $(this).hoverIntent
            (
                function()
                {
                    /* mouseover logic */
                },

                function()
                {
                    /* mouseout logic */
                }
            );
            $(this).trigger('mouseover');
        }
    });
});

This post was the inspiration, but I had to add firing the mouseover event.

Updated Ajax Tooltip JavaScript

Here's the updated version of the javascript for the Ajax Tooltip. This requires jQuery 1.3.1 and the hoverIntent plugin.

$(function()
{
    var hideDelay = 500;
    var currentID;
    var hideTimer = null;
    var ajax = null;
    var hideFunction = function()
    {
        if (hideTimer)
            clearTimeout(hideTimer);
        hideTimer = setTimeout(function()
        {
            currentPosition = { left: '0px', top: '0px' };
            container.css('display', 'none');
        }, hideDelay);
    };

    var currentPosition = { left: '0px', top: '0px' };

    // One instance that's reused to show info for the current person
    var container = $('<div id="personPopupContainer">'
        + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
        + '<tr>'
        + '   <td class="corner topLeft"></td>'
        + '   <td class="top"></td>'
        + '   <td class="corner topRight"></td>'
        + '</tr>'
        + '<tr>'
        + '   <td class="left">&nbsp;</td>'
        + '   <td><div id="personPopupContent"></div></td>'
        + '   <td class="right">&nbsp;</td>'
        + '</tr>'
        + '<tr>'
        + '   <td class="corner bottomLeft">&nbsp;</td>'
        + '   <td class="bottom">&nbsp;</td>'
        + '   <td class="corner bottomRight"></td>'
        + '</tr>'
        + '</table>'
        + '</div>');

    $('body').append(container);

    $('.personPopupTrigger').live('mouseover', function()
    {
        if (!$(this).data('hoverIntentAttached'))
        {
            $(this).data('hoverIntentAttached', true);
            $(this).hoverIntent
            (
                // hoverIntent mouseOver
                function()
                {
                    if (hideTimer)
                        clearTimeout(hideTimer);

                    // format of 'rel' tag: pageid,personguid
                    var settings = $(this).attr('rel').split(',');
                    var pageID = settings[0];
                    currentID = settings[1];

                    // If no guid in url rel tag, don't popup blank
                    if (currentID == '')
                        return;

                    var pos = $(this).offset();
                    var width = $(this).width();
                    var reposition = { left: (pos.left + width) + 'px', top: pos.top - 5 + 'px' };

                    // If the same popup is already shown, then don't requery
                    if (currentPosition.left == reposition.left &&
                        currentPosition.top == reposition.top)
                        return;

                    container.css({
                        left: reposition.left,
                        top: reposition.top
                    });

                    currentPosition = reposition;

                    $('#personPopupContent').html('&nbsp;');

                    if (ajax)
                    {
                        ajax.abort();
                        ajax = null;
                    }

                    ajax = $.ajax({
                        type: 'GET',
                        url: 'ajaxhelper.aspx',
                        data: 'page=' + pageID + '&guid=' + currentID,
                        success: function(data)
                        {
                            // Verify that we're pointed to a page that returned the expected results.
                            if (data.indexOf('personPopupResult') < 0)
                            {
                                $('#personPopupContent').html('<span style="color:red" class="smallText">Page ' + pageID + ' did not return a valid result for person ' + currentID + '.<br />Please have your administrator check the error log.</span>');
                            }

                            // Verify requested person is this person since we could have multiple ajax
                            // requests out if the server is taking a while.
                            if (data.indexOf(currentID) > 0)
                            {
                                var text = $(data).find('.personPopupResult').html();
                                $('#personPopupContent').html(text);
                            }
                        }
                    });

                    container.css('display', 'block');
                },
                // hoverIntent mouseOut
                hideFunction
            );
            // Fire mouseover so hoverIntent can start doing its magic
            $(this).trigger('mouseover');
        }
    });

    // Allow mouse over of details without hiding details
    $('#personPopupContainer').mouseover(function()
    {
        if (hideTimer)
            clearTimeout(hideTimer);
    });

    // Hide after mouseout
    $('#personPopupContainer').mouseout(hideFunction);
});

jQuery Ajax Tooltip

2009-02-12T08:48:00.003-06:00

Update: I've updated the JavaScript to use the hoverIntent plugin to avoid unnecessary ajax calls when moving the mouse quickly over a list of items.

We're taking a bit of a break from WPF right now, so I'm back working on our ASP.NET project.

Our application is very person centric, so we wanted an easy way to pop up a "tooltip" with more information about a person whenever you see a person's name. For example, here are some search results. When you hover over a name, more information appears.

This is very much based on the Coda Popup Bubble example for jQuery that's been going around with a few important differences:

The information is requested via AJAX, so you don't have to include all of this extra information in a hidden div. This keeps your markup smaller for grids with tons of names in it.
When you mouse over another name, the previous one will disappear. If you tried this with the original Coda example, you'd end up with a weird streaking animation since there's a delay before the div is hidden.
Works in IE (just turned off the fade animation)

Note that this requires jQuery 1.3.1. I found out that the new .live() functionality is very useful for ajax applications. Previously, if you bind a handler at startup, it will apply to elements that currently exist. The new live() functionality makes it to where you can apply events to elements that are created in the future. This means I can create a new link via ajax and it will still work with the hover tooltip.

Markup

All you need to do is specify a certain css class that jquery expects, and we're using the "rel" tag to contain data to pass to our ajax helper page.

<a class="personPopupTrigger" href="<link to person>" rel="4218,a17bee64-8593-436e-a2f8-599a626370df">House, Devon</a>
<a class="personPopupTrigger" href="<link to person>" rel="4218,f6434101-15bf-4c06-bbb2-fbe8c111b948">House, Gregory</a>

JavaScript

Run this on startup, and it will convert all of your links with the "personPopupTrigger" class to have the tooltip.

The container is the global container for the content. It's repositioned whenever a new link is hovered over.

$(function()
{
  var hideDelay = 500;  
  var currentID;
  var hideTimer = null;

  // One instance that's reused to show info for the current person
  var container = $('<div id="personPopupContainer">'
      + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
      + '<tr>'
      + '   <td class="corner topLeft"></td>'
      + '   <td class="top"></td>'
      + '   <td class="corner topRight"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="left">&nbsp;</td>'
      + '   <td><div id="personPopupContent"></div></td>'
      + '   <td class="right">&nbsp;</td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="corner bottomLeft">&nbsp;</td>'
      + '   <td class="bottom">&nbsp;</td>'
      + '   <td class="corner bottomRight"></td>'
      + '</tr>'
      + '</table>'
      + '</div>');

  $('body').append(container);

  $('.personPopupTrigger').live('mouseover', function()
  {
      // format of 'rel' tag: pageid,personguid
      var settings = $(this).attr('rel').split(',');
      var pageID = settings[0];
      currentID = settings[1];

      // If no guid in url rel tag, don't popup blank
      if (currentID == '')
          return;

      if (hideTimer)
          clearTimeout(hideTimer);

      var pos = $(this).offset();
      var width = $(this).width();
      container.css({
          left: (pos.left + width) + 'px',
          top: pos.top - 5 + 'px'
      });

      $('#personPopupContent').html('&nbsp;');

      $.ajax({
          type: 'GET',
          url: 'personajax.aspx',
          data: 'page=' + pageID + '&guid=' + currentID,
          success: function(data)
          {
              // Verify that we're pointed to a page that returned the expected results.
              if (data.indexOf('personPopupResult') < 0)
              {
                  $('#personPopupContent').html('<span >Page ' + pageID + ' did not return a valid result for person ' + currentID + '.<br />Please have your administrator check the error log.</span>');
              }

              // Verify requested person is this person since we could have multiple ajax
              // requests out if the server is taking a while.
              if (data.indexOf(currentID) > 0)
              {                  
                  var text = $(data).find('.personPopupResult').html();
                  $('#personPopupContent').html(text);
              }
          }
      });

      container.css('display', 'block');
  });

  $('.personPopupTrigger').live('mouseout', function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
      hideTimer = setTimeout(function()
      {
          container.css('display', 'none');
      }, hideDelay);
  });

  // Allow mouse over of details without hiding details
  $('#personPopupContainer').mouseover(function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
  });

  // Hide after mouseout
  $('#personPopupContainer').mouseout(function()
  {
      if (hideTimer)
          clearTimeout(hideTimer);
      hideTimer = setTimeout(function()
      {
          container.css('display', 'none');
      }, hideDelay);
  });
});

CSS

#personPopupContainer
{
    position:absolute;
    left:0;
    top:0;
    display:none;
    z-index: 20000;
}

.personPopupPopup
{
}

#personPopupContent
{
    background-color: #FFF;
    min-width: 175px;
    min-height: 50px;
}

.personPopupPopup .personPopupImage
{
    margin: 5px;
    margin-right: 15px;
}

.personPopupPopup .corner 
{
    width: 19px;
    height: 15px;
}
    
.personPopupPopup .topLeft 
{
    background: url(../images/personpopup/balloon_topLeft.png) no-repeat;
}
    
.personPopupPopup .bottomLeft 
{
    background: url(../images/personpopup/balloon_bottomLeft.png) no-repeat;
}
    
.personPopupPopup .left 
{
    background: url(../images/personpopup/balloon_left.png) repeat-y;
}
    
.personPopupPopup .right 
{
    background: url(../images/personpopup/balloon_right.png) repeat-y;
}
    
.personPopupPopup .topRight 
{
    background: url(../images/personpopup/balloon_topRight.png) no-repeat;
}
    
.personPopupPopup .bottomRight 
{
    background: url(../images/personpopup/balloon_bottomRight.png) no-repeat;
}
    
.personPopupPopup .top 
{
    background: url(../images/personpopup/balloon_top.png) repeat-x;
}
    
.personPopupPopup .bottom 
{
    background: url(../images/personpopup/balloon_bottom.png) repeat-x;
    text-align: center;
}

Images

Download

Ajax Helper Page

I'm not going to include a code sample for this since it's very specific to our application. It basically accepts query string parameters of "page" and "guid" and spits out details about that person.

Note: my example expects the ajax helper to return the content in a div with a css class of 'personPopupResult'. Also, it returns the person's guid in the result to verify that the returned result is for the same person currently selected since an ajax request might take a while in some cases and return an old result.

Validation in WPF – The Disconnect

2009-01-09T10:48:00.001-06:00

Karl Shifflett is just one of the many WPF gurus we follow here at the office. As we are getting started on our first LOB WPF application, their experience has been a key part of our learning process. I mention Karl because he recently posted an article on Input Validation.

As I glanced through the code the first time, I didn’t get it. Because I hadn’t thoroughly investigated validation in WPF yet, I didn’t realize why all this validation framework was needed.

Karl explains it the best in his first post, so I won’t reiterate all of it. The issue that escaped me while playing around with WPF was the disconnect between the UI and the ViewModel when binding. This statement itself seems like a major problem, and it is if you aren’t aware. Here is the problem via Karl.

A TextBox in the View is bound to an integer property on the Model. That integer property has an associated IDataErrorInfo validation rule that requires that the property value be between 0 and 100.

If the user enters a value less than 0 or greater than 100, the Model will report an error that the binding pipeline will pickup and if the TextBox has a Validation.ErrorTemplate, will display some error message to the user.

Now the user enters 5b and tabs to the next field. Since 5b is not an integer, the binding pipeline will get an exception when attempting to set the property value on the Model since there is a type mismatch.

Now the TextBox.Text property on the View is 5b, the Model does not know that the View has an invalid value and if the Model’s current value is within the limits of any applied validation rules, the Model thinks it’s valid.

So you can see that under these circumstances there is a disconnect between the View and Model. It is this disconnect that I would like to address and provide a solution for.

The framework Karl posted solves this problem by giving you a way to check the View exceptions from your ViewModel without tightly coupling the two. This way you can let the user know that the value they entered is incorrect and prevent them from trying to save incorrect values. The View pushes it’s errors to the ViewModel and the ViewModel then can check against them and respond appropriately. This is all done via base classes and it doesn’t violate the separation by exposing the View on the actual ViewModel.

We implemented this framework did some tweaks and changes to suit our needs. So now we can check for all types of errors, Model and UI, from the ViewModel.

public bool IsValid 
{ 
    get 
    {
        return string.IsNullOrEmpty(UIValidationErrorUserMessages) && Model.IsValid; 
    } 
}

I highly recommend taking a look if you are starting a LOB application and haven’t rolled your own solution.

Set WPF ListBox SelectedItem on Hover

2008-12-30T10:21:00.001-06:00

So as previously mentioned, the ComboBox doesn't work as expected regarding the highlighted item vs. focused item.

It turns out that we can make the ListBox work like we want. At first glance, it looks like the ListBox won't work because there's only a SelectedItem but not a HighlightedItem. This means it works great for keyboard navigation, but the item will not be highlighted when you mouseover as it does with the ComboBox.

There's a simple way to make this work:

1) Add a MouseEnter event inside of your ListBox's ItemTemplate:

<ListBox x:Name="lbResults" ItemsSource="{Binding Results}" MaxHeight="400">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Black" MouseEnter="ListBoxItem_MouseEnter">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding FullName}" />
                    <TextBlock Grid.Column="1" Text="{Binding Email}" />
                    <TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Address}" />
                </Grid>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

2) In the .xaml.cs, add this:

// Hover effect
private void ListBoxItem_MouseEnter(object sender, MouseEventArgs e)
{
    lbResults.SelectedItem = (sender as Border).DataContext;
    if (!lbResults.IsFocused)
        lbResults.Focus();
}

The end result is that whenever you put your mouse over an item in the ListBox, it will highlight the item and make it the SelectedItem.

We tried using a Trigger to set IsSelected to true when IsMouseOver is true, but this does not work. I'm not sure if it's a bug, but it definitely results in some unexpected behavior since it appears that SelectedItem is not set on the ListBox when IsSelected is set on the ListBoxItem.

The autocomplete box is coming along nicely. I hope to post it sometime soon.

ComboBox Bug

2008-12-29T13:43:00.001-06:00

Today we found a small, but annoying, bug in the WPF ComboBox. As Caleb mentioned before, we are implementing an autocomplete control. Since our implementation is a bit different, we are programmatically opening and closing the dropdown list using IsDropDownOpen.

What we want to happen when we open the dropdown is to highlight(select) the first item when the user presses the 'Tab' key. So to implement this we added a Preview_KeyDown event to it.

if (e.Key == Key.Tab)
{
    if (cbResults.IsDropDownOpen)
    {                    
        ComboBoxItem item = ((ComboBoxItem)cbResults.ItemContainerGenerator.ContainerFromIndex(0));                
        item.Focus();       
        e.Handled = true;
    }
}

Simple enough, we are just getting the first ComboBoxItem and giving it focus. Well it works...the First time. If the ComboBox is open and the user presses 'Tab' the first item is highlighted blue and focused. However, if you tab back to the control and try again, it only focuses it. It does not highlight the item blue as it did before.

After digging through reflector, Caleb found the reason. Here is the basic code for a ComboBoxItem's OnGotKeyboardFocus

e.Handled = true;
ComboBox parentComboBox = this.ParentComboBox;
if (parentComboBox != null)
{
    parentComboBox.NotifyComboBoxItemEnter(this);
}
base.OnGotKeyboardFocus(e);

Now, nothing looks wrong here. We want to notify the item's ComboBox that we have entered. Here is the problem, this is the NotifyComboBoxItemEnter function.

internal void NotifyComboBoxItemEnter(ComboBoxItem item)
{
    if ((this.IsDropDownOpen && (Mouse.Captured == this)) && base.DidMouseMove())
    {
        this.HighlightedElement = item;
        if (!this.IsEditable && !item.IsKeyboardFocusWithin)
        {
            item.Focus();
        }
    }
}

See anything wrong? Check that last condition. It is checking to ensure the mouse has moved before it will highlight and focus the item. Why on earth are they checking that in the OnGotKeyboardFocus? It only works the first time because the mouse position hasn't been recorded to compare against yet. The ONLY way around this issue is to move the mouse programmatically. Yes, you have to move the user's mouse to make the item highlight.

The mistake is clearly an oversight. That method is called by all the mouse events on a ComboBoxItem as well. I'm going to submit a bug, but who knows how long that will take to get into the next release. This is one of those times you wish the .NET framework was open source, we could fix the issue, submit a patch and move along.

Also note, we aren't going to move the user's mouse ;) we are looking at creating our own selector control and avoiding the ComboBox for now.

Edit I submitted a bug

Another reason to use Expression Blend to design your WPF Applications

2008-12-26T09:39:00.000-06:00

As if there aren't already enough reasons, this simple one saves tons of time and frustration.

Say you want to have an automatically sized window. Have you ever tried to edit one of those windows in visual studio?

Not very designer friendly. You can't even see what it looks like without setting the height and width. Then you have to remove them before you save or your form will be that static width and height at runtime. Tweaking a layout is out of the question.

In for the rescue is Expression Blend.

See those little blue handles? Those are design time handles. You can set the width and height and only Expression Blend will recognize them. Now you can size your window to a normal size and see how your control layout flows.

This is the XAML it adds to your window. Blend will do this automatically for you and it won't cause any adverse behavior.

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignHeight="94" d:DesignWidth="384"

This saves a ton of headaches and prevents extra code, like setting the width and height in the code behind for design mode. The only issue with this method is the fact that it doesn't work in visual studio. I'm hoping they will eventually add support for it in the future updates, but you should be using blend anyway.

Selecting a WPF ComboBoxItem with the Tab Key

2008-12-23T13:20:00.001-06:00

The WPF ComboBox doesn't work out of the box as I expected when IsEditable=False.

This is how I expect it to work:

Expand the ComboBox
Use the up/down arrow keys to find the item you want to select.
Press the "tab" key on the current item to select it and then move on to the next field.

In reality, it cycles through all of the ComboBoxItems in the ComboBox when you hit the tab key. You have to either hit "Enter" or click on the item with your mouse to select it!

(Note that it does work as I expect when IsEditable=True for some reason)

Well, Jab and I (mostly Jab) spent some time coming up with a work-around to make it work as expected.

<ComboBox Grid.Row="1" Margin="0,14,0,0" Name="comboBox1" HorizontalAlignment="Left" Width="120"
IsEditable="False" KeyDown="comboBox1_KeyDown">
    <ComboBoxItem>Male</ComboBoxItem>
    <ComboBoxItem>Female</ComboBoxItem>
    <ComboBoxItem>Unknown</ComboBoxItem>
</ComboBox>

private void comboBox1_KeyDown(object sender, KeyEventArgs e)
{
    ComboBox cb = sender as ComboBox;
    if (e.Key == Key.Tab && cb.IsDropDownOpen)
    {
        ComboBoxItem item = FocusManager.GetFocusedElement(Window.GetWindow(this)) as ComboBoxItem;
        cb.SelectedItem = item;
        cb.IsDropDownOpen = false;
        e.Handled = true;
    }
}

It's not pretty, but it gets the job done. Normally, I wouldn't have wasted time on this, but we really needed the tab functionality for an autocomplete box we're working on (hopefully we'll post some snippets of that soon).