在 SAPUI5 中，通過兩種方法來實現(xiàn)多語言，一是 SAPUI5 提供 Resource Model，Resource Model 讀取資源包 (Resource Bundle) 并與 View 中的控件綁定。第二種方法是使用 jQuery.sap.resources 相關的 API 讀取資源包。兩種方法都需要資源包文件并且在配置中設置。
先介紹兩個知識點：語言代碼和資源包文件。
語言代碼
OpenUI5 對語言使用字符串標識，遵循 BCP-47 標準。比如 en 表示英語，en-US 表示美國英語。zh-Hans 表示中文簡體，zh-Hant 表示中文繁體。
SAP ABAP 使用的是另外一套專門的編碼，比如 ZH 表示中文簡體，ZF 表示中文繁體。OpenUI5 能識別 ABAP 的編碼并轉換成 BCP-47 編碼。
OpenUI5 對頁面的顯示，有一個 當前語言( Current Language ) 的概念，按照當前語言，讀取相應的資源包文件，按當前語言顯示。那么，當前語言如何確定呢？OpenUI5 按照如下順序順序(從高到低)，如果都沒有找到，最后讀取通用設置（比如 i18n.properties)。
- URL中的 locale 參數(shù)（即在 url 后面加上
?sap-ui-language=xx) - 應用程序代碼的 locale 設置，比如：
sap.ui.getCore().getConfiguration().applySettings({
language: 'de',
calendarType: sap.ui.core.CalendarType.Gregorian,
formatSettings: {
legacyDateFormat: '1',
legacyTimeFormat: '1',
legacyNumberFormat: '1'
}
});
- Android 平臺的用戶代理字符串設置
- 瀏覽器的一般語言設置，可以用
window.navigator.language查看 - 瀏覽器中用戶語言配置。這個與瀏覽器相關，比如 IE 通過
window.navigator.userLanguage查看。 - 瀏覽器語言配置。這個業(yè)余瀏覽器相關，比如 IE 通過
window.navigator.browserLanguage查看 - OpenUI5中硬編碼，默認為 en
資源包文件
資源包文件就是 Java 的屬性文件( Properties 文件)。文件中包含與語言相關的文本。資源包文件的特征：
- 文件的擴展名總是
.properties - 文件名包括固定部分和語言相關部分。比如在 OpenUI5 中，大家習慣將 Resource Bundle 的文件名叫做 i18n（來源于 internationalization 這個單詞，取首位兩個字母，中間字母數(shù)為18)。那么 i18n.properties 是默認的文件（如果沒有其他文件，就用這個文件作為默認設置），i18n_zh_CN.properties 是中文簡體的資源文件，依此類推。
- 資源包文件為扁平結構，不能嵌套。每一行要么是 key-value pair ，要么是
#開頭的注釋。也可以可以空行。key-value pair 沒有引號。后面有資源包文件的例子。 - 如果 Properties 文件的文本為 Unicode 字符，文件使用16進制的編碼來存儲，而不是明文。這樣對開發(fā)人員來說，友好性較差。
Resource Model 及數(shù)據(jù)綁定
我們繼續(xù)對前面顯示供應商 Master-detail 的程序進行重構，增加程序多語言的功能。Eclipse 的項目文件結構如下：
使用 Resource Model 綁定數(shù)據(jù)需要三步：
- 添加資源包文件，將不同的語言放在不同的資源包文件中。本示例給出兩個資源包文件：
- i18n.properties（默認)
- i18n_zh_CN.properties。(中文簡體)
i18n.properties 文件的內容：
#-------------------------------------
# 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 的實例 。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;
}
});
}
);
和前一篇的代碼相比，代碼有如下變更：
- 添加對
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。最后一個 i18n 表示文件名。文件的擴展名總是 .properties。
metadata: {
"rootView": "webapp.view.App",
"config": {
"serviceUrl": "service/data.json",
"i18nBundle": "webapp.i18n.i18n"
}
- 實例化 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() 方法，設置 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頁面標題，之前是硬編碼，現(xiàn)在變?yōu)椋?code>Page title="{i18n>masterTitle}"。其它的控件，屬性設置相同。
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>
啟動程序，界面和上篇相同。但我們可在 url 后面添加?sap-ui-language=XXX，實現(xiàn)語言的切換。比如：?sap-ui-language=en切換為英語：
使用 jQuery.sap.resources
如果要在代碼中直接使用資源包的文本，OpenUI5 提供了 jQuery.sap.resources 方法。比如我們需要在頁面中根據(jù)不同的語言，顯示不同的提示消息。接下來我們在 Master View 中添加一個按鈕( sap.m.Button )，當點擊的時候讀取資源包文件的 msgCurrLanguage ，然后 alert 這個消息給用戶。
- 先在 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的細節(jié)省略，請參考之前代碼-->
</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]));
}
代碼說明：
sap.ui.getCore().getConfiguration().getLanguage()獲得當前語言。jQuery.sap.resources(...)根據(jù)指定的 URL 和 Locale，創(chuàng)建一個新的資源包實例（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，獲取與語言相關的 value。
界面效果(Edge 瀏覽器)，當在中文環(huán)境中，顯示:
當在英文環(huán)境中，顯示：
