How To Develop Internationalization (i18n) Application using Caph
Tutorial on How To Develop Internationalization (i18n) Application using Caph
Overview
Internationalization is the process of planning an application so that it can be adapted to various languages and regions without engineering changes. Caph framework supports language resource and direction in order to make easy to use internationalization.
The language resource sets corresponding language string array (JSON Format) depending on the setting. Language resource helps to easily use language string array in application.
The direction is the text (or item of widget) which is writing direction. The default direction is LTR (left-to-right) and RTL (right-to-left) depending on setting.
The term internationalization is abbreviated as i18n, National Language Support is abbreviated as nls. In this document i18n and nls are used which represents term.
Prerequisites
To create a Caph Application using i18n you should include caph.wui dependencies and app source files in your application by putting the following code in the <head>and <body> sections of index.html, as follows :
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<tltle>Develop Internationalization(i18n) Application using Caph</title>
<!-- load caph-level1-unified.min.js -->
<script src="$CAPH/1.0.0/caph-level1-unified.min.js"></script>
<link href="$CAPH/1.0.0/caph.css" rel="stylesheet" type="text/stylesheet">
<!-- load the app -->
<script src="i18n.js"></script>
</head>
<body onload="app.run();">
</body>
|
You should create a folder named as nls and create two files inside the nls folder. For example follows below the code file.
Filename is en.json.
1 2 3 4 5 |
{
"greeting" : {
"hello" : "hello"
}
}
|
Filename is ko.json.
1 2 3 4 5 |
{
"greeting" : {
"hello" : "안녕"
}
}
|
Source files mentioned above are explained in the following table.
File | Description |
---|---|
caph-level1-unified.min.js | It includes all kinds of basic widget for UI which will be used. It also includes external libraries. |
caph.css | The class style of caph.wui. |
i18n.js | The file created by you includes code in the i18n. |
en.json, ko.json | These are localizing language resource files. |
Environment
In order to use Samsung Smart TV SDK and Caph to run your applications, you might need a text editor to create files that comprise HTML, JavaScript and CSS files for your application.Samsung Smart TV is required to verify if your application running well, but you can also use the emulator provided with the SDK to debug and test the applications before uploading them on to the TV device.
Source Files
Note
The files needed for the sample application are click here.
How to Develop
- Case 1-1)
- Get language resources for the currently selected language and gets the value of greeting.hello.In this case, language resource is ko.json file. Execution result is at the top-left in result screenshot.
- Case 1-2)
- Get language resource depending on argument value (ko) and gets the value of greeting.hello. In this case, language resource is ko.json file. Execution result is at the top-center in result screenshot.
- Case 1-3)
- If "ko"has been set to RTL support, when the current language is "en", RTL should not be applied. Get language resource depending on argument value (en) and gets the value of greeting.hello. In this case, language resource is en.json file. Execution result is at the top-right in result screenshot.
- Case 2-1)
- If 'ko' has been set to RTL support and the current language is 'en', RTL should not be applicable.As a result, characters of input box widget are from left to right aligned.Execution result is at the bottom-left in result screenshot.
- Case 2-2)
- If 'ko' has been set to RTL support and the current language is 'ko', RTL should be applicable.As a result, characters of input box widget are from right to left aligned.Execution result is second at the bottom in result screenshot.
- Case 2-3)
- If 'ko' has been set to RTL support and the current language is 'en', RTL should not be applicable. But through setRTL function, RTL has to take effect. As a result, characters of input box widget are from right to left aligned. Execution result is third at the bottom in result screenshot.
- Case 2-4)
- If 'ko' has been set to RTL support and the current language is 'en', RTL should not be applicable. But through setRTL function, if RTL has not been set. As a result, characters of input box widget are from left to right aligned. Execution result is at bottom-right in result screenshot.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
/**
* i18n sample
*/
var app = app || {};
app.run = function() {
caph._setBasePath('$CAPH');
app.handleLoad();
/********************************************
Case : Language Resource
********************************************/
caph.config.i18n.setThisLanguage('ko');
caph.config.i18n.setNls(['en', 'ko']);
var UIContext = caph.wui.widget.UIContext;
var Label = caph.wui.widget.Label;
var uicontext = new UIContext();
var opt = {
'disableHightlight' : true,
'frame' : { 'width' : 275, 'height' : '50'}
};
// Case 1-1
function testA() {
var msg = caph.i18n.language.getMessage();
return msg.greeting.hello;
}
var labelA = new Label(opt);
labelA.setCenterPosition(200, 150, 0);
labelA.setText("Case 1-1)Result : " +testA());
labelA.render(uicontext);
// Case 1-2
function testB() {
var msg = caph.i18n.language.getMessage('ko');
return msg.greeting.hello;
}
var labelB = new Label(opt);
labelB.setCenterPosition(500, 150, 0);
labelB.setText("Case 1-2)Result : " +testB());
labelB.render(uicontext);
// Case 1-3
function testC() {
var msg = caph.i18n.language.getMessage('en');
return msg.greeting.hello;
}
var labelC = new Label(opt);
labelC.setCenterPosition(800, 150, 0);
labelC.setText("Case 1-3)Result : " +testC());
labelC.render(uicontext);
/********************************************
Case : Language Resource
********************************************/
var InputBox = caph.wui.widget.InputBox;
caph.config.i18n.setDirRTL(['ko']);
// Case 2-1
caph.config.i18n.setThisLanguage('en');
var uicontextA = new UIContext();
var optionsA = {
'frame' : { 'width' : 225, 'height' : 50 },
'text' : { 'type' : 'text', 'data' : 'Case 2-1) RTL Inputbox' },
'topleft-position' : { x : 100, y : 300, z : 0 }
};
var uicontextA = new InputBox(optionsA);
inputboxA.render(uicontextA);
// Case 2-2
caph.config.i18n.setThisLanguage('ko');
var uicontextB = new UIContext();
var optionsB = {
'frame' : { 'width' : 225, 'height' : 50 },
'text' : { 'type' : 'text', 'data' : 'Case 2-2) RTL Inputbox' },
'topleft-position' : { x : 100, y : 300, z : 0 }
};
var uicontextB = new InputBox(optionsB);
inputboxB.render(uicontextB);
// Case 2-3
caph.config.i18n.setThisLanguage('en');
var uicontextC = new UIContext();
uicontextC.setRTL(true);
var optionsC = {
'frame' : { 'width' : 225, 'height' : 50 },
'text' : { 'type' : 'text', 'data' : 'Case 2-3) RTL Inputbox' },
'topleft-position' : { x : 600, y : 300, z : 0 }
};
var uicontextC = new InputBox(optionsC);
inputboxC.render(uicontextC);
// Case 2-4
caph.config.i18n.setThisLanguage('ko');
var uicontextD = new UIContext();
uicontextD.setRTL(true);
var optionsD = {
'frame' : { 'width' : 225, 'height' : 50 },
'text' : { 'type' : 'text', 'data' : 'Case 2-4) RTL Inputbox' },
'topleft-position' : { x : 850, y : 300, z : 0 }
};
var uicontextD = new InputBox(optionsD);
inputboxD.render(uicontextD);
}
app.handleLoad = function () {
if(window.curWidget) {
window.curWidget.setPreference('ready', 'true');
}
};
|
The screenshots of this example look like as below :
