如何禁用宽屏并调整 UI5 以适应宽屏？
How to disable letterboxing and adjust UI5 for the widescreen?
我有一个基于 UI5 的应用程序 (1.66+)，它可以正常工作，但是屏幕左右两侧有巨大的空白 space（又名 letterboxing ):
我想禁用信箱以使用整个屏幕space。
到目前为止我尝试了以下方法：
- 在 manifest.json
的 sap.ui 部分使用 "fullWidth": true
- 将与桌面相关的 类 添加到 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>
就像«»中描述的那样。
但是 none 对我有用。
更新：
我成功地通过静态 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");
}
});
});
根据 Available OpenUI5 Versions，最新的 OpenUI5 版本是 1.65.0。基于 1.66.0 的应用程序如何？
在 sap.m.Shell 上设置 appWidthLimited: false 应该可以完成工作。查看此示例 (plunker / github)（在新 window 中的 Plunker 运行 预览中）
您可以实现从 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>
通过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 和 sap.m.Shell 中的 appWidthLimited: false 的动态实现，请参阅：
好的，似乎有很多关于如何 disable/enable 信箱化的类似问题。这个答案应该为每种情况提供解决方案：
独立应用程序
在您的项目中查找 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"));
在根视图中
<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（请检查根视图）。
- 改为从 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 reference: sap.ushell.services.AppConfiguration
UX guideline: Letterboxing
出于某种原因，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 的应用程序 (1.66+)，它可以正常工作，但是屏幕左右两侧有巨大的空白 space（又名 letterboxing ):
我想禁用信箱以使用整个屏幕space。
到目前为止我尝试了以下方法：
- 在 manifest.json 的
- 将与桌面相关的 类 添加到 index.html 中的 HTML 标签：
sap.ui 部分使用 "fullWidth": true
<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>
就像«
但是 none 对我有用。
更新：
我成功地通过静态 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");
}
});
});
根据 Available OpenUI5 Versions，最新的 OpenUI5 版本是 1.65.0。基于 1.66.0 的应用程序如何？
在 sap.m.Shell 上设置 appWidthLimited: false 应该可以完成工作。查看此示例 (plunker / github)（在新 window 中的 Plunker 运行 预览中）
您可以实现从 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>
通过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 和 sap.m.Shell 中的 appWidthLimited: false 的动态实现，请参阅：
好的，似乎有很多关于如何 disable/enable 信箱化的类似问题。这个答案应该为每种情况提供解决方案：
独立应用程序
在您的项目中查找 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"));
在根视图中
<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（请检查根视图）。 - 改为从 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 reference: sap.ushell.services.AppConfiguration
UX guideline: Letterboxing
出于某种原因，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();
}
}