即墨医院网站制作公司,部署php网站,企业培训内容,网站建设要什么软件1. 背景
在 SAPUI5 中#xff0c;Fragments 是一种轻量级的 UI 组件#xff0c;类似于视图#xff08;Views#xff09;#xff0c;但它们没有自己的控制器#xff08;Controller#xff09;。Fragments 通常用于定义可以在多个视图中重用的 UI 片段#xff0c;从而提…1. 背景
在 SAPUI5 中Fragments 是一种轻量级的 UI 组件类似于视图Views但它们没有自己的控制器Controller。Fragments 通常用于定义可以在多个视图中重用的 UI 片段从而提高代码的可重用性和模块化程度。
Fragment技术应用场景如下
代码重用将常用的 UI 片段如对话框、表单、工具栏等定义为 Fragments以便在多个视图中重用。模块化开发将复杂视图分解为多个小的、可重用的 Fragments提高代码的可维护性。动态加载根据用户操作或其他条件动态加载 Fragments提高应用程序的灵活性。 注1由于 Fragments 没有自己的控制器它们会使用嵌入它们的视图的控制器。 注2 Fragments 是一段独立的 UI 代码可以用 XML、HTML、JSON 或 JavaScript 编写在SAPUI5中推荐的方式是使用XML。格式要求以.fragment.xml结尾例如FragmentName.fragment.xml。碎片文件的位置应放在视图view文件夹下。 2. 示例
假设我们有一个对话框 DialogFragment需要在多个视图中使用。
2.1 创建 Fragment DialogFragment.fragment.xml core:FragmentDefinitionxmlnssap.mxmlns:coresap.ui.coreDialog idmyDialog titleMy DialogcontentVBoxText textThis is a dialog fragment/Input placeholderEnter something//VBox/contentbuttonsButton textOK pressonDialogOk/Button textCancel pressonDialogCancel//buttons/Dialog
/core:FragmentDefinition2.2 在视图中使用 Fragment MainView.view.xml mvc:ViewcontrollerNamemyApp.controller.MainViewxmlns:mvcsap.ui.core.mvcxmlnssap.mPagecontentButton textOpen Dialog pressonOpenDialog//content/Page
/mvc:ViewMainView.controller.js sap.ui.define([sap/ui/core/mvc/Controller,sap/ui/core/Fragment
], function (Controller, Fragment) {use strict;return Controller.extend(myApp.controller.MainView, {onOpenDialog: function () {var oView this.getView();// Check if the fragment is already createdif (!this.byId(myDialog)) {// Load the fragment asynchronouslyFragment.load({id: oView.getId(),name: myApp.view.DialogFragment,controller: this}).then(function (oDialog) {// Connect dialog to the root view of this component (models, lifecycle)oView.addDependent(oDialog);oDialog.open();});} else {this.byId(myDialog).open();}},onDialogOk: function () {this.byId(myDialog).close();},onDialogCancel: function () {this.byId(myDialog).close();}});
});3.练习
在前序练习的基础上让我们为应用程序增加一个对话框对话框相对特殊因为它会在常规应用程序内容的顶部弹出因此并不属于某个特定视图。
这意味着我们需要在控制器的某个位置完成对话框的实例化。但由于我们想使用声明的方式创建控件并希望保持可复用性和灵活性我们将使用fragment技术来创建一个包含对话框的XML碎片。这样对话框就可以在应用程序的多个视图中使用。
3.1 创建包含对话框的碎片
让我们在视图文件下新建HelloDialog.fragment.xml碎片文件在此文件中用声明的方式定义对话框Dialog控件。
碎片资源库位于sap.ui.core的命名空间中我们在FragmentDefinition标签内部为它添加了一个xml命名空间。
定义Fragment的语法与视图类似但由于片段没有控制器因此无需定义该属性。 另外碎片不在应用程序的DOM树中留下任何痕迹也没有片段本身的控制实例只有包含的控件。 它只是一组可重用控件的容器。 HelloDialog.fragment.xml碎片文件中的代码如下
core:FragmentDefinition xmlnssap.mxmlns:coresap.ui.core DialogidhelloDialogtitleHello {/recipient/name}/
/core:FragmentDefinition3.2 在主视图上新增按钮
接下来让我们在HelloPanel.view.xml视图中添加了一个新按钮Button来打开对话框并指定事件处理函数press.onOpenDialog。与此同时让我们为此按钮控件设置一个idhelloDialogButton。 将关键控件的唯一ID设置为helloWorldButton是一个好习惯这样可以方便识别。如果未指定id属性则OpenUI5运行时会为控件生成唯一但易变的ID例如__button23。在浏览器中检查应用程序的DOM元素就可以看到差别。 改动后的HelloPanel.view.xml视图文件内容如下
mvc:ViewcontrollerNamezsapui5.test.controller.HelloPanelxmlnssap.mxmlns:mvcsap.ui.core.mvc
PanelheaderText{i18nhelloPanelTitle}classsapUiResponsiveMarginwidthautocontentButtonidhelloDialogButtontext{i18nopenDialogButtonText}press.onOpenDialogclasssapUiSmallMarginEnd/Buttontext{i18nshowHelloButtonText}press.onShowHelloclassmyCustomButton/Inputvalue{/recipient/name}valueLiveUpdatetruewidth60%/FormattedTexthtmlTextHello {/recipient/name}classsapUiSmallMargin sapThemeHighligh-asColor myCustomText//content/Panel
/mvc:View
3.3 实现按钮的事件响应
最后让我们在控制器文件中实现按钮的事件响应程序。
新增方法onOpenDialog到HelloPanel.controller.js中。如果片段中的对话框尚不存在通过调用控制器模块的loadFragment API来实例化该片段。该方法返回一个Promise对象一旦片段被异步加载完成该Promise对象会被解析。 改动后的HelloPanel.controller.js文件内容如下
sap.ui.define([sap/ui/core/mvc/Controller,sap/m/MessageToast
], function (Controller, MessageToast) {use strict;return Controller.extend(zsapui5.test.controller.HelloPanel, {onShowHello: function () {// read msg from i18n modelconst oBundle this.getView().getModel(i18n).getResourceBundle();const sRecipient this.getView().getModel().getProperty(/recipient/name);const sMsg oBundle.getText(helloMsg, [sRecipient]);// show messageMessageToast.show(sMsg);},onOpenDialog: function () {// create dialog lazily if (!this.pDialog) {this.pDialog this.loadFragment({name: zsapui5.test.view.HelloDialog});}this.pDialog.then(function (oDialog) {oDialog.open();});}});
});只有当promise被resolve(片段被加载)时才会触发.then中的代码oDialog.open()。在第二次调用时由于fragment已经加载所以loadFrament不会再被调用但是promise本身仍然被resolve所以oDialog.open()会打开现有的对话框。 3.4 增强i18n
别忘记为新增button的描述维护对应的i18n资源文件。
改动后的i18n.properties文件如下
# App Descriptor
appTitleHello World
appDescriptionA simple app that explains the most important concepts of SAPUI5# Hello Panel
showHelloButtonTextSay Hello
helloMsgHello {0}homePageTitlehomePageTitle
helloPanelTitlePanelTitle
openDialogButtonTextSay Hello With Dialog3.5 运行程序
运行改动后的程序我们可以看到新增的Say Hello With Button按钮。点击按钮后会在弹出的窗口中显示Hello World。 目前的这个应用程序还是有些小问题可见弹出窗口是无法关闭的。在下一篇博客中让我们进一步增强Fragment的回调函数来实现弹出窗口的关闭。
4. 小结
本文介绍了SAPUI5中对话框和碎片的概念并通过示例展示了其具体用法。
