jQuery UI Drag and Drop

To implement drag and drop capability using jQuery UI I first had to create custom Knockout binding. Below shows the how the binding are created.

These binding can can then be used as a normal KO binding, for example to use the drag binding the attribute would look like this: data-bind="drag: {value: 'hello'}". To use the drop binding it would look like this: data-bind="drag: {value: function(data) { alert(data) }}". This example would create a message box saying "hello" if the object was dropped onto a area with the drop binding.

RIA

The Project

The RIA project uses MVC4 websites linked to a WebAPI web service, which exposes repository actions that manipulate the database.

Each part of the system has its own actions and data ensuring the single responsibility principle is followed. This allows the WebAPI to change data access layers (DAL) through the use of a factory, meaning the WebAPI can be closed to modification, yet still be able to change the DAL it uses.

UI

Student / Module / Pathway 

The navigation menu is consistently found on the left hand side through out the website, along with similar views on the right to giving a sense of consistency. The selection view allows all of items to be seen, and when selected the available actions appear. These options will include: a delete that will remove the selected item; and an edit which will allow the user to modify the selected item.

Editing and Adding a new item share the same view with the difference being that editing populates fields and allows a delete. The edit/add student's view is the only view with validation which is used for demonstration purposes.

Module Chooser

The module chooser UI allows the user to select the student they are wanting to edit. Once a student is selected modules are able to be added the current year, being either dragged or double clicked. To remove a module from the currently selected year it can either be double clicked, providing it is not a core module, or the whole year can be reset.

External Libraries

History API

Not strictly an external library History API was used in the Student / Module / Pathway editor to provide an single page application feel allowing the user to navigate through AJAX pages.

Signalr

This library has allowed to the module chooser to update other users viewing the same students in real time.

Toastr

Toastr has been used in both parts of the project to alert users of actions that have taken place. An example of this would be in the module chooser where a message appears when a student is loaded.

Knockout

Knockout has also been used through out the project to provide the capability of developing using an MVVM architecture. Below shows the use of knockout bindings to populate the years with the modules available and provide functionality to them.

jQuery and jQuery UI

I have used jQuery heavily within the project instead of using basic JavaScript. I also take advantage of the jQuery UI extension to implement drag and drop capability. 

Experiences and Problems

My post about generating proxy objects for web services:

http://www.codeproject.com/Tips/535260/Proxy-Object-Generation-for-MVC-and-WebAPI-Control

TypeScript

In the project I decided to try type script as instead of JavaScript to write my view models. I am not quite sure whether the changes it makes to JavaScript warrant it as a replacement. The whole point of TypeScript is to give JavaScript a more object orientated feel and at first I thought that is what I wanted, but it turned out I did not. I started to miss the freedom JavaScript provides after being forced to do things 'the long way round'. I do think that TypeScript helps increase maintainability... but at what cost, the things that made JavaScript such a powerful language.

History API

As mentioned earlier I use History API in the project to change the way navigation works to enhance user experience, this worked as intended for Chrome and Firefox, but due to lack of support in IE this feature is unavailable.

CORS Error when really Server Error with webservice

While developing the website I came across an error which I found particularly interesting because of the way the error is disguised. Earlier in development I encountered a cross origin resource sharing error because of security issues associated with the WebAPI being hosted in a separate project. Later in development an internal error in the web service caused the browser to believe the same error had occurred  because of the web service's failure to respond,

EF Contexts

Originally I had an entity framework database context created per repository, this proved to be a problem as the repository was static, causing the database context to stay active. For synchronous requests this does not cause any noticeable issues, but done asynchronously problems occur as the database contexts does not close its connection immediately after performing an action, causing an error when a second request needs a connection open. The solution to this, which I found out was best practice, is to create and destroy contexts as quickly as possible.

Testing

Two testing methods were used throughout the project. The first method was unit testing, which I used to ensure the web service was returning the correct data. These tests were set up using the Visual Studio 2012. The second form of testing was more manual, involving break points being set at critical point allowing me to check that the data being passed around was correct and as expected.