Sap-ui5-key-components

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

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

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