Question

我一直在尝试使用自己的驱动程序从其他视图（view.js）向我的SplitApp添加页面，但这样做会导致以下错误：

Sap-ui-core.js: 174 Uncaught Error: failed to load 'view / GestionDePlanta.view.js' from openui5-1.40.8 / resources / view / GestionDePlanta.view.js: 404 - Not Found (...)

我认为它与启动时访问该视图的路径有关

Sap.ui.view ({id: "GestionDePlanta", viewName: "view.GestionDePlanta", type: sap.ui.core.mvc.ViewType.JS});

任何人都知道如何做到这一点？

我正在学习一个教程，我发现这个教程很容易理解，但显然这是不完整的： http://blog.mypro.de/2014/02/14/add-page-to-ui5-boilerplate/

非常感谢你。

的index.html

   <!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">

        <title>DatosMaestros</title>

        <script id="sap-ui-bootstrap"
            src="/openui5-1.40.8/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-compatVersion="edge"
        </script>

        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script type="text/javascript" src="js/utilityFunction.js"></script>
        <script type="text/javascript" src="js/xml2json.js"></script>

        <script>
                 sap.ui.localResources("P_GestionDePlanta");

        var url = "http://services.odata.org/V4/Northwind/Northwind.svc/Employees",
            oModel = new sap.ui.model.json.JSONModel(url, true);

        sap.ui.getCore().setModel(oModel);

        var app = new sap.m.SplitApp("appId",{mode:sap.m.SplitAppMode.ShowHideMode});
        var master = sap.ui.view({id:"GestionDePlanta", viewName:"view.GestionDePlanta", type:sap.ui.core.mvc.ViewType.JS});
        app.addMasterPage(master);
        var detail = sap.ui.view({id:"PlanAbastecimiento", viewName:"view.PlanAbastecimiento", type:sap.ui.core.mvc.ViewType.JS});
        app.addDetailPage(detail);
        app.placeAt("content");

        </script>
    </head>

    <body class="sapUiBody" id="content">
    </body>

</html>

Component.js

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

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

        metadata: {
            manifest: "json"
        },

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

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

Manifiest.json

{
    "_version": "1.1.0",
    "sap.app": {
        "_version": "1.1.0",
        "id": "P_GestionDePlanta",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "ui5template.basicSAPUI5ApplicationProject",
            "version": "1.32.0"
        }
    },

    "sap.ui": {
        "_version": "1.1.0",
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        },
        "supportedThemes": [
            "sap_hcb",
            "sap_bluecrystal"
        ]
    },

    "sap.ui5": {
        "_version": "1.1.0",
        "rootView": {
            "viewName": "P_GestionDePlanta.view.GestionDePlanta",
            "type": "JS"
        },
        "dependencies": {
            "minUI5Version": "1.30.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {},
                "sap.ui.layout": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "P_ProcesamientoDeArchivos.i18n.i18n"
                }
            }
        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        }
    }
}

文件夹

Image:

Answer 1

你所遵循的教程已经过时了。您可能希望使用基于组件的结构（您的样本中有一个组件但从不使用它）。官方SAPUI5 / OpenUI5开发人员指南特别是演练大多是最新的。我建议你在那里进行walkthrough。

回到你的问题：UI5有自己的方法从名称解析模块（≈javascript文件）。

在您的示例中，您为UI5提供了视图的名称："view.GestionDePlanta"。 view 是命名空间， GestionDePlanta 是模块名称。因此UI5查找命名空间视图并且 - 缺少任何匹配的命名空间路径映射 - 它默认使用与您在引导程序sap-ui-core.js中定义的<script>相同的路径的UI5框架本身{{ 1}}元素： ./ openui5-1.40.8 / resources / view 。

要添加此类命名空间路径映射，您可以使用sap.ui.localResources()函数。

使用sap.ui.localResources("P_GestionDePlanta");声明，UI5会在文件夹 ./ P_GestionDePlanta / view 中查找模块"P_GestionDePlanta.view.GestionDePlanta"。

这已经好了，但你的文件夹结构应该是这样的：

+ P_GestionDePlanta
  + view
      GestionDePlanta.view.js
  + controller
      GestionDePlanta.controller.js
index.html

另一种方法是使用jQuery.sap.registerModulePath()添加名称空间路径映射。使用jQuery.sap.registerModulePath("P_GestionDePlanta", "./"); UI5会在 ./ view 文件夹中查找模块"P_GestionDePlanta.view.GestionDePlanta"。

通过它，您可以保留文件夹结构：

+ view
    GestionDePlanta.view.js
+ controller
    GestionDePlanta.controller.js
index.html

但无论哪种方式，您都必须提供以 P_GestionDePlanta 开头的完整命名空间，如下所示：

sap.ui.view({id:"GestionDePlanta", viewName:"P_GestionDePlanta.view.GestionDePlanta", type:sap.ui.core.mvc.ViewType.JS});

配置路径以在SplitApp SAPUI5中显示页面

1 个答案: