ZPT-JS reference - Attributes

Syntax

tr, trNumber and trDate syntax:

tr_expressions   :: = ('tr:' | 'trNumber:' | 'trDate:') expression (tr_argument_list)
tr_argument_list :: = tr_argument_item [';' tr_argument_item]*
tr_argument_item :: = ICU_key ICU_value
ICU_key          :: = Name
ICU_value        :: = expression

trCurrency syntax:

tr_currency_expressions :: = 'trCurrency:' currency expression (tr_argument_list)
currency                :: = expression

Description

ZPT-JS provide some expressions to make it easy i18n and l18n. The complete list is:

tr. Translate texts.
trNumber. Format umeric values.
trDate. Format date and time values.
trCurrency. Format currency values.

I18n and L10n support is implemented using standards Intl and ICU.

Differences with ZPT

This statement does not exist in ZPT.

Examples

Some necessary javascript code:

import { zpt } from './zpt-esm.js';

/* I18n maps init */
var msg = {
    en : {},
    es : {}
};

/* English i18n messages */
msg.en[ '/CONF/' ] = {
    language: 'en',
    locale: 'en-US'
};
msg.en[ 'Hello world!' ] = 'Hello world!';
msg.en[ 'Results msg' ] = '{GENDER, select, male{He} female{She} other{They} }' +
    ' found ' +
    '{RES, plural, =0{no results} one{1 result} other{# results} }';
msg.en[ 'Oh, noooo!' ] = 'Error found!';

/* Spanish i18n messages */
msg.es[ '/CONF/' ] = {
    language: 'es',
    locale: 'es-ES'
};
msg.es[ 'Hello world!' ] = '¡Hola mundo!';
msg.es[ 'Results msg' ] = '{ GENDER, select, male{Él} female{Ella} other{Ellos} }' +
    ' ' +
    '{ RES, plural, =0{no } other{} }' +
    '{ GENDER, select, male{ha} female{ha} other{han} }' +
    ' encontrado ' +
    '{ RES, plural, =0{ningún resultado} one{un único resultado} other{# resultados} }';
msg.es[ 'Oh, noooo!' ] = '¡Error encontrado!';

// Create I18n and I18nBundle instances
var i18nES = new zpt.I18n( 'es', msg[ 'es' ] );
var i18nEN = new zpt.I18n( 'en', msg[ 'en' ] );
var i18nBundle = new zpt.I18nBundle( i18nES, i18nEN );

// Init dictionary
var dictionary = {
    'i18nBundle': i18nBundle,
    fireError: function( ){
        document.getElementById("mydiv").innerHTML='Success'; //assuming "mydiv" is undefined
    },
    date : new Date( Date.UTC( 2018, 11, 20, 3, 0, 0 ) ),
    hello: 'Hello world!'
};

// Parse template
zpt.run({
    root: document.body,
    dictionary: dictionary
});

Translate using a literal:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="tr: 'Hello world!'">Must be ¡Hola mundo!</span>
</div>

Translate using a variable:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="tr: hello">Must be ¡Hola mundo!</span>
</div>

Using parameters:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="tr: 'Results msg' ( GENDER 'male'; RES 0 )">Must be 'Él no ha encontrado ningún resultado'</span>
    <span data-content="tr: 'Results msg' ( GENDER 'male'; RES 1 )">Must be 'Él ha encontrado un único resultado'</span>
    <span data-content="tr: 'Results msg' ( GENDER 'female'; RES 10 )">Must be 'Ella ha encontrado 10 resultados'</span>
    <span data-content="tr: 'Results msg' ( RES 0 )">Must be 'Ellos no han encontrado ningún resultado'</span>
</div>

Working with numbers:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="trNumber: 1355.23">Must be 1.355,23</span>
    <span data-content="trNumber: 1355.23643 ( maximumFractionDigits 3 )">Must be 1.355,236</span>
    <span data-content="trNumber: 1355.23643 ( maximumFractionDigits 3; minimumIntegerDigits 6 )">Must be 001.355,236</span>
</div>

Currencies:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="trCurrency: 'EUR' 1355.23">Must be 1.355,23 €</span>
    <span data-content="trCurrency: 'USD' 1355.23">Must be 1.355,23 $</span>
    <span data-content="trCurrency: 'EUR' 1355.23 ( currencyDisplay 'name' )">Must be 1.355,23 euros</span>
    <span data-content="trCurrency: 'USD' 1355.23 ( currencyDisplay 'name' )">Must be 1.355,23 dólares estadounidenses</span>
</div>

Datetimes:

<div data-language="'es'" data-domain="i18nBundle">
    <span data-content="trDate: date">Must be 20/12/2012</span>
    <span data-content="trDate: ( js: new Date( Date.UTC( 2012, 11, 21, 3, 0, 0 ) ) )">Must be 20/12/2012</span>
    <span data-content="trDate: date ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric' )">Must be jueves, 20 de diciembre de 2012</span>
    <span data-content="trDate: ( js: new Date( Date.UTC( 2012, 11, 21, 3, 0, 0 ) ) ) ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric' )">Must be jueves, 21 de diciembre de 2012</span>
    <span data-content="trDate: date ( hour 'numeric'; minute 'numeric'; second 'numeric' )">Must be 4:00:00</span>
    <span data-content="trDate: date ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric'; hour 'numeric'; minute 'numeric'; second 'numeric' )">Must be jueves, 21 de diciembre de 2012 4:00:00</span>
</div>

Translating errors:

<div data-language="'es'" data-domain="i18nBundle">
    <div data-on-error="tr: 'Oh, noooo!'">
        <span data-content="fireError()">Must fire error and then: ¡Error encontrado!</span>
    </div>
</div>

ZPT-JS reference - I18n expressions

Syntax

Description

Differences with ZPT

Examples