[英]How do I reference an OpenUI5 component?
I am following the example in "Creating a new OpenUI5 Component" from the OpenUI docs, and when I run my demo page I am getting an error in the Chrome console that reads: 我下面的例子中从OpenUI文档“创建一个新的OpenUI5组件”,当我跑我的演示页我得到在Chrome控制台读取错误:
Uncaught Error: The specified component controller 'my.components.button.Component' could not be found! 未捕获的错误:找不到指定的组件控制器'my.components.button.Component'!
I can navigate to 'localhost:3000/components/button/Component.js' and see the contents of the JS file. 我可以导航到“ localhost:3000 / components / button / Component.js”,然后查看JS文件的内容。 So the file exists, so i guess i am not referencing it correctly in my code (or have an unfortunate typo somewhere). 因此该文件存在,所以我想我没有在我的代码中正确引用它(或不幸的错字)。 How should i be referencing the component? 我应该如何引用该组件?
My folder structure looks like this: folder structure 我的文件夹结构如下所示: 文件夹结构
Within the button folder I have Component.js and Component.json. 在按钮文件夹中,我具有Component.js和Component.json。
Component.js looks like this: 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;
};
And Index.html looks like 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>
The correct answer was provided by @deterministicFail in the comments to the original question. @deterministicFail在原始问题的注释中提供了正确的答案。 I am providing the updated/corrected code here for completeness 我在这里提供更新/更正的代码以确保完整性
Corrected Component.js 更正了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;
};
Corrected Index.html 更正的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.