SAPUI5基础知识19 - 视图嵌套（Nested Views）

1. 背景

SAPUI5 是一个用于构建企业级 Web 应用程序的 JavaScript 框架。它提供了丰富的 UI 控件和工具，帮助开发者创建复杂的用户界面。Nested Views 是 SAPUI5 中的一种设计模式，允许在一个视图中嵌套另一个视图。这种模式有助于模块化和重用代码，特别是在构建复杂的应用程序时。

Nested Views 是指在一个主视图（Parent View）中嵌入一个或多个子视图（Child Views）。这种嵌套可以通过 XML、JSON 或 JavaScript 代码来实现。通过这种方式，可以将应用程序的不同部分分离到独立的视图中，从而提高代码的可维护性和可重用性。

通过Nested Views 这种技术，我们可以实现：

模块化开发：将应用程序的不同功能模块分离到独立的视图中，便于开发和维护。
代码重用：相同的子视图可以在多个主视图中重用，减少重复代码。
动态视图加载：根据用户操作或其他条件动态加载不同的子视图，提高应用程序的灵活性。

2. 示例

假设我们有一个主视图MainView，其中包含两个子视图 HeaderView 和 ContentView。

2.1 子视图HeaderView

子视图HeaderView对应的XML视图代码和控制器代码如下：

HeaderView.view.xml

<mvc:ViewcontrollerName="myApp.controller.HeaderView"xmlns:mvc="sap.ui.core.mvc"xmlns="sap.m"><Bar><contentLeft><Button text="Home" press="onHomePress"/></contentLeft><contentMiddle><Title text="Header"/></contentMiddle></Bar>
</mvc:View>

HeaderView.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller"
], function (Controller) {"use strict";return Controller.extend("myApp.controller.HeaderView", {onHomePress: function () {// Home button press logic}});
});

2.2 子视图ContentView

子视图ContentView对应的XML视图代码和控制器代码如下：

ContentView.view.xml

<mvc:ViewcontrollerName="myApp.controller.ContentView"xmlns:mvc="sap.ui.core.mvc"xmlns="sap.m"><VBox><Text text="This is the content area"/></VBox>
</mvc:View>

ContentView.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller"
], function (Controller) {"use strict";return Controller.extend("myApp.controller.ContentView", {// Content view logic});
});

2.3 创建主视图MainView并嵌套子视图

主视图MainView对应的XML视图代码和控制器代码如下：

MainView.view.xml

<mvc:ViewcontrollerName="myApp.controller.MainView"xmlns:mvc="sap.ui.core.mvc"xmlns="sap.m"><Page><mvc:XMLView viewName="myApp.view.HeaderView"/><mvc:XMLView viewName="myApp.view.ContentView"/></Page>
</mvc:View>

MainView.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller"
], function (Controller) {"use strict";return Controller.extend("myApp.controller.MainView", {// Main view logic});
});

注意：引用视图时，必须指定应用程序的命名空间（e.g. myApp）来引用视图。
通过使用 Nested Views，我们可以将应用程序的不同部分分离到独立的视图中，从而提高代码的可维护性和可重用性。这种设计模式在构建复杂的 SAPUI5 应用程序时非常有用。

3. 练习

在前序练习的基础上，让我们将应用程序中，Panel面板控件的内容移动到一个单独的视图文件。

3.1 创建一个新的视图文件

首先，在视图文件夹下，创建一个新的视图文件HelloPanel.view.xml，并指定其controllerName属性来指定视图的控制器。

在这里插入图片描述

并将App.view.xml视图文件中，Panel面板控件中的内容已添加到新文件HelloPanel.view.xml。

新创建的HelloPanel.view.xml文件中的代码如下：

<mvc:ViewcontrollerName="zsapui5.test.controller.HelloPanel"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"
><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"><content><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighligh-asColor myCustomText"/></content></Panel>
</mvc:View>

3.2 创建一个新的控制器文件

在控制器文件夹下，创建新的控制器文件HelloPanel.controller.js，并将App.controller.js中对应的onShowHello( )方法移到此处。
在这里插入图片描述
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);}});
});

3.3 简化主控制器

我们现在已经将的onShowHello( )方法从主控制器App.controller.js中移至HelloPanel.controller.js。

在此，我们更新主控制器文件中的逻辑，更新后主控制器中的逻辑为空，我们稍后的练习中将使用它来添加更多功能。
在这里插入图片描述
更新后App.controller.js文件中的代码如下：

sap.ui.define(["sap/ui/core/mvc/Controller"
], function (Controller) {"use strict";return Controller.extend("zsapui5.test.controller.App", {});
});

3.4 调整应用程序的主视图

最后，让我们在主视图App.view.xml中引用我们新创建出来的视图HelloPanel.view.xml。

在这里插入图片描述

使用SAPUI5库sap.ui.core.mvc中对应的XMLView标签引用子视图。

改动后的主视图App.view.xml文件内容如下:

<mvc:ViewcontrollerName="zsapui5.test.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="zsapui5.test.view.HelloPanel" /></content></Page></pages></App></Shell>
</mvc:View>