第15步:嵌套视图-优快云博客

本文档详细介绍了在SAPUI5中如何重构面板内容到一个单独的视图，创建了名为HelloPanel的新视图，并将面板内容移至其中。同时，将方法从应用控制器转移到了新视图的控制器，实现代码的复用和模块化。这一步骤有助于提高代码组织性和应用程序的可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览

在这里插入图片描述

面板内容现在被重构到一个单独的视图(与上一步没有视觉上的更改)

代码

你可以在演练-第15步查看和下载所有文件。

webapp/view/App.view.xml
在这里插入图片描述

<mvc:View
	controllerName="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}">
					<content>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

我们不会将面板及其内容直接放到App视图中，而是将其移到一个新的单独的HelloPanel视图中。我们在面板的内容聚合中使用XMLView标签来引用它。

webapp/view/HelloPanel.view.xml (New)

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

面板的全部内容现在被添加到新的文件HelloPanel.view.xml中。我们还通过设置XML视图的controllerName属性来指定视图的控制器。

webapp/controller/HelloPanel.controller.js (New)

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 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);
      }
   });
});

为了拥有一个可重用的资产，onShowHello方法也从应用控制器移动到HelloPanel控制器。

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", {
   });
});