SAPUI5 の基本 11 - コンポーネント構成 (コンポーネント)

SAPUI5 の基礎 11 - コンポーネント構成 (コンポーネント)

2024-07-12

1. 背景

コンポーネント(コンポーネント) は、SAPUI5 アプリケーションの独立した再利用可能なコンポーネントです。

SAPUI5 は、次の 2 種類のコンポーネントを提供します。

顔のないコンポーネント （クラス：sap.ui.core.Component): インターフェイスコンポーネントがないことは、インターフェイスコンポーネントが存在しないことを意味します。ユーザーインターフェース関連要素。UI 要素のコーディングを必要としないシナリオで使用されます。
UIコンポーネント （クラス：sap.ui.core.UICcomponent): UI コンポーネントは、ボタンなどのアプリケーションインターフェイス上の UI 要素、および対応する設定やメタデータを表すために使用されます。

注: 「ヘッドレスコンポーネント」はコンポーネントコンテナに追加できませんComponent Container真ん中;
sap.ui.core.UICcomponent は、sap.ui.core.Component を拡張し、sap.ui.core.Component に基づく画面描画機能を追加します。

一般に、アプリケーションでは、完全なコンポーネントには次の 2 つの部分が含まれている必要があります。コントローラ書類（component .js) およびアプリケーション記述記述子ファイル (manifest.json)。

コンポーネントを使用する最大の利点は、カプセル化されたコンポーネントを柔軟に埋め込むことができることです。違う组件容器（Component Container）真ん中。たとえば、Fiori Launchpad はコンポーネントコンテナです。アプリケーションのテスト中は、通常、コンポーネントコンテナも手動で作成します。

注: コンポーネントコンテナをインスタンス化するとき、アプリケーションの名前空間が指定され、コンポーネントコンテナはこのパスを使用してコンポーネントコントローラファイルを検索します。

2. 例

2.1 コンポーネントコントローラファイルの定義

以下は、コンポーネントコントローラーファイル Component.js の例です。


sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
    "use strict";

    return UIComponent.extend("my.namespace.demo.Component", {

        metadata : {
            manifest: "json"
        },

        init : function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            // set data model
            var oData = {
                recipient : {
                    name : "World"
                }
            };
            var oModel = new JSONModel(oData);
            this.setModel(oModel);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

この例では、まず新しい UI コンポーネントを定義し、次にメタデータ属性でマニフェストを json に設定します。これは、JSON 形式のマニフェストファイルを使用してコンポーネントの構成を定義することを意味します。

次に、init 関数で、最初に親クラスの init 関数を呼び出し、次に JSON モデルを設定し、それをコンポーネントのモデルとして設定します。このモデルには、値 World を持つ name 属性を持つ受信者オブジェクトが含まれています。

2.2 コンポーネントのロード

コンポーネントファイルを定義したら、それをアプリケーションのindex.jsファイルを作成し、コンポーネントコンテナをインスタンス化し、作成したコンポーネントをロードして、ページにロードします。

以下は、index.js ファイル読み込みコンポーネントの例です。

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
    "use strict";
    new ComponentContainer({
        name: "my.namespace.demo",
        settings : {
            id : "demo"
        },
        async: true
    }).placeAt("content");
});
1
2
3
4
5
6
7
8
9
10
11
12

3. 練習する

このブログの演習では、すべての UI 要素を、index.html ファイルから独立したコンポーネントにカプセル化してみましょう。

このようにして、リソースにアクセスするときは常に、(index.html に対してではなく) コンポーネントに対して相対的にアクセスします。

このアーキテクチャの変更により、以前の静的なindex.html ページよりも柔軟なアプリケーションの読み込みが可能になり、たとえば、SAP Fiori ラウンチパッドなどのコンテナに直接埋め込むことができます。

3.1 Component.js ファイルの作成

まず、しましょうwebappイニシャルComponent.jsアプリケーション設定を保存するファイル。コンポーネントがインスタンス化されると、SAPUI5 は自動的にコンポーネントのinit関数。コンポーネントは基本クラスから継承しますsap/ui/core/UICcomponent、書き直されたものではinitこのメソッドは、最初に基本クラスの init 関数を呼び出す必要があります。

作成されたプロジェクトのファイル構成は以下のとおりです。
ここに画像の説明を挿入します

