Working with design time data - UXDivers/Gorilla-Player-Support GitHub Wiki

Design-time data can be associated to the XAMLs files using one or a combination of the following mechanisms:

• DesignTimeData.json. Provides a way to define the BindingContext of a XAML page.
• Plain objects. Allows to instantiate a custom class form an assembly.

The samples described in this document are included in the DesignTimeData sample solution installed as part of the Gorilla extras.

NOTICE:

In previous version of Gorilla, design time data was called Sample data. In order to be consistent with the way Xamarin calls it, starting in Gorilla 1.0, we renamed Sample data to Design time data. You will find places where we still call it Sample data, we will gradually put everything in sync.

In order to user this mechanism you need to add a file called DesignTimeData.json with build action None at the root of the project that contains the XAML files. This file would be used to specify design-time data only for the XAMLs within the project that contains it.

NOTE: In previous versions of Gorilla DesignTimeData.json was called SampleData.json. You will still find it in the samples. Even though we rename it, we still recognize the SampleData.json as valid.

The content of the DesignTimeData.json file is a JSON object, where each property defines the design-time data for a XAML page/view. For example:

Content of DesignTimeData.json

{
    "DesignTimeDataFilePage.xaml" : [
        { "Name": "John", "Age":29, "Photo":"friend_thumbnail_27.jpg" },
        { "Name": "Pam", "Age":32, "Photo":"friend_thumbnail_31.jpg" },
        { "Name": "Casy", "Age":58, "Photo":"friend_thumbnail_93.jpg" },
        { "Name": "Susan", "Age":29, "Photo":"friend_thumbnail_75.jpg" }
    ]
  ...
}

Content of DesignTimeDataFilePage.xaml

<ContentPage ...>
  <ContentPage.Content>
    <ListView ItemsSource="{Binding .}">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            ...
            <Label Text="{Binding Name}" VerticalOptions="Center" Grid.Column="1" />
            <Label Text="{Binding Age}" VerticalOptions="Center" Grid.Column="2"/>
            <Image Source="{Binding Photo}" HorizontalOptions="Center" Grid.Column="3"/>
            ...
         </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </ContentPage.Content>
</ContentPage>

In the example the BindingContext of the page DesignTimeDataFilePage.xaml will be an array. Gorilla, at preview time, will instantiate an object from the JSON and set it as the BindingContext of the page so all Bindings get populated with data.

XAML pages within your project can be identified by specifying:

• the file name (like DesignTimeDataFilePage.xaml) or
• the path to the file relative to the project.

For example, consider the following project structure:

Project
  - SomeFolder
     - A.xaml
  - SomeOtherFolder
     - A.xaml
  - A.xaml

If you want to provide sample data for the three A.xaml files at the same time you just write:

{
  "A.xaml": {}
}

If you want to target only SomeFolder\A.xaml you will need to do:

{
  "SomeFolder\\A.xaml": {}
}

If you want to target each file separately you will need to do:

{
  "A.xaml": {},
  "SomeFolder\\A.xaml": {},
  "SomeOtherFolder\\A.xaml": {}
}

Gorilla will choose the more specific path over the generic one. Therefore although both "A.xaml" and "SomeFolder\\A.xaml" will match SomeFolder\A.xaml the latter will be used.

In addition to specifying the design-time data for each page, Gorilla 1.0 adds support for global design-time data, which means this data is available for all pages. This is achieved through the @Global property in DesignTimeData.json file:

{
    "@Global": {
        "Version":"1.0",
        "Icon": "app.png"
    },

    "Page1.xaml": { },
    "Page2.xaml": { }
}

In the above sample, Version and Icon will be merged with the properties in Page1.xaml and Page2.xaml.

If Version or Icon properties are also defined in Page1.xaml or Page2.xaml, the page specific value will take precedence over the global value.

In XAML you can instantiate an object hierarchy and later bind it to your UI.

In the following example an array of strings is instantiated and later bound to a ListView:

<ContentPage  
       ...
       xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <ContentPage.Resources>
        <ResourceDictionary>
            <x:Array Type="{x:Type sys:String}" x:Key="Data">
                <sys:String>Hello</sys:String>
                <sys:String>World!</sys:String>
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <ListView ItemsSource="{StaticResource Data}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding .}"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

Using a similar approach you can use your own custom made classes. In order to do so you need to:

• define a xml namespace to point where your classes are defined, similar to the xmlns:sys in the example
• configure Gorilla SDK as explanied here.
• register the assembly containing your custom classes in the Config object so Gorilla can find it.