Seperate KO View formating and ViewModel state

A normal scenario with Knockout is that you want date and number observables to be formatted to the current culture of the client, this is easily implemented in a Knockout extender, something like.

ko.extenders.numeric = function(observable, options) {
    var textValue = null;
    return ko.computed({
        write: function(value) {
            textValue = value;
            var parsed = Number.parseFloat(value);
            if(!isNaN(parsed)) {
                observable(parsed);
            } else {
                observable(null);
            }
        },
        read: function() {
            var value = observable();
            if(value == null) {
                return textValue;
            }

            return value.toLocaleString(); //This  can be replaced with for example the Globalize plugin 
        }
    });
};

Use it like

this.amount = ko.observable().extend({ numeric: true });

The problem with this approach is that the ViewModel will no longer work against numbers it will work against formatted strings, so this.amount() will return a string instead of a number. This is very bad practice in a View/ViewModel seperation stand point. (more…)

Implicit dependencies and ‘copy local’ fails to copy

A common scenario with .NET Solutions is that you have a Project, lets call it Project X, that have dependencies to a library without explicitly using it from code. You have a host project typically a Web or Windows client Project that uses Project X, even with copy local set Visual Studio will fail to load that implicit dependency and you will receive a Runtime error when trying to run the project.

One solution is to add this reference to the host project even if it does not have any direct dependency to the library. I think this is bad practice and will get very hard to maintain in a large project with lots of dependencies and assemblies.

A better solution that I use is to create a little helper method

static RepositoryBase() {
   Util.EnsureStaticReference<System.Data.Entity.SqlServer.SqlProviderServices>();
}

It should be called as close to the dependency as possible for readability. In above example I have a Repository base class which uses Entity framework. I call it from the static constructor.

The implementation of EnsureStaticReference looks like this

    public static class Util
    {
        public static void EnsureStaticReference<T>()
        {
            var dummy = typeof(T);
            if(dummy == null)
                throw new Exception("This code is used to ensure that the compiler will include assembly");
        }
    }

Single Page Application with Sub-routing

One of my colleagues is working on a Single Page Application, he asked me for help on a solid design for routing and specifically about sub-routing. Sub-routing in a SPA is complex, as an example when you click a link in a list you want that item to be presented in a modal window. If you close the modal window and press back in the history you want it to show again, and if you press forward you want it to close. I choose to attack this problem with an Event Aggregation approach, where changes to the route resulted in a change event being fired to any listener. (more…)

Wrap client side code in a Web Forms Control

I’m currently between assignments and in the meantime I’m helping fellow colleagues with a Web Forms system. They needed a Combobox for a requirement and after some googling I found out that there is none for free which suits their needs. I have created a Knockout enabled combo called Knockout.Combobox. I decided to take this client side combobox and wrap it in a Web Forms Control.
(more…)

Client – Server Event aggregation with Role Authorization

I’ve covered my SignalR Event aggregation library in an earlier post found here. That library has a Constraint API so that you can control which events a specific user should receive. It requires you to write one constraint handler for each type of event. But how about standard declarative Role Authorization?
(more…)

Client – server event aggregation with SignalR

Event aggregation is really a pattern i like, there is something elegant about firing events and subscribers can listen to them without knowing who fired them. This creates decoupled domains both in backends and frontends. At my latest customer we saw an increasing demand for pub / sub and immediate update. We fired events on the backend event bus and in the frontend we had SignalR Hubs that picked up the events and forwarded them to the clients. This caused duplicated and similar code both on the client and on the web server. I decided to create an abstraction layer between SignalR and the event aggregator. The result is a library called SignalR.EventAggregatorProxy

(more…)

MVVM with Excel and Caliburn.Micro

One of my colleagues needed to modernize a tool we had for Excel. He asked me for suggestions, since he knew I’m into modern UI development. I know very little about the Excel API but after some googling I found out that you are limited to Winforms. There is however a control in Winforms called ElementHost that let you host WPF elements in Winforms. This coupled with a custom Bootstrapper for CM will enable you to develop sleek MVVM tools in Excel.

The Boostrapper will act as an entry point for our Caliburn enabled app. It needs to inherit from BootstrapperBase rather than the standard generic base class Bootstrapper of TModel.

