6

我有一个基于 UI5 的应用程序（1.66+），它可以正常工作，但是屏幕的左右两侧有巨大的空白区域（也就是开启信箱）：

宽屏 SAPUI5 应用

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

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

  1. "fullWidth": true在manifest.jsonsap.ui部分使用
  2. 要将桌面相关的类添加到index.html中的 HTML 标记：
<html class="sap-desktop sapUiMedia-Std-Desktop sapUiMedia-StdExt-LargeDesktop">
  1. 添加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 模板，但现在我想了解如何通过new sap.m.Shell(…)定义中的 JS 来实现它。

代码实验的起点如下。

索引.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>

组件.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");
        }
    });
});
4

5 回答 5

11

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

独立应用程序

sap.m.Shell在您的项目中查找 的实例化并进行appWidthLimited相应的配置。

例如：

SAP Web IDE 在项目中搜索

在 index.html 或 index.js 中

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

在根视图中

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

当然，Shell 也可以在 JS 中动态配置myShell.setAppWidthLimited。

注意：如果从不需要信箱，请重新考虑<Shell>在您的应用程序中是否需要。sap.m.Shell如果应用程序始终以全宽显示，则没有任何意义。

API 参考：sap.m.Shell
UX 指南：Letterboxing

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

组件/应用程序...：

  • 不应包含任何sap.m.Shell地方（请检查根视图）。
  • 而是从 FLP 启动（无 index.html）。

静态在 manifest.json

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

在运行时动态

sap.ui.require([ "sap/ushell/library" ], shellLib => {
  const { AppConfiguration } = shellLib.services;
  AppConfiguration.setApplicationFullWidth(true|false);
});

API 参考：sap.ushell.services.AppConfiguration
UX 指南：Letterboxing

于 2019-05-14T19:44:18.430 回答
1

根据可用的 OpenUI5 版本，最新的 OpenUI5 版本是 1.65.0。你是如何基于 1.66.0 应用的？

设置应该做的工作appWidthLimited: false。sap.m.Shell查看这个示例 ( plunker / github )（在新窗口中的 Plunker 运行预览中）

于 2019-04-26T12:14:43.003 回答
0

通过 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>

appWidthLimited: false对于通过带有in 的JS-controller 的动态实现sap.m.Shell，请参见：https ://stackoverflow.com/a/55867413

于 2019-05-10T07:35:22.827 回答
0

您可以从 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>
于 2019-04-26T16:40:19.987 回答
0

出于某种原因，AppConfiguration.setApplicationFullWidth(true);对我不起作用。我没有有效的应用程序容器。

我解决了这个问题，诚然，hacky，方式：在我的应用程序控制器中，我添加了这个onAfterRendering方法的实现：

onAfterRendering: function () {
    var oElement = this.getView().byId("idAppControl").$();
    while (oElement && oElement.hasClass) {
        if (oElement.hasClass("sapUShellApplicationContainerLimitedWidth")) {
            oElement.removeClass("sapUShellApplicationContainerLimitedWidth");
            break;
        }
        oElement = oElement.parent();
    }
}
于 2020-10-30T11:55:01.467 回答