AppML Multi-language Messages
AppML supports multi-language pages by loading a separate messages file per locale and resolving the same {{key}} placeholders in the HTML against whichever file is currently selected.
Separating Text From Markup
Instead of hardcoding visible text into a page, an author writes placeholders such as {{welcome}} or {{add_to_cart}}. A small JSON file supplies the actual strings for those keys. Switching the page's language is then a matter of loading a different messages file - the HTML, the placeholders, and the rest of the page structure stay exactly the same.
- Create one JSON file per supported language, using the same set of keys in each
- Store each language's translated text as the value for its matching key
- Point the page at a default language file when it first loads
- Let the user choose a language, then reload the page's data against the corresponding file
Two message files (English and French)
// messages-en.json
{
"welcome": "Welcome to our store",
"add_to_cart": "Add to cart",
"checkout": "Checkout"
}
// messages-fr.json
{
"welcome": "Bienvenue dans notre magasin",
"add_to_cart": "Ajouter au panier",
"checkout": "Passer la commande"
}Because both files use identical keys, the HTML underneath never has to change. The page simply asks for {{welcome}} and gets back whichever language's value the currently loaded file provides.
Selecting a language file
<body appml-data="messages-en.json">
<h1>{{welcome}}</h1>
<button>{{add_to_cart}}</button>
</body>
<!-- Switching to French only requires changing which file is loaded: -->
<body appml-data="messages-fr.json">
<h1>{{welcome}}</h1>
<button>{{add_to_cart}}</button>
</body>Exercise: AppML Messages
What are AppML messages typically used for?
