来自 fiori 应用程序模板时将 ui5 应用程序部署到启动板

Question

我们为 Fiori 提供以下开发环境：

网关 7.4
后端：Sap Netweaver 7.4 SP15
带有 Orion 版本 160811 的本地 Web IDE

我们没有 HCP，我们的网关在我们的网络中是本地的，我们也没有 Web 调度程序或 Sap 路由器，这意味着我们不能直接从 Web IDE 进行部署，而必须手动上传文件夹到网关。

我们在 Web IDE 中从头开始制作了一个应用程序并将其导出为 zip 以将其部署到启动板中。 在这种情况下一切顺利，我们将应用程序添加到 rol 或使用独立 url 来测试它是否工作正常。

问题是当我们从 Web IDE 制作一个 Fiori Worklist Template 应用程序，然后尝试以与其他应用程序相同的方式部署它时。

当我们运行应用程序的独立 url 时，我们收到以下 javascript 错误：

Uncaught TypeError: Cannot read property 'createRenderer' of undefined.

我们的 flpSandbox.html 如下（没有 html 标签）：

    <script>
        window["sap-ushell-config"] = {
            defaultRenderer : "fiori2",
            renderers: {
                fiori2: {
                    componentData: {
                        config: {
                            search: "hidden"
                        }
                    }
                }
            },
            applications: {
                "Notastest1-display": {
                    additionalInformation: "SAPUI5.Component=appnotatest",
                    applicationType: "URL",
                    url: "../",
                    description: "Despliegue de Notas Alumnos.",
                    title: "Calificaciones Mobile"
                }
            }
        };
    </script>

    <script src="../test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>

    <!-- Bootstrap the UI5 core library -->
    <script id="sap-ui-bootstrap"
            src="../resources/sap-ui-core.js"
            data-sap-ui-libs="sap.ushell, sap.collaboration"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-resourceroots='{"appnotatest": "../"}'
            data-sap-ui-frameOptions='allow'>   // NON-SECURE setting for testing environment
    </script>

    <script>
        sap.ui.getCore().attachInit(function() {
            // initialize the ushell sandbox component
            sap.ushell.Container.createRenderer().placeAt("content");
        });
    </script>

我们的宣言：

{
"_version": "1.3.0",
"sap.app": {
    "_version": "1.3.0",
    "id": "appnotatest",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
        "version": "1.0.0"
    },
    "dataSources": {
        "mainService": {
            "uri": "/sap/opu/odata/sap/ZNOTAS3_SRV/",
            "type": "OData",
            "settings": {
                "odataVersion": "2.0",
                "localUri": "localService/metadata.xml"
            }
        }
    },
    "sourceTemplate": {
        "id": "sap.ui.ui5-template-plugin.1worklist",
        "version": "1.36.2"
    }
},
"sap.ui": {
    "_version": "1.3.0",
    "technology": "UI5",
    "icons": {
        "icon": "sap-icon://task",
        "favIcon": "",
        "phone": "",
        "phone@2": "",
        "tablet": "",
        "tablet@2": ""
    },
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": true
    },
    "supportedThemes": [
        "sap_hcb",
        "sap_bluecrystal"
    ]
},
"sap.ui5": {
    "_version": "1.3.0",
    "rootView": {
        "viewName": "appnotatest.view.App",
        "type": "XML",
        "id": "app"
    },
    "dependencies": {
        "minUI5Version": "1.36.0",
        "libs": {
            "sap.ui.core": {
                "minVersion": "1.36.0"
            },
            "sap.m": {
                "minVersion": "1.36.0"
            },
            "sap.ushell": {
                "minVersion": "1.36.0"
            },
            "sap.collaboration": {
                "minVersion": "1.36",
                "lazy": true
            }
        }
    },
    "resources": {
        "css": [
            {
                "uri": "css/style.css"
            }
        ]
    },
    "contentDensities": {
        "compact": true,
        "cozy": true
    },
    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel",
            "settings": {
                "bundleName": "appnotatest.i18n.i18n"
            }
        },
        "": {
            "dataSource": "mainService",
            "settings": {
                "metadataUrlParams": {
                    "sap-documentation": "heading"
                }
            }
        }
    },
    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "appnotatest.view",
            "controlId": "app",
            "controlAggregation": "pages",
            "bypassed": {
                "target": [
                    "notFound"
                ]
            },
            "async": true
        },
        "routes": [
            {
                "pattern": "",
                "name": "worklist",
                "target": [
                    "worklist"
                ]
            },
            {
                "pattern": "EntityAsignaturasSet/{objectId}",
                "name": "object",
                "target": [
                    "object"
                ]
            }
        ],
        "targets": {
            "worklist": {
                "viewName": "Worklist",
                "viewId": "worklist",
                "viewLevel": 1
            },
            "object": {
                "viewName": "Object",
                "viewId": "object",
                "viewLevel": 2
            },
            "objectNotFound": {
                "viewName": "ObjectNotFound",
                "viewId": "objectNotFound"
            },
            "notFound": {
                "viewName": "NotFound",
                "viewId": "notFound"
                }
            }
        }
    }
}

最后但并非最不重要的是，这是我们的 component.js：

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "appnotatest/model/models",
    "appnotatest/controller/ErrorHandler"
], function (UIComponent, Device, models, ErrorHandler) {
    "use strict";

    return UIComponent.extend("appnotatest.Component", {

        metadata : {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * In this function, the FLP and device models are set and the router is initialized.
         * @public
         * @override
         */
        init : function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // initialize the error handler with the component
            this._oErrorHandler = new ErrorHandler(this);

            // set the device model
            this.setModel(models.createDeviceModel(), "device");
            // set the FLP model
            this.setModel(models.createFLPModel(), "FLP");

            // create the views based on the url/hash
            this.getRouter().initialize();
        },

        /**
         * The component is destroyed by UI5 automatically.
         * In this method, the ErrorHandler is destroyed.
         * @public
         * @override
         */
        destroy : function () {
            this._oErrorHandler.destroy();
            // call the base component's destroy function
            UIComponent.prototype.destroy.apply(this, arguments);
        },

        /**
         * This method can be called to determine whether the sapUiSizeCompact or sapUiSizeCozy
         * design mode class should be set, which influences the size appearance of some controls.
         * @public
         * @return {string} css class, either 'sapUiSizeCompact' or 'sapUiSizeCozy' - or an empty string if no css class should be set
         */
        getContentDensityClass : function() {
            /*if (this._sContentDensityClass === undefined) {
                // check whether FLP has already set the content density class; do nothing in this case
                if (jQuery(document.body).hasClass("sapUiSizeCozy") || jQuery(document.body).hasClass("sapUiSizeCompact")) {
                    this._sContentDensityClass = "";
                } else if (!Device.support.touch) { // apply "compact" mode if touch is not supported
                    this._sContentDensityClass = "sapUiSizeCompact";
                } else {
                    // "cozy" in case of touch support; default for most sap.m controls, but needed for desktop-first controls like sap.ui.table.Table
                    this._sContentDensityClass = "sapUiSizeCozy";
                }
            }
            return this._sContentDensityClass;*/
            }

        });

    }
);

我们尝试创建另一个 index.html 来解决创建呈现的问题，我们解决了错误但应用程序仍然无法运行，它只显示没有磁贴的启动板。 请记住，当我们从本地 Web IDE 测试应用程序时，它首先会打开一个带有应用程序磁贴的启动板。

非常感谢您的帮助。

Answer 1

这可能是与您的 Netweaver 系统上的 UI5 版本有关的问题。 为了测试这个理论，在您的 Netweaver 系统上使用相同的 UI5 版本在 Web IDE 中运行应用程序，看看是否出现相同的错误。

为此，在 Web IDE 中右键单击您的项目 -> 运行 -> 运行配置... -> 选择现有的运行配置或添加一个新的 -> 高级设置选项卡 -> 将 ui5 版本更改为相同的运行配置在您的 Netweaver 系统上 -> 保存并运行。

如果您遇到同样的问题，您可能需要在您的 Netweaver 系统上更新您的 UI5 版本，或者尝试在您的 UI5 应用程序中针对此问题构建解决方法。