SampleData.json support for ViewModel setup

[Laumania]

A common pattern used in "XAML-World" is the MVVM pattern. Sadly it looks like the SampleData.json does not support that.

This means that I have a view:

<ContentPage.Content>
        <ListView
            ItemsSource="{Binding Items}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <StackLayout Padding="40" Spacing="20">
                                <Label Text="{Binding Title}" />
                                <Label Text="{Binding Body}" />
                            </StackLayout>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>

In the code-behind, the BindingContext is bound to a ViewModel:

public partial class MainPageView : ContentPage
    {
        public MainPageView()
        {
            InitializeComponent();

            this.BindingContext = new MainPageViewModel();
        }
    }

Then finally my ViewModel, expose the properties the View is bound to, in this sample the Items.

public class MainPageViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<ItemModel> _items;

        public MainPageViewModel()
        {
            _items = new ObservableCollection<ItemModel>();

            _items.Add(new ItemModel() { Title = "My Title", Body = "Long body goes here.." });
            _items.Add(new ItemModel() { Title = "Your Title", Body = "Long body goes here.." });
            _items.Add(new ItemModel() { Title = "Her Title", Body = "Long body goes here.." });
            _items.Add(new ItemModel() { Title = "His Title", Body = "Long body goes here.." });
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public ObservableCollection<ItemModel> Items
        {
            get { return _items; }
        }
    }

As mentioned, I cannot figure out how to structure my SampleData.json file for the Gorilla to be kind enough to show me a View like this :) It seems like the SampleData.json only work at "the first level" like it is in your sample, and not when it need to bind to the "second level" ViewModel->Items.

I have tried something like this, but doesn't work.

{
    "MainPageView.xaml": 
            {
                "Items": [{  

                              "Title":"Sample Data Title",
                              "Body":"Sample Data Body"
                            }]
            }

}

See my attached sample project. GorillaViewModelProblemSample.zip

[jpbrocca]

Hi Mads, thanks for you sample.

Yesterday I was talking to our engineer and I mentioned another suggestion we got -not sure if I already mentioned that to you- but just in case here it goes:

What about if instead of having to write your own json that replicates the data structure instead you could load that remotely?

So in the demo that you made me of your app, instead of manually copy and pasting the requested json on the SampleData.json file you will have a convention property for the remote json that you want to feed your page with...something like this:

{  
   "myPage.xaml":{  
      "remoteJson":"http://myserver.com/jsonrequest"
   }
}

I think having something like the above would be a great timesaver and you will be working with the real data also.

One thing though is that he asked me to ask you if that would be enough in your case -just an URL- or if he should provide you with some additional parameters/properties so you could get access to this json webservice? Do you need to pass any security token for instance?

[Laumania]

Great idea, and I don't need to pass anything other than a URL, but I'm pretty sure it's a request that others will have.

Sadly it doesn't solve the ViewModel problem here, but it is for sure a great addon after the ViewModel sampledata problem have been fixed :)

[jpbrocca]

Don't worry, we will find a solution for the ViewModel ;)

[jpbrocca]

Hey Mads, I sent you an email with the update so you can test if our fix works.

[Laumania]

Hi @jpbrocca

Yeah it worked, in the sample I provided which it awesome.

Sadly, I tested it out in my own project and got an error, because I have a StaticResource I'm using. It's a converter, which is defined in the App.xaml.

[jpbrocca]

Interesting! Is there a way you could send another sample that covers that part?

[Laumania]

Here is an updated sample project, that shows that it work in the simulator (only tested in iOS) and doesn't work when the Gorilla gets a hang of it ;) GorillaViewModelProblemSample-ConverterBug.zip