Provide New Json Builder

[slodge]

I'm thinking of providing a new JSON module allowing elements like:

  new StringElement("Label", "Only Element in a Blank Section"),

to be declared something like:

  {
        'Element': 'String',
        'Properties':
        [
               "Caption": "Label",
               "Value": "Only Element in a Blank Section"
        ]
  }

This would be built using reflection - so more automagically extensible than the json in MT.Dialog.

The code would include options to bind properties and events like:

               "LayoutId": "@Resource:resource_name"

and Mvvm Binding (with MvvmCross format) like:

               "Value": "@Bind:{'Path':'PropertyOnViewModel', 'Converter': 'AConverter', ... }"

and:

               'Click' : '@Bind:{'Path':'TheCommand'}

This would provide a cross platform way of declaring UIs.... I might even have a go at a WindowsPhone.Dialog....

[slodge]

Just an update on this - I just (this morning) have this sample below working.

Full image: http://i.imgur.com/XJHpD.png

Obviously there is still a need for:

• event handling - using ICommand or Delegates somehow
• some elements need tweaking - especially custom Views and Images
• integration with binding (for MvvmCross)

However, I think the basic idea should work pretty well across Android.Dialog and also the mvvmcross fork of MonoTouch.Dialog.

And I do intend to add a WinRT.Dialog and a WindowsPhone.Dialog too...

If anyone's interested, then post here or on a relevant post on http://slodge.blogspot.co.uk

{
    'Key':'Root',
    'Properties':{
        'Caption':'TestRootElement'
    },
    'Sections':[
        {
            'Elements':[
                {
                    'Key':'String',
                    'Properties':{
                        'Caption':'Label',
                        'Value':'Only Element in a Blank Section'
                    }
                }
            ]
        },
        {
            'Properties':{
                'Header':'Test Header',
                'Footer':'Test Footer'
            },
            'Elements':[
                {
                    'Key':'Button',
                    'Properties':{
                        'Caption':'DialogActivity - needs ICommand'
                    }
                },
                {
                    'Key':'String',
                    'Properties':{
                        'Caption':'DialogListViewActivity - needs ICommand',
                        'LayoutName':'dialog_labelfieldright'
                    }
                },
                {
                    'Key':'Boolean',
                    'Properties':{
                        'Caption':'Push my button',
                        'Value':true
                    }
                },
                {
                    'Key':'Boolean',
                    'Properties':{
                        'Caption':'Push this too',
                        'Value':false
                    }
                },
                {
                    'Key':'String',
                    'Properties':{
                        'Caption':'Click for EntryElement Test - needs ICommand'
                    }
                }
            ]
        },
        {
            'Properties':{
                'Header':'Part II'
            },
            'Elements':[
                {
                    'Key':'String',
                    'Properties':{
                        'Caption':'This is the String Element',
                        'Value':'This is it\'s value'
                    }
                },
                {
                    'Key':'Checkbox',
                    'Properties':{
                        'Caption':'Check this out',
                        'Value':true
                    }
                },
                {
                    'Key':'Entry',
                    'Properties':{
                        'Caption':'Username',
                        'Value':'',
                        'Hint':'Enter Login'
                    }
                },
                {
                    'Key':'Entry',
                    'Properties':{
                        'Caption':'Password',
                        'Value':'',
                        'Hint':'Enter Password',
                        'Password':true
                    }
                }
            ]
        },
        {
            'HeaderElement': {
                'Key':'String',
                'Properties':{
                    'Caption':'Can Populate be done?',
                    'Value':'Need to look at how ViewElement works...'
                }
            },
            'Properties':{
                'Header':'Group'
            },
            'Elements':[
                {
                    'Key':'Root',
                    'Properties':{
                        'Caption':'Radio Group - needs work!'
                    }
                }
            ]
        }
    ]
}

[slodge]

And have now added custom property handlers too which allow me to write things like:

            {
                'Key':'String',
                'Properties':{
                    'Caption':'Click for EntryElement Test',
                    'Click':'@Action:ElementTest'
                }
            }

That routes the Click property to an Action property setter which links Click to the Delegate keyed by ElementTest:

    public void Set(Element element, PropertyInfo property, string configuration)
    {
        var action = Actions[configuration];
        property.GetSetMethod().Invoke(element, new object[] {action});
    }

where Actions has been filled using:

        var setter = new ExampleActionPropertySetter();
        setter.Actions["ShowDialogActivity"] = (sender, args) => StartNew();
        setter.Actions["ShowDialogListViewActivity"] = (sender, args) => ClickList();
        setter.Actions["ElementTest"] = (sender, args) => ClickElementTest();
        parser.CustomPropertySetters["Action"] = setter;

Next step... integrating with MvvmCross and with MonoTouch.Dialog too...

[Alphapage]

It would be great to use a Portable UI integrated with MvvmCross. You will loose designer facilities I think, but if there are few limitations and a lot of Dialog Controls which respect the same layout or behavior for each platform and screen size, you are done. I'm waiting WindowsPhone Dialog for my first test, but give a try to monodroid Dialog as soon as ICommand will be done.
I give you my vote, especially if it's as easy as coding with MvvmCross.

[slodge]

Thanks @Alphapage

I've transferred a very early prototype to a vNextDialog branch:

https://github.com/slodge/MvvmCross/tree/vNextDialog

Basically, the Details, New and Edit pages are all now working MonoDroid Dialogs - see:

• one way binding for Details- https://github.com/slodge/MvvmCross/blob/vNextDialog/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement.Droid/Views/DetailsCustomerView.cs
• two way binding for Edit - https://github.com/slodge/MvvmCross/blob/vNextDialog/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement.Droid/Views/BaseCustomerEditView.cs

Only required StringElement and EntryElement to be working.

This is not the final source by a long way - but the idea looks sound :)

[slodge]

The JSON is now extended to Menu's too :)

Currently progressing over on: http://slodge.blogspot.co.uk/2012/10/more-progress-on-portable-ui-prototype.html

This code is mainly now on: https://github.com/slodge/MvvmCross/tree/vNextDialog