Как отключить почтовый ящик и настроить UI5 для широкого экрана? - PullRequest
Новая
       98

Как отключить почтовый ящик и настроить UI5 для широкого экрана?

2 голосов
/ 24 апреля 2019

У меня есть приложение на основе UI5 (1.66+), которое работает корректно, но с левой и правой сторон экрана есть огромные пустые места (он же почтовый ящик включен):

Widescreen SAPUI5 app

Я хочу отключить почтовый ящик, чтобы использовать все пространство экрана.

До сих пор я пробовал следующие подходы:

  1. Чтобы использовать "fullWidth": true в sap.ui разделе manifest.json
  2. Чтобы добавить классы, связанные с рабочим столом, в HTML-тег в index.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>

Как описано в « Как настроить контейнер Shell в SAPUI5 ».

Но ни один из них не работает для меня.

Обновление:
Мне удалось решить проблему с помощью статического 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");
        }
    });
});

Ответы [ 4 ]

4 голосов
/ 14 мая 2019

Хорошо, так что, похоже, много похожих вопросов относительно того, как отключить / включить почтовый ящик.Этот ответ должен предоставить решение для каждого случая:

Автономный

Найдите в своем проекте экземпляр sap.m.Shell и настройте appWidthLimited соответственно.

Например:

SAP Web IDE searching in project

В 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>
    <!-- ... -->

Конечно, оболочку можно динамически настроить и в JS с помощью myShell.setAppWidthLimited(false|true).

Справочник по API: sap.m.Shell

Только для случая с панелью запуска SAP Fiori

Компонент…:

  • должен , а не содержать sap.m.Shell в любом месте (проверьтекорневое представление).
  • запускается из FLP (без index.html).

Статически в manifest.json 

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

Динамически во время выполнения 

sap.ui.require([ // somewhere in controller
  "sap/ushell/services/AppConfiguration"
], config => config.setApplicationFullWidth(true|false));

Ссылка API: sap.ushell.services.AppConfiguration

1 голос
/ 26 апреля 2019

Согласно Доступные версии OpenUI5 самая последняя версия OpenUI5 - 1.65.0.Как ваше приложение на основе 1.66.0?

Установка appWidthLimited: false на sap.m.Shell должна сделать работу.Посмотрите этот пример ( plunker / github ) (в предварительном просмотре запуска Plunker в новом окне)

0 голосов
/ 10 мая 2019

Статическая реализация через 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>

Для динамической реализации через JS-контроллер с appWidthLimited: false в sap.m.Shell см .: https://stackoverflow.com/a/55867413

0 голосов
/ 26 апреля 2019

Вы можете добиться этого, удалив элемент управления оболочки из index.html: 

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