第17步:片段回调

说明

现在我们已经集成了对话框，是时候添加一些用户交互了。用户肯定会想在某个时候再次关闭对话框，因此我们添加了一个按钮来关闭对话框并分配一个事件处理程序。

---

预览

对话框现在有一个“OK”按钮

代码

你可以在演练-第17步查看和下载所有文件。

webapp/controller/HelloPanel.controller.js

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

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

		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);
		},

		onOpenDialog : function () {
			var oView = this.getView();

			if (!this.pDialog) {
				this.pDialog = Fragment.load({
					id: oView.getId(),
					name: "sap.ui.demo.walkthrough.view.HelloDialog",
					controller: this
				}).then(function (oDialog) {
					// connect dialog to the root view of this component (models, lifecycle)
					oView.addDependent(oDialog);
					return oDialog;
				});
			} 
			this.pDialog.then(function(oDialog) {
				oDialog.open();
			});
		},

		onCloseDialog : function () {
			// note: We don't need to chain to the pDialog promise, since this event-handler
			// is only called from within the loaded dialog itself.
			this.byId("helloDialog").close();
		}
	});

});

如前所述，片段是纯UI重用工件，没有控制器。但是，您可以将控制器对象传递给Fragment.load API。对于我们的对话框，我们引用了HelloPanel控制器。但是，第三个参数不一定是控制器，可以是任何对象。只是不要忘了这个关键字。

事件处理函数被放到同一个控制器文件中，它通过访问返回对话框的内部助手函数来关闭对话框。

webapp/view/HelloDialog.fragment.xml

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title ="Hello {/recipient/name}">
      <beginButton>
         <Button
            text="{i18n>dialogCloseButtonText}"
            press=".onCloseDialog"/>
      </beginButton>
   </Dialog>
</core:FragmentDefinition>

在片段定义中，我们将一个按钮添加到对话框的beginButton聚合中。press触发器引用了一个名为.onCloseDialog的事件处理程序，由于我们将引用传递给了HelloPanel控制器，所以当按钮被按下时，该方法将在那里被调用。这个对话框有一个名为beginButton和endButton的聚合。在这两个聚合中放置按钮可以确保UI上的beginButton位于endButton之前。然而，“before”的含义取决于当前语言的文本方向。因此，我们将begin和end作为“左”和“右”的同义词来使用。在从左到右方向的语言中，beginButton将被渲染到左边，endButton在对话框页脚的右边;在特定语言的从右到左模式下，顺序会被切换。

webapp/i18n/i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

文本包扩展了新的对话框的关闭按钮文本。

章节

1. 第1步:你好世界
2. 第2步:引导
3. 第3步:控件
4. 第4步:XML视图
5. 第5步:控制器
6. 第6步:模块
7. 第7步:JSON模型
8. 第8步:可翻译的文本
9. 第9步:组件配置
10. 第10步:应用程序描述符
11. 第11步:页面和面板
12. 第12步:Shell控件作为容器
13. 第13步:外边距和内边距
14. 第14步:自定义CSS和主题颜色
15. 第15步:嵌套视图
16. 第16步:对话框和片段
17. 第17步:片段回调
18. 第18步:图标
19. 第19步:重用对话框
20. 第20步:聚合绑定
21. 第21步:数据类型
22. 第22步:表达式绑定
23. 第23步:自定义格式器
24. 第24步:过滤
25. 第25步:排序和分组
26. 第26步:远程OData服务
27. 第27步:模拟服务器配置
28. 第28步:使用QUnit进行单元测试
29. 第29步:与OPA的集成测试
30. 第30步:调试工具
31. 第31步:路由和导航
32. 第32步:路由与参数
33. 第33步:路由回溯和历史
34. 第34步:自定义控件
35. 第35步:响应性
36. 第36步:设备适应
37. 第37步:内容密度
38. 第38步:可访问性