Teknologian jakaminen

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

1. Tausta

komponentit(Komponentti) on itsenäinen ja uudelleenkäytettävä komponentti SAPUI5-sovelluksessa.

SAPUI5 tarjoaa seuraavat kaksi komponenttityyppiä:

• kasvoton komponentti (luokka:sap.ui.core.Component): Ei käyttöliittymäkomponenttia tarkoittaa, että sitä ei olekäyttöliittymäAiheeseen liittyvät elementit, joita käytetään skenaarioissa, jotka eivät vaadi käyttöliittymäelementtien koodausta;

• UI komponentit (luokka:sap.ui.core.UICcomponent): Käyttöliittymäkomponentteja käytetään edustamaan sovellusliittymän käyttöliittymäelementtejä, kuten painikkeita, sekä vastaavia asetuksia ja metatietoja.

Huomautus: "Headless-komponentteja" ei voi lisätä komponenttisäiliöönComponent Containerkeskellä;
sap.ui.core.UICcomponent laajentaa sap.ui.core.Component ja lisää näytön renderöintitoiminnon sap.ui.core.Componentin pohjalta.

Yleisesti ottaen sovelluksessa täydellisen komponentin tulee sisältää kaksi osaa: komponenttiohjainasiakirja(component .js) ja sovelluksen kuvauskuvaustiedosto (manifest.json)。

Komponenttien käytön suurin etu on, että kapseloituja komponentteja voidaan upottaa joustavasti sisääneri组件容器（Component Container） keskellä. Esimerkiksi Fiori Launchpad on komponenttisäiliö sovellustestauksen aikana, luomme yleensä myös komponenttisäiliön manuaalisesti.

Huomautus: Komponenttisäiliötä luotaessa määritetään sovelluksen nimiavaruus, ja komponenttisäiliö käyttää tätä polkua komponenttiohjaintiedoston etsimiseen.

2. Esimerkki

2.1 Määritä komponenttiohjaintiedosto

Seuraavassa on esimerkki komponenttiohjaintiedostosta 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

Tässä esimerkissä määritämme ensin uuden käyttöliittymäkomponentin ja määritämme sitten metatietoattribuutissa manifestiksi json, mikä tarkoittaa, että käytämme JSON-muodossa olevaa luettelotiedostoa komponentin kokoonpanon määrittämiseen.

Sitten init-funktiossa kutsuimme ensin emoluokan init-funktiota, asetimme sitten JSON-mallin ja asetimme sen komponentin malliksi. Tämä malli sisältää vastaanottajaobjektin, jolla on name-attribuutti, jonka arvo on Maailma.

2.2 Komponenttien lataaminen

Kun komponenttitiedosto on määritetty, lisäämme sen sovellukseenindex.jstiedosto, instantoi komponenttisäiliö, lataa luotu komponentti ja lataa se sivulle.

Tässä on esimerkki index.js-tiedoston latauskomponentista:

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

Tässä blogiharjoituksessa kiteytetään kaikki käyttöliittymäelementit indeks.html-tiedostosta riippumattomaksi komponentiksi.

Tällä tavalla aina kun käytämme resurssia, teemme sen suhteessa komponenttiin (ei suhteessa index.html:ään).

Tämä arkkitehtoninen muutos tekee sovellusten lataamisesta joustavampaa kuin edellinen staattinen index.html-sivu. Se voidaan esimerkiksi upottaa suoraan säiliöön, kuten SAP Fiori -käynnistysalustaan.

3.1 Luo Component.js-tiedosto

Ensin mennäänwebappAlkukirjainComponent.js Tiedosto tallentaaksesi sovellusasetukset.Kun komponentti on instantoitu, SAPUI5 kutsuu automaattisesti komponentininit toiminto.Komponenttimme periytyy perusluokastasap/ui/core/UICcomponent, uudelleenkirjoitetussainitMetodin tulee ensin kutsua perusluokan init-funktio.

