2016-11-14 106 views
0

我一直在试图网页添加到从自己的驱动程序的其他视图(view.js)我SplitApp,但这样做会导致以下错误:配置路由在SplitApp SAPUI5显示页

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": "", 
      "[email protected]": "", 
      "tablet": "", 
      "[email protected]": "" 
     }, 
     "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:

+0

好吧,这不是”即使你遵循教程,你也不知道该怎么说。在教程中有什么你不明白的东西?你被阻止的东西?我没有看到任何问题可以在这里回答。 –

+0

我已经看到了几种方式来做到这一点,但我离开的教程,我找到了最简单的方法,但仍然无法将视图添加到我的分割中。那是我的“封锁” –

+0

好的,欢迎来到SO。你需要学会正确地提出问题。我无法做出你的问题的头部或尾部,或不存在。编辑它;尽可能清楚地说明,详细说明你的尝试,以及你的阻挡者是什么。 –

回答

0

那么该教程,你跟着是相当过时。你会想要使用基于组件的结构(你在你的示例中有一个组件,但从不使用它)。官方SAPUI5/OpenUI5开发人员指南特别是演练大多是最新的。我建议你在那里做walkthrough

回到您的问题:UI5有自己的方式来从名称解析模块(≈javascript文件)。

在你的例子中,你给UI5一个视图的名字:"view.GestionDePlanta"查看是命名空间和GestionDePlanta是模块名称。因此,UI5查找名称空间视图并且 - 缺少任何匹配的名称空间路径映射 - 默认使用与您在引导程序<script>元素中定义的sap-ui-core.js相同的路径的UI5框架本身:./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});