HTML5 mobile web Application Development-SAP UI5 (6)

HTML5 mobile web Application Development-SAP UI5 (6)

· In SAP UI5, use the i18n file to parse variables. For different language packs developed in the future, different i18n files are also available. Let's take a general look at how i18n is used in SAPUI5.

First, create a file named i18n. properties. Write the following content:

ShowHelloButtonText = SayHello

HelloMsg = Hello {0}

In fact, several variable or method values are defined here. To call them, first modify the controller content as follows:

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) {"use strict"; return Controller. extend ("sap. ui. demo. wt. controller. app ", {onInit: function () {var oData = {recipient: {name:" World "}}; var oModel = new JSONModel (oData); this. getView (). setModel (oModel); var i18nModel = new ResourceModel ({// introduce the i18n file content, and another model bundleName: "sap. ui. demo. wt. i18n. i18n "// specifies the file of the model in bundleName}); this. getView (). setModel (i18nModel, "i18n"); // set i18nmodel of the view to i18nModel}, onShowHello: function () {var oBundle = this. getView (). getModel ("i18n "). getResourceBundle (); // get i18nmodel var sRecipient = this. getView (). getModel (). getProperty ("/recipient/name"); var sMsg = oBundle. getText ("helloMsg", [sRecipient]); MessageToast. show (sMsg );}});});

The logic remains unchanged, but pay attention to the following parts in the code. To define the reference i18n file, set it through setModel. The set model is passed to the first parameter i18nModel, which indicates that the i18n model is to be set, and then the specific i18n file is passed in, the path is defined in the previous line. These operations are all set in the initialization function.

Then we defined a new onShowHello function. The first code obtained the i18n model. Note that the most important part is the definition of sMsg. The first parameter passed in setText is the helloMsg we defined in i18n, {0} is the value obtained from the previously defined sRecipient. The final result is the same as before.

Modify the view at the same time:

<mvc:view controllername="sap.ui.demo.wt.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"><button press="onShowHello" text="{i18n>showHelloButtonText}"></button><input description="Hello {/recipient/name}" value="{/recipient/name}" valueliveupdate="true" width="60%" data-cke-editable="1" contenteditable="false"><button press="onShowHello" text="{i18n>showHelloButtonText}"></button></mvc:view>

Use the previously defined showHelloButtonText to retrieve the "Say Hello" value and display it on the button. In the Input button, we can see that the defined value is passed into {/recipient/name}, and the value is obtained in the controller. This is the general process of using i18n.