SAPUI5-主要コンポーネント

SAP UI5には、UI5アプリケーションで独立した再利用可能なオブジェクトである複数のコンポーネントがあります。これらのコンポーネントは、さまざまな人が開発でき、さまざまなプロジェクトで使用できます。

アプリケーションはさまざまな場所からコンポーネントを使用できるため、アプリケーションの構造を簡単に取得できます。SAP UI5開発では、さまざまなタイプのコンポーネントを作成できます。

フェイスレスコンポーネント

フェイスレスコンポーネントは、バックエンドシステムからデータを取得するために使用され、ユーザーインターフェイスは含まれていません。

Example−これらはクラスsap.ui.core.componentの一部です。

UIコンポーネント

UIコンポーネントは、レンダリング機能を追加し、ユーザーインターフェイスの画面領域または要素を表すために使用されます。

Example− UIコンポーネントは、いくつかのタスクを実行するための設定を備えたボタンにすることができます。これはクラスの一部です：sap.ui.core.UIComponent

Note− sap.ui.core.componentは、フェイスレスおよびUIコンポーネントの基本クラスです。拡張機能を定義するために、コンポーネントは基本クラスまたはUI開発の他のコンポーネントから継承できます。

コンポーネントのモジュール名はパッケージ名と呼ばれ、 .component ここで、パッケージ名は、コンポーネントコンストラクターに渡されるパラメーターの名前として定義されます。

SAP UI5コンポーネントは、システムランドスケープに従って分割することもできます-

クライアント側コンポーネント：これには、
- コントロールライブラリsap.m、sap.ui.commonなど。
- コアJavascript
- テストにはHTMLとJavascriptが含まれます
サーバー側コンポーネント
- テーマジェネレータ
- Eclipseの制御およびアプリケーション開発ツール
- リソースハンドラー

コンポーネントの構造

各コンポーネントはフォルダーの形式で表され、コンポーネントの名前とコンポーネントの管理に必要なリソースが含まれています。

各コンポーネントには、次のファイルが含まれている必要があります-

Component.json 設計時のメタデータを含み、設計時ツールにのみ使用されるファイル。
Component.js ランタイムメタデータを担当するプロパティ、イベント、およびコンポーネントメソッドを定義するために使用されます。

新しいSAPUI5コンポーネントを作成する方法は？

新しいコンポーネントを作成するには、新しいフォルダを作成する必要があります。これに名前を付けましょうbutton。

次はを作成することです component.js file

次に、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": {
   }
}

コンポーネントの使用方法

コンポーネントを使用するには、コンポーネントをコンポーネントコンテナでラップする必要があります。placeAtメソッドを使用してページでUIコンポーネントを直接使用することはできません。もう1つの方法は、コンポーネントを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");