NCharlie Task Board – Webforms version

…in which the task board UI comes alive.

I’ve got my domain objects and simple persistence finished.  Now I will implement the user interface first using ASP.Net Webforms.  I created screen mockups in an earlier post, and this view model class is a representation of that screen:

public class BoardViewModel
{
    public string Name { get; set; }
    public int CommunityId { get; set; }
    public int PageId { get; set; }

    public ColumnViewModel[] Columns { get; set; }
    public class ColumnViewModel
    {
        public string Id { get; set; }
        public string Name { get; set; }

        public TaskViewModel[] Tasks { get; set; }
        public class TaskViewModel
        {
            public string Id { get; set; }
            public string Name { get; set; }
            public bool InFirstColumn { get; set; }
            public bool InLastColumn { get; set; }
        }
    }
}

The user interface for this model is a “board” with a variable number of columns, each of which has a variable number of tasks in it that can jump forward or back to other columns.  For the Webforms version I use nested Repeater controls to accomplish this.  This is how it turned out:

I’m keeping this post short, but there is actually plenty to talk about behind the scenes that I may cover in more detail in later posts.  For now, here’s a list of elements that in my opinion made this little project fun to work on:

• Uses a master page, NCharlie.master



• Uses jQuery for showing/hiding textboxes for user input



• Uses Automapper to simplify mapping entities retrieved from the database to the view model for display



• Uses the StructureMap IoC container for injection of IBoardRepository into the page constructor



• Web.config modification: added HttpModule reference for the TransactionBoundaryModule class (implements the Unit of Work pattern using one NHibernate Session Per Http Request)

There are some things I need to improve… for example, I don’t have StructureMap configured to automatically inject the repository class.  Rather, I’m asking StructureMap for it explicitly in the constructor… simply because I’m still weak in that area and need to learn how.  Also, I skipped writing tests for this bit of code… mainly because I find it hard to write tests for Webform controller classes.  Hopefully I will be able to fix that when I implement the MVC version.

Check it out in the Webform branch of the NCharlie source.

NCharlie – Simple Persistence with Fluent NHibernate

Now that I have the domain objects (Board, Column and Task) built up and tested, it is time to wire them up to a database.  I want to create them, click Save, go home and play Wii with my boys… then come back the next day to find them persisted, waiting for me to work with them again.

I’m going to keep this part really simple… because it should be.  The days of writing stored procedures, or ADO.Net connection, command, execution and mapping code are dead to me.  At least here in the NCharlie project they are!

First, I’ll give credit where credit is due… The folks at Headspring have contributed lots of code to the community through open source projects like CodeCampServer.  The following simple data access code, and most of the NCharlie starter project, comes from the example project Jimmy Bogard used at his MVC boot camp course in January.  Check out the NCharlie source to see the configuration files and base classes that make the following simple mapping code possible.

Here’s a test showing that I want to persist a Board entity to a database:

Here’s a mapping class that makes the test pass:

That’s all that’s needed to get the Board entity saved.  I really like the simple syntax used here… no strings like “Name” or “CommunityId” in this code.

I wanted to keep it short and simple here… I did add some other persistence features (cascading updates/deletes, joins.)  You can check out the code (which includes mapping code for the other entities) in the source branch tagged 2010-0218-persistence.

NCharlie Project Mockup, Domain Model

Here are the mockups of the two project screens I will focus on in the next few posts.  First, here is a the page that allows users to create a new task board:

I will want this application to allow users to set up multiple task boards for different teams/groups.  Since I’d like to use this software at work someday, each task board will have a unique CommunityId and PageId so they can reside in a portal application.  Once a new task board is created, columns and tasks may be added to it:

A task can move forward and backward through the columns.  Columns and tasks may be deleted.

The problem domain contains Boards, Columns and Tasks.

This set of user stories describes the functionality of the task board:

• When adding a new Board, the Board Name, CommunityId and PageId should be specified.
• When adding a new Column to a Board, the Column name should be specified.
• When adding a new Task, a Task description should be specified.
• When displaying a Board, all the Board’s columns should be shown.
• A new Column should be added to the end of the Board’s list of columns.
• A Column may be deleted.
• When displaying a Column on a Board, all the Column’s Tasks should be shown.
• A Task may Task should be added to the end of the Column’s list of Tasks.
• A Task may be moved from its Column to an adjacent Column.

I wrote unit tests for the non-trivial stories above, and created domain objects and methods to make them pass:

Here is the class diagram for this simple domain:

I tagged the code for this post in source control, you can check it out here.  Next I’ll walk through the data access code… Or I’ll create view models and UI elements… Or I’ll step back and explain some patterns in the NCharlie starter project… I’ll have to surprise you because I don’t know yet!

Resurrecting NCharlie

We delivered some software at my day job last week that has been keeping me pretty busy for the past few weeks.  To celebrate, I am revving up the NCharlie project again to buzz out some things I picked up in Austin last month.

I’ve already spent some time integrating StructureMap, Automapper, and Fluent NHibernate into a task manager Webforms application that uses the patterns I learned last month in bootcamp.  Here’s what I’ve got so far:

We’ve been using a “task board” like this at work to move our development tasks through to deployment.

I know, the CSS needs some work… but the thing is working!  Here’s what I’ve done so far:

1. Started a new blank solution for NCharlie in Visual Studio 2008.
2. Added .Net 3.5 projects for the Core NCharlie project, a Webforms UI project, an MVC UI project (using ASP.Net MVC 2 RC 2), Integration and Unit Test projects.
3. I put the blank NCharlie starter project (no entities, tests, views… just the architecture) into a branch tagged ncharlie-starter.

As of tonight, the version in the trunk of the NCharlie repository matches the starter project.  My plan is to build it up using a branch per feature, and blog about it as I go.  I plan to mirror the functionality using Webforms and the MVC framework.  I think it will be a good way for me to cut my teeth on MVC, plus it will be interesting to compare the two when it is done.