Dialogs and Fragments
在这一步中，我们将仔细研究另一个可以用来组装视图的元素:碎片。
碎片是轻量级的UI部件(UI子树)，可以重用，但没有任何控制器。这意味着，无论何时您希望将 UI 的某个部分定义为可在多个视图中重用，或者当您希望在某些情况下（不同的用户角色、编辑模式与只读模式）交换视图的某些部分时)，碎片是一个很好的候选者，尤其是在不需要额外的控制器逻辑的情况下。
一个碎片可以包含1到n个控件。在运行时，放置在视图中的碎片的表现类似于“普通”视图内容，这意味着碎片中的控件只会在渲染时被包含到视图的DOM中。当然，有些控件并不是为了成为视图的一部分而设计的，例如dialogs对话框。
但即使对于这些控件，碎片也特别有用，稍后您将看到。
我们现在将添加一个对话框到我们的应用程序。对话框是特殊的，因为他们打开在常规的应用程序内容之上，因此不属于一个特定的视图。这意味着对话框必须在控制器代码的某个地方实例化，但由于我们希望坚持声明式方法并创建尽可能灵活的可重用工件，而且由于对话框不能指定为视图，我们将创建一个包含对话框的XML片段。毕竟，一个对话框可以在应用的多个视图中使用。
Coding
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>
我们向视图添加一个新按钮来打开对话框。它只是在面板的内容视图的控制器中调用一个事件处理函数。在步骤29:OPA的集成测试中，我们将需要新的id=“helloDialogButton”。
helloWorldButton为您的应用程序的关键控件设置一个唯一的 ID 是一个很好的做法，以便可以轻松识别。如果未指定属性“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>
我们添加一个新的 XML 文件以在碎片中声明式地定义我们的对话框。碎片资源位于core命名空间中，因此我们xml在FragmentDefinition标签内为其添加 命名空间 。
语法类似于视图，但由于碎片没有控制器，因此缺少此属性。此外，碎片在应用程序的 DOM 树中没有任何足迹，并且碎片本身没有控件实例（只有包含的控件）。它只是一组重用控件的容器。
我们还添加了一个id让我们Dialog能够从我们的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 () {
// 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();
// create dialog lazily
if (!this.pDialog) {
this.pDialog = 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);
return oDialog;
});
}
this.pDialog.then(function(oDialog) {
oDialog.open();
});
}
});
});
如果碎片中的对话框尚不存在，则通过使用以下参数调用Fragment.load API来实例化碎片：
-
HelloPanel视图的 ID
此参数用于为碎片中的 ID 添加前缀。在那里，我们为Dialog控件定义了ID helloDialog，我们可以通过调用通过视图访问该对话框 oView.byId(“helloDialog”)。这确保即使您以相同的方式在其他视图中实例化相同的碎片，每个对话框也将具有由视图 ID 和对话框 ID 连接的唯一 ID。
使用唯一 ID 很重要，因为重复的 ID 会导致框架出错。
-
碎片名称
我们将对话框添加为“依赖”视图，以连接到视图模型的生命周期。一个方便的副作用是当视图被销毁时对话框会自动被销毁。否则，我们将不得不手动销毁对话框以释放其资源。
约定：
- 始终使用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
我们将打开按钮的新文本添加到文本包中。
当点击新的“Say Hello With Dialog”按钮时，一个对话框打开。
Fragment Callbacks
现在我们已经集成了对话框，是时候添加一些用户交互了。用户肯定会想在某个时候再次关闭对话框，因此我们添加了一个按钮来关闭对话框并分配一个事件处理程序。
Coding
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聚合中。这个按钮处理程序引用了一个名为. 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
文本包为对话框的关闭按钮有了新文本扩展。
对话框现在有一个“OK”按钮。
如果添加一个Input，那么你的Dialog就又多了一个输入框。
webapp/view/HelloDialog.fragment.xml
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core" >
<Dialog
id="helloDialog"
title ="Hello {/recipient/name}">
<Input
placeholder="请输入"/>
<beginButton>
<Button
text="{i18n>dialogCloseButtonText}"
press=".onCloseDialog"/>
</beginButton>
</Dialog>
</core:FragmentDefinition>
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
