Question

我正在关注OpenUI文档中的“创建新的OpenUI5组件”中的example，当我运行我的演示页面时，我在Chrome控制台中收到的错误是：

未捕获错误：找不到指定的组件控制器'my.components.button.Component'！

我可以导航到'localhost：3000 / components / button / Component.js'并查看JS文件的内容。所以该文件存在，所以我想我没有在我的代码中正确引用它（或者在某处有一个不幸的错字）。我该如何引用该组件？

我的文件夹结构如下所示： folder structure

web应用
- 部件
  - 按钮

在按钮文件夹中，我有Component.js和Component.json。

Component.js看起来像这样：

jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("components.button.Component", {
    metadata: {
        properties: {
            text: "string"
        }
    },
    init: function() {
        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
    }
});

components.button.Component.prototype.createContent = function () {
    this.oButton = new sap.ui.commons.Button("btn");
    return this.oButton;
}; 

components.button.Component.prototype.setText = function (sText) {
    this.oButton.setText(sText);
    this.setProperty("text", sText);
    return this;
};

Index.html看起来像这样：

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Component Test</title>
            <script
         id="sap-ui-bootstrap"
         src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_bluecrystal"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async"
         data-sap-ui-resourceroots='{
            "my": "./"
         }' >
      </script>
      <script>
        sap.ui.getCore().attachInit(function () {
                var oComp1 = sap.ui.getCore().createComponent({
                                name: "my.components.button",
                                id: "Comp1", 
                                settings: {text: "Hello World"}
                            });
                // place this Ui Container with the Component inside into UI Area 
                oCompCont1.placeAt("target1");

                var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
                                    name: "my.components.button",
                                    settings: {text: "Hello World again"}
                                    });
                oCompCont2.placeAt("target2");
        });
      </script>
   </head>
   <body class="sapUiBody">
       <div id="target1"></div>
       <div id="target2"></div>
   </body>
</html>

Answer 1

@deterministicFail在对原始问题的评论中提供了正确答案。我在这里提供更新/更正的代码是为了完整性

更正了Component.js

    jQuery.sap.require("sap.ui.core.UIComponent");
    jQuery.sap.require("sap.ui.commons.Button");
    jQuery.sap.declare("components.button.Component");

    sap.ui.core.UIComponent.extend("my.components.button.Component", {
    metadata: {
        properties: {
            text: "string"
        }
    },
    init: function() {
        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
    }
});

my.components.button.Component.prototype.createContent = function () {
    this.oButton = new sap.ui.commons.Button("btn");
    return this.oButton;
}; 

my.components.button.Component.prototype.setText = function (sText) {
    this.oButton.setText(sText);
    this.setProperty("text", sText);
    return this;
};

更正了Index.html

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Component Test</title>
            <script
         id="sap-ui-bootstrap"
         src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_bluecrystal"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async"
         data-sap-ui-resourceroots='{
            "my": "./"
         }' >
      </script>
      <script>
        sap.ui.getCore().attachInit(function () {
                jQuery.sap.registerModulePath("my.components.button", "components/button"); 

                var oComp1 = sap.ui.getCore().createComponent({
                                name: "my.components.button",
                                id: "Comp1", 
                                settings: {text: "Hello World"}
                            });
                // Create a Ui container 
                var oCompCont1 = new sap.ui.core.ComponentContainer("CompCont1", {
                    component: oComp1
                })
                // place this Ui Container with the Component inside into UI Area 
                oCompCont1.placeAt("target1");

                var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
                                    name: "my.components.button",
                                    settings: {text: "Hello World again"}
                                    });
                oCompCont2.placeAt("target2");
        });
      </script>
   </head>
   <body class="sapUiBody">
       <div id="target1"></div>
       <div id="target2"></div>
   </body>
</html>

如何引用OpenUI5组件？

1 个答案: