How do I reference an OpenUI5 component?

Question

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:

Uncaught Error: The specified component controller 'my.components.button.Component' could not be found!

I can navigate to 'localhost:3000/components/button/Component.js' and see the contents of the JS file. 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

webapp
- components
  - button

Within the button folder I have Component.js and Component.json.

Component.js looks like this:

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:

<!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

The correct answer was provided by @deterministicFail in the comments to the original question. I am providing the updated/corrected code here for completeness

Corrected 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

<!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>

How do I reference an OpenUI5 component?

Question

1 answers

solution1
0 2016-02-29 17:34:38

How do I reference an OpenUI5 component?

Question

1 answers

solution1 0 2016-02-29 17:34:38

solution1
0 2016-02-29 17:34:38