如何禁用信箱并为宽屏调整 UI5? [英] How to disable letterboxing and adjust UI5 for the widescreen?
问题描述
我有一个基于 UI5 的应用程序 (1.66+)，它可以正常工作，但屏幕左右两侧有巨大的空白区域(又名
我想禁用信箱以使用整个屏幕空间.
到目前为止，我尝试了以下方法:
- 在manifest.json 的
- 要将与桌面相关的类添加到 index.html 中的 HTML 标记:
sap.ui部分使用"fullWidth": true- 将
appWidthLimited: false添加到 index.html:
就像《
在 index.html 或 index.js 中
sap.ui.require([树液/米/壳"，sap/ui/core/ComponentContainer",], (Shell, ComponentContainer) =>新壳({appWidthLimited: false|true,//<--//...}).placeAt(内容"));在根视图中
<应用程序><!-- ... --> 当然，Shell 也可以通过 myShell.setAppWidthLimited(false|true) 在 JS 中动态配置.
API 参考:sap.m.Shell
用户体验指南:Letterboxing
SAP Fiori 启动板 (FLP) 上的应用
组件/应用……:
- 应该不在任何地方包含
sap.m.Shell(请检查根视图). - 改为从 FLP 启动(没有 index.html).
在 manifest.json 中静态
sap.ui":{fullWidth":真|假，...},在运行时动态
sap.ui.require([//按需配置单例:sap/ushell/services/AppConfiguration"], 配置 =>config.setApplicationFullWidth(true|false));API 参考:sap.ushell.services.AppConfiguration
用户体验指南:Letterboxing
I have an UI5-based app (1.66+), which works correctly, but there are huge empty spaces on the left and right sides of the screen (aka letterboxing is on):
I want to disable letterboxing to use the entire screen space.
I tried the following approaches so far:
- To use
"fullWidth": trueinsap.uisection of manifest.json - To add desktop-related classes to the HTML-tag in index.html:
<html class="sap-desktop sapUiMedia-Std-Desktop sapUiMedia-StdExt-LargeDesktop">
- To add
appWidthLimited: falseto 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>
Just like it is described in «How to customise Shell container in SAPUI5».
But none of them works for me.
Update:
I succeeded to solve the issue via a static XML-template — just add <Shell id="shell" appWidthLimited="false"> to the main XML-template, but now I want to understand how to implement it via JS in new sap.m.Shell(…) definition.
The starting point for code experiments is below.
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");
}
});
});
Ok, so there seems to be many similar questions regarding how to disable/enable letterboxing. This answer should provide a solution for each case:
Standalone Apps
Look for the instantiation of sap.m.Shell in your project and configure appWidthLimited accordingly.
For example:
In index.html or index.js
sap.ui.require([
"sap/m/Shell",
"sap/ui/core/ComponentContainer",
], (Shell, ComponentContainer) => new Shell({
appWidthLimited: false|true, // <--
// ...
}).placeAt("content"));
In root view
<Shell xmlns="sap.m" appWidthLimited="false|true">
<App>
<!-- ... -->
Of course, the Shell can be configured dynamically in JS too with myShell.setAppWidthLimited(false|true).
API reference: sap.m.Shell
UX guideline: Letterboxing
Apps on SAP Fiori launchpad (FLP)
The component / app …:
- should not contain
sap.m.Shellanywhere (please check the root view). - launches from FLP instead (no index.html).
Statically in manifest.json
"sap.ui": {
"fullWidth": true|false,
...
},
Dynamically in runtime
sap.ui.require([ // require the config singleton on-demand:
"sap/ushell/services/AppConfiguration"
], config => config.setApplicationFullWidth(true|false));
API reference: sap.ushell.services.AppConfiguration
UX guideline: Letterboxing
这篇关于如何禁用信箱并为宽屏调整 UI5?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