public class Bootstrapper<TModel> : BootstrapperBase
{
    private readonly StandardKernel kernel;

    public Bootstrapper(ElementHost host)
        : base(false)
    {
        kernel = new StandardKernel();

        Start();

        var model = kernel.Get<TModel>();
        var view = ViewLocator.LocateForModel(model, null, null);
        ViewModelBinder.Bind(model, view, null);

        host.Child = view;
    }

    protected override void Configure()
    {
        kernel.Bind<IWindowManager>().To<WindowManager>().InSingletonScope();
    }

    protected override object GetInstance(Type service, string key)
    {
        return kernel.Get(service);
    }

    protected override IEnumerable<object> GetAllInstances(Type service)
    {
        return kernel.GetAll(service);
    }
}

Its constructor takes the ElementHost as argument and then starts CM using the Start method on the base class. We need to hook up the ViewModel manually and its done like.

var model = kernel.Get<TModel>();
var view = ViewLocator.LocateForModel(model, null, null);
ViewModelBinder.Bind(model, view, null);

First we create the ViewModel using Ninject, this way any dependecies for that model will be injected by Ninject. Then we ask CM to locate the WPF view using its convention based helper class ViewLocator. After we get the view we Bind it to the model using another CM helper class called ViewModelBinder.

Last but not least, we need to hook up the WPF element to the Winforms ElementHost.

host.Child = view;

Embedded resources

Alan Rutter asked me how to load embedded resources like themes etc.
App.xaml wont load in a none WPF project so you need to-do this manually like

var dict = new ResourceDictionary {Source = new Uri("Resources.xaml", UriKind.Relative)};
var app = new System.Windows.Application(); //This will load Application.Current
Application.Current.Resources.MergedDictionaries.Add(dict);

Auto generated CRUD forms with Knockout

For the last two years I’ve been working for the asset management at a major Swedish bank. At such a institution CRUD is inevitable and we all know that most devs prefer working with rich domain systems over CRUD. CRUD also generate a lot of similar or duplicated code. In my latest project I wanted to do something about this and decided to create a convention based API to auto generate these forms.

(more…)

Why overriding JsonSerializer no longer work in SignalR 2.0

I see almost everyday people having problem with overriding JSON serializer settings in SignalR. In SignalR 1.x they used an interface, IJsonSerializer, that you could override to set the JSON settings. In SignalR 2.x they instead use a concrete type JsonSerializer.

Ninject

The problem starts if you use a dependency injection framework like Ninject. The Dependency resolver that most people use for Ninject together with SignalR is doing this to get a type.

return kernel.TryGet(serviceType) ?? base.GetService(serviceType);

In SignalR 1.x this worked because when Ninject is doing TryGet on an interface it will return null and instead call base.GetService which in turn will use the type registered with SignalR’s internal IoC (GlobalHost.DependencyResolver).

In SignalR 2.x this will no longer work because we are now using a concrete type and Ninject will create instances of unregistered concrete types without complaining. base.GetService will never be called and the types registered in GlobalHost.DependencyResolver will not be used.

Remedy

One way of solving this is to register the JsonSerializer with the Ninject kernel instead of register it with GlobalHost.DependencyResolver.Register

The other is to check if the type is registered with Ninject, if it is use kernel.Get otherwise use base.GetService. This can be done like

kernel.GetBindings(serviceType).Any();

Convention based MVVM with Knockout

One of my most popular Open source projects, FreePIE, is a WPF application and it utilizes a library called Caliburn.Micro. The main idea for that library is to minimize the use of explicit declared bindings and use conventions to implicit bind to the ViewModel under the hood. As an example, if you have a button called Save and a method called Save on your VM, Caliburn.Micro will make sure these are bound.
This is a welcomed tool since XAML bindings are, to say the least, verbose.

Bindings get even more verbose in the Knockout world because of the fact that you can write inline JavaScript in the bindings, fact is the entire data-bind attribute is inline JavaScript that is executed by Knockout. I’ve seen that bindings like these and worse are common out there.

<button data-bind="enable: errors().length === 0">Save</button>

I started to write a Convention based library called Knockout.BindingConventions a year ago and I added support for Knockout 3.0 a while back. Even though the library isn’t new I thought I could write about it, it’s a good way to get to know the inner working of Knockout and also convention over configuration. (more…)