如何引用 OpenUI5 组件

How do I reference an OpenUI5 component?

本文关键字：OpenUI5 组件 引用 何引用      更新时间：2023-09-26

我正在按照OpenUI文档中"创建新的OpenUI5组件"中的示例进行操作，当我运行演示页面时，我在Chrome控制台中收到一条错误消息：

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

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

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

  • 网络应用
    • 组件
      • 按钮

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

组件.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;
};

索引.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>

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

已更正组件.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;
};

更正索引.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>
相关文章：