UI5(二)通过设置“edge”兼容模式，将自动启用复杂的绑定语法。i18n model

最新推荐文章于 2022-11-08 10:58:56 发布

修电脑的猫

最新推荐文章于 2022-11-08 10:58:56 发布

阅读量554

点赞数

分类专栏： SAP 文章标签： mvc ui

本文链接：https://blog.csdn.net/maomibook/article/details/122107165

版权

SAP 专栏收录该内容

63 篇文章 9 订阅

订阅专栏

前面说了MVC中的VIEW,controller,这里开始说MVC中的M.

下面将向应用程序添加一个输入框字段，将其值绑定到模型M中，并将相同的值绑定到输入字段的描述。用户类型将直接更新描述。

注意：我们可以使用 data-sap-ui-compatVersion =“ edge” 或者 data-sap-ui-bindingSyntax =“ complex”在脚本中。通过设置“edge”兼容模式，将自动启用复杂的绑定语法。的edge模式会自动启用兼容性功能，否则必须手动启用。
在本示例中，描述文本未完全定位。为了安全起见，我们将必须使用与控制器中类似的机制来使用资源束中的字符串并替换其中的一部分。这可以通过jQuery.sap.formatMessage 格式化程序。

此外， i18n文件仅影响客户端应用程序文本。从后端系统加载的文本可以以后端系统支持的所有语言显示。

约定：
国际化的多语言资源模型称为 i18n model。
默认文件名是 i18n.properties.
资源束密钥被写在（下部）camelCase中。
资源束值可以包含如下参数 {0}, {1}, {2}, …
切勿串联已翻译的字符串，始终使用占位符。
对特殊字符使用Unicode转义序列。

webapp / controller / App.controller.js

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

	return Controller.extend("sap.ui.demo.walkthrough.controller.App", {

		onInit : function () {

			// set data model on view
			var oData = {
				recipient : {
					name : "World"
				}
			};
			var oModel = new JSONModel(oData);
			this.getView().setModel(oModel);
		},

		onShowHello : function () {
			MessageToast.show("Hello World");
		}
	});

});

我们向控制器添加一个初始化函数。 onInit是SAPUI5启动事件，在创建控制器创建时由框架调用，类似于控件的构造函数。
在函数内部，我们实例化了一个JSON模型。模型的数据仅包含“收件人(recipient)”的单个属性，并且在其中还包含一个属性：名(name)。
为了能够在XML视图中使用此DATA模型，我们将 setModel在视图上运行并传递我们新创建的模型。现在在视图上设置了模型。

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Button
		text="Say Hello"
		press=".onShowHello"/>
	<Input
		value="{/recipient/name}"
		description="Hello {/recipient/name}"
		valueLiveUpdate="true"
		width="60%"/>
</mvc:View>

我们添加一个 sap.m.input控件到视图中。这样，用户可以输入问候语的收件人。通过使用XML视图的声明性绑定语法，将其值绑定到 SAPUI5模型：

大括号 {…} 表示数据取自 收件人RECIPIENT的对象名称name属性。此操作称为“数据绑定”。
/收件人/姓名 在模型中声明路径。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_fiori_3"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"  "edge
		data-sap-ui-async="true"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'
		data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

value属性的绑定是一个仅包含绑定模式的简单绑定示例。我们还可以将文本和绑定模式组合为更复杂的绑定结果，如description属性所示。为了能够使用所谓的复杂绑定语法，我们必须通过设置bootstrap参数来全局启用它data-sap-ui-compatVersion 给edge。如果省略此设置，则仅允许使用标准绑定语法，即“ “Hello {/recipient/name}“将不可使用，只能使用 “{/recipient/name}“这样的语法。

在这一步中，我们把用户界面的文本移动到单独的资源文件中，这样用户可以在必要时候文本内容，同时可以为不同的用户语言，使用不同的文本，以便于在用户界面中显示不同的语言内容。这样就可以轻松地翻译成其他语言。简而言之，这个i18n–在SAPUI5中通过使用特殊的资源模型和标准的数据绑定语法来实现APP的多语言功能。

