Monday, January 21, 2013

Introduction to the new "Swiss" Binding Syntax

Update:

The syntax in this post was from the prototype.

We've now fixed on a new slightly different syntax - which is basically:

    Target Source.Path.Here, Converter=name, ConverterParameter=value, FallbackValue=value

You can see this in use in http://slodge.blogspot.co.uk/2013/01/uitableviewcell-using-xib-editor.html

More details in a more detailed blog post "coming soon"...

Original:

----

As I'm sure many of you know, binding in MvvmCross is declared using JSON syntax - parsed using the PCL version of the wonderful JSON.Net

I love this JSON binding syntax - as it's reliable, robust, easy to learn, and because it gave me a powerful parser (including things like character escaping) for "free".

However, over the last few months, there have been a few suggestions about ways to make the binding syntax more readable for MvvmCross on Droid and Touch 


A couple of us - @opendix and myself - have taken these ideas and evolved them into a prototype - into "Swiss Binding".

This prototype is available today within the vNext MvvmCross tree.

In it, you can choose to switch the binding syntax from:

   {
       'TargetName1':
            {
                  'Path':'Source.Property.Path1',
                  'Mode':'BindingMode1',
                  'Converter':'Converter Name 1',
                  'ConverterParameter1':'Converter Parameter 1', // a quoted-string, Int64, double, or bool
                  'FallbackValue':'FallbackValue1', // a quoted-string, Int64, double, or bool
            },
       'TargetName2':
            {
                  // etc
            }
    }

to:

    TargetName1 * Source.Property.Path1 
       (
          Converter='Converter Name 1',
          ConverterParameter='Converter Parameter 1',
          FallbackValue='Fallback Value 1'
        );
    TargetName2=//etc

Where the * is a choice between:


- although there is also the option to use (Mode=BindingModeName) instead if you prefer not to use these symbol shortcuts.

------

To show you the effect of this, let's look at some sample code.

The TipView bindings in JSON are:


in Swiss these bindings become:


or you could use spaces to specify default binding if you wanted to - in which case the above example becomes:



------

Similarly in Droid a xml, the switch would be from things like:


to:

or (if you are happy using default binding modes) just to:


If you want to experiment with this… then:

  • You can do this quickly and easily using a line in your app initialisation like:


  • You will need to switch your entire project over to the new format - you can't mix old and new.

An example project using this syntax is TwitterSearch - check out both Touch and Droid in https://github.com/slodge/MvvmCross/tree/vnext/Sample%20-%20TwitterSearch

------

What if I have some feedback?
What if I don't like this syntax?
  • If you don't like it… then don't use it!
  • The old reliable, well-documented JSON syntax is still available
  • Or you could quite quickly write your own syntax too… the source is there if you want to try and Dependency Injection gives you an easy way to inject your implementation…

3 comments:

  1. Looks convenient. Thank you.

    ReplyDelete
  2. Much more readable, great! I suppose you mistyped the arrow for OneWayToSource binding, without reading any code I think it shoul be >. Am I right?

    ReplyDelete
    Replies
    1. Thanks... yes, probably... although there is a bit of a problem with using < and > inside XML - so I'm really interested to see if anyone has any other ideas...

      Delete