Tuesday, October 23, 2012

More progress on the Portable UI prototype

I now have a working sample on Droid with JSON loaded for both Menus and for Dialogs.

These files are automatically picked up using Conventions - no configuration required.

Next steps...
  • tidy it up a bit (thank you Resharper!)
  • add a list/listitem format,
  • try it out on Touch, WP and WinRT


Here are the example files:

Menu.json:

{
    'Key':'Root',
    'Properties':{
    },
    'Children':[
        {
            'Properties':{
                'Caption':'Change',
                'LongCaption':'Change Customer',
                'Icon':'ic_menu_edit',
                'Command':'@MvxBind:{\'Path\':\'EditCommand\'}'
             }
        },
        {
            'Properties':{
                'Caption':'Delete',
                'LongCaption':'Delete Customer',
                'Icon':'ic_menu_delete',
                'Command':'@MvxBind:{\'Path\':\'DeleteCommand\'}'
             }
        }
    ]
}


Dialog.json

{
    'Key':'Root',
    'Properties':{
        'Caption':'TestRootElement'
    },
    'Sections':[
        {
            'Properties':{
                'Header':'Customer Info'
             },
            'Elements':[
                {
                    'Key':'String',
                    'Properties':{
                        'Caption':'ID',
                        'Value':'@MvxBind:{\'Path\':\'Customer.ID\'}'
                    }
                },
                {
                    'Key':'String',
                    'Properties':{
                        'Caption':'Name',
                        'Value':'@MvxBind:{\'Path\':\'Customer.Name\'}'
                    }
                },
                {
                    'Key':'String',
                    'Properties':{
                        'Caption':'Website',
                        'Value':'@MvxBind:{\'Path\':\'Customer.Website\'}',
                        'SelectedCommand':'@MvxBind:{\'Path\':\'ShowWebsiteCommand\'}'
                    }
                },
                {
                    'Key':'String',
                    'Properties':{
                        'Caption':'Phone',
                        'Value':'@MvxBind:{\'Path\':\'Customer.PrimaryPhone\'}',
                        'SelectedCommand':'@MvxBind:{\'Path\':\'CallCustomerCommand\'}'
                    }
                }
            ]
        },
        {
            'Properties':{
                'Header':'General Info'
             },
            'Elements':[
                {
                    'Key':'StyledMultiline',
                    'Properties':{
                        'Caption':'Address',
                        'Value':'@MvxBind:{\'Path\':\'Customer.PrimaryAddress\'}',
                        'SelectedCommand':'@MvxBind:{\'Path\':\'ShowOnMapCommand\'}'
                    }
                }
            ]
        }
    ]
}


No comments:

Post a Comment