Globalization of JSA Elements

Add language-specific text strings to your app to globalize JSA elements such as tab labels, toolbar button text, and tooltip content.

To globalize you app, you must create locale-specific properties files for the locales you want to use.

In the manifest.json file, you must configure the resource_bundles block to define the locales and the location of properties files that contains locale-specific text strings your app uses.

Globalization resource bundle properties files for the specified language code are stored in the app's app/static/resources folder. The string elements are displayed in the current JSA user's preferred locale, as defined within the JSA GUI itself.

In the following example, the "Hello World" app includes locale-specific text.

Manifest.json

{ "name":"com.ibm.hellog11n.name", "description":"Application to display QHelloWorld", "version":"1.0.2", "areas": [ { "id":"com.ibm.hellog11n.name", "text":"com.ibm.hellog11n.name", "description":"com.ibm.hellog11n.desc", "url":"index", "required_capabilities":["ADMIN"] } ], "resource_bundles": [ { "locale": "en_US", "bundle": "resources/hello_en_US.properties" }, { "locale": "es", "bundle": "resources/hello_es.properties" }, { "locale": "fr", "bundle": "resources/hello_fr.properties" }, { "locale": "en", "bundle": "resources/hello_en.properties" }, { "locale": "ja", "bundle": "resources/hello_ja.properties" } ] }

Three globalization keys are referenced by the app manifest metadata definition file:

• com.ibm.hellog11n.id

• com.ibm.hellog11n.name

• com.ibm.hellog11n.desc

The resource_bundles block defines locales for standard English, American English, French, and Spanish. The bundle field points to the properties file for each language locale.

Globalization Key Naming Conventions

Use a consistent naming format for any globalization keys that are made available by resources files within your app code. One useful approach is to employ a fully qualified company-app prefix to all your keys. This strategy prevents the replication of existing JSA globalization store keys or keys made available by other apps.

Here's an example:

• com.ibm.myapp.key1=value1

• com.ibm.myapp.key2=value2

Properties Files

The resource_bundles block defines locales for standard English, American English, French, Spanish and Japanese. The bundle field points to the properties file for each language locale.

The properties files are stored in the app/static/resources folder.

The id, text, and description fields in the areas block use the key that is defined in the properties files. The key contains the value that is used for the app's user interface tab name in each language.

Text strings for globalization are stored as key/value pairs in Java format properties files.

Language locale properties file must use the following naming convention: application_<LANG>.properties. For the purposes of this example, four properties files were created.

These properties files are consumed by the main JSA codebase, within a Java virtual machine (JVM). It must adhere to Java processing support for properties files. Currently, Latin-1 font characters, and Unicode characters are supported. Language sets that contain non-Latin-1 font characters must be represented by their Unicode equivalents. Install the Java 7 Java Development Kit (JDK) and use the Java Native-To-ASCII converter (native2ascii) to convert your content.

static/resources/hello_en.properties:

com.ibm.hellog11n.name=Hello World com.ibm.hellog11n..id=Hello_World_G11n com.ibm.hellog11n.desc=A fully globalized Hello World App

static/resources/hello_en_US.properties:

com.ibm.hellog11n.name=Hello World com.ibm.hellog11n.id=Hello_World_G11n com.ibm.hellog11n.desc=A fully globalized Hello World App

static/resources/hello_es.properties:

com.ibm.hellog11n.name=Hola Mundo com.ibm.hellog11n.id=Hello_World_G11n com.ibm.hellog11n.desc=Un totalmente globalizado Hello World App

static/resources/hello_fr.properties:

com.ibm.hellog11n.name=Bonjour Le Monde com.ibm.hellog11n.id=Hello_World_G11n com.ibm.hellog11n.desc=Un App World Bonjour totalement globalisé

static/resources/hello_ja.properties:

com.ibm.hellog11n.name=\u3053\u3093\u306b\u3061\u306f\u4e16\u754c com.ibm.hellog11n.id=Hello_World_G11n com.ibm.hellog11n.desc=\u5b8c\u5168\u306b\u30b0\u30ed\u30fc\u30d0\u30eb\u306aHello World\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3

Your Flask Endpoint/services Code: Views.py

The views.py file defines a flask route, or service endpoint, that uses a Jinja2 template HTML page to build an HTML string that is to be returned from the service endpoint.

__author__ = 'IBM' from flask import render_template, send_from_directory from app import app from qpylib import qpylib @app.route('/') @app.route('/index') def index(): return render_template("index.html", title = "QApp1 : Hello World !")

The Rendered Views: App/templates/index.html

The following Jinja2 template is a simple web page, a static HTML string that is returned by the endpoint. No globalization occurs within your view with the following example.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>{{title}} - Main</title> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div id="pageheader" class="pagebanner"> JSA Application : Hello World !... </div> <div id="contentpane"> Hello! Welcome to the first JSA app served from the AppFramework </div> </body> </html>

• The new tab uses the value in the manifest.json name field as the text value for the tab.

• The tab tooltip the value in the manifest.json description field as the text value for its content.

• Globalization resource files that are bundled with the app are ingested by the JSA globalization store.

• JSA user session preferences for each locale use key look-ups to reflect the language-specific text you want to display.