Preparing the application for different languages

How-to Discussions
1

Is it possible to develop applications with fuse so that they can be published in the stores in different languages? If possible, how should we carry out?

Regards.

2

Start by reading about Localization here:

https://www.fusetools.com/learn/fuse#global-resources

3

Thank you. I had overlooked this heading.

4

Hello, I followed the steps under ‘Localization’, but I get an error.

I have writen:

    <Match Value="{language}">
        <Case String="EN_EN">
                <string ux:Key="TituloApp" ux:Value="Título - Inglés" />
        </Case>
        <Case String="ES_ES">
                <string ux:Key="TituloApp" ux:Value="Título - Español" />
        </Case>
    </Match>

… but I get the following error:

“string doesn’t fit here. 'Case does not have any content properties that accept ‘string’.”

It’s wrong?

5

It appears to be a bug in the documentation. That is very unfortunate. You can however wrap the properties in a Panel. It will not look good with only one, but will be better when you have more properties.

        <Match Value="{language}">
          <Case String="EN_EN">
              <Panel>
              <string ux:Key="TituloApp" ux:Value="Título - Inglés" />
            </Panel>
          </Case>
          <Case String="ES_ES">
              <Panel>
              <string ux:Key="TituloApp" ux:Value="Título - Español" />
            </Panel>
          </Case>
        </Match>
6

Actually, Bjørn-Olav, that will not help. The keys will then only apply inside that panel.

Unfortuntately, there is currently no way of setting resources conditionally through UX markup.

However, you can make a ux:Class for your entire view, and use a Match/Case to instantiate it with the right keys, as above.

I’m adding a ticket to investigate whether we can support setting resources inside triggers.

7

Hi Anders,

Would it be possible for you to please post an example of what you mean? Also where would you define the apps supported languages?

Appologies I am very new to Fuse and need to understand how localization works in Fuse’s current form.

8

Thanks Anders and Kristian for putting together an example. I have posted the example you guys created below

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var languages = ["norwegian","english","spanish"];
        var language = Observable("english");

        var l = 0;
        function toggleLanguage(){
            l++;
            if (l >= languages.length)
                l = 0;
            language.value = languages[l];
        }

        module.exports = {
            language: language,
            toggleLanguage:toggleLanguage
        };
    </JavaScript>

    <Panel>
        <StateGroup Active="{language}">
            <State Name="norwegian">
                <ResourceString Key="hello" Value="hei"/>
            </State>
            <State Name="english">
                <ResourceString Key="hello" Value="hello"/>
            </State>
            <State Name="spanish">
                <ResourceString Key="hello" Value="hola"/>
            </State>
        </StateGroup>

        <StackPanel Alignment="Center">
            <Panel Alignment="Center">
                <Text Value="{Resource hello}"/>
            </Panel>
            <Button Text="Change language">
                <Clicked>
                    <Callback Handler="{toggleLanguage}" />
                </Clicked>
            </Button>
        </StackPanel>
    </Panel>
</App>