这里我们创建文件夹 webapp / i18n 和文件 i18n.properties。解析的捆绑包名称为 sap.ui.demo.walkthrough.i18n，我们将在后面的代码中看到。他的属性properties 文本文件包含每个元素的名称或值。可以在文本中添加任意数量的参数，方法是在括号中添加数字。这些数字对应于访问参数的顺序（从0开始，0，1，2…）。

在此例子中，我们将只有一个属性文件。但是，在实际项目中，对于每种受支持的语言，您将有一个单独的文件，并带有一个语言环境的后缀。比如： i18n_de.properties 对于德国语言， i18n_en.properties 英语， i18n_cn.properties 中文，等等。用户运行应用程序时，SAPUI5将自动加载最适合用户环境的语言文件来达到APP的多语言设置。当然用户在使用过程中也可以指定使用的语言。

webapp / i18n / i18n.properties（新）

showHelloButtonText=Say Hello
helloMsg=Hello {0}

在里面JS文件中实例化了onInit函数，并且资源模型 ResourceModel指向我们的文本现在所在的新消息捆绑的文件（i18n.properties）名称为sap.ui.demo.walkthrough.i18n.i18n ，其中的sap.ui.demo.walkthrough 由应用程序名称空间组成（如在文件index.html中定义），文件夹名称 i18n，最后是文件名 i18n，此没有扩展名。该SAPUI5运行时间计算正确的路径资源; 在这种情况下，通往我们的道路i18n.properties文件。接下来，使用关键值将模型实例设置为视图上的命名模型 i18n。当需要并行使用多个模型时，可以使用命名模型。

在里面 onShowHello 事件处理函数我们访问 i18n 文件，从消息捆绑文件中获取文本并替换占位符 {0}并且，我们的数据模型中的收件人联系的 getProperty方法可以在任何模型中调用，并以数据路径作为参数。此外，资源束具有特定的 getText 将字符串数组作为第二个参数的方法。

可以使用 getResourceBundle 方法来绑定资源模型文件。我们可以使用的第二个参数，而不是手动连接可翻译文本getText用非静态数据替换部分文本。在运行时，SAPUI5尝试加载正确的 i18n _ *。properties文件根据您的浏览器及您的所在区域来自动设置。在这里，我们仅创建了一个 i18n.properties文件使其变得简单。但是，您可以在浏览器开发人员工具的网络流量调试中可以看到，SAPUI5尝试加载一个或多个i18n _ *.properties ,对于中国用户来说，最常见的就是会自动加入i18n_cn.properties 文件。

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) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.App", {

		onInit : function () {
			// set data model on view
			var oData = {
				recipient : {
					name : "World"
				}
			};
			var oModel = new JSONModel(oData);
			this.getView().setModel(oModel);

			// set i18n model on view
			var i18nModel = new ResourceModel({
				bundleName: "sap.ui.demo.walkthrough.i18n.i18n"
			});
			this.getView().setModel(i18nModel, "i18n");
		},

		onShowHello : function () {
			// read msg from i18n model
			var oBundle = this.getView().getModel("i18n").getResourceBundle();
			var sRecipient = this.getView().getModel().getProperty("/recipient/name");
			var sMsg = oBundle.getText("helloMsg", [sRecipient]);

			// show message
			MessageToast.show(sMsg);
		}
	});

});

在这个XML视图中，我们使用数据绑定将按钮文本连接到 i18n 文件中，并且取 showHelloButtonText 的属性仩。资源束是平面结构，因此该路径可以省略前面的斜杠（/）。

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

在这里插入图片描述

修电脑的猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
UI5(二)通过设置“edge”兼容模式，将自动启用复杂的绑定语法。i18n model

前面说了MVC中的VIEW,controller,这里开始说MVC中的M.下面将向应用程序添加一个输入框字段，将其值绑定到模型M中，并将相同的值绑定到输入字段的描述。用户类型将直接更新描述。注意：我们可以使用 data-sap-ui-compatVersion =“ edge” 或者 data-sap-ui-bindingSyntax =“ complex”在脚本中。通过设置“edge”兼容模式，将自动启用复杂的绑定语法。的edge模式会自动启用兼容性功能，否则必须手动启用。在本示例中，描述文本未完全
复制链接

扫一扫

专栏目录