A jQuery Dashboard

So I've been working on a dashboard type page utilising the jqueryui controls and thought I'd share how I went about it.

I went through a few iterations getting the css working but it finally panned out the way I wanted it.

There are basically three components, the styles, the javascript, and the actual html.

Here I'm setting out the structure of the table that the dashboard is going to represent.

.table
{
    float: left;
    width: 100%;
}
.table-row
{
    float: left;
    width: 100%;
}
.table-cell
{
    margin: 0;
    float: left;
    width: 24%;
    min-height: 15em;
    padding: 0.3em;
}
.item
{
    width: 10em; 
    display: inline; 
    float: left; 
    cursor: move; 
    margin-right: 0.4em;
}

Here's the script behind the page.

$(document).ready(function() {

    function EqualiseHeight(row) {        //remove the previous height
        $(row).children().removeAttr("style");        //set the new height
        $(row).equalHeights(true);
    }

    function moveTask(task, region) {
        task.fadeOut(function() {
            task.appendTo(region).fadeIn();
            EqualiseHeight($(region).parent());
        });
    }

    function makeDraggable(task) {
        var uniqueid = $(task).parent().attr("uniqueid");

        $(task).draggable({
            cancel: '.action',
            revert: 'invalid',
            containment: 'div[uniqueid =' + uniqueid + ']',
            helper: 'clone',
            cursor: 'move'
        });
    }

    $(".table-row").each(function() {
        //EqualiseHeight(this);
        $(this).equalHeights(true);
        //make children into draggable objects
        $(this).children().children().each(function() {
            makeDraggable(this);
        });
    });

    $("ul").droppable({
        accept: 'li',
        hoverClass: 'ui-state-highlight',
        drop: function(ev, ui) {
            moveTask(ui.draggable, this);
        }
    });
});

So we have a function, EqualiseHeight, that takes an element representing a row (funnily enough) it makes sure that any style attribute for each of the rows direct child elements has been removed. It then utilised the equalHeights function as provided by filament group.
We then have a function, moveTask, that is responsible for that actual moving of an item by fading it out and then appending it to the region it was dropped in.
Next we have, makeDraggable, that takes an item and makes it draggable.

Now that we have some functions predefined, we start setting the page elements that will draggable items and the area that will be droppable.

Next comes the html...

<div class="table">
    <div storyid="1" class="table-row">
        <ul storyid="1" class="table-cell ui-widget ui-widget-content">
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 1</h6>
                <div class="details">Task one details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 2</h6>
                <div class="details">Task two details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 4</h6>
                <div class="details">Task one details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 5</h6>
                <div class="details">Task two details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 6</h6>
                <div class="details">Task one details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
        </ul>
        <ul storyid="1" class="table-cell ui-widget ui-widget-content">
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 3</h6>
                <div class="details">Task three details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
        </ul>
        <ul storyid="1" class="table-cell ui-widget ui-widget-content">cell content</ul>
        <ul storyid="1" class="table-cell ui-widget ui-widget-content">cell content</ul>
    </div>
</div>

And there you have it.

References:
1. jQuery
2. jQuery ui

Setting Equal Heights with jQuery

I've been experimenting with jquery and jqueryui and trying to build a dashboard type page.

Everything was going quite well until I wanted to make the cells within a row the same height.

With a little searching I found this, setting equal heights with jquery. Absolutely brilliant!

Thank you filament group

Poker - Planning Poker

Had my first game of Planning Poker not long ago. Even though I'd been working with Scrum for the last three years never had I performed planning of this type before. For those who are/ have been in a similar situation to myself you're probably asking, what they heck is this all about?

As the term poker suggests, there is a deck of cards involved, how ever this is no ordinary deck of cards. Each player has the following set of cards... ?, 0, 1/2, 1, 2, 3, 5, 8, 13, 20, 40, 100, infinity.

So how does it work you may be asking?
Firstly we should explain when the game is played. This game is played when the project team is estimating the effort required for each of the user stories in the product backlog. But how do the numbers listed above work? You need to keep in mind that you are not trying to estimate the number of hours a user story is going to take, you are just giving an indication of how much effort you think is going to be required to complete the task in relation to the other tasks. The other major benefit of playing is that it generates discussion amongst the team.

Anyway rather then going on and on, read here: Planning Poker Estimating in Detail

Here's another very good read on Planning Poker - Agile Estimating

Hope this is helpful

Cross Table Querying using the Repository Pattern

So I've implemented the Repository Pattern in my application which was easy enough with all the simple CRUD functionality, however when I came to refactoring the following code things were not so simple.

