如何在 SAPUI5 中自定义 Shell 容器

Question

我有一个 shell 容器，在大屏幕上我想利用整个屏幕。我想覆盖整个区域。我如何自定义它。

Answer 1

我假设您使用 XML 作为您的观点。将以下属性 appWidthLimited="false" 添加到 Shell 标记。

Answer 2

当使用 manifest.json 文件并且 UI5 框架实例化 shell 控件时，请执行以下操作（appWidthLimited="false" 无法使用，因为您没有xml 包含 shell 'tag').

manifest.json

...
"sap.ui5": {
    "config": {
        "fullWidth": true
    },
    ...
...

Answer 3

根据最新文档，我提到了 1.48.X，但 sap.ui5 中已不存在：

"sap.ui": {
    "technology": "UI5",
    "icons": {
        "icon": "sap-icon://add-contact",
        "favIcon": "icon/F1373_Approve_Purchase_Orders.ico",
        "phone": "icon/launchicon/57_iPhone_Desktop_Launch.png",
        "phone@2": "icon/launchicon/114_iPhone-Retina_Web_Clip.png",
        "tablet": "icon/launchicon/72_iPad_Desktop_Launch.png",
        "tablet@2": "icon/launchicon/144_iPad_Retina_Web_Clip.png"
    },
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": false
    },
    "supportedThemes": [
        "sap_hcb"
    ],
    "fullWidth": true
},

更多信息：https://openui5.hana.ondemand.com/#/topic/be0cf40f61184b358b5faedaec98b2da

此外，如果您使用的是sap.m.Shell，那么以上内容将无济于事。
为此，您需要设置属性 appWidthLimited: false:

<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-template:

<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-controller 动态设置，这会将 appWidthLimited:false 设置为 sap.m.Shell。

如何在 SAPUI5 中自定义 Shell 容器

How to customise Shell container in SAPUI5

sapui5

sap-fiori