NSTableView binding with MvvmCross

Although Mac support in MvvmCross is in its infancy a lot can be accomplished by following the patterns used for iOS. This post assumes you can get the necessary plumbing working for a basic Xamarin.Mac application using MvvmCross. Most of the setup required for a Mac app can be copied from the iOS code but its beyond the scope of this post.

A NSTableViewSource is what the NSTableView uses to source its data. This is what we want to bind. We want to be able to do the following in our binding code:


This is a standard MvvmCross "Fluent" binding. See Stuarts excellent binding documentation for more information. To achieve this I have created bindable versions of NSTableViewSource, NSTableColumn and NSTableCellView. My code uses a "Cs" prefix instead of NS for the bindable versions. Of course once  (if) this code makes its way back into MvvmCross it will use the standard Mvx naming convention.

One of the big differences between the NSTableView and the UITableView is that the former has a concept of columns. What we want is to be able to specify a binding expression for each column we require. We use the editor in Xcode to do this. In the example below we have setup our NSTableView with a few columns. Notice how the binding expression for the "Process Name" column is specified as a  "User Defined Runtime Attribute" in the inspector.

"Title" is a property in CsTableCellView that simply sets the default NSTextField. Description is a property on my model class that is part of the IEnumerable in my view model.To setup a view as above follow the following steps:

1. Use a regular NSTableView.
2. Add the columns you require and change the Custom Class to CsTableColumn as below
   
3. Set the bindingText in the "User Defined Runtime Attribute" as mentioned earlier. 

If your model class implements INotifyPropertyChanged any changes to a property will reflect automatically in the column that binds the property.

The code is currently sitting in gists until I get a chance to put it somewhere permanent.

CsTableViewSource

CsTableColumn

CsTableCellView

Using Mvx Messenger for loosely coupled communication

A ViewModel often needs to know of some status change in a service class. For instance you may have  a network connection that you keep open to your platform. The ViewModel may want to know when this connection goes up and down.

.NET Events

When your ViewModel is created it subscribes to the event you interested in monitoring.

This works just fine. When the connection state changes you get notified and raise the fact that the IsConnecting property on your ViewModel has changed. Any UI that is bound to this property can update accordingly.

The problem with this approach is that the INetworkConnection outlives the ViewModel. Whats supposed to happen is when the View leaves the screen it gets garbage collected along with the ViewModel it owns. Now the INetworkConnection has a reference to the ViewModel (created by the event subscription) effectively preventing the ViewModel from getting GC'd. Of course we can make sure we unsubscribe from the event at some point but this has its caveats and becomes messy. We need a better way...

Enter the MvxMessenger

OK so these Message Aggregators have been around for a while. I've used TinyMessenger in the past when using V2 of MvvmCross. V3 introduces an MvxMessenger in the form of a Plugin. To get started make sure you register the plugin in your Setup class.

In this example my ViewModel registers interest in a message inside its constructor.

MessageHub is a property on my ViewModel base class that just returns an instance of the IMvxMessenger plugin we registered in the beginning. Something worth noting is that the token returned is stored in a field within the ViewModel. MvxMessenger uses a WeakReference to the Action<TMessage> when you subscribe. If you don't hold on to the token the reference gets lost and you wont receive your message. Something else to consider is the thread where your Action delegate (the one you passed to IMvxMessenger.Subscribe) gets called. In this example it will be called on whatever thread the INetworkConnection calls the IMvxMessenger.Publish() method on. Checkout IMvxMessenger.SubscribeOnMainThread which is especially important if your Action code calls into the UI. Using RaisePropertyChanged in your Action code is a prime example.

The Publish() method (already mentioned above) is used to send a message to subscribers. In this example its called by the INetworkConnection when its state changes. CoreStatusMessage is a MvxMessage that you can customise as you please.

Conclusion

The great thing about this is you don't have to be concerned with holding on to objects and causing memory leaks. Consider using this instead of regular events in your MvvmCross app's. Especially where short lived Views need event's from some of your long living service classes. 

Cross Platform App Video (Droid)

I've been hard at work porting our iOS application over to other platforms. I recently posted a video showing the application running on the Mac, well I've done the same for Android. MvvmCross and Xamarin are proving to be a very powerful combination. I believe I'm sharing about 80% of the code across these 3 platforms. More importantly the code that is shared is the tricky stuff (networking IO, protocols, database etc). I'll be digging deeper into the architecture in future posts. Stay tuned.

DeapExtensions Abbreviated NameSpace

Stuart Lodge just pointed out that I could use an abbreviated namespace so that the full DeapExtenions name does not have to be typed out in your Views. @cheesebaron has a blog post thats explains how to use it http://blog.ostebaronen.dk/2012/12/adding-view-namespace-abbreviations-in.html

I've updated the DeapExtensions to take advantage of this shortcut. Now you can just declare the BindableGroupListView as DeapExt.BindableGroupListView

There, much neater :) Don't forget to the use the DeapExtensions.Binding.Droid.BaseAndroidBindingSetup as your base for your setup class. It simply registers the DeapExt with MvvmCross.

MvvmCross.DeapExtensions

Stuart Lodge suggested I start a separate library of extensions for the excellent MvvmCross framework. Meet MvvmCross.DeapExtensions.  The first addition is a grouped list view. Those familiar with the UITableView Section in UITableView on iOS will know exactly what I'm talking about. Its essentially a list with group headers separating items that belong together.

My model consists of profiles and each profile has a list of devices that belongs to it. Binding the BindableGroupListView to the list of profiles automatically gives us the result we after.

Here is my Activity with the the grouped list declared


The important part is the MvxBind which binds the ListView to the SearchedProfiles property in my ViewModel.


The Item and Group Template are regular Android Layouts containing TextViews. These TextViews are bound using MvvmCross directly to there respective model objects. So list item_profile was bound to the ProfileName property on Profile and listitem_device which has 2 TextViews was bound to Device and its corresponding propertys.

BindableGroupListView works by assuming the list of items you bind to it are groups and that these groups which are are enumerable contain the items you wish to see in the group.


Lastly, notice how I also declare the ItemClick to DeviceSelected in the bind command. DeviceSelected is an ICommand declared in the ViewModel. DeviceSelected gets the Device selected and navigates to another Activity. Right now clicks are ignored on the groups. I've added GroupClick to support click handling on the group items.