javascript - 来自 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>

我们的 list :

{
"_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 应用中针对此问题构建解决方法。