Component.jsのコードは以下のとおりです。

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";

    return UIComponent.extend("zsapui5.test.Component", {
        init() {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12

3.2 Component.js にメタデータを追加する

次に、アプリケーション構成を Component.js ファイルに追加しましょう。

変更された Component.js コードは次のとおりです。

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/resource/ResourceModel"
], function (UIComponent,JSONModel,ResourceModel) {
    "use strict";

    return UIComponent.extend("zsapui5.test.Component", {
        metadata: {
            "interfaces": ["sap.ui.core.IAsyncContentCreation"],
            "rootView": {
                "viewName": "zsapui5.test.view.App",
                "type": "XML",
                "id": "app"
            }
        },

        init() {
            //call  the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            //set data model
            const oData = {
                recipient : {
                    name: "World"
                }
            };
            const oModel = new JSONModel(oData);
            this.setModel(oModel);

            //set i18n model
            const i18nModel = new ResourceModel({
                bundleName: "zsapui5.test.i18n.i18n"
            });
            this.setModel(i18nModel, "i18n");
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

変更されたコンポーネント .js ファイルは、次の 2 つの部分で構成されます。元数据部分コンポーネントが初期化されるときに呼び出されます。init函数部分。

メタデータセクションはルートビューを定義しますApp.view.xmlファイル参照を使用して、コンポーネントがアプリケーションビューの表示を直接管理できるようにします。index.jsルートビューをファイル内に直接作成して表示します。メタデータ定義部分も実装しますsap.ui.core.IAsyncContentCreationコンポーネントを完全に非同期で作成できるようにするインターフェイス。

...
        metadata: {
            "interfaces": ["sap.ui.core.IAsyncContentCreation"],
            "rootView": {
                "viewName": "zsapui5.test.view.App",
                "type": "XML",
                "id": "app"
            }
...
1
2
3
4
5
6
7
8
9

sap.ui.core.IAsyncContentCreation インターフェイスは、コンポーネントの rootView とそのルーター設定の両方を暗黙的に "async": true に設定することに注意してください。その役割については、「ルーティングとナビゲーション」に関する後続のブログで説明します。

init 関数セクションでは、前と同じことを行います。App.controller.jsコントローラーファイルで行ったようにデータモデルをインスタンス化します。oModelおよび i18n モデルi18nModel。

...
        init() {
            //call  the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            //set data model
            const oData = {
                recipient : {
                    name: "World"
                }
            };
            const oModel = new JSONModel(oData);
            this.setModel(oModel);

            //set i18n model
            const i18nModel = new ResourceModel({
                bundleName: "zsapui5.test.i18n.i18n"
            });
            this.setModel(i18nModel, "i18n");
        }
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

モデルは次のとおりであることに注意してください。コンポーネントに直接バインドする 、コンポーネントのルートビューではありません。ただし、ネストされたコントロールは親コントロールのモデルを自動的に継承するため、そのモデルはビューでも使用できます。

3.3 App.controller.js ファイルの調整

データオブジェクトと i18n モデルオブジェクトのバインディングは Component.js ファイルにすでに実装されているので、その前に書きましょう。App.controller.jsコントローラファイルの論理的な削除、つまり削除 onInit 函数そして所需的模块引用。
ここに画像の説明を挿入します

変更されたコードの効果は次のとおりです。

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast"
], function (Controller, MessageToast) {
    "use strict";

    return Controller.extend("zsapui5.test.controller.App", {

        onShowHello: function () {
            // read msg from i18n model
            const oBundle = this.getView().getModel("i18n").getResourceBundle();
            const sRecipient = this.getView().getModel().getProperty("/recipient/name");
            const sMsg = oBundle.getText("helloMsg", [sRecipient]);

            // show message
            MessageToast.show(sMsg);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.4 Index.js ファイルを調整する

前のindex.jsファイルでは、アプリケーションのビューオブジェクトを直接インスタンス化しました。XMLView 。次に、コンポーネントコンテナを通じてビューをインスタンス化しましょう。

これを行うには、以前に追加したビューの依存関係を新しいビューの依存関係に置き換えます。sap/ui/core/ComponentContainer依存関係。コンポーネントコンテナは、アプリケーションコンポーネントの親コンポーネントとして機能し、そのプロパティとナビゲーションイベントを処理します。

コンポーネントコンテナのインスタンスを作成するときは、アプリケーションの名前空間を指定する必要があります。zsapui5.test(これは、コンポーネントの .js ファイルが配置されるプロジェクトの webapp フォルダーを指します)。

ここに画像の説明を挿入します

調整されたindex.jsファイルの効果は次のとおりです。

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
    "use strict";

    new ComponentContainer({
        name: "zsapui5.test",
        settings : {
            id : "test"
        },
        async: true
    }).placeAt("content");
});
1
2
3
4
5
6
7
8
9
10
11
12
13

3.5 一般協定

アプリケーションのコンポーネントをカプセル化するときは、次の規則に従う必要があります。

コンポーネント名は Component .js
コンポーネントは、アプリケーションのすべての UI リソースとともに配置する必要があります。webappフォルダ
Index.html ファイルを効率的に使用したい場合は、次の場所にもあります。webappフォルダ内

3.6 操作

調整したプログラムを実行すると、次のような効果が得られます。

ここに画像の説明を挿入します

アプリケーションは調整前と同じように実行されます。でもそれが過ぎればctrl + shift + alt + s診断ウィンドウを開いてコントロールレイアウトを表示すると、次の違いがわかります。

新しく追加された ComponentContainer は XMLView の親コントロールです。
ここに画像の説明を挿入します

4. まとめ

この記事では、SAPUI5 のコンポーネントの概念とカプセル化方法を紹介し、例を通してその使用法を示します。

技術共有