在 HTML 文件内连接各部分 为了连接之前定义的各部分，我们创建了包含此应用程序的 html 文件，如 所示。
清单 4：应用程序的 HTML 文件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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="titleId"></title>
<script type="text/javascript">
var djConfig = { modulePaths: {sampleApp: "../../sample/application"},
parseOnLoad: true,
locale:'en-us'};
</script>
<script type="text/javascript" src="dojoBase/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.string");
dojo.requireLocalization("sampleApp", "greeting");
function init()
{
var nlsStrings = dojo.i18n.getLocalization("sampleApp","greeting");
var greetingString = nlsStrings.GREETING; var personString = nlsStrings.PERSON;
var greetingTemplate = nlsStrings.GREETING_SENTENCE;
var finalGreeting = dojo.string.substitute(greetingTemplate,
{greeting:greetingString,
personTitle:personString});
dojo.byId("helloDiv").innerHTML = finalGreeting;
dojo.byId("titleId").text = finalGreeting;
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<div id="helloDiv"></div>
</body>
</html>
|
此应用程序中最需要注意的一点是两个 Dojo 命令的使用，用它们来提取本地化了的信息。第一个是 dojo.requireLocalization("sampleApp", "greeting")，此调用负责从服务器请求位于所定义的模块 “sampleApp” 之下名为 “greeting” 的资源包。第二个是 var nlsStrings = dojo.i18n.getLocalization("sampleApp","greeting")，此调用负责将所收到的 “greeting” 资源包（位于 “sampleApp” 模块下）转变成 JavaScript 对象以便返回。有了此对象（nlsStrings 对象）之后，就可以引用它的任何字段以便用所需的字符串设置合适的 dom 元素。
利用定制创建的小部件连接各部分并显示内容 通常，如果应用程序的规模比示例应用程序稍微大一些，就可以引入定制创建的小部件。在本节，我们将使用定制创建的小部件重新创建这个示例应用程序。您将看到如何正确地从内容显示小部件分离所有国际化机制。
首先，创建负责处理所有国际化问题的小部件，从 “mixin” 开始，如 所示，它负责所有的本地语言支持（NLS）操作。
清单 5：NLS mixin1
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
| dojo.require("dojo.i18n");
dojo.require("dojo.string");
dojo.requireLocalization("sampleApp", "greeting");
dojo.provide("sampleApp.widget.NlsMixin");
dojo.declare("sampleApp.widget.NlsMixin",null,
{
data: {__initialized: false},
constructor: function()
{
if(!this.data.__initialized)
{
this.data.nlsStrings = dojo.i18n.getLocalization("sampleApp",
"greeting");
this.data.__initialized = true;
}
},
/**
*
* @param {String} key - the name of the key in the translation file
* @param {Object or Array?} substitutes - in cases where the translated
* string is a template for string substitution, this parameter
* holds the values to be used by dojo.string.substitute on that
* template
*/
getString: function(/*String*/ key,
/*Object or Array?*/ substitutes)
{
var str = this.data.nlsStrings[key];
return (substituteValues)?
dojo.string.substitute(str,substitutes):
str;
},
postMixInProperties: function()
{
this.inherited('postMixInProperties', arguments);
this.initializeStrings();
},
initializeStrings: function(){}
}
);
|
这个 mixin 中有三点需要注意：
- 为了减少内存使用，资源对象是静态和单一的。
- 使用这个 mixin 的小部件需要覆盖函数 ‘initializeStrings’，并通过调用 getString 函数填充它。此方法在调用 postMixinProperties 期间被调用，以便所有国际化了的字符串能在呈现这个小部件时可用（换言之，就是在小部件的模板内使用这些字符串）。
- getString 函数接受两个参数。一个参数是资源包中的键。如果所返回的字符串需要由 dojo.string.substitute 进一步处理，那么第二个参数就用来提供替换对象或数组（根据模板在资源包内的定义方式）。
现在，我们需要向您展示如何创建这个简单的欢迎小部件，它应该被置于页面之内以欢迎应用程序的用户。参见 。
清单 6：欢迎小部件的代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| dojo.provide("sampleApp.widget.Greeting");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("sampleApp.widget.NlsMixin");
dojo.declare("sampleApp.widget.Greeting",
[dijit._Widget,dijit._Templated ,sampleApp.widget.NlsMixin],
{
templateString: "<div>${greeting}</div>",
greeting:””,
initializeStrings: function()
{
var greetingString = this.getString("GREETING");
var personString = this.getString("PERSON");
this.greeting = this.getString("GREETING_SENTENCE",
{greeting:greetingString,
personTitle:personString});
}
}
);
|
正如您所见，此模板引用了一个变量，该变量在 initalizeStrings 调用期间获得一个 “real” 值，为了得到正确的国际化内容，initalizeStrings 调用使用了 getString 方法。
现在，所需做的就是在一个 HTML 文件内使用这个小部件来查看国际化了的内容，如 所示。
清单 7：面向 en-au 本地语言环境的欢迎页1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var djConfig = { isDebug: false,
modulePaths:
{ sampleApp: "../../sample/application" },
parseOnLoad: true,
locale:'en-au'
};
</script>
<script type="text/javascript" src="dojoBase/dojo/dojo.js.uncompressed.js"></script>
<script type="text/javascript">
dojo.require("sampleApp.widget.Greeting");
</script>
</head>
<body>
<div dojoType="sampleApp.widget.Greeting" id="helloDiv"></div>
</body>
</html>
|
|
