Condivisione della tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Contesto

componenti(Componente) è un componente indipendente e riutilizzabile in un'applicazione SAPUI5.

SAPUI5 fornisce i due tipi di componenti seguenti:

• componente senza volto (classe:sap.ui.core.Component): Nessun componente di interfaccia significa che non esisteinterfaccia utenteElementi correlati, utilizzati in scenari che non richiedono la codifica degli elementi dell'interfaccia utente;

• Componenti dell'interfaccia utente (classe:sap.ui.core.UICcomponent): i componenti dell'interfaccia utente vengono utilizzati per rappresentare gli elementi dell'interfaccia utente sull'interfaccia dell'applicazione, come i pulsanti, nonché le impostazioni e i metadati corrispondenti.

Nota: i "componenti senza testa" non possono essere aggiunti al contenitore dei componentiComponent Containermezzo;
sap.ui.core.UICcomponent estende sap.ui.core.Component e aggiunge la funzione di rendering dello schermo basata su sap.ui.core.Component.

In generale, in un'applicazione, un componente completo dovrebbe contenere due parti: componentecontrolloredocumento(component .js) e il file descrittore della descrizione dell'applicazione (manifest.json)。

Il più grande vantaggio dell'utilizzo dei componenti è che i componenti incapsulati possono essere integrati in modo flessibilediverso组件容器（Component Container） mezzo. Ad esempio, Fiori Launchpad è un contenitore di componenti durante il test dell'applicazione, di solito creiamo anche un contenitore di componenti manualmente;

Nota: quando si crea un'istanza del contenitore del componente, verrà specificato lo spazio dei nomi dell'applicazione e il contenitore del componente utilizzerà questo percorso per trovare il file del controller del componente.

2. Esempio

2.1 Definire il file del controller del componente

Di seguito è riportato un esempio di file del controller del componente 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

In questo esempio, definiamo prima un nuovo componente dell'interfaccia utente, quindi impostiamo il manifest su json nell'attributo dei metadati, il che significa che utilizzeremo il file manifest in formato JSON per definire la configurazione del componente.

Quindi nella funzione init, abbiamo prima chiamato la funzione init della classe genitore, quindi impostato il modello JSON e impostato come modello del componente. Questo modello contiene un oggetto destinatario, che ha un attributo name con il valore World.

2.2 Caricamento dei componenti

Dopo aver definito il file del componente, lo aggiungeremo a quello dell'applicazioneindex.jsfile, istanziare il contenitore del componente, caricare il componente creato e caricarlo nella pagina.

Ecco un esempio di un componente di caricamento del 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. Pratica

In questo esercizio del blog, incapsulamo tutti gli elementi dell'interfaccia utente in un componente indipendente dal file index.html.

In questo modo, ogni volta che accediamo a una risorsa, lo faremo relativamente al componente (non rispetto a index.html).

Questa modifica architetturale rende il caricamento dell'applicazione più flessibile rispetto alla precedente pagina index.html statica. Ad esempio, può essere incorporata direttamente in un contenitore come il launchpad di SAP Fiori.

3.1 Crea il file Component.js

Per prima cosa, andiamowebappUn'inizialeComponent.js File per memorizzare le impostazioni dell'applicazione.Quando viene creata un'istanza del componente, SAPUI5 chiamerà automaticamente il componenteinit funzione.Il nostro componente eredita dalla classe basesap/ui/core/UICcomponent, nella riscrittainitIl metodo dovrebbe prima chiamare la funzione init della classe base.

La struttura del file di progetto creato è la seguente:

Il codice di Component.js è il seguente:

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 Aggiungi metadati a Component.js

Successivamente, aggiungiamo la configurazione dell'applicazione al file Component.js.

Il codice Component.js modificato è il seguente:

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

Il file .js del componente modificato è composto da due parti:元数据部分e chiamato quando il componente viene inizializzato.init函数部分。

La sezione dei metadati definisce la vista radiceApp.view.xmlriferimento al file in modo che il componente possa gestire la visualizzazione della vista dell'applicazione invece che direttamente nel fileindex.js Crea e visualizza la vista radice direttamente nel file.Implementa anche la parte di definizione dei metadatisap.ui.core.IAsyncContentCreationInterfaccia che consente la creazione di componenti in modo completamente asincrono.

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

Tieni presente che l'interfaccia sap.ui.core.IAsyncContentCreation imposta implicitamente sia il rootView del componente che la configurazione del suo router su "async": true ne discuteremo il ruolo in un blog successivo su "Routing e navigazione" descritto;

Nella sezione della funzione init, facciamo la stessa cosa di primaApp.controller.jsCrea un'istanza del modello dati come hai fatto nel file del controlleroModele modello 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

Si noti che il modello èAssociazione diretta al componente , non nella vista radice del componente. Tuttavia, poiché i controlli nidificati ereditano automaticamente il modello del controllo padre, il modello è disponibile anche nella vista.

3.3 Modificare il file App.controller.js

Poiché abbiamo già implementato l'associazione degli oggetti dati e degli oggetti del modello i18n nel file Component.js, scriviamo primaApp.controller.jsRimozione logica dei file del controller, ovvero cancellazione onInit 函数E所需的模块引用。

L'effetto del codice modificato è il seguente:

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

Nel precedente file index.js, abbiamo creato direttamente un'istanza dell'oggetto visualizzazione dell'applicazioneXMLView . Ora istanziamo la vista attraverso il contenitore dei componenti.

Per fare ciò, sostituiamo la dipendenza view aggiunta in precedenza con la nuovasap/ui/core/ComponentContainer dipendenze. Il contenitore del componente funge da componente padre del componente dell'applicazione e ne gestisce le proprietà e gli eventi di navigazione.

Quando si crea un'istanza di un contenitore di componenti, è necessario specificare lo spazio dei nomi dell'applicazione, ovverozsapui5.test(Punta alla cartella webapp del progetto, dove si trovano i file .js del componente).

L'effetto del file index.js modificato è il seguente:

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 Accordi generali

Quando incapsulamo i componenti di un'applicazione, dovremmo seguire le seguenti convenzioni:

• Il nome del componente è Component .js
• I componenti devono trovarsi insieme a tutte le risorse dell'interfaccia utente dell'applicazionewebappcartella
• Se desideri utilizzare il file index.html in modo efficiente, si trova anche inwebappnella cartella

3.6 Funzionamento

Eseguire il programma modificato e l'effetto è il seguente:

L'applicazione viene eseguita come prima della modifica.Ma se passactrl + shift + alt + sAprire la finestra diagnostica per visualizzare il layout di controllo, possiamo trovare le seguenti differenze.

Il ComponentContainer appena aggiunto è il controllo padre di XMLView.

4. Riepilogo

Questo articolo introduce il concetto e il metodo di incapsulamento dei componenti in SAPUI5 e ne illustra l'utilizzo tramite un esempio.