现在我们已经集成了对话框，是时候添加一些用户交互了。用户肯定希望在某个时候再次关闭对话框，因此我们添加一个按钮来关闭对话框并分配一个事件处理程序。
Preview
The dialog now has an "OK" button
Coding
You can view and download all files at Walkthrough - Step 17.
webapp/controller/HelloPanel.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
], function (Controller, MessageToast) {
"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();
var oDialog = oView.byId("helloDialog");
// create dialog lazily
if (!oDialog) {
// create dialog via fragment factory
oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.HelloDialog", this);
// connect dialog to view (models, lifecycle)
oView.addDependent(oDialog);
}
oDialog.open();
},
onCloseDialog : function () {
this.getView().byId("helloDialog").close();
}
});
});
如前所述，片段是纯UI重用工件，没有控制器。ui的第三个参数 xmlfragment函数是可选的，它允许将引用传递给(控制器)对象。在我们的对话框中，我们引用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的聚合。在这两个聚合中放置按钮可以确保beginButton位于UI上的endButton之前。然而，before的含义取决于当前语言的文本方向。因此，我们使用术语开始和结束作为“左”和“右”的同义词。在从左到右方向的语言中，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
文本包由两个用于打开按钮和对话框关闭按钮的新文本扩展。
Parent topic: Walkthrough
Previous: Step 16: Dialogs and Fragments
Next: Step 18: Icons
Related Information
