zpt

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ZPT-JS reference - Attributes - I18nDomain</title> <script type="module" src="../js/zpt.js"></script> <script type="text/javascript" src="../lib/syntaxHighlighter/lib.js"></script> <link rel="stylesheet" type="text/css" href="../docs.css"> <link rel="stylesheet" type="text/css" href="../lib/syntaxHighlighter/theme.css"> </head> <body> <div data-use-macro="'page@templates.html'"> <div data-fill-slot="'page-header'"> <h1>ZPT-JS reference - I18n expressions</h1> <ul> <li><a href="#syntax">Syntax</a>.</li> <li><a href="#description">Description</a>.</li> <li><a href="#differences">Differences with ZPT</a>.</li> <li><a href="#examples">Examples</a>.</li> </ul> </div> <article data-fill-slot="'article'"> <h2 data-attributes="id 'syntax'">Syntax</h2> <p> <em>tr</em>, <em>trNumber</em> and <em>trDate</em> syntax: </p> <pre class="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 </pre> <p> <em>trCurrency</em> syntax: </p> <pre class="syntax"> tr_currency_expressions :: = 'trCurrency:' currency expression (tr_argument_list) currency :: = expression </pre> <h2 data-attributes="id 'description'">Description</h2> <p> ZPT-JS provide some expressions to make it easy i18n and l18n. The complete list is: </p> <ul> <li><em>tr</em>. Translate texts.</li> <li><em>trNumber</em>. Format umeric values.</li> <li><em>trDate</em>. Format date and time values.</li> <li><em>trCurrency</em>. Format currency values.</li> </ul> <p> I18n and L10n support is implemented using standards <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl</a> and <a href="http://userguide.icu-project.org/formatparse/messages">ICU</a>. </p> <h2 data-attributes="id 'differences'">Differences with ZPT</h2> <p> This statement does not exist in ZPT. </p> <h2 data-attributes="id 'examples'">Examples</h2> <p> Some necessary javascript code: </p> <pre class="brush: js"> 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 }); </pre> <p> Translate using a literal: </p> <pre class="brush: html"> <div data-language="'es'" data-domain="i18nBundle"> <span data-content="tr: 'Hello world!'">Must be ¡Hola mundo!</span> </div> </pre> <p> Translate using a variable: </p> <pre class="brush: html"> <div data-language="'es'" data-domain="i18nBundle"> <span data-content="tr: hello">Must be ¡Hola mundo!</span> </div> </pre> <p> Using parameters: </p> <pre class="brush: html"> <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> </pre> <p> Working with numbers: </p> <pre class="brush: html"> <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> </pre> <p> Currencies: </p> <pre class="brush: html"> <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> </pre> <p> Datetimes: </p> <pre class="brush: html"> <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> </pre> <p> Translating errors: </p> <pre class="brush: html"> <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> </pre> </article> </div> </body> </html>