Как я могу ссылаться на компонент OpenUI5?

Я следую example в «Создание нового OpenUI5 компонента» из OpenUI документы, и когда я запускаю свою демонстрационную страницу я получаю сообщение об ошибке в консоли Chrome, который читает:Как я могу ссылаться на компонент OpenUI5?

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

я могу перейти к 'localhost: 3000/components/button/Component.js' и посмотреть содержимое JS-файла. Таким образом, файл существует, поэтому я думаю, что я не ссылаюсь на него правильно в своем коде (или где-то есть неудачная опечатка). Как я должен ссылаться на компонент?

Моя структура папок выглядит следующим образом: folder structure

WebApp
- компоненты
  - кнопка

В папке с кнопками у меня есть 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>

источник

2016-02-27 user1025184

вы определяете 'данные-САП-UI-resourceroots' как' мои 'поэтому вы должны расширить его как' sap.ui.core.UIComponent.extend ("my.components.button.Component", ... ' – deterministicFail

@deterministicFail: спасибо, что решил мою проблему (или, по крайней мере, позвольте мне пройдите мимо этой одной проблемы и на других). Я отправлю исправленный код в качестве ответа ниже. В этот момент я nsure, как дать вам правильный кредит для правильного ответа .... – user1025184

Правильный ответ был предоставлен @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>

источник

2016-02-29 17:34:38 user1025184

Ваше заявление о заявлении также должно начинаться с «my.». – hirse

Как я могу ссылаться на компонент OpenUI5?

ответ

Смежные вопросы