How to Localize a Component
Description
There are several approaches available for localizing an application in Alpha Anywhere to support multiple languages.
Discussion
Alpha Anywhere includes several features to build applications in multiple languages. Applications can be translated on the server using language tags or on the client using JavaScript.
Language Tags
Language Tags (<a5:r> and </a5:r>) are special HTML tags placed around text in an application to provide multiple languages. The text contained in the Language tags is replaced by Alpha Anywhere prior to downloading the component from the server.
<a5:r>First Name</a5:r>
The text within the language tags is the key value used to look up what text to insert. The translations are built using the Language definitions settings. You can add languages and define translations in the Language definitions settings. It includes tools for extracting language tag placeholders from the component, setting translation defaults, and creating new translations.
First Name=FirstNameInDefault
Extracting Placeholders from a Component
Creating Default Translations
Adding a Language
Adding a Translation
Adding New Placeholders
Define a new language and set the value to:
First Name=FirstNameInFrench
Active language defines what language to use. The value of Active language maps to the defined languages in the Language Definitions dialog.
The language definition is stored with the component. For applications that use multiple components, it is easier to define all translations in a single location, such as in a database. Text Dictionary Tags can be used instead of Language Tags to provide translations defined in a database.
Text Dictionary Tags
The Text Dictionary is defined per project. Translations are stored in a database. The connection string defines where the translations are located. If no table exists, Alpha Anywhere will create the tables required to store Text Dictionary translations.
<a5:t>Last Name</a5:t>
Date Formats
Date formats around the world vary. Though the variety of date formats is not nearly as numerous as the number of active written languages, you'll need to consider whether or not the default client-side date format .
Dates also may need __protected__clientSideDateFormat.
Setting the Text Direction
Some languages, such as Arabic and Hebrew, are read right-to-left. The text alignment for controls - text controls, labels, etc - needs to be changed to align text on the right of the controls to support these languages. The direction for the entire application can be set with CSS using the following JavaScript:
if ({dialog.object}._activeLanguage == 'Hebrew') {
document.body.style.direction='rtl';
} else {
document.body.style.direction='ltr';
}This JavaScript can be placed in the UX Component's [onRenderComplete Event] to set the the text direction when the component is rendered.
Supports any HTML markup. Replacement value can be as long as you need.
Client-side JavaScript Translations
For mobile applications, the Language and Text Dictionary tags may not work to localize an application due to the fact that they are resolved on the server. In an offline environment, the server is not available. Therefore, Language and Text Dictionary tags cannot be translated until the user has a connection and an Ajax Callback is made to translate the app.
In this situation, JavaScript can be used to provide offline localization. See Multi-Language Support in a Cordova Mobile App to learn how this is done.