How to render controls defined in Json structure using MvvmCross? - mvvmcross

Question

I have a situation where my view definition(i.e. the content that gets displayed on a layout file) is defined in a json structure. I need to be able to define this json structure along with bindings and then my code should be able to dynamically create controls based on the json structure and fill out the layout.
I am able to accomplish the same using code below.
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
FirstViewModel firstViewModel = new FirstViewModel()
{
Id = 1001,
FirstName = "Amit",
MiddleName = string.Empty,
LastName = "Taparia",
Race = "Asian",
IsUSNational = false
};
this.ViewModel = firstViewModel as IMvxViewModel;
var bindings = this.CreateInlineBindingTarget<FirstViewModel>();
this.Root = new RootElement("Main View", null, null).
{
new Section("Personal Information")
{
new StringElement("Employee#","Enter Employee#").Bind(bindings,vm => vm.Id)
new EntryElement("FirstName","Enter First Name").Bind(bindings,vm=>vm.FirstName),
new EntryElement("MiddleName","Enter Middle Name").Bind(bindings, vm=> vm.MiddleName),
new EntryElement("LastName","Enter Last Name","Amit",null).Bind(bindings, vm => vm.LastName),
new EntryElement("Race","Enter Race").Bind(bindings,vm => vm.Race),
new BooleanElement("US National",true,).Bind(bindings, vm => vm.IsUSNational).
},
};
}
But I need to be able to do the same using a structure defined in json file.
I know we can do something like this using MvvmCross, but I dont know how to do this.
I came across these three sample solutions
a) CustomerManagement
b) CustomerManager.AutoView
Here I do see that we have a BaseCustomerEditView.cs where there is a json structure defined, but the code is commented out.
c) DialogExamples
Couple of questions
1) Whats the difference between using AutoView and MvxDialog? Is it one and the same thing?
2) Are there any potential limitations using the control structure defined in json file. I do see one problem related to alignment. We wont have any control over the alignment of controls defined in json file.
3) How to achieve rendering/binding using a structure defined in json file?
Looking forward to your responses.

Answer 1

Dialog provides "a foundation to create dialog boxes and show table-based information without having to write dozens of delegates and controllers for the user interface" (from https://github.com/migueldeicaza/MonoTouch.Dialog)
The idea of AutoViews is to provide a layer of auto-generated UIs built largely on top of Dialog, especially for
prototyping but also possibly for some families of apps - see Should I wait for AutoView? and http://slodge.blogspot.co.uk/2012/10/cross-platform-views-for-mvvmcross-ideas.html
The current state of AutoViews is that there is an initial implementation available on Android and iOS, and there is a small sample which shows the use of this implementation at: https://github.com/slodge/MvvmCross-Tutorials/tree/master/AutoViewExamples
The main focus of the demo uses Auto objects to describe the UI in the ViewModel - e.g.:
private KeyedDescription GetDialogAutoView()
{
var auto = new RootAuto(caption: "Some Dialog Info")
{
new SectionAuto(header: "Strings")
{
new EntryAuto(caption: "Name", bindingExpression: () => Name),
new EntryAuto(caption: "Password", bindingExpression: () => Password) { Password = true },
},
new SectionAuto(header: "Booleans")
{
new BooleanAuto(caption: "Is available", bindingExpression: () => IsAvailable),
new CheckboxAuto(caption: "Is active", bindingExpression: () => IsActive),
},
new SectionAuto(header: "DateTimes")
{
new DateAuto(caption: "Date of Birth", bindingExpression: () => DateOfBirth),
new TimeAuto(caption: "When", bindingExpression: () => PreferredContactTime),
},
new SectionAuto(header: "Debug Info")
{
new StringAuto(caption: "Name", bindingExpression: () => Name),
new StringAuto(caption: "Password", bindingExpression: () => Password),
new StringAuto(caption: "Is available", bindingExpression: () => IsAvailable),
new StringAuto(caption: "Is active", bindingExpression: () => IsActive),
new StringAuto(caption: "Date of Birth", bindingExpression: () => DateOfBirth),
new StringAuto(caption: "When", bindingExpression: () => PreferredContactTime),
},
};
return auto.ToElementDescription();
}
Instead of these Auto objects, a Json format description is available, but there's not much documentation on this today. Some example files do exist in https://github.com/slodge/MvvmCross-Tutorials/blob/master/Sample%20-%20CustomerManagement/CustomerManagement%20-%20AutoViews - for example https://github.com/slodge/MvvmCross-Tutorials/blob/master/Sample%20-%20CustomerManagement/CustomerManagement%20-%20AutoViews/CustomerManagement.Droid/Assets/DefaultViews/NewCustomerViewModel/Dialog.json
These Json files are very Reflection-based - they are built around the names and properties of the Dialog classes.
For your specific case, I think I'd recommend you don't use the AutoViews Json format.
It sounds like you have a more specific requirement - where you want the ViewModels to download Models from the web and for the ViewModels to then construct UIs from these descriptions.
Because of this I would recommend that you start by describing your own business Models in C# POCOs - these can then easily be serialised over a network connection (e.g. using Json.Net) and your ViewModels and Views can then work out how to display them.
As you already know from Is it possible to have method binding in mvvmcross using Fluent API?, you can bind your UI to a Dictionary or other 'dynamic' ViewModel structure if you want to - I suspect this will be useful when displaying and binding your dynamic form data.
It may be that you can use either the Auto or the Json parts of AutoViews as part of this last display step - but I don't think your network transfer should be done in terms of the Dialog elements - stick to business domain objects there.