SWAC - Translator component

Translator component translates page contents with help of language files.
The choosen language is rememberd for the next users visit.

Examples

Example 1: Include translation tools


<div id="translate_example1" swa="Translator FROM ../../data/translation/translatorexample.json"></div>

Dispays the language selection box.

The used translation file contains a single object with translations. Each translation file is for one language and must contain the language code. The path is given as path from the app_root (this is configured in the configuration.js or automatically detected)


[
    {
        "swac_lng": "de",
        "swac_files": ["data/translator/de.json"]
    },
    {
        "swac_lng": "en",
        "swac_filse": ["data/translator/en.json"]
    }
]

Example 2: Translate textblocks

To add a translation to a textblock, simply add the swac_translator attribute to the surrounding element of the block.


<p swac_lang="Example.myTextblock">
    This is my original text. It should be replaced if i choose a
   translation.
</p>

This is my original text. It should be replaced if i choose a translation.

Example 3: Translate placeholders


<input type="text" class="uk-input" placeholder="Example.myPlaceholder">

Example 4: Translate button captions


<input type="submit" class="uk-button" value="Example.myButtonCaption">

Example 5: Link captions


<a href="#top">
    Example.myLinkCaption
</a>

Example.myLinkCaption

Example 6: Translate labels


<label class="uk-form-label" for="from">
    Example.myLabel
</label>

Example.myLabel

Example 7: Choosing language also changes language in component

This example show that the language entries in a component are updated too, when selecting another language.

Example 8: Useing appwide language entries

If you want to use a general translation without need to use a prefix, you can define an app language. This can be used to translate even attribute names.


[
    {
        "swac_lng": "de",
        "swac_files": [
            "data/translator/Example_de.js",
            "data/translator/app_de.js"
        ]
    },
    {
        "swac_lng": "en",
        "swac_files": [
            "data/translator/Example_en.js",
            "data/translator/app_en.js"
        ]
    }
]

Example 9: Language dependend locale formats

Format of numbers and dates can be different from country to country.
This aspect can be held by the language files, too.

{doubleval}

{ts}

{dateval}

{ts}

Mark the content that should be formated by use the swac_lang_format attribute:


<div id="translator_example9" swa="Present FROM exampledata_list">
    <div class="swac_repeatForSet">
        <div swac_lang_format="decimal">{doubleval}</div>
        <div swac_lang_format="datetime">{ts}</div>
        <div swac_lang_format="date">{dateval}</div>
        <div swac_lang_format="time">{ts}</div>
        <div swac_lang_format="day">{ts}</div>
        <hr>
   </div>
</div>

Supported formats are:

Value	Explanation
decimal	Formats the value as decimal value. e.g. 12.4
datetime	Formats the value as datetime value.
date	Formats the value as date value.
time	Formats the value as time value.