How To Develop Internationalization (i18n) Application using Caph

Published 2014-10-28 | (Compatible with SDK 5.1 and 2014 models)

Tutorial on How To Develop Internationalization (i18n) Application using Caph

Contents

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 :