Localization

Gorilla Player 1.1.0.4 added support for localization which allows previewing you XAML pages in different languages.

When running your app compiled with Gorilla SDK you can choose which language you want to use to preview your XAML page as shown in the following image from Grial RTL fro Xamarin Forms:

Each device involved in the preview can control the language independently, therefore you can set up different devices in different languages and preview in all of them simultaneously.

Localizing your XAML pages involves two aspects:

• Localizing strings within your XAML.
• Localizing your data.

Localizing XAML

Localization in Xamarin Forms is usually done using a markup extension as described here. This markup extension receives as a parameter the key to the string resource to be displayed and is responsible for pulling the string from the appropriate resx file, based on the current language.

Previewing a localized XAML in Gorilla implies identifying the markup extension you use to localize your XAML files + identifying the resx file from where those strings are pulled. Once those two settings are in place, Gorilla will do the rest.

Both of them can be configured through the Gorilla.json by defining the localization property. The following lines illustrate this:

{
  "localization": {
    "markupExtension": {
      "name": "Translate",
      "namespace": "UXDivers.Artina.Shared",
      "assembly": "UXDivers.Artina.Shared",
      "keyPropertyName": "Key"
    },

    "resources": {
      "resourceId": "UXDivers.Artina.Grial.Resx.AppResources",
      "assembly": "UXDivers.Artina.Grial",
      "defaultCulture": "en"
    }
  }
}

Localization is an object with two properties:

• markupExtension is used to identify the localization markup extension by providing the assembly, namespace and class name of the extension.

  • Specifying the name is mandatory, meanwhile the namespace and assembly are optional.
    • So if only the name property is specified, any markup extension with that name will be considered the localization markup extension.
    • If the namespace property is specified, additionally it will check that the clr-namespace of the associated xmlns matches that specified namespace.
    • In the same way, if the assembly property is specified it will check the assembly of the associated xmlns matches the specified assembly.
    • By default, Gorilla assumes that the resx key is specified through the Text property of the markup extension. If a different property is used, its name can be specified using the keyPropertyName.

• resources is used to identify the default resx where the strings resides.

  • The resx is identified by specifying the name of the embedded resource id where the strings are (i.e. resourceId property) and the assembly where the resx is located (i.e. assembly property). The resourceId, as any embedded resource, is formed as follows:

    <Default Namespace of the Container Project>.<Folder Name>.<Name of the File>

In the example above, the default namespace is UXDivers.Artina.Grial, and the resx file name is AppResources and is located within folder Resx. Please notice that resourceId should not include the extension (.resx).

Finally, the property defaultCulture allows to specify the name of the culture in the default resx, if not specified en is assumed.

Localizing Design Time Data

Design time data can be localized by specifying culture specific DesignTimeData.json files, following the same convention used by resxs. For example, in order to specify design time data for English, Spanish, Hebrew from Israel the following files must be defined:

Project
 |_ DesginTimeData.json
 |_ DesginTimeData.es.json
 |_ DesginTimeData.he-IL.json

In the example DesginTimeData.json contains the default design time data and is assumed to be English. DesginTimeData.es.json will be used when Spanish is set and DesginTimeData.he-IL.json when Hebrew is set.

Switching between languages

The easiest way to switch between languages in Gorilla is through the options action sheet that can be triggered by doing a long tap on any part of the screen, as shown in the following animated image:

Please notice that the currently selected language is not displayed as an option in the action sheet.