在 SAPUI5 中灌危，通過(guò)兩種方法來(lái)實(shí)現(xiàn)多語(yǔ)言卤妒，一是 SAPUI5 提供 Resource Model驯击，Resource Model 讀取資源包 (Resource Bundle) 并與 View 中的控件綁定硝清。第二種方法是使用 jQuery.sap.resources 相關(guān)的 API 讀取資源包。兩種方法都需要資源包文件并且在配置中設(shè)置脚囊。
先介紹兩個(gè)知識(shí)點(diǎn)：語(yǔ)言代碼和資源包文件龟糕。
語(yǔ)言代碼
OpenUI5 對(duì)語(yǔ)言使用字符串標(biāo)識(shí)，遵循 BCP-47 標(biāo)準(zhǔn)悔耘。比如 en 表示英語(yǔ)讲岁，en-US 表示美國(guó)英語(yǔ)。zh-Hans 表示中文簡(jiǎn)體衬以，zh-Hant 表示中文繁體缓艳。
SAP ABAP 使用的是另外一套專門的編碼，比如 ZH 表示中文簡(jiǎn)體看峻，ZF 表示中文繁體阶淘。OpenUI5 能識(shí)別 ABAP 的編碼并轉(zhuǎn)換成 BCP-47 編碼。
OpenUI5 對(duì)頁(yè)面的顯示互妓，有一個(gè) 當(dāng)前語(yǔ)言( Current Language ) 的概念溪窒，按照當(dāng)前語(yǔ)言，讀取相應(yīng)的資源包文件冯勉，按當(dāng)前語(yǔ)言顯示澈蚌。那么，當(dāng)前語(yǔ)言如何確定呢灼狰？OpenUI5 按照如下順序順序(從高到低)宛瞄，如果都沒(méi)有找到，最后讀取通用設(shè)置（比如 i18n.properties)交胚。
- URL中的 locale 參數(shù)（即在 url 后面加上
?sap-ui-language=xx) - 應(yīng)用程序代碼的 locale 設(shè)置份汗，比如：
sap.ui.getCore().getConfiguration().applySettings({
language: 'de',
calendarType: sap.ui.core.CalendarType.Gregorian,
formatSettings: {
legacyDateFormat: '1',
legacyTimeFormat: '1',
legacyNumberFormat: '1'
}
});
- Android 平臺(tái)的用戶代理字符串設(shè)置
- 瀏覽器的一般語(yǔ)言設(shè)置，可以用
window.navigator.language查看 - 瀏覽器中用戶語(yǔ)言配置蝴簇。這個(gè)與瀏覽器相關(guān)杯活，比如 IE 通過(guò)
window.navigator.userLanguage查看。 - 瀏覽器語(yǔ)言配置军熏。這個(gè)業(yè)余瀏覽器相關(guān)轩猩，比如 IE 通過(guò)
window.navigator.browserLanguage查看 - OpenUI5中硬編碼，默認(rèn)為 en
資源包文件
資源包文件就是 Java 的屬性文件( Properties 文件)荡澎。文件中包含與語(yǔ)言相關(guān)的文本均践。資源包文件的特征：
- 文件的擴(kuò)展名總是
.properties - 文件名包括固定部分和語(yǔ)言相關(guān)部分。比如在 OpenUI5 中摩幔，大家習(xí)慣將 Resource Bundle 的文件名叫做 i18n（來(lái)源于 internationalization 這個(gè)單詞彤委，取首位兩個(gè)字母，中間字母數(shù)為18)或衡。那么 i18n.properties 是默認(rèn)的文件（如果沒(méi)有其他文件焦影，就用這個(gè)文件作為默認(rèn)設(shè)置）车遂，i18n_zh_CN.properties 是中文簡(jiǎn)體的資源文件，依此類推斯辰。
- 資源包文件為扁平結(jié)構(gòu)舶担，不能嵌套。每一行要么是 key-value pair 彬呻，要么是
#開(kāi)頭的注釋衣陶。也可以可以空行。key-value pair 沒(méi)有引號(hào)闸氮。后面有資源包文件的例子剪况。 - 如果 Properties 文件的文本為 Unicode 字符，文件使用16進(jìn)制的編碼來(lái)存儲(chǔ)蒲跨，而不是明文译断。這樣對(duì)開(kāi)發(fā)人員來(lái)說(shuō)，友好性較差或悲。
Resource Model 及數(shù)據(jù)綁定
我們繼續(xù)對(duì)前面顯示供應(yīng)商 Master-detail 的程序進(jìn)行重構(gòu)孙咪，增加程序多語(yǔ)言的功能。Eclipse 的項(xiàng)目文件結(jié)構(gòu)如下：
使用 Resource Model 綁定數(shù)據(jù)需要三步：
- 添加資源包文件隆箩，將不同的語(yǔ)言放在不同的資源包文件中该贾。本示例給出兩個(gè)資源包文件：
- i18n.properties（默認(rèn))
- i18n_zh_CN.properties羔杨。(中文簡(jiǎn)體)
i18n.properties 文件的內(nèi)容：
#-------------------------------------
# In master page
#-------------------------------------
# master page title
masterTitle=Supplier Overview
# Count of supplier
supplierCount=Supplier count
id=ID
name=Supplier Name
#-------------------------------------
# In detail page
#-------------------------------------
# detail page title
detailTitle=Supplier detail
i18n_zh_CN.properties:
#-------------------------------------
# In master page
#-------------------------------------
# master page title: Supplier Overview
masterTitle=\u4F9B\u5E94\u5546\u6982\u89C8
# Count of supplier
supplierCount=\u4F9B\u5E94\u5546\u6570\u91CF
id=ID
name=\u4F9B\u5E94\u5546\u540D\u79F0
#-------------------------------------
# In detail page
#-------------------------------------
# detail page title: Supplier Detail
detailTitle=\u4F9B\u5E94\u5546\u660E\u7EC6
- 在 Component.js 文件中捌臊，創(chuàng)建 Resource model 的實(shí)例 。Component.js 的完整代碼如下：
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/model/resource/ResourceModel"
],
function(UIComponent, JSONModel, ResourceModel){
return UIComponent.extend("webapp.Component", {
// meta-data
metadata: {
"rootView": "webapp.view.App",
"config": {
"serviceUrl": "service/data.json",
"i18nBundle": "webapp.i18n.i18n"
}
},
// initialization
init: function(){
UIComponent.prototype.init.apply(this, arguments);
var mConfig = this.getMetadata().getConfig();
// resource bundle
var oResourceModel = new ResourceModel({
bundleName: mConfig.i18nBundle
});
this.setModel(oResourceModel, "i18n");
// application data
var oModel = new JSONModel(mConfig.serviceUrl);
this.setModel(oModel);
},
createContent: function() {
// root view
var oRootView = UIComponent.prototype.createContent.apply(this, arguments);
oApp = oRootView.byId("app");
return oRootView;
}
});
}
);
和前一篇的代碼相比兜材，代碼有如下變更：
- 添加對(duì)
sap.ui.model.resource.ResourceModel的依賴：
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/model/resource/ResourceModel"
], ...
- 在 metadata 配置中理澎，指定 i18n 文件的位置為
app root->webapp->i18n。最后一個(gè) i18n 表示文件名曙寡。文件的擴(kuò)展名總是 .properties糠爬。
metadata: {
"rootView": "webapp.view.App",
"config": {
"serviceUrl": "service/data.json",
"i18nBundle": "webapp.i18n.i18n"
}
- 實(shí)例化 Resource Model
// initialization
init: function(){
UIComponent.prototype.init.apply(this, arguments);
var mConfig = this.getMetadata().getConfig();
// resource bundle
var oResourceModel = new ResourceModel({
bundleName: mConfig.i18nBundle
});
this.setModel(oResourceModel, "i18n");
// application data
var oModel = new JSONModel(mConfig.serviceUrl);
this.setModel(oModel);
},
讀取配置 config->i18nBundle ，然后使用 setModel() 方法举庶，設(shè)置 Component 的 Model 為 ResourceModel 执隧，并且將其命名為i18n。
3）在 View 中參照 Resource Model 中定義的 key户侥。以 Master View 為例：
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="webapp.controller.Master"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="{i18n>masterTitle}">
<content>
<Table items="{/Suppliers}">
<headerToolbar>
<Toolbar>
<Label text="{i18n>supplierCount}: {/CountOfSuppliers}" />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<header><Text text="{i18n>id}" /> </header>
</Column>
<Column>
<header><Text text="{i18n>name}" /> </header>
</Column>
</columns>
<items>
<ColumnListItem type="Navigation" press="onListPress">
<cells>
<ObjectIdentifier text="{ID}" />
<ObjectIdentifier text="{Name}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
<footer>
<Toolbar>
<Button text="language information" press="onBtnPress"/>
</Toolbar>
</footer>
</Page>
</core:View>
Master頁(yè)面標(biāo)題镀琉，之前是硬編碼，現(xiàn)在變?yōu)椋?code>Page title="{i18n>masterTitle}"蕊唐。其它的控件屋摔，屬性設(shè)置相同。
detail view（Detail.view.xml)：
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="webapp.controller.Detail"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="{i18n>detailTitle}" showNavButton="true" navButtonPress="onNavPress">
<content>
<ObjectHeader title="{Name}" number="ID: {ID}">
<ObjectAttribute text="{Address/Street}, {Address/City}"/>
</ObjectHeader>
</content>
</Page>
</core:View>
啟動(dòng)程序替梨，界面和上篇相同钓试。但我們可在 url 后面添加?sap-ui-language=XXX装黑，實(shí)現(xiàn)語(yǔ)言的切換。比如：?sap-ui-language=en切換為英語(yǔ)：
使用 jQuery.sap.resources
如果要在代碼中直接使用資源包的文本弓熏，OpenUI5 提供了 jQuery.sap.resources 方法恋谭。比如我們需要在頁(yè)面中根據(jù)不同的語(yǔ)言，顯示不同的提示消息挽鞠。接下來(lái)我們?cè)?Master View 中添加一個(gè)按鈕( sap.m.Button )箕别，當(dāng)點(diǎn)擊的時(shí)候讀取資源包文件的 msgCurrLanguage ，然后 alert 這個(gè)消息給用戶滞谢。
- 先在 i18n.properties 文件中添加 key-value：
msgCurrLanguage=Current Language is {0}
在 i18n_zh_CN.properties 中添加 msgCurrLanguage 的中文顯示：
msgCurrLanguage=\u5F53\u524D\u8BED\u8A00\u662F {0}
- 在 Master view 的
Page中添加Button：
<footer>
<Toolbar>
<Button text="{i18n>languageTitle}" press="onLanButtonPress" />
</Toolbar>
</footer>
Master View 的完整代碼：
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="webapp.controller.Master"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page id="master" title="{i18n>masterTitle}">
<content>
<Table class="sapUiResponsiveMargin" width="auto" items="{/Suppliers}">
<!-- Table的細(xì)節(jié)省略串稀，請(qǐng)參考之前代碼-->
</Table>
</content>
<footer>
<Toolbar>
<Button text="{i18n>languageTitle}" press="onLanButtonPress" />
</Toolbar>
</footer>
</Page>
</core:View>
3）在 Master controller 中添加 event handler: onLanButtonPress:
onLanButtonPress: function(oEvent){
// 添加依賴包
jQuery.sap.require("jquery.sap.resources");
var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oBundle = jQuery.sap.resources({
url: "i18n/i18n.properties",
locale: sLocale
})
var sMessage = oBundle.getText("msgCurrLanguage", [sLocale]);
alert(oBundle.getText("msgCurrLanguage", [sLocale]));
}
代碼說(shuō)明：
sap.ui.getCore().getConfiguration().getLanguage()獲得當(dāng)前語(yǔ)言。jQuery.sap.resources(...)根據(jù)指定的 URL 和 Locale狮杨，創(chuàng)建一個(gè)新的資源包實(shí)例（Creates and returns a new instance of jQuery.sap.util.ResourceBundle using the given URL and locale to determine what to load.）母截。getText()根據(jù)資源包文件的 key，獲取與語(yǔ)言相關(guān)的 value橄教。
界面效果(Edge 瀏覽器)清寇，當(dāng)在中文環(huán)境中，顯示:
當(dāng)在英文環(huán)境中护蝶，顯示：
