展现层：介绍和分析应用程序的展示层的设计现假设网站支持两种语言：英文和中文，当然用户可以根据自己的需要增加对其他的语言的支持，原理都是一样的，只需增加相应的 bundle 资源文件即可。先用一个注册页面来作为例子来为大家演示。
当用英文的浏览器打开注册页面时界面如下：
图 1. 英文注册页面例图 当用中文的浏览器打开此页面时页面字段转换为中文，界面如下：
图 2. 中文注册例图 当用户输入的信息有误而直接点击“Submit/提交”按钮时，网页就会给出相应的错误提示信息，例如用户两次输入的密码不一致并且忘记了填写 email：
图 3. Dojo 英文错误提示界面例图 图 4. Dojo 中文错误提示界面例图 国际化设计：展示如何实现应用程序界面国际化设计的实现
现在详细讲解如何使用 Dojo 来实现国际化。
定义 resouce bundle 文件
Dojo 主要是使用插件来加载 bundle 资源文件，插件可以检查到用户所用的浏览器语言，通过语言种类来返回最适合的 buddle 资源来进行翻译：
清单 1.Dojo 引用 bundle 资源的定义代码1
2
3
| require(["dojo/i18n!myApp/nls/myResources"], function(myResources){
// myResources will contain the appopriate strings
});
|
本地化 bundle 资源文件的内容就是一个简单的 JSON 对象，但是 root 文件(实际上它就是 myApp/nls/myResources.js 的内容)包含了默认的翻译信息和可被本地语言支持的其他信息。例如文件/myApp/nls/ myResources.js：
清单 2.Dojo 引用 bundle 资源的定义代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| define({root:
({
userName:'User Name',
password:'Password',
confirmPassword:'Confirm Password',
firstName:'FirstName',
lastName:'LastName',
email:'Email',
address:'Address',
zip:'Zip Code',
tel:'Telphone',
register:'Register your account',
submit:'Submit',
reset:'Reset',
resetMsg: 'Press OK to reset widget values!',
validMsg:'Form is valid, press OK to submit',
inValidMsg:'Please input values.',
emptyEmail:'Email is empty.',
passwordNotEqual:'Passwords do not match. Please re-enter identical passwords.'
}),
'zh-cn': true /* must set the value to:"true" if you want to use this language. */
});
|
上面的最后一行'zh-cn': true,表示可以支持中文，如果想支持某种语言就要把它加入到其中，否则 Dojo 不会去找相应的资源文件来进行翻译的。对应的资源文件只要把 root 属性去掉就可以了，文件要放到/myApp/nls/zh-cn 文件夹下，文件名同样为 myResources.js：
清单 3.Dojo 引用 bundle 资源的定义(中文) 代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| define(
({
userName:'用户名',
password:'密码',
confirmPassword:'确认密码',
firstName:'名字',
lastName:'姓氏',
email:'Email',
address:'地址',
zip:'邮编',
tel:'电话',
register:'注册你的账号 ',
submit:'提交',
reset:'重置',
resetMsg: '点击确定按钮重置控件内容！',
validMsg:'表格内容正确, 点击确定按钮提交',
inValidMsg:'请填写信息',
emptyEmail:'Email 为空.',
passwordNotEqual:'两次输入的密码不一致，请输入一致的密码。'
})
);
|
调用 resource bundle 文件
因为资源文件都放到同一个文件夹中，所以在调用它们之前先要把他们定义到 Dojo 的可加载模块之中：
清单 4.Dojo 加载自定义模块代码1
2
3
4
5
| <script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo-release-1.7.1/dojo/dojo.js'></script>
<script>
dojo.registerModulePath("myApp", "/js/myApp");
</script>
|
dojoConfig 的参数有很多，下面先介绍常用的两个：
parseOnLoad：在页面加载完成以后，是否启用 Dojo 的解析模块对页面中的 Dojo 标签属性(Dojo 标签属性是指由 Dojo 定义的一些标记，这些标记只有在被处理以后，才能为浏览器识别执行)进行解析。默认为 false。
isDebug：默认为 false。开启关闭调试。
此例中的资源文件都放在"/js/myApp”中，使用 dojo.registerModulePath 方法来加装，并为其取一个别名: myApp。
下面就是怎样调用这个模块里面的资源文件，并用其来翻译页面上的文字内容：
清单 5.引入自定义资源文件代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
| require(["dojo/ready","dojo/i18n!myApp/nls/myResources"], function(ready,res){
ready(function(){
// myResources will contain the appopriate strings
var userName=res.userName;
resetMsg=res.resetMsg;
validMsg=res.validMsg;
inValidMsg=res.inValidMsg;
submit=res.submit;
reset=res.reset;
dojo.byId("forName").innerHTML= userName;
dojo.byId("submit").innerHTML= submit;
dojo.byId("reset").innerHTML= reset;
});
});
|
“dojo/ready”指在页面加装完毕时执行，在页面加装完毕后执行 ready(function(){})中的代码：取资源文件的内容并改变页面元素的值。 |
