SAP UI5学习笔记之（六）多语言设置-i18n

SAP UI5支持多语言功能。i18n就是internationalization，国际化、多语言的意思。为什么叫i18n呢？因为这个单词太长了首字母i和末尾字母n之间有18位，所以为了简单就叫i18n了。

那么它是怎么实现多语言的呢？这个属性文件包含了每个元素的名称和值。

在运行时SAPUI5会读取浏览器的语言设置，对于每种受支持的语言，都会有一个单独的文件，并带有语言环境的后缀，

例如i18n_de.properties是德语属性文件，i18n_en.properties是英语属性文件，i18n_zh.properties是汉语属性文件等。

当用户运行应用程序时，SAPUI5将加载最适合用户环境的语言文件。如果没有找到对应的属性文件，就使用默认属性文件，即i18n.properties。

 

我们用一个例子熟悉一下多语言功能。

不知道大家在做之前例子的时候发现没有，App.view.xml文件中Page标签的title属性写法是title="{i18n>title}"。

 

 

 

这里的i18n是什么呢？就是webappw文件夹的i18n文件夹下的属性文件。按照向导创建的工程会自动生成i18n文件夹和i18n.properties文件。

我们复制i18n.properties粘贴在i18n文件夹上，再重命名为i18n_zh.properties。

然后再修改里面title的属性值为“SAPUI5学习”。

 

 

 运行一下程序就能看到标题部分变成了i18n_zh.properties文件里的内容，说明它自动识别出浏览器是中文，选择加载中文属性文件了。

 

 

F12打开开发者模式刷新页面，在Network里可以看到i18n_zh.properties文件被加载。

 

 

 

多语言设置成功完成。 

为了好看，我把之前的model丰富了一下，画面上表格显示多加了几列，按钮上加了一个icon属性。附上代码：

文件目录：

　　　　

 

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/Fragment"
], function (Controller, JSONModel, Fragment) {
    "use strict";

    return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
 
        onAdd: function () {

            var newName = this.byId("inputName").getValue();
            var newCompany = this.byId("inputCompany").getValue();
            var addModel = new JSONModel({
                "Name": newName,
                "Company": newCompany
            });
            this.getView().setModel(addModel, "addModel");

            var oView = this.getView();
            //如果没有相应Dialog，就调用sap.ui.xmlfragment实例化Fragment
            // create dialog lazily
            if (!this.byId("addDialog")) {
                // load asynchronous XML fragment
                Fragment.load({
                    id: oView.getId(),
                    name: "sap.ui.demo.walkthrough.view.AddDialog",
                    controller: this
                }).then(function (oDialog) {
                    // connect dialog to the root view of this component (models, lifecycle)
                    oView.addDependent(oDialog);
                    oDialog.open();
                });
            } else {
                this.byId("addDialog").open();
            }
        },
        onOkDialog: function () {
            this.byId("addDialog").close();
            this.getView().getModel().getProperty("/People").push({
                                                                "Name": this.getView().getModel("addModel").getProperty("/Name"),
                                                                "Company": this.getView().getModel("addModel").getProperty("/Company")
                                                            });
            this.getView().getModel().refresh();
        },
        onCancelDialog: function () {
            this.byId("addDialog").close();
        }

    });
});

 

title=SAPUI5学习
appTitle=walkthrough
appDescription=App Description

# Dialog Content
dialogOkButtonText=OK
dialogCancelButtonText=CANCEL

 

{"People": [
    {
        "Name":"Jack",
        "Age":"24",
        "Company":"IBM",
        "position":"Development Engineer",
        "Language":"JAVA,JavaScript,PLSQL",
        "WorkYears":"5",
        "Salary":"15000",
        "SalaryUnit":"CNY"
        
    },
    {
        "Name":"Adey",
        "Age":"32",
        "Company":"IBM",
        "position":"System Architect",
        "Language":"JAVA,JavaScript,C,Phython",
        "WorkYears":"10",
        "Salary":"42000",
        "SalaryUnit":"CNY"
        
    },
    {
        "Name":"Jone",
        "Age":"22",
        "Company":"Google",
        "position":"Development Engineer",
        "Language":"Phython",
        "WorkYears":"3",
        "Salary":"11000",
        "SalaryUnit":"CNY"
        
    },
    {
        "Name":"Sammy",
        "Age":"33",
        "Company":"Google",
        "position":"System Architect",
        "Language":"JAVA,PLSQL",
        "WorkYears":"12",
        "Salary":"50000",
        "SalaryUnit":"CNY"
        
    },
    {
        "Name":"Bob",
        "Age":"22",
        "Company":"Google",
        "position":"Development Engineer",
        "Language":"JAVA,JavaScript,C++,Phython",
        "WorkYears":"2",
        "Salary":"10000",
        "SalaryUnit":"CNY"
        
    },
    {
        "Name":"Debbi",
        "Age":"30",
        "Company":"Oracle",
        "position":"Development Engineer",
        "Language":"JAVA,PLSQL,C#,Phython",
        "WorkYears":"7",
        "Salary":"22000",
        "SalaryUnit":"CNY"
    },
    {
        "Name":"Jerry",
        "Age":"25",
        "Company":"Oracle",
        "position":"Development Engineer",
        "Language":"C++,PLSQL",
        "WorkYears":"4",
        "Salary":"16000",
        "SalaryUnit":"CNY"
    },
    {
        "Name":"Mark",
        "Age":"32",
        "Company":"Oracle",
        "position":"System Architect",
        "Language":"JAVA,JavaScript,PHP,C++,PLSQL",
        "WorkYears":"10",
        "Salary":"38000",
        "SalaryUnit":"CNY"
    },
    {
        "Name":"Davie",
        "Age":"35",
        "Company":"Microsoft",
        "position":"System Architect",
        "Language":"JAVA,JavaScript,PHP,C#,Phython",
        "WorkYears":"12",
        "Salary":"45000",
        "SalaryUnit":"CNY"
    },
    {
        "Name":"Sam",
        "Age":"28",
        "Company":"Microsoft",
        "position":"Development Engineer",
        "Language":"C#,Phython",
        "WorkYears":"5",
        "Salary":"25000",
        "SalaryUnit":"CNY"
    }
    ]
}

 

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Dialog id="addDialog" title="确认追加">
        <Label text="名字：{path: 'addModel>/Name'}" width="100%"/>
        <Label text="公司：{path: 'addModel>/Company'}" width="100%"/>
        <beginButton>
            <Button text="{i18n>dialogOkButtonText}" press=".onOkDialog"/>
        </beginButton>
        <endButton>
            <Button text="{i18n>dialogCancelButtonText}" press=".onCancelDialog"/>
        </endButton>
    </Dialog>
</core:FragmentDefinition>

 

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.ui.demo.walkthrough.controller.App" displayBlock="true">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <Table noDataText="Drop column list items here and columns in the area above" id="table0" items="{path:'/People'}">
                            <items>
                                <ColumnListItem type="Active" id="item0">
                                    <cells>
                                        <Text text="{Name}" id="text0"/>
                                        <Text text="{Company}" id="text1"/>
                                        <Text text="{position}" id="text2"/>
                                        <Text text="{Language}" id="text3"/>
                                        <Text text="{WorkYears}" id="text4"/>
                                    </cells>
                                </ColumnListItem>
                            </items>
                            <columns>
                                <Column id="column0">
                                    <header>
                                        <Label text="名字" id="label0"/>
                                    </header>
                                </Column>
                                <Column id="column1">
                                    <header>
                                        <Label text="公司" id="label1"/>
                                    </header>
                                </Column>
                                <Column id="column2">
                                    <header>
                                        <Label text="职位" id="label2"/>
                                    </header>
                                </Column>
                                <Column id="column3">
                                    <header>
                                        <Label text="语言" id="label3"/>
                                    </header>
                                </Column>
                                <Column id="column4">
                                    <header>
                                        <Label text="工作年限" id="label4"/>
                                    </header>
                                </Column>
                            </columns>
                        </Table>
                        <Label text="名字" width="10%"/>
                        <Input xmlns="sap.m" id="inputName" width="90%"/>
                        <Label text="公司" width="10%"/>
                        <Input xmlns="sap.m" id="inputCompany" width="90%"/>
                        <Button xmlns="sap.m" text="添加" id="button0" icon="sap-icon://add" press=".onAdd"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

 

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "sap.ui.demo.walkthrough",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "ui5template.basicSAPUI5ApplicationProject",
            "version": "1.40.12"
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "rootView": {
            "viewName": "sap.ui.demo.walkthrough.view.App",
            "type": "XML",
            "async": true,
            "id": "App"
        },
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
                }
            },
            "": {
                "type": "sap.ui.model.json.JSONModel",
                "settings": {},
                "uri": "model/people.json",
                "preload": false
            }
        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "sap.ui.demo.walkthrough.view",
                "controlAggregation": "pages",
                "controlId": "app",
                "clearControlAggregation": false
            },
            "routes": [{
                "name": "TargetApp",
                "pattern": "RouteApp",
                "target": ["TargetApp"]
            }],
            "targets": {
                "TargetApp": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewId": "App",
                    "viewName": "App"
                }
            }
        }
    }
}