Question

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

Answer 1

据我所知，你有一个主视图（母版页），它包含ToolPage和SideNavigation。

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

我在这里列出你应该做的事情：

将视图创建为单独的视图文件。（XML或JS）假设你创建了View1。
为按钮单击（点击）菜单项创建一个事件处理程序。这应该转发到主视图的控制器。（EventBus）
在主视图的控制器中，创建一个实例化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);
}},

SAPUI5 - 标题，侧边栏和导航

1 个答案: