Well it's been a while since I've last posted. What have I been doing? Not much to be honest, being busy at home and busy at work... oh and sleeping :)
However I finally got a comment on one of my posts, Budget App - Part 2 : Introducing WCF Into The Picture (yay!) asking for an insight into the UI. This would be have been even more exciting had I not know who the anonymous commenter was. Rob!
Anyhow, when I started this budget app I set out with the intent of using the DevExpress ASP.Net control set. However, as you can see from the image below with the trial version of the controls you get this really lovely message.
So with that in mind I set out to find a new control set to use. And here's what I found: ExJs. Why did I choose ExtJS? Firstly, I liked look of their products and secondly they have an awesome site show extensive details on their API.
Besides the ExtJs framework, I've also included the jQuery framework and since jQuery 1.4 was released I've naturally upgraded to that.
Next I'll provides some details on the set I've take and how the ExtJs framework can work with the jQuery framework.
Enjoy!
Wednesday, January 20, 2010
Sunday, November 22, 2009
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.
Here's the script behind the page.
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...
And there you have it.
References:
1. jQuery
2. jQuery ui
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
Friday, November 13, 2009
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
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
Tuesday, November 10, 2009
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
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
Tuesday, October 20, 2009
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.
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 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;
}
Thursday, October 15, 2009
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:
As I've been refactoring my code I've come across the follow functionality...
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!
I'm going to following the principles of TDD as I understand them:
- Write the test first - it'll probably not compile.
- Get the test to compile.
- Get the test to pass - with the least amount of code.
- Create another test that will cause your code to fail.
- Refactor your class so that both tests pass.
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.
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!
Wednesday, October 14, 2009
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!
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!
Subscribe to:
Posts (Atom)