SAP UI5 - 關鍵元件

---

---

SAP UI5 具有多個元件，這些元件是 UI5 應用程式中獨立且可重用的物件。這些元件可以由不同的人開發，並可用於不同的專案。

應用程式可以使用來自不同位置的元件，因此您可以輕鬆獲得應用程式的結構。您可以在 SAP UI5 開發下建立不同型別的元件。

無介面元件

無介面元件用於從後端系統獲取資料，並且不包含使用者介面。

示例 - 它們是類 sap.ui.core.component 的一部分

UI 元件

UI 元件用於新增渲染功能，並在使用者介面上表示螢幕區域或元素。

示例 - UI 元件可以是一個帶有設定以執行某些任務的按鈕。它是類的一部分：sap.ui.core.UIComponent

注意 - sap.ui.core.component 是無介面元件和 UI 元件的基類。為了定義可擴充套件性功能，元件可以從基類或 UI 開發中的其他元件繼承。

元件的模組名稱稱為包名稱，以及.component，其中包名稱定義為傳遞給元件建構函式的引數的名稱。

SAP UI5 元件也可以根據系統環境進行劃分 -

• 客戶端元件：這包括，
  • 控制元件庫 sap.m、sap.ui.common 等。
  • 核心 Javascript
  • 測試包括 HTML 和 Javascript
• 伺服器端元件
  • 主題生成器
  • Eclipse 中的控制元件和應用程式開發工具
  • 資源處理程式

元件的結構

每個元件都以資料夾的形式表示，幷包含元件的名稱以及管理元件所需的資源。

每個元件都應包含以下檔案 -

• Component.json 檔案包含設計時元資料，僅用於設計時工具。

• Component.js 用於定義屬性、事件和元件方法，這些方法負責執行時元資料。

如何建立新的 SAP UI5 元件？

要建立新的元件，您必須建立新資料夾。讓我們將其命名為button。

接下來是建立component.js 檔案

然後，您必須擴充套件 UI 元件基類 sap.ui.core.UIComponent.extend 並輸入元件的名稱和包路徑。

稍後，要定義新的元件，您必須從以下require語句開始 -

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

下一步是在您的資料夾中定義 component.json，如下所示 -

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

如何使用元件

要使用元件，您必須將元件包裝在元件容器中。您不能直接使用 UI 元件在頁面上使用 placeAt 方法。另一種方法是將元件傳遞給 componentContainer 建構函式。

使用 placeAt 方法

它包括將元件新增到容器中並使用placeAt方法將元件放置在頁面上。

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

使用 componentContainer 建構函式

元件容器承載特定設定，還包含常規控制元件的生命週期方法。以下程式碼段顯示瞭如何將元件傳遞給 componentContainer 建構函式。

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");