步骤16：对话框和片段

这一步我们学习一个与用户的对话框，及fragment视图的使用，fragment，是的不个代码的片断，

片段是轻量级的UI部件（UI子树），可以重用但没有任何控制器。这意味着，无论何时您要定义UI的特定部分以在多个视图之间重用，或在某些情况下（不同用户角色，编辑模式与只读模式）彼此交换视图的某些部分时，），最好使用片段，尤其是在不需要其他控制器逻辑的情况下。

一个fragment片段可以包含1到n个控件。在运行时，放置在视图中的片段的行为类似于“常规”视图内容，这意味着片段内部的控件在呈现时将仅包含在视图的DOM中。当然，有些控件并非旨在成为视图的一部分，例如，对话框。

但是即使对于这些控件，片段也可能特别有用，您很快就会看到。

现在，我们将在应用程序中添加一个对话框。对话框很特殊，因为它们会在常规应用程序内容的顶部打开，因此不属于特定视图。这意味着必须在控制器代码中的某个地方实例化对话框，但是由于我们要坚持使用声明性方法并创建尽可能灵活的可重用工件，并且由于不能将对话框指定为视图，因此我们将创建一个XML片段，其中包含对话框。毕竟，一个对话框只能在一个应用程序的多个视图中使用。

1.练习效果

2.源码

您可以在演练-步骤16中查看和下载所有文件。

webapp/view/HelloPanel.view.xml

<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>

<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" >

<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>

我们向视图添加一个新按钮以打开对话框。它只是在面板的内容视图的控制器中调用事件处理程序函数。我们将需要新的id =“ helloDialogButton”在步骤29：与OPA的集成测试中。

最好设置一个唯一的ID，例如 helloWorldButton应用程序的关键控件，以便轻松识别。如果未指定属性“ id”，则OpenUI5运行时将为控件生成唯一的但正在更改的ID，例如“ __button23”。在浏览器中检查应用程序的DOM元素，以了解两者之间的区别。

webapp/view/HelloDialog.fragment.xml（新）

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

<core:FragmentDefinition

xmlns="sap.m"

xmlns:core="sap.ui.core" >

<Dialog

id="helloDialog"

title="Hello {/recipient/name}">

</Dialog>

</core:FragmentDefinition>

我们添加了一个新的XML文件，以便在一个片段中声明性地定义我们的对话框。片段资产位于核心 命名空间，因此我们添加了 XML文件 在内部的命名空间 片段定义 标签。

语法类似于视图，但是由于片段没有控制器，因此缺少此属性。此外，该片段在应用程序的DOM树中没有任何占用空间，并且片段本身没有控件实例（仅包含控件）。它只是一组重用控件的容器。

我们还添加了 ID 为了我们 对话 可以从我们的对话框中访问对话框 Hellopanel 控制器。

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 () {
			…
		},
		onOpenDialog : function () {
			var oView = this.getView();

			// create dialog lazily
			if (!this.byId("helloDialog")) {
				// load asynchronous XML fragment
				Fragment.load({
					id: oView.getId(),
					name: "sap.ui.demo.walkthrough.view.HelloDialog"
				}).then(function (oDialog) {
					// connect dialog to the root view of this component (models, lifecycle)
					oView.addDependent(oDialog);
					oDialog.open();
				});
			} else {
				this.byId("helloDialog").open();
			}
		}

	});
});

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

…

onOpenDialog : function () {

var oView = this.getView();

// create dialog lazily

if (!this.byId("helloDialog")) {

// load asynchronous XML fragment

Fragment.load({

id: oView.getId(),

name: "sap.ui.demo.walkthrough.view.HelloDialog"

}).then(function (oDialog) {

// connect dialog to the root view of this component (models, lifecycle)

oView.addDependent(oDialog);

oDialog.open();

});

} else {

this.byId("helloDialog").open();

}

});

如果片段中的对话框尚不存在，则通过调用 sap.ui.xml片段 具有以下参数的方法：

的ID Hellopanel 视图此参数用于在片段内部添加ID前缀。在那里，我们定义了IDhelloDialog 为了 对话 控件，我们可以通过调用视图来访问对话框 oView.byId（“ helloDialog”）。这样可以确保即使您以相同的方式在其他视图中实例化相同的片段，每个对话框也将具有其唯一的ID，该ID由视图ID和对话框ID串联而成。使用唯一的ID很重要，因为重复的ID会导致框架中的错误。
片段定义的路径

我们在对话框上将对话框添加为“从属”，以连接到视图模型的生命周期。一个方便的副作用是，在销毁视图时，对话框将自动销毁。否则，我们将不得不手动销毁对话框以释放其资源。

3.约定

始终使用 addDependent 将对话框连接到视图的生命周期管理和数据绑定的方法，即使该对话框未添加到其UI树中也是如此。
私有函数和变量应始终以下划线开头。

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

# 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

打开按钮的新文本添加到文本包中

步骤16：对话框和片段

1.练习效果

2.源码

3.约定

您可能还会对这些文章感兴趣！