SAPUI5 - 标题、侧边栏和导航答案

【问题标题】：SAPUI5 - header, sidebar and navigationSAPUI5 - 标题、侧边栏和导航
【发布时间】：2017-02-09 09:45:07
【问题描述】：

我是 SAPUI5 的新手，我在导航、侧边栏和标题方面遇到了一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用了“ToolPage”。每个页面都包含工具页，如下所示：

<mvc:View >
    <tnt:ToolPage id="toolPageId">
        <tnt:header>
            <core:Fragment ...> </core:Fragment>    
        </tnt:header>
        <tnt:sideContent id="SideContentId">
            <core:Fragment ...> </core:Fragment>
        </tnt:sideContent>
        <tnt:mainContents>
            <NavContainer id="pageContainerId" width="100%">
                <Page ...>
                    <content>
                         ...
                         ...
                    </content>
                </Page>
             </NavContainer>
        </tnt:mainContents>
    </tnt:ToolPage>
</mvc:View>

都与此类似，只是内容标签中的代码不同。

这样，我实现了我想要的布局，并使用 manifest.json 中的路线导航。我为每个页面都有一个控制器并使用：

onNavToBeTask: function(oEvent) {
        this.getRouter().navTo("pageTasklist");
}

我现在遇到的问题是每次导航时，标题和侧边栏都会重新加载，并且侧边栏中的错误字段会突出显示。

我找到了一个例子，但这里是一个 .xml 和一个 .js 文件中的所有代码，这将是非常不清楚的 https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.tnt.sample.ToolPage/code

我的问题是：

一般来说，使用侧边栏和标题进行导航的最佳方式是什么？
最好有一个带有标题和侧边栏的“母版页”，然后将内容添加到内容标签中吗？
或者我应该在侧边栏中选择正确的字段并使用导航到页面时调用的函数？

编辑：

Sample screenshot, what I would like to achieve

【问题讨论】：

标签： sapui5

【解决方案1】：

据我从您的帖子中了解到，您有一个包含 ToolPage 和 SideNavigation 的主视图（母版页）。

并且您希望将您的视图放在 ToolPage 的 mainContents 标记中。如果是这种情况：你不应该使用路由器。因为使用路由器，您将离开主视图。

我在这里列出你应该做什么：

将视图创建为单独的视图文件。（XML 或 JS）假设您创建了 View1。
为菜单项的按钮单击（点击）创建事件处理程序。这应该转发到主视图的控制器。（事件总线）
在主视图的控制器中，创建一个函数来实例化 View1。实例化后，将 View1 添加到 ToolPage 的 ScrollContainer（或 NavContainer）的内容中。

类似这样的：

onGoToProductTable: function(oEvent) {
var oScrollContainer = sap.ui.getCore().byId("idScrollContainer");
var oCurrentView = oScrollContainer.getContent();
if (!oCurrentView[0]) {
        var view = sap.ui.getCore().byId("ProductTable");
        if (view === undefined) {
            view = sap.ui.view({
                type: sap.ui.core.mvc.ViewType.JS,
                viewName: "xxx.yyy.view.ProductTable"
            });
        }
        oScrollContainer.addContent(view);
}},

【讨论】：