如何禁用或启用信箱以及调整 UI5 以适应宽屏？

Question

我有一个基于 UI5 的应用程序（1.66+），它可以正常工作，但是屏幕的左侧和右侧有巨大的空白区域（又名letterboxing打开）：

我想禁用信箱以使用整个屏幕空间。

到目前为止我尝试了以下方法：

要在
```
manifest.json
```
```
 的 
```
"fullWidth": true 部分使用 sap.ui
将桌面相关类添加到 index.html 中的 HTML 标签：

<html class="sap-desktop sapUiMedia-Std-Desktop sapUiMedia-StdExt-LargeDesktop">

将
```
appWidthLimited: false
```
添加到 index.html:

<script>
    sap.ui.getCore().attachInit(function () {
        new sap.m.Shell({
            app: new sap.ui.core.ComponentContainer({
                height: "100%",
                name: "APPNAME"
            }),
            appWidthLimited: false
        }).placeAt("content");
    });
</script>

就像《如何在SAPUI5中自定义Shell容器》中描述的那样。

但它们都不适合我。

更新：
我成功地通过静态 XML 模板解决了这个问题 - 只需将

<Shell id="shell" appWidthLimited="false">

添加到主 XML 模板中，但现在我想了解如何通过 JS 在

new sap.m.Shell(…)

定义中实现它。

代码实验的起点如下。

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>widescreen</title>
        <script id="sap-ui-bootstrap"
            src="../../resources/sap-ui-core.js"
            data-sap-ui-theme="sap_fiori_3"
            data-sap-ui-resourceroots='{"letterboxing.widescreen": "./"}'
            data-sap-ui-compatVersion="edge"
            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
            data-sap-ui-async="true"
            data-sap-ui-frameOptions="trusted">
        </script>
    </head>
    <body class="sapUiBody">
        <div data-sap-ui-component data-name="letterboxing.widescreen" data-id="container" data-settings='{"id" : "widescreen"}' id="content"></div>
    </body>
</html>

Component.js:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "letterboxing/widescreen/model/models"
], function (UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("letterboxing.widescreen.Component", {

        metadata: {
            manifest: "json"
        },

        init: function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // enable routing
            this.getRouter().initialize();

            // set the device model
            this.setModel(models.createDeviceModel(), "device");
        }
    });
});

Answer 1

好吧，似乎有很多关于如何禁用/启用信箱的类似问题。这个答案应该为每种情况提供一个解决方案：

独立应用程序

在您的项目中查找

sap.m.Shell

的实例并相应地配置

appWidthLimited

。

例如：

在

index.html

或

index.js

sap.ui.require([
  "sap/m/Shell",
  "sap/ui/core/ComponentContainer",
], (Shell, ComponentContainer) => new Shell({
  appWidthLimited: false|true, // <-- default: true
  // ...
}).placeAt("content"));

在根视图中

<Shell xmlns="sap.m" appWidthLimited="false|true">
  <App>
    <!-- ... -->

当然，Shell 也可以通过 JS 动态配置

myShell.setAppWidthLimited

。

注意： 如果不需要信箱，请仔细检查

sap.m.Shell

控件是否确实有必要。如果应用程序应该始终以全宽显示，那么 sap.m.Shell
就没有真正的用途。

API参考：

sap.m.Shell

UX 指南：信箱式

SAP Fiori 启动板 (FLP) 上的应用程序

组件/应用程序……：

不应该在任何地方包含sap.m.Shell
```
（请检查根视图）。
```

静态

manifest.json

"sap.ui": {
  "fullWidth": true|false,
  ...
},

运行时动态

// AppConfiguration required from "sap/ushell/services/AppConfiguration"
AppConfiguration.setApplicationFullWidth(true|false);

API参考：sap.ushell.services.AppConfiguration

UX 指南：信箱式

⚡限制

目前，

静态设置"fullWidth": false

不支持：

sap/ushell/services/AppConfiguration
```
 进行的动态设置。
```

Answer 2

根据

可用的OpenUI5版本，最新的OpenUI5版本是1.65.0。你们的应用程序基于1.66.0怎么样？

在

appWidthLimited: false

 上设置

sap.m.Shell

 即可完成工作。查看此示例 (

plunker / github)（在新窗口中的 Plunker 运行预览中）

Answer 3

您可以通过从index.html中删除shell控件来实现：

sap.ui.getCore().attachInit(function () {
    sap.ui.require(["sap/ui/core/ComponentContainer"], function (ComponentContainer) {
        new ComponentContainer({
            name: "yourProject",
            async: true,
            manifest: true,
            height: "100%"

        }).placeAt("content");

    });
});

而不是这个：

<script>
    sap.ui.getCore().attachInit(function () {
        new sap.m.Shell({
            app: new sap.ui.core.ComponentContainer({
                height: "100%",
                name: "APPNAME"
            }),
            appWidthLimited: false
        })
        .placeAt("content");
    });
</script>

Answer 4

通过 XML 模板静态实现：

<mvc:View controllerName="letterboxing.widescreen.controller.index" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell" appWidthLimited="false">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content></content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

有关通过 JS 控制器使用

appWidthLimited: false

 中的

sap.m.Shell

 进行动态实现，请参阅：

https://stackoverflow.com/a/55867413

Answer 5

出于某种原因，

AppConfiguration.setApplicationFullWidth(true);

对我不起作用。我没有有效的应用程序容器。

我用这种方式解决了这个问题，这确实是很老套的方式：在我的应用程序控制器中，我添加了

onAfterRendering

 方法的实现：

onAfterRendering: function () {
    var oElement = this.getView().byId("idAppControl").$();
    while (oElement && oElement.hasClass) {
        if (oElement.hasClass("sapUShellApplicationContainerLimitedWidth")) {
            oElement.removeClass("sapUShellApplicationContainerLimitedWidth");
            break;
        }
        oElement = oElement.parent();
    }
}

如何禁用或启用信箱以及调整 UI5 以适应宽屏？

问题描述投票：0回答：5

5个回答

独立应用程序

在
`index.html`
或
`index.js`

在根视图中

SAP Fiori 启动板 (FLP) 上的应用程序

`manifest.json`

最新问题

如何禁用或启用信箱以及调整 UI5 以适应宽屏？

问题描述 投票：0回答：5

5个回答

独立应用程序

在 index.html 或 index.js

在根视图中

SAP Fiori 启动板 (FLP) 上的应用程序

manifest.json

最新问题

问题描述投票：0回答：5

在
`index.html`
或
`index.js`

`manifest.json`