SAPUI5学习第八天-----（12）图标Icons和重用对话框Reuse Dialogs

Icons

官网代码

我们的对话框仍然是空的。由于SAPUI5带有一个包含500多个图标的大图标字体，我们将在对话框打开时添加一个图标来欢迎用户。

Coding

webapp/view/HelloPanel.view.xml

<mvc:ViewcontrollerName="sap.ui.demo.walkthrough.controller.HelloPanel"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto" ><content><Buttonid="helloDialogButton"icon="sap-icon://world"text="{i18n>openDialogButtonText}"press=".onOpenDialog"class="sapUiSmallMarginEnd"/><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/></content></Panel>
</mvc:View>

我们向打开对话框的按钮添加一个图标。sap-icon://协议表示应从图标字体中加载图标。标识符world 是图标字体中图标的可读名称。

提示：
您可以使用Demo工具包中的图标资源管理器 Icon Explorer工具查找其他图标。
要调用任何图标，请使用图标资源管理器 Icon Explorer中列出的名称。sap-icon://<iconname>.

webapp/view/HelloDialog.fragment.xml

<core:FragmentDefinitionxmlns="sap.m"xmlns:core="sap.ui.core" ><Dialogid="helloDialog"title ="Hello {/recipient/name}"><content><core:Iconsrc="sap-icon://hello-world"size="8rem"class="sapUiMediumMargin"/></content><beginButton><Buttontext="{i18n>dialogCloseButtonText}"press=".onCloseDialog"/></beginButton></Dialog>
</core:FragmentDefinition>

在对话框碎片中，我们向对话框的内容聚合添加一个图标控件。幸运的是，图标字体还带有一个“Hello World”图标，这对我们来说是完美的。我们还定义了图标的大小，并在其上设置了中等边距。

约定
尽可能使用图标字体，而不是图像，因为它们是可伸缩的，没有质量损失(矢量图形)，不需要单独加载。

现在在对话框中显示一个图标

Reuse Dialogs

官网代码

在这一步中，我们将扩展重用概念，并在组件级调用对话框。

在前面中，我们创建了一个对话框碎片，让它可以跨视图或整个应用程序重用。但是我们把检索对话框实例的逻辑和打开和关闭它的逻辑分别放在了HelloPanel视图的控制器中。坚持这种方法需要将代码复制并粘贴到需要我们的对话框的每个视图的控制器上。这将导致我们想要避免的不必要的代码冗余。

在这一步中，我们实现了这个问题的解决方案:我们扩展了重用概念，并在组件级调用了对话框。

Coding

webapp/Component.js

sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel","./controller/HelloDialog"], function (UIComponent, JSONModel, HelloDialog) {"use strict";return UIComponent.extend("sap.ui.demo.walkthrough.Component", {metadata : {manifest : "json"},init : function () {// call the init function of the parentUIComponent.prototype.init.apply(this, arguments);// set data modelvar oData = {recipient : {name : "World"}};var oModel = new JSONModel(oData);this.setModel(oModel);// set dialogthis._helloDialog = new HelloDialog(this.getRootControl());},exit : function() {this._helloDialog.destroy();delete this._helloDialog;},openHelloDialog : function () {this._helloDialog.open();}});
});

对话框实例化被重构为一个新的helper对象，该对象存储在组件的私有属性中。对于helper对象的实例化，我们必须将添加对话框的视图实例传递给它(参见下面HelloDialog.js实现中的addDependent方法调用)。

我们想要将重用对话框连接到应用的根视图的生命周期中，所以我们将根视图的实例传递给构造函数。可以通过调用组件的getRootControl方法来检索它。

Note
如 manifest.json中的rootView参数定义，我们的根视图是sap.ui.demo.walkthrough.view.App。可以在运行时通过访问rootControl聚合从组件中检索根视图。

为了能够从其他控制器打开对话框，我们实现了一个重用函数openHelloDialog，它调用helper对象的open方法。通过这样做，我们还可以从应用程序编码中分离重用对话框的实现细节。