Luotu projektitiedostorakenne on seuraava:

Component.js:n koodi on seuraava:

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 Lisää metatiedot Component.js:ään

Lisätään seuraavaksi sovellusmääritykset Component.js-tiedostoon.

Muokattu Component.js-koodi on seuraava:

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

Muokattu komponentti .js-tiedosto koostuu kahdesta osasta:元数据部分ja kutsutaan, kun komponentti alustetaan.init函数部分。

Metatiedot-osio määrittää juurinäkymänApp.view.xmltiedostoviittaus, jotta komponentti voi hallita sovellusnäkymän näyttöä sen sijaan, että se olisi suoraanindex.js Luo ja näytä juurinäkymä suoraan tiedostossa.Myös metatietojen määrittelyosa toteuttaasap.ui.core.IAsyncContentCreationKäyttöliittymä, jonka avulla komponentit voidaan luoda täysin asynkronisesti.

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

Huomaa, että sap.ui.core.IAsyncContentCreation-käyttöliittymä asettaa implisiittisesti sekä komponentin rootView- että sen reitittimen kokoonpanoksi "async": totta, keskustelemme sen roolista seuraavassa "Reititystä ja navigointia" käsittelevässä blogissa.

Init-funktio-osiossa teemme samoin kuin aiemminApp.controller.jsToteuta tietomalli kuten teit ohjaintiedostossaoModelja i18n mallii18nModel。

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

Huomaa, että malli onSido suoraan komponenttiin , ei komponentin juurinäkymässä. Koska sisäkkäiset ohjausobjektit kuitenkin perivät automaattisesti ylätason ohjausobjektin mallin, malli on käytettävissä myös näkymässä.

3.3 Säädä App.controller.js-tiedostoa

Koska olemme jo toteuttaneet tietoobjektien ja i18n-malliobjektien sitomisen Component.js-tiedostossa, kirjoitetaan ennenApp.controller.jsOhjaintiedostojen looginen poistaminen eli poistaminen onInit 函数ja所需的模块引用。

Muokatun koodin vaikutus on seuraava:

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 Säädä index.js-tiedostoa

Edellisessä index.js-tiedostossa loimme suoraan sovelluksen näkymäobjektinXMLView . Luodaan nyt näkymä komponenttisäiliön läpi.

Tätä varten korvaamme aiemmin lisätyn näkymäriippuvuuden uudellasap/ui/core/ComponentContainer riippuvuuksia. Komponenttisäiliö toimii sovelluskomponentin pääkomponenttina ja käsittelee sen ominaisuuksia ja navigointitapahtumia.

Kun luot komponenttisäiliön ilmentymää, sinun on määritettävä sovelluksen nimiavaruus, elizsapui5.test(Se osoittaa projektin webapp-kansioon, jossa komponenttien .js-tiedostot sijaitsevat).

Muokatun index.js-tiedoston vaikutus on seuraava:

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 Yleiset sopimukset

Kun kapseloimme sovelluksen komponentteja, meidän tulee noudattaa seuraavia käytäntöjä:

• Komponentin nimi on Component .js
• Komponenttien tulee sijaita kaikkien sovelluksen käyttöliittymäresurssien kanssawebappkansio
• Jos haluat käyttää index.html-tiedostoa tehokkaasti, se sijaitsee myös osoitteessawebappkansiossa

3.6 Käyttö

Suorita säädetty ohjelma ja vaikutus on seuraava:

Sovellus toimii samalla tavalla kuin ennen säätöä.Mutta jos se menee ohictrl + shift + alt + sAvaa diagnostiikkaikkuna nähdäksesi ohjausasettelu, voimme löytää seuraavat erot.

Äskettäin lisätty ComponentContainer on XMLView:n ylätason ohjausobjekti.

4. Yhteenveto

Tämä artikkeli esittelee SAPUI5:n komponenttien käsitteen ja kapselointimenetelmän sekä esittelee sen käytön esimerkin avulla.