B4J Tutorial [BANanoVuetifyAD3] Creating Multi-Language WebApps

Hi there...

With this piece of code...

Code: Copy
vuetify.AddTranslation("en", "de", "hello", "Hello {name}!", "Guten Tag, {name}!")
    vuetify.AddTranslation("en", "de", "welcome", "Welcome!", "Willkommen!")
    vuetify.AddTranslation("en", "de", "yes-button", "Yes", "Ja")
    vuetify.AddTranslation("en", "de", "no-button", "No", "Nein")

One is able to experience this on the webapps.

Internationalization.gif


So what happened? We have added i18n on BVAD3 and with the language of choice selected, we change the locale.

On the first paragraph caption property VLabel, we wrote..

Code: Copy
{{ $t('message.hello', { name: 'BANanoVuetifyAD3'}) }}

The welcome message caption is

Code: Copy
{{ $t('message.welcome') }}

The Yes button label was set to

Code: Copy
{{ $t('message.yes-button') }}

and the No button label set to

Code: Copy
{{ $t('message.no-button') }}

We have a combo to select the language of choice.

We just put a VAutoComplete on a form and set these settings..

1650741798025.png


Then trapped the change event in the combobox to change the locale when we need to.

Code: Copy
Private Sub cboLanguage_Change (item As Object)
    vuetify.SetLocale(item)
End Sub

This then changes our UI language to what locate we have chosen.

#Happy BANanoVuetifyAD3 coding.

Perhaps soon, you can just load the translations from an external json file.
 

Attachments

Back
Top