到目前为止，我们向组件添加了新的属性_helloDialog，并为其分配了一个HelloDialog对象的实例。我们希望确保在组件销毁时释放为这个helper对象分配的内存。否则，我们的应用程序可能导致内存泄漏。

为此，我们使用exit hook(钩子函数)。SAPUI5框架在销毁组件时调用指定的exit函数。我们调用HelloDialog的destroy函数来清理helper类并结束它的生命周期。然而，实例本身仍然存在于浏览器内存中。因此，我们通过调用delete this._helloDialog来删除对HelloDialog实例的引用。浏览器的垃圾回收机制可以清理它的内存。

Note
我们不必销毁我们创建的JSONModel实例，因为我们用setModel函数将它分配给了组件。SAPUI5框架会把它和组件一起销毁。

webapp/controller/HelloDialog.js (新建)

sap.ui.define(["sap/ui/base/ManagedObject","sap/ui/core/Fragment"
], function (ManagedObject, Fragment) {"use strict";return ManagedObject.extend("sap.ui.demo.walkthrough.controller.HelloDialog", {constructor : function (oView) {this._oView = oView;},exit : function () {delete this._oView;},open : function () {var oView = this._oView;// create dialog lazilyif (!this.pDialog) {var oFragmentController = {onCloseDialog : function () {oView.byId("helloDialog").close();}};// load asynchronous XML fragmentthis.pDialog = Fragment.load({id: oView.getId(),name: "sap.ui.demo.walkthrough.view.HelloDialog",controller: oFragmentController}).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();});}});});

HelloDialog重用对象的实现extend(继承)了一个sap.ui.base.ManagedObject对象来继承SAPUI5的一些核心功能。

我们的open方法是从HelloPanel控制器重构的，并像前面的步骤一样实例化我们的对话碎片。

Note
我们不将控制器作为第三个参数传递给Fragment.load函数，而是传递一个本地helper对象 oFragmentContoller，它包含了碎片所需的事件处理函数onCloseDialog。

open方法现在包含了我们的对话框实例化。第一次调用open方法时，对话框被实例化。该方法的oView参数用于将当前视图连接到对话框。稍后，我们将在控制器中调用该对象的open方法。

onCloseDialog事件处理程序被简单地从HelloPanel控制器移到重用对象。

我们也添加了一个exit函数，就像我们在组件中做的那样，当对象被销毁时，它将被自动调用。为了释放helper对象中所有已分配的内存，我们删除了保存视图引用的属性。视图本身将被组件销毁，所以我们不需要对此进行关注。

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 modelvar oBundle = this.getView().getModel("i18n").getResourceBundle();var sRecipient = this.getView().getModel().getProperty("/recipient/name");var sMsg = oBundle.getText("helloMsg", [sRecipient]);// show messageMessageToast.show(sMsg);},onOpenDialog : function () {this.getOwnerComponent().openHelloDialog();}});
});

onOpenDialog方法现在通过调用helper(辅助)方法getOwnerComponent来访问它的组件。当调用重用对象的open方法时，我们在当前视图中传递它来将其连接到对话框。

webapp/view/App.view.xml

<mvc:ViewcontrollerName="sap.ui.demo.walkthrough.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"><Shell><App class="myAppDemoWT"><pages><Page title="{i18n>homePageTitle}"><headerContent><Buttonicon="sap-icon://hello-world"press=".onOpenDialog"/></headerContent><content><mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/></content></Page></pages></App></Shell>
</mvc:View>

我们在应用视图的头部区域添加了一个按钮来显示hello world对话框的重用。当按下按钮时，对话框将像我们之前在面板中创建的按钮一样打开。

webapp/controller/App.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller"
], function (Controller) {"use strict";return Controller.extend("sap.ui.demo.walkthrough.controller.App", {onOpenDialog : function () {this.getOwnerComponent().openHelloDialog();}});});

我们也将onOpenDialog方法添加到应用程序控制器中，这样对话框就会打开并引用当前视图。

约定
将在多个控制器中使用的所有资源放在单独的模块中。

结果：

这个对话框现在由组件打开