我有一个基于 UI5 的应用程序 (1.66+),它可以正常工作,但屏幕左侧和右侧有巨大的空白区域(又名 letterboxing 已打开):
我想禁用信箱以使用整个屏幕空间。
到目前为止,我尝试了以下方法:
- 使用
"fullWidth": true
在sap.ui
manifest.json 部分
- 要将桌面相关的类添加到 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>
就像《How to customise Shell container in SAPUI5》中描述的那样».
但它们都不适合我。
更新:
我通过静态 XML 模板成功解决了这个问题 — 只需添加 <Shell id="shell" appWidthLimited="false">
到主要的 XML 模板,但现在我想了解如何通过 new sap.m.Shell(…)
中的 JS 实现它定义。
代码实验的起点如下。
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");
}
});
});
最佳答案
好的,似乎有很多关于如何禁用/启用信箱的类似问题。这个答案应该为每种情况提供一个解决方案:
独立应用程序
查找 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, // <--
// ...
}).placeAt("content"));
在 Root View 中
<Shell xmlns="sap.m" appWidthLimited="false|true">
<App>
<!-- ... -->
当然,Shell 也可以在 JS 中动态配置 myShell.setAppWidthLimited
.
注意:如果不需要信箱,请重新考虑是否 <Shell>
在你的应用程序中是完全必要的。 sap.m.Shell
没有任何目的如果应用程序始终以全角显示。
API reference: sap.m.Shell
UX guideline: Letterboxing
SAP Fiori 启动板 (FLP) 上的应用
组件/应用程序...:
- 不应不包含
sap.m.Shell
任何地方(请检查 Root View )。 - 改为从 FLP 启动(无 index.html)。
静态地在manifest.json
"sap.ui": {
"fullWidth": true|false,
...
},
运行时动态
// AppConfiguration required from "sap/ushell/services/AppConfiguration"
AppConfiguration.setApplicationFullWidth(true|false);
API reference: sap.ushell.services.AppConfiguration
UX guideline: Letterboxing
⚡限制
目前,静态设置"fullWidth": false
不支持:
- Cloud Foundry 上的 FLP(在 iframe 中运行的部署应用程序)。 SAP 正在调查..
动态设置通过
sap/ushell/services/AppConfiguration
可以用它代替。 - 通过 SAP Fiori 元素生成的应用 - 精心设计。
关于sapui5 - 如何禁用或启用信箱并调整 UI5 以适应宽屏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55832369/