如何引用OpenUI5組件？

我下面的「創建新OpenUI5組件」在example從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

定義'數據SAP-UI-resourceroots'爲'我的'所以你必須將其擴展爲'sap.ui.core.UIComponent.extend（「my.components.button.Component」，...' – deterministicFail

@deterministicFail：謝謝。那解決了我的問題（或者至少讓我通過一個問題，然後到其他問題）。我將在下面發佈更正後的代碼作爲答案。在這一點上，我是你確保如何給你一個正確的答案適當的功勞.... – 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

你的申報聲明也應該以「我的。」開頭。 – hirse

如何引用OpenUI5組件？

回答

相關問題