如何引用 OpenUI5 组件？答案

【问题标题】：How do I reference an OpenUI5 component?如何引用 OpenUI5 组件？
【发布时间】：2016-02-27 05:26:44
【问题描述】：

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

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

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

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

网络应用
- 组件
  - 按钮

在按钮文件夹中，我有 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>

【问题讨论】：

您将data-sap-ui-resourceroots 定义为my，因此您必须将其扩展为sap.ui.core.UIComponent.extend("my.components.button.Component",...
@deterministicFail：谢谢。这解决了我的问题（或者至少让我解决了这个问题并解决了其他问题）。我将在下面发布更正后的代码作为答案。在这一点上，我不确定如何正确地给你正确的答案......

标签： javascript custom-component sapui5

【解决方案1】：

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

更正了 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;
};

更正的索引.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>

【讨论】：

您的声明语句也应该以“my.”开头。