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:View
    controllerName="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:View
    controllerName="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:View
    controllerName="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:View
    controllerName="zsapui5.test.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 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 model
           const oBundle = this.getView().getModel("i18n").getResourceBundle();
           const sRecipient = this.getView().getModel().getProperty("/recipient/name");
           const sMsg = oBundle.getText("helloMsg", [sRecipient]);

           // show message
            MessageToast.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:View
    controllerName="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>

3.5 运行程序

运行改动后程序，其界面并未发生变化：

通过ctrl + shift + alt + s打开辅助工具，查看控件结构，我们可以发现新增加的XMLView控件。

4. 小结

本文介绍了SUPUI5中视图嵌套的技术，并通过实际的代码示例展示了其用法。