public void LoadMonthCategorySummary()
    {
        List<monthsummary> MonthSummaryList;
        using ( budgetEntities = new BudgetEntities() )
        {
            var initial = from m in budgetEntities.SpendingSet
                          join mc in budgetEntities.MthCategorySet on m.MthCategory.MthCategoryId equals mc.MthCategoryId
                          join c in budgetEntities.CategorySet on mc.Category.CategoryId equals c.CategoryId
                          where m.DateSpent.Month == DateTime.Now.Month && m.DateSpent.Year == DateTime.Now.Year
                          select new
                          {
                              CategoryName = c.CategoryName,
                              BudgetAmount = mc.BudgetAmount,
                              AmountSpent = m.Amount
                          };

            var list = from i in initial
                       group i by i.CategoryName into g
                       orderby g.Key ascending
                       select new
                       {
                           CategoryName = g.Key,
                           AmountSpent = g.Sum( ms => ms.AmountSpent ),
                           MonthSummary = g.FirstOrDefault()
                       };

            MonthSummaryList = ( from ms in list
                                 select new MonthSummary
                                 {
                                     CategoryName = ms.CategoryName,
                                     AmountSpent = ms.AmountSpent,
                                     BudgetAmount = ms.MonthSummary.BudgetAmount
                                 } ).ToList();
     }
     gvMonthSummary.DataSource = MonthSummaryList;
     gvMonthSummary.DataBind();
}

As you can see this is not your simple CRUD functionality with joins across three different tables.

So what approach did I take to resolve this?
Firstly, you need to understand that each data service is dependent on a corresponding repository. For example, the SpendingsDataService is dependent on IRepository<Spending>.

My first approach was to try and expose the datacontext, but it occurred to me that this was actually breaking the repository pattern.

The only other alternative was to introduce a second IRepository<T> object, which meant that I needed to create a second constructor.

The code I ended up with looks something like this...

public IList<MonthSummary> GetMonthCategorySummary( DateTime analysisDate )
{
    IList<MonthSummary> mcSummaryList;

    using ( sRepo )
    {
        using ( mcRepo )
        {
            var initial = from s in sRepo.Query()
                          join mc in mcRepo.Query() on s.MthCategoryId equals mc.MthCategoryId
                          where s.DateSpent.Month == analysisDate.Month && m.DateSpent.Year == analysisDate.Year
                          select new
                          {
                              CategoryName = mc.Category.CategoryName,
                              BudgetAmount = mc.BudgetAmount,
                              AmountSpent = s.Amount
                          };
            var list = from i in initial
                       group i by i.CategoryName into g
                       orderby g.Key ascending
                       select new
                       {
                           CategoryName = g.Key,
                           AmountSpent = g.Sum( ms => ms.AmountSpent ),
                           MonthSummary = g.FirstOrDefault()
                       };

            mcSummaryList = ( from ms in list
                              select new MonthSummary
                              {
                                  CategoryName = ms.CategoryName,
                                  AmountSpent = ms.AmountSpent,
                                  BudgetAmount = ms.MonthSummary.BudgetAmount
                              } ).ToList();
        }
    }

    return mcSummaryList;
}

Budget App - Part 4 : Test Driven Development with Moq - An New .Net Mocking Framework

I recently found a relatively new Mocking Framework called Moq. Daniel Cazzulino provides a nice introduction and reason for developing the new framework. Considering that this is built on the concept of Linq to Mock and that I enjoy working with Linq I thought I'd give it ago as I continue to develop the data services to my Budget application with a TDD approach.

I'm going to following the principles of TDD as I understand them:

1. Write the test first - it'll probably not compile.
2. Get the test to compile.
3. Get the test to pass - with the least amount of code.
4. Create another test that will cause your code to fail.
5. Refactor your class so that both tests pass.

Write the test first
As I've been refactoring my code I've come across the follow functionality...

private bool DoesMonthYearExis( int month, int year )
{
    bool exists = false;

    var months = ( from m in budgetEntities.MthSet
                   where m.Month == month && m.Year == year
                   select m ).ToList();

    if ( months.Count > 0 )
    {
        exists = true;
    }

    return exists;
}

There will obviously be a number of steps involved in turning this into a WCF Service call, but the first step is to ensure that the DataService will do what it's suppose to do. So how do we do this using a TDD approach? Firstly we write our test.

So here we have our first test using the new Moq framework. As you can see the data service interface doesn't have a definition for a method called DoesMonthYearExist(...) hence it won't compile, which leads to...

Getting the test to compile
To get this to compile we need to update the Interface as well as it's implementing class. We need to remember that we write the least amount of code as possible.

This obviously isn't very useful, but it should give you point. The test will now compile however it will fail. If you look at the test above there we have set up a number of expectations with Moq and these aren't being met. Now let's...

Get the test to pass
Don't forget to write as little code as possible.

You can see that the expectations will now be met with repo.Query() returning a value and the repo object being disposed.

This is all good, but we know that the code is not really doing what we need it to do and this is when we...

Create another test that will cause your code to fail
Not a huge difference, but it's enough.

We've changed the year being tested for and are now expecting that the combination of month and year will not be found.

Refactor your class so that both tests pass
Here we make our implementation do what it's supposed to do.

What does this leave us with? A well tested method that has good coverage

Moq
I must say that I do like not having to indicate what expectations have to be recorded and then play them back, you just say this object has certain expectations and that's it.

Despite simple examples Moq looks like a nice mocking framework to work with.

Enjoy!

Agile Development - Made Easy

While I've developed in a Scrum environment for the last three years, I was never really exposed to the construction of the product backlog. Now though, I've recently started on a project in it's infancy stages and this is all changing.

The client practises Scrum actively and they go about creating the backlog by writing User Stories. User Stories? I'm thinking. What are they really?

Thankfully Google pointed me in the right direction => http://www.agile-software-development.com/.

Here you will find an awesome array of information on the Principles of Agile development, implementing Scrum, user stories, estimating within an agile environment, agile project management and a number of eBooks and presentations.

Enjoy!

Budget App - Part 3 : Unit Testing Data Services with Rhino Mocks

Repository Pattern
The nest step in building my Budget application was ensuring that it could be unit tested. In my googling I came to realise the my design could be improved somewhat. I have now introduced the repository pattern with the interface looking like this...

IRepository.cs

public interface IRepository<T> : IDisposable
{
    IQueryable<T> Query();
    void Add( T entity );
    void Attach( T entity );
    void Remove( T entity );
    void SubmitChanges();
}

and its implementation looking like this...

BudgetRepository.cs

public class BudgetRepository<T> : IDisposable, IRepository where T : class
{
    private BudgetDataContext context;

    public BudgetRepository( BudgetDataContext ctxt )
    {
        context = ctxt;
    }

    public IQueryable<T> Query()
    {
        return context.GetTable<T>();
    }

    public void Add( T entity )
    {
        context.GetTable<T>().InsertOnSubmit( entity );
    }

    public void Attach( T entity )
    {
        context.GetTable<T>().Attach( entity );
    }

    public void Remove( T entity )
    {
        context.GetTable<T>().DeleteOnSubmit( entity );
    }

    public void SubmitChanges()
    {
        context.SubmitChanges();
    }

    public void Dispose()
    {
        context.Dispose();
    }
}

The repository is obviously providing access to an individual table via the generic type used. Now all that is needed is to write some services to utilise the repository. The first service to be written was an IncomeDataService.

IncomeDataService.cs

public class IncomeDataService
{
    private IRepository<Income> incomeRepository;

    public IncomeDataService( IRepository<Income> repository )
    {
        incomeRepository = repository;
    }

    public IList<Income> GetAll()
    {
        IList<Income> incomes;
        using ( incomeRepository )
        {
            incomes = ( from i in incomeRepository.Query()
                        orderby i.Description
                        select i ).ToList();
        }
        return incomes;
    }

    public Income GetById( int ID )
    {
        Income income;
        using ( incomeRepository )
        {
            income = incomeRepository.Query().Where( i => i.IncomeId == ID ).FirstOrDefault();
        }
        return income;
    }

    public void Save( Income entity )
    {
        using ( incomeRepository )
        {
            if ( entity.IncomeId > 0 )
            {
                incomeRepository.Attach( entity );
            }
            else
            {
                incomeRepository.Add( entity );
            }
            incomeRepository.SubmitChanges();
        }
    }
}

Unit Testing with Rhino Mocks
Before continuing with all my services, I really want to be able to Unit Test my services to for a number of reasons. Firstly, if any potential employer views any of these posts then I can demonstrate good practises and secondly unit testing is a sure way to ensure that you code is doing what it should be doing.

I actually had a little bit of difficulty mocking my DataService but I finally got it out. I'd read a number of blogs on mocking the IQueryable object and that was easy but I was getting a number of odd errors once I passed my mocked repository into my service. Eventually I ended up with the following. Not sure what it was that clicked, but something did.

[TestMethod()]
public void GetIncomeByIdTest()
{
    // setup test collection
    IList<Income> incomeList = new List<Income>();
    Income expectedIncome = new Income() { IncomeId = 1 };
    Income unexpectedIncome = new Income() { IncomeId = 2 };
    incomeList.Add( expectedIncome );
    incomeList.Add( unexpectedIncome );

    MockRepository mocks = new MockRepository();
    IRepository repository = mocks.StrictMock<IRepository<Income>>();
    IncomeDataService svc = new IncomeDataService( repository );

    int actualID = 1;

    using ( mocks.Record() )
    {
        repository.Expect( repo => repo.Query() ).Return( incomeList.AsQueryable<Income>() );
        repository.Expect( repo => repo.Dispose() );
    }

    using ( mocks.Playback() )
    {
        Income actualIncome = svc.GetById( actualID );
        Assert.AreEqual( expectedIncome.IncomeId, actualIncome.IncomeId );
    }
}

So what is actually going on here?

This unit test is is aimed at testing the IncomeDataService class. The issue we face is that it requires an instance of a repository, but we obviously don't want to use the database for testing, hence we use Rhino Mocks to create a mock object of a repository.

We use the the statement using ( mocks.Record() ) to indicate what we expect to occur when the service calls the method GetById(...). So what do we expect to occur? That the repository will return the incomeList collection as an IQueryable collection and then call it's Dispose() method. Then the statement using (mocks.Playback() ) ensures that the expectations set out during the recording are used. So if we look at the GetById method...

using ( incomeRepository )
{
    income = incomeRepository.Query().Where( i => i.IncomeId == ID ).FirstOrDefault();
}

when the incomeRepository.Query() is called Rhino Mocks ensures that the List of Income objects setup at the beginning of the test are returned. Likewise when we exit the using statement the Dispose() method is called next.

Hope this helps!
Enjoy