Dasar-dasar SAPUI5 11 - Konfigurasi Komponen (Komponen)

2024-07-12

1. Latar Belakang

komponen(Komponen) adalah komponen independen dan dapat digunakan kembali dalam aplikasi SAPUI5.

SAPUI5 menyediakan dua jenis komponen berikut:

komponen tak berwajah (kelas:sap.ui.core.Component): Tidak ada komponen antarmuka berarti tidak adaantarmuka penggunaElemen terkait, digunakan dalam skenario yang tidak memerlukan pengkodean elemen UI;
Komponen UI (kelas:sap.ui.core.UICcomponent): Komponen UI digunakan untuk mewakili elemen UI pada antarmuka aplikasi, seperti tombol, serta pengaturan dan metadata terkait.

Catatan: "Komponen tanpa kepala" tidak dapat ditambahkan ke wadah komponenComponent Containertengah;
sap.ui.core.UICcomponent memperluas sap.ui.core.Component dan menambahkan fungsi rendering layar berdasarkan sap.ui.core.Component.

Secara umum, dalam sebuah aplikasi, komponen yang lengkap harus berisi dua bagian: komponenpengontroldokumen(component .js) dan file deskriptor deskripsi aplikasi (manifest.json)。

Keuntungan terbesar menggunakan komponen adalah komponen yang dienkapsulasi dapat ditanamkan secara fleksibelberbeda组件容器（Component Container） tengah. Misalnya, Fiori Launchpad adalah wadah komponen; selama pengujian aplikasi, kami biasanya juga membuat wadah komponen secara manual.

Catatan: Saat membuat instance container komponen, namespace aplikasi akan ditentukan, dan container komponen akan menggunakan jalur ini untuk menemukan file pengontrol komponen.

2. Contoh

2.1 Mendefinisikan file pengontrol komponen

Berikut ini contoh file pengontrol komponen 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

Dalam contoh ini, pertama-tama kita mendefinisikan komponen UI baru, lalu menyetel manifes ke json di atribut metadata, yang berarti kita akan menggunakan file manifes dalam format JSON untuk menentukan konfigurasi komponen.

Kemudian pada fungsi init, pertama-tama kita memanggil fungsi init dari kelas induk, kemudian mengatur model JSON dan menetapkannya sebagai model komponen. Model ini berisi objek penerima, yang memiliki atribut nama dengan nilai Dunia.

2.2 Memuat komponen

Setelah mendefinisikan file komponen, kami akan menambahkannya ke aplikasiindex.jsfile, buat instance container komponen, muat komponen yang dibuat, dan muat ke dalam halaman.

Berikut adalah contoh komponen pemuatan file 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. Latihan

Dalam latihan blog ini, mari kita merangkum semua elemen UI ke dalam komponen yang independen dari file index.html.

Dengan cara ini, setiap kali kita mengakses sumber daya, kita akan melakukannya secara relatif terhadap komponennya (bukan relatif terhadap index.html).

Perubahan arsitektur ini membuat pemuatan aplikasi lebih fleksibel dibandingkan halaman static index.html sebelumnya. Misalnya, dapat langsung disematkan ke dalam container seperti SAP Fiori launchpad.

3.1 Membuat file Component.js

Pertama, mariwebappSebuah inisialComponent.js File untuk menyimpan pengaturan aplikasi kita.Ketika sebuah komponen dipakai, SAPUI5 secara otomatis memanggil komponen tersebutinit fungsi.Komponen kami mewarisi dari kelas dasarsap/ui/core/UICcomponent, dalam ditulis ulanginitMetode ini pertama-tama harus memanggil fungsi init dari kelas dasar.

Struktur file proyek yang dibuat adalah sebagai berikut:
Masukkan deskripsi gambar di sini

Kode Component.js adalah sebagai berikut:

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 Tambahkan metadata ke Component.js

Selanjutnya, mari tambahkan konfigurasi aplikasi ke file Component.js.

Kode Component.js yang dimodifikasi adalah sebagai berikut:

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

File .js komponen yang dimodifikasi terdiri dari dua bagian:元数据部分dan dipanggil ketika komponen diinisialisasi.init函数部分。

Bagian metadata mendefinisikan tampilan rootApp.view.xmlreferensi file sehingga komponen dapat mengatur tampilan tampilan aplikasi bukan langsung diindex.js Buat dan tampilkan tampilan root langsung di file.Bagian definisi metadata juga diterapkansap.ui.core.IAsyncContentCreationAntarmuka yang memungkinkan komponen dibuat sepenuhnya secara asinkron.

...
        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

Harap perhatikan bahwa antarmuka sap.ui.core.IAsyncContentCreation secara implisit menyetel rootView komponen dan konfigurasi routernya ke "async": true; kita akan membahas perannya di blog berikutnya tentang penjelasan "Routing dan Navigasi".

Pada bagian fungsi init, kita melakukan hal yang sama seperti sebelumnyaApp.controller.jsBuat instance model data seperti yang Anda lakukan di file pengontroloModeldan model i18ni18nModel。

...
        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

Perhatikan bahwa modelnya adalahIkat langsung ke komponen , bukan pada tampilan root komponen. Namun, karena kontrol bertumpuk secara otomatis mewarisi model kontrol induk, model tersebut juga tersedia di tampilan.

3.3 Sesuaikan file App.controller.js

Karena kita telah mengimplementasikan pengikatan objek data dan objek model i18n di file Component.js, mari kita tulis sebelumnyaApp.controller.jsPenghapusan logis file pengontrol, yaitu penghapusan onInit 函数Dan所需的模块引用。
Masukkan deskripsi gambar di sini

Efek dari kode yang dimodifikasi adalah sebagai berikut:

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 Sesuaikan file index.js

Pada file index.js sebelumnya, kita langsung membuat instance objek tampilan aplikasiXMLView . Sekarang, mari kita buat instance tampilan melalui wadah komponen.

Untuk melakukan ini, kami mengganti ketergantungan tampilan yang ditambahkan sebelumnya dengan yang barusap/ui/core/ComponentContainer Ketergantungan. Kontainer komponen bertindak sebagai komponen induk dari komponen aplikasi dan menangani properti serta kejadian navigasinya.

Saat membuat instance container komponen, Anda perlu menentukan namespace aplikasi, yaitu,zsapui5.test(Ini menunjuk ke folder webapp proyek, yang merupakan tempat file komponen .js berada).

Masukkan deskripsi gambar di sini

Efek dari file index.js yang disesuaikan adalah sebagai berikut:

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 Perjanjian Umum

Saat merangkum komponen suatu aplikasi, kita harus mengikuti konvensi berikut:

Nama komponennya adalah Component .js
Komponen harus ditempatkan bersama dengan semua sumber daya UI aplikasiwebappmap
Jika Anda ingin menggunakan file index.html secara efisien, file tersebut juga terletak diwebappdalam folder

3.6 Operasi

Jalankan program yang telah disesuaikan dan efeknya adalah sebagai berikut:

Masukkan deskripsi gambar di sini

Aplikasi berjalan sama seperti sebelum penyesuaian.Namun jika lolosctrl + shift + alt + sBuka jendela diagnostik untuk melihat tata letak kontrol, kita dapat menemukan perbedaan berikut.

ComponentContainer yang baru ditambahkan adalah kontrol induk XMLView.
Masukkan deskripsi gambar di sini

4. Ringkasan

Artikel ini memperkenalkan konsep dan metode enkapsulasi komponen di SAPUI5, dan mendemonstrasikan penggunaannya melalui sebuah contoh.

Berbagi teknologi