Openui5 - 路由器在聚合中附加内容

Question

我正在创建一个具有 Fiori Launchpad 样式（使用 Shell 组件）但仅使用 openui5 组件的应用程序。 Here is a preview of launchpad.

我的问题是，当我尝试使用路由器进行导航时，内容会附加到主要 Shell 内容聚合中，而不是清理启动板图标。 Here a preview for this behavior

我的指数：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <title>Intranet 4success</title>
    <link rel="shortcut icon" href="https://www.4success.com.br/wp-content/uploads/2014/06/favicon.ico" type="image/x-icon" />

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script
            src="http://openui5.localhost/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"
            data-sap-ui-resourceroots='{"4success.sfsf-analytics": ""}'>
    </script>

    <script>
        sap.ui.getCore().attachInit(function () {
            new sap.m.App({
                pages: [
                    new sap.m.Page({
                        showHeader: false,
                        enableScrolling: true,
                        content: [new sap.ui.core.ComponentContainer({
                            name: "4success.sfsf-analytics"
                        })]
                    })
                ]
            }).placeAt("content", "first");
        });
    </script>

</head>
<body class="sapUiBody sapUShellFullHeight" role="application">
<div id="content"></div>
</body>
</html>

我的manifest.json:

{
  "_version": "1.1.0",
  "sap.app": {
    "_version": "1.1.0",
    "id": "4success.sfsf-analytics",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "sourceTemplate": {
      "id": "ui5template.basicSAPUI5ApplicationProject",
      "version": "1.32.0"
    }
  },
  "sap.ui": {
    "_version": "1.3.0",
    "technology": "UI5",
    "icons": {
      "icon": "",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
    },
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    },
    "supportedThemes": [
      "sap_hcb",
      "sap_bluecrystal"
    ]
  },
  "sap.ui5": {
    "_version": "1.2.0",
    "rootView": {
      "viewName": "4success.sfsf-analytics.view.App",
      "type": "XML"
    },
    "dependencies": {
      "minUI5Version": "1.34.0",
      "libs": {
        "sap.ui.core": {
          "minVersion": "1.34.0"
        },
        "sap.m": {
          "minVersion": "1.34.0"
        },
        "sap.ui.layout": {
          "minVersion": "1.34.0"
        }
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "4success.sfsf-analytics.i18n.i18n"
        }
      }
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "4success.sfsf-analytics.view",
        "controlId": "myShell",
        "controlAggregation": "content",
        "clearTarget": true,
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        }
      },
      "routes": [
        {
          "pattern": "",
          "name": "appHome",
          "target": "launchpad"
        },
        {
          "pattern": "instances",
          "name": "instances",
          "target": "instances"
        }
      ],
      "targets": {
        "launchpad": {
          "viewName": "Launchpad",
          "viewLevel": 1
        },
        "instances": {
          "viewName": "Instances",
          "viewLevel": 2
        }
      }
    }
  }
}

我的App.view.xml:

<mvc:View
        controllerName="4success.sfsf-analytics.controller.App"
        xmlns:u="sap.ui.unified"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m"
        class="viewPadding">
    <u:Shell
            id="myShell"
            icon="{/logo}">
        <u:headItems>
            <u:ShellHeadItem
                    tooltip="{i18n>menuConfiguration}"
                    icon="sap-icon://menu2"
                    press="handlePressConfiguration"/>
            <u:ShellHeadItem
                    tooltip="{i18n>menuHome}"
                    icon="sap-icon://home"
                    visible="true"
                    press="onHomePress"/>
        </u:headItems>
        <u:headEndItems>
            <u:ShellHeadItem
                    icon="sap-icon://log"
                    tooltip="{i18n>menuLogoff}"
                    press="onLogout"/>
        </u:headEndItems>
        <u:user>
            <u:ShellHeadUserItem
                    image="sap-icon://account"
                    id="btnUserName"/>
        </u:user>
        <u:search>
            <SearchField
                    search="handleSearchPressed"/>
        </u:search>
        <u:paneContent>
            <Text text="Lorem ipsum"/>
        </u:paneContent>
        <u:content />
    </u:Shell>
</mvc:View>

我的Launchpad.view.xml:

<mvc:View
        controllerName="4success.sfsf-analytics.controller.Launchpad"
        height="100%"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m">
    <Page showHeader="false"
          enableScrolling="false"
          id="idPageHome">
        <content>
            <TileContainer height="100%"
                           width="100%"
                           allowAdd="true"
                           id="idTileContainer"
                           tileDelete="handleTileDelete">
                <tiles>
                    <StandardTile title="{i18n>launchpadInstances}"
                                  icon="sap-icon://cloud"
                                  id="idInstances"
                                  press="handleTileNavigation"/>
                </tiles>
            </TileContainer>
        </content>

        <footer>
            <Toolbar>
                <ToolbarSpacer/>
                <Button text="{i18n>menuOrganizeIcons}" press="handleEditPress"/>
                <ToolbarSpacer/>
            </Toolbar>
        </footer>
    </Page>
</mvc:View>

最后是我的 Instances.view.xml:

<mvc:View
        controllerName="4success.sfsf-analytics.controller.Instances"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m"
        height="100%">
    <Page showNavButton="true"
          title="Instâncias SuccessFactors"
          navButtonPress="onNavBack">
        <content>
            <Table id="idProductsTable"
                   inset="false"
                   class="sapUiSmallMarginBottom sapUiResponsiveContentPadding"
                   items="{
   path: '/InstancesCollection',
   sorter: {
    path: 'description'
   }
  }">
                <headerToolbar>
                    <Toolbar>
                        <Title text="Instâncias" level="H2"/>
                    </Toolbar>
                </headerToolbar>
                <columns>
                    <Column width="12em">
                        <Text text="Cliente"/>
                    </Column>
                    <Column minScreenWidth="Tablet"
                            demandPopin="true">
                        <Text text="ID da Empresa"/>
                    </Column>
                    <Column minScreenWidth="Tablet"
                            demandPopin="true"
                            hAlign="Right">
                        <Text text="Usuário"/>
                    </Column>
                    <Column minScreenWidth="Tablet"
                            demandPopin="true"
                            hAlign="Center">
                        <Text text="Servidor"/>
                    </Column>
                    <Column hAlign="Right">
                        <Text text="Status"/>
                    </Column>
                </columns>
                <items>
                    <ColumnListItem>
                        <cells>
                            <ObjectIdentifier title="{description}"/>
                            <Text text="{company_id}"/>
                            <Text text="{username}"/>
                            <Text text="{server_url}"/>
                            <Text text="{status}"/>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </content>
    </Page>
</mvc:View>

对于导航，我正在使用这个命令：

this.getRouter().navTo("instances");

对此行为有什么想法吗？

Answer 1

您是否定义了根视图？它在哪里？哪一个？

如果 'My App.view.xml' 不是根视图，您的 shell 的 ID 将以某物结束。喜欢'__xmlview1-myShell'，你的路由器将无法找到它（因为你通过了'myShell'）。

将要应用路由的控件放在根视图中，或者通过在其所有父 XMLView 上设置 ID 来确保稳定的 ID。

顺便说一句。我从未见过这样结构的应用程序，它对我来说根本没有任何意义......该结构通常更像 Component > Shell > App > Page.

Answer 2

只是为了在有人发现这个时更新，我已将应用程序结构更改为：

<script>
  sap.ui.getCore().attachInit(function () {
    new sap.ui.unified.Shell({
      id: "idMainShell",
      content: new sap.ui.core.ComponentContainer({
        height: "100%",
        name: "4success.sfsf-analytics"
      })
    }).placeAt("content");
  });
</script>

我的根视图：

"sap.ui5": {
    "_version": "1.2.0",
    "rootView": {
      "viewName": "4success.sfsf-analytics.view.App",
      "type": "XML"
},

我的App.view.xml:

<mvc:View
        controllerName="4success.sfsf-analytics.controller.App"
        xmlns:u="sap.ui.unified"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m"
        height="100%">
    <App id="app" height="100%" busy="{appView&gt;/busy}" busyIndicatorDelay="{homeView&gt;/delay}"/>
</mvc:View>

还有我的Launchpad.view.xml：

<mvc:View
        controllerName="4success.sfsf-analytics.controller.Launchpad"
        height="100%"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m"
        class="viewPadding">
    <Page showHeader="false"
          enableScrolling="false"
          id="idPageHome">
        <content>
            <TileContainer height="100%"
                           width="100%"
                           allowAdd="true"
                           id="idTileContainer"
                           tileDelete="handleTileDelete">
                <tiles>
                    <StandardTile title="{i18n>launchpadInstances}"
                                  icon="sap-icon://cloud"
                                  id="idInstances"
                                  press="handleTileNavigation"/>
                    <StandardTile title="{i18n>launchpadKPIs}"
                                  icon="sap-icon://pie-chart"
                                  id="idIndicators"
                                  info="{i18n>launchpadDescriptionKPIs}"
                                  press="handleTileNavigation"/>
                </tiles>
            </TileContainer>
        </content>

        <footer>
            <Toolbar>
                <ToolbarSpacer/>
                <Button text="{i18n>menuOrganizeIcons}" press="handleEditPress"/>
                <ToolbarSpacer/>
            </Toolbar>
        </footer>
    </Page>
</mvc:View>

路由器配置：

"routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "4success.sfsf-analytics.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "clearTarget": true,
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        }
},

而且效果很好。它只是创建了一个我不想要的滚动条，但我很快就会修复它。

Openui5 - 路由器在聚合中附加内容

Openui5 - Router appending content in Aggregation

sapui5

sap-fiori