SAPUI5 Walkthrough Step 8: Translatable Texts

https://sapui5.hana.ondemand.com/#/topic/df86bfbeab0645e5b764ffa488ed57dc

 

在这一步中,我们将文本移动到一个指定的资源文件中。这样将便于我们管理和翻译。

 

增加i18n文件 webapp/i18n/i18n.properties,内容如下

showHelloButtonText=说点啥
helloMsg=说 {0}

 

 

修改控制器controll文件 webapp/controller/App.controller.js 完整代码如下

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/resource/ResourceModel"
    ], function(Controller, MessageToast, JSONModel, ResourceModel){
        
    return Controller.extend("zdemo_step1.controller.App",{
        onInit: function(){
            var oJsonData = {
                recipient : {
                   name : "World"
                }
             };    
             var oJSONModel = new JSONModel(oJsonData);
             this.getView().setModel(oJSONModel, "jsonModel");
             //设置模型i18n
             var i18nModel = new ResourceModel({
                 bundleName: "zdemo_step1.i18n.i18n"
             });
             this.getView().setModel(i18nModel, "i18n");
        },
        
        onShowHello: function(){
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sRecipient = this.getView().getModel("jsonModel").getProperty("/recipient/name");
            var sMsg = oBundle.getText("helloMsg", [sRecipient]);
            MessageToast.show(sMsg);
        }
    });
});

增加 ResourceModel 模块的引用, 

在onInit中,增加模型i18n(类型为ResourceModel)。

onShowHello中,读取模型i18n中的内容,并替换成我们想要的内容

 

修改视图文件 webapp/view/App.view.xml, 

<mvc:View
    controllerName="zdemo_step1.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Button text="{i18n>showHelloButtonText}"
            press=".onShowHello" />
    <Input value="{jsonModel>/recipient/name}"
            description="Hello {jsonModel>/recipient/name}"
            valueLiveUpdate="true"
            width="50%" />
</mvc:View>

按钮的text属性读取模型i18n。

 

执行

SAPUI5 Walkthrough Step 8: Translatable Texts

 

 

 

 

源码

 

上一篇:使用飞桨模型生成情话情诗


下一篇:原生js制作选项卡详解,适合无基础的人学习