SAPUI5 Walkthrough教程（十六）——对话框和Fragments

在此步骤中，将仔细研究另一个可用于组装视图的元素：Fragments。
Fragments是轻量级 UI 部件（UI 子树），可以重用，但没有任何控制器。这意味着，每当你想要定义 UI 的某个部分以在多个视图中重用时，或者当你想要在某些情况下（不同的用户角色、编辑模式与只读模式）将视图的某些部分相互交换时，Fragments是一个很好的候选项，尤其是在不需要其他控制器逻辑的情况下。
一个Fragments可以包含 1 到 n 个控件。在运行时，放置在视图中的Fragments的行为类似于“普通”视图内容，这意味着Fragments内的控件在呈现时将包含在视图的 DOM 中。当然，有些控件不是设计为成为视图的一部分，例如对话框。
现在，我们将向应用添加一个对话框。对话框很特殊，因为它们在常规应用程序内容的顶部打开，因此不属于特定视图。这意味着对话框必须在控制器代码中的某个位置实例化，但由于我们希望坚持声明性方法并创建可重用的工件以尽可能灵活，并且由于对话框不能指定为视图，我们将创建一个包含对话框的 XML 片段。毕竟，对话框可以在应用的多个视图中使用。

webapp/view/HelloPanel.view.xml：
我们向视图添加一个新按钮以打开对话框。它只是在面板内容视图的控制器中调用事件处理程序函数。我们将在步骤 28：与 OPA 的集成测试中需要新的 id=“helloDialogButton”。
最好将唯一 ID（如 helloWorldButton）设置为应用的关键控件，以便轻松识别。如果未指定属性“id”，OpenUI5 运行时将为控件生成唯一但不断变化的 ID，如“__button23”。在浏览器中检查应用的 DOM 元素以查看差异。

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
      <Button
         id="helloDialogButton"
         text="{i18n>openDialogButtonText}"
         press=".onOpenDialog"
         class="sapUiSmallMarginEnd"/>

      <Button
         text="{i18n>showHelloButtonText}"
         press=".onShowHello"
         class="myCustomButton"/>
      <Input
         value="{/recipient/name}"
         valueLiveUpdate="true"
         width="60%"/>
      <FormattedText
         htmlText="Hello {/recipient/name}"
         class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>

webapp/view/HelloDialog.fragment.xml (New)：
这里添加一个新的 XML 文件，以声明方式在Fragments定义我们的对话框。Fragments段资产位于核心命名空间中，因此我们在 FragmentDefinition 标记中为其添加一个 xml 命名空间。
语法类似于视图，但由于Fragments没有控制器，因此缺少此属性。此外，Fragments在应用的 DOM 树中没有任何占用空间，并且Fragments本身没有控件实例（只有包含的控件）。它只是一组重用控件的容器。

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title="Hello {/recipient/name}">
   </Dialog>
</core:FragmentDefinition>

webapp/controller/HelloPanel.controller.js：
如果片段中的对话框尚不存在，则通过调用 loadFragment API 实例化片段。
正如您在上面的代码片段中看到的，我们将对话片段的加载 Promise 存储在控制器实例上。这允许我们在每次单击 helloDialogButton 按钮时异步处理对话框的打开。
若要在其他控制器中重用对话框打开和关闭功能，可以创建一个新文件 sap.ui.demo.walkthrough.controller.BaseController，该文件扩展了 sap.ui.core.mvc.Controller，并将所有与对话框相关的编码放入此控制器中。现在，所有其他控制器都可以从sap.ui.demo.walkthrough.controller.BaseController扩展，而不是sap.ui.core.mvc.Controller。

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 () {

			// create dialog lazily
			if (!this.pDialog) {
				this.pDialog = this.loadFragment({
					name: "sap.ui.demo.walkthrough.view.HelloDialog"
				});
			} 
			this.pDialog.then(function(oDialog) {
				oDialog.open();
			});
		}

	});
});

注意官网这里有…，是上一步中省略掉的内容，不要忘记了增加进来。否则点击 say hello 没有反应

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

**结果：**最后的效果增加了一个对话框，其他效果跟前面步骤一样。