Question

所以，我有这个UI5应用程序在通过index.html调用时工作得很好，但是当我尝试将其称为Component时，它会中断（资源未找到，无法加载，404错误等）。两个应用程序（Caller和Callee）都在Gateway

上

这是应用程序文件夹结构。 callee_app-Struct.jpg

link to GitHub - https://github.com/mailsandip/component_test

所有观点都在zui5_trip_confirmation下 - ＆gt;视图文件夹。图像和模型位于相应的文件夹中。

component.js位于Component文件夹下，定义为

// define a new UIComponent  
jQuery.sap.declare("components.Component");  
jQuery.sap.require("sap.ui.core.UIComponent");  
jQuery.sap.require("sap.ui.commons.Button");  
jQuery.sap.require("sap.ui.table.Table");  
//new Component  
sap.ui.core.UIComponent.extend("components.Component", {  
    metadata : {  
        properties : {  
            text: "string"  
        }  
    }  
});  
components.Component.prototype.createContent = function(){  
/* trying to register the path zui5_trip_confirmation where all the views are stored */  
sap.ui.localResources("zui5_trip_confirmation");  
// jQuery.sap.registerModulePath('zui5_trip_confirmation','/sap/bc/ui5_ui5/sap/zui5_trip_conf/zui5_trip_confirmation');  
    this.oView = sap.ui.jsview("idHome", "zui5_trip_confirmation.views.Home");  
     return this.oView;   
};

调用者应用程序将其称为

jQuery.sap.registerModulePath('components','/sap/bc/ui5_ui5/sap/zui5_trip_conf/components');
var oComp1 = sap.ui.getCore().createComponent({
        name: "components",
        id: "Comp1",
        settings: {text: "Hello World"}
    });

    var oCompCont1 = new sap.ui.core.ComponentContainer("CompCont1", {
        component: oComp1
    });
    oCompCont1.placeAt("content");

当我运行调用者应用程序时，我在控制台上找到资源未找到错误。基本上，组件无法解析视图/模型/图像的路径。

这里可能有什么问题？

此致的Sandip

Answer 1

用

jQuery.sap.registerModulePath('components','/sap/bc/ui5_ui5/sap/zui5_trip_conf/components')

你告诉核心在“/ sap / bc /[...]”中查找以“components”开头的所有内容。

然后你说组件名称是“components”。不应该是“components.Component”吗？

确定，使用示例更新：

（我希望这更清楚）

最重要的部分：我们注册组件文件的文件夹路径并为其分配前缀。在组件内部，我们启动每个Object / Element / Control / etc.与组件具有相同的前缀。（在你的情况下：“zui5_conf_try”）。

我在我的服务器上创建了示例：http://dev.himmelrath.net/ui5/so_componentExample/您可以在此处下载所有文件：http://dev.himmelrath.net/ui5/so_componentExample.zip

组件的Ouside，在index.html中创建ComponentContainer时，我们通过注册其前缀来注册所有组件部分的路径。

<强>的index.html：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script src="../resources/sap-ui-core.js"
        id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.ui.commons"
        data-sap-ui-theme="sap_goldreflection">
</script>
<script>

// The following line tells the core to look for everything that starts with
// "zui5_conf_try." in the (relative to this html-file's URL) folder "zui5_conf_try"
// This should be equivalent to:
//     jQuery.sap.registerModulePath("zui5_conf_try", "./zui5_conf_try")
sap.ui.localResources("zui5_conf_try")

// Let's skip the component instantiation, ComponentContainer can do that for us
// when we gie it the name of our component.
var oCompCont1 = new sap.ui.core.ComponentContainer("CompCont1", {
    name: "zui5_conf_try",
});

oCompCont1.placeAt("content");

</script>

</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
</html>

<强> zui5_conf_try / Components.js：

// define a new UIComponent
jQuery.sap.declare("zui5_conf_try.Component");

//jQuery.sap.require("sap.ui.core.Core");
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.require("sap.ui.table.Table");

//new Component
sap.ui.core.UIComponent.extend('zui5_conf_try.Component',{  
    metadata : {
        version : "1.0",
    },  

    // DO NOT overwrite the components init method - it is used internally
    // and calls the createContent-method
    /*
    init: function() {
        alert('init222');       
    },
    */

    createContent: function() {
        // Using sap.ui.localResources('views'); in this context would still 
        // register the path relative to our index.html, not the Component.js
        // so we do not use it. Instead we use the same prefix as the component
        // for our views, because we know that that path must be set correctly
        // if this file has been loaded.

        // This should look for "./views/Home.view.js" relative to the components
        // path, since the components path was registered in the index.html ouside
        // the component
        var view = sap.ui.jsview("idHome", "zui5_conf_try.views.Home");
        return view;
    }
});

<强> zui5_conf_try /视图/ Home.view.js：

sap.ui.jsview("zui5_conf_try.views.Home", {  

   getControllerName: function() {
      return "zui5_conf_try.views.Home";     
   },

   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({text:"I am zui5_conf_try.views.Home"});
      oButton.attachPress(oController.handleButtonClicked);
      return oButton;
   }

});

<强> zui5_conf_try /视图/ Home.controller.js：

sap.ui.controller("zui5_conf_try.views.Home", {
   handleButtonClicked : function() {
        alert("You just clicked the view button...");
   }
});

Answer 2

好的，所以看了一下 - 看起来像Component.js没有加载资源，即使提到了明确的加载

--inside component.js ----

sap.ui.localResources('views');
sap.ui.resources('images');

  var view = sap.ui.jsview("idHome", "views.Home");
  return view;

---- exit ----

这让我感到困惑，核心应该已经加载了关于Component.js位置的视图。图像文件夹也会出现同样的问题。

This seems like an issue with the Component framework.

此致的Sandip

UI5应用程序在作为Component调用时中断

2 个答案: