如何将sap.m.Shell与sap.ui.unified.Shell一起使用而没有工件

Question

我正在使用sap.m.Shell获取桌面设备上的边框/框架，sap.ui.unified.Shell获取其提供的功能。但是当我将这两个shell一起使用时，我的应用程序渲染顶部和底部页脚工具栏的间隙略低于可见页面区域。

顶部的差距：

底部页脚略低于页面。请注意按钮底部不可见：

单独使用这些控件之一不会产生此问题。

在我的index.html文件中，我创建了sap.m.Shell，如下所示：

// Create component container for our component and place in content div
new sap.m.Shell({
    app: new sap.ui.core.ComponentContainer({
        component: oComponent
    })
}).placeAt("content");

在我的主App.view.xml我正在创建统一外壳，如下所示：

<mvc:View
  controllerName="webapp.controller.App"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:u="sap.ui.unified"
  xmlns="sap.m">
  <u:Shell
    id="webappShell"
    icon="/art/logos/meteor-ui5.png">

```

Unified Shell example at OpenUI5不显示这些工件，但演示代码未显示sap.m.Shell如何实例化。

Answer 1

类似的事情发生在我身上。我通过设置身体边缘来摆脱那些空间;

body{
    margin:0px;
}

Answer 2

默认情况下，body元素会获得类sapUiBody，这会导致边距为0.

我想知道为什么你的body元素没有那个类......但它可能与你元素的层次结构有关。

现在你有

body
|___ m.Shell
     |____ unified.Shell

但是正确的方式是

body
|___ unified.Shell
     |____ m.Shell

为实现这一目标，我做了以下工作：

<强> 1。创建Shell.view.xml

<mvc:View xmlns:l="sap.ui.layout" xmlns:u="sap.ui.unified" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="my.controller.Shell">
    <u:Shell
        id="unifiedShell">
        ....
    </u:Shell>
</mvc:View>

（如有必要，还可为您的视图创建相应的控制器）

<强> 2。把它放在index.html

中

<script>       
    sap.ui.getCore().attachInit(function() {
        // create a new Shell that contains the rootview
        var oShell = new sap.m.Shell({
            app: new sap.ui.core.ComponentContainer({
                name: "my",
                height: "100%"
            }),
            id: "myShell"
        });

        // load the view that contains the unified shell
        var oShellView = sap.ui.view({
            type: sap.ui.core.mvc.ViewType.XML,
            viewName: "my.view.Shell",
        });
        // access the unified shell from the view
        var oUnifiedShell = oShellView.byId("unifiedShell");
        // place the app shell in the unified shell
        oUnifiedShell.addContent(oShell);
        oShellView.placeAt("content");
    });
</script>

您的App.view.xml不需要包含统一的shell。如果您计划在Fiori环境中启动应用程序，这也很棒：Fiori Launchpad已经有一个统一的shell，所以使用您的方法，您将拥有两个统一的shell。通过仅在index.html中加载统一shell（在Fiori上下文中被忽略，直接访问Component.js），您将在非Fiori上下文中使用自定义shell，并在Fiori上下文中使用默认shell。