SAPUI5 Basics 11 - Component Configurationis (Component)

2024-07-12

1. Maecenas vitae

components(Component) pars independentis et reusable in applicatione SAPUI5 est.

SAPUI5 sequentia duo genera partium praebet;

faceless component (genus:sap.ui.core.Component) : Nulla pars media interface non estuser interfaceElementa affinia, in missionibus adhibita quae UI coding elementum non requirunt;
III components (genus:sap.ui.core.UICcomponent): UI elementa repraesentare UI elementa in applicatione instrumenti adhibentur, ut globuli, ac uncinis et metadata respondentibus.

Nota: "Corporeum Headless" non potest addi vase componentiComponent Containermedium;
sap.ui.core.UICcomponent extendit sap.ui.core.Component et addit velum reddens munus secundum sap.ui.core.Component.

Generaliter, in applicatione, pars integra debet duas partes continere: componentescontrollerdocument(component .js) Descriptio lima et applicationis descriptio (manifest.json)。

Maximus utilitas partium utendi est quod partes encapsulatae mollius immersa possuntdiversum组件容器（Component Container） medium. Exempli gratia, Fiori Launchpad vas componente est; in applicatione probationis, componentem vas manually creare solemus.

Nota: Cum instantiating continente componente, spatium applicationis specificetur, et continens hac via utetur ad limam componentem moderatricem invenire.

2. Exemplum

2.1 Define component lima moderatoris

Exemplum sequens est lima Component.js componentis moderatoris:


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 hoc exemplo primum novam UI componentem definimus, deinde manifestam json in attributo metadatae constituimus, quod significat nos manifesta lima in forma JSON utemur ad configurationem componentis definiendam.

Deinde in functione init, primum munus parentis ordinis init vocavimus, deinde exemplar JSON constituimus et id ut exemplar componentis constituimus. Exemplar hoc objectum recipiens continet, quod nomen attributum cum valore Mundi habet.

2.2 components Loading

Post limam componentem definientes, eam ad applicationes adiciamusindex.jsfasciculus, instantia componentem continens, creatum componentes onerant et in paginam onerant.

Hic est exemplum index.js fasciculi onerationis componentis:

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

In hoc blog exercitatione omnia UI elementa encapsulabimus in componente independens index.html lima.

Hoc modo, quotienscumque subsidium accesserimus, id faciemus respectu componentium (non relativum ad index.html).

Haec mutatio architecturae applicationem faciliorem reddet quam prior static index.html pagina.

3.1 crea Component.js file

Primum, let'swebappInitialisComponent.js File ad applicationem occasus condo nostram.Cum elementum instantiatur, SAPUI5 automatice appellabit scriptor einit officium.Nostra pars hereditas basis classissap/ui/core/UICcomponentIn fessainitPrimus modus munus vocare debet basis classis.

Tabulae documenti operis structurae creatae sunt hoc modo:
Insert imaginem descriptionis hic

Codex Component.js talis est:

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 Add metadata ad Component.js

Deinde addamus applicationis configurationem ad fasciculi Component.js.

Codicis Component.js mutata est haec:

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

Fasciculus .js modificatio componentis duabus partibus constat;元数据部分et dicitur quando pars initialized.init函数部分。

Metadata sectione definit radix sententiaApp.view.xmlfile reference ita ut componentia ostentationem applicationis intuitu pro directe inindex.js Radix visum directe in tabella crea et ostende.Definitio metadata pars etiam instrumentorumsap.ui.core.IAsyncContentCreationInterface quod sinit partes asynchronously omnino creari.

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

Quaeso note quod sap.ui.core.IAsyncContentCreationis interfacies implicanter ponit et radicem componentis View et eius itineris configurationem ad "async": verum;

In sectione functionis init, idem facimus quod priusApp.controller.jsInstanti data exemplar sicut in gubernatrix lima fecistisoModelet i18n exemplari18nModel。

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

Nota quod exemplar estLiga recta ad component non ex ipsa radice. Tamen, quia moderatores nidificati exemplar parentis sui sponte possidebunt, exemplum etiam in visu praesto est.

3.3 Adjust App.controller.js file

Cum ligationem notitiarum rerum et i18n obiectis in fasciculo Component.j iam implevimus, ante nos scribamus.App.controller.jsLogica remotio limarum moderatoris, i.e onInit 函数et所需的模块引用。
Insert imaginem descriptionis hic

Effectus modificati codicis talis est:

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

In lima praecedente indice.j, directe instantias applicationis obiecti conspectusXMLView . Nunc instantiate visum per continentem componente.

Ad hoc faciendum restituimus sententiam dependentiam antea additam cum novosap/ui/core/ComponentContainer clientelas. Componente continente agit ut parens componentis applicationis ac suas proprietates et eventus navigationis tractat.

Cum instantiam efficiens continentis componentis, nominare debes applicationis spatium, hoc est;zsapui5.test(Hoc indicat documenti webapp folder, quod est ubi pars .js fasciculi sitae sunt).

Insert imaginem descriptionis hic

Effectus compositorum index.js fasciculi talis est:

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 conventiones generales

Cum de applicatione partium incisuras, sequentes conventiones sequi debemus;

Component nomen est Component .js
Components collocari debent cum omnibus UI facultatibus applicationiswebappfolder
Si vis indice.html lima efficienter uti, ea quoque sita estwebappin folder

3.6 Operatio

Currite propositum adaptatum et effectus talis est:

Insert imaginem descriptionis hic

Eadem applicatio fugit quam ante commensurationem.Sed faucibus nisictrl + shift + alt + sAperi fenestram diagnosticam ad speculandum propositum imperium, differentias sequentes invenire possumus.

ComponentContainer nuper additum est imperium parentis XMLView.
Insert imaginem descriptionis hic

4. Libri

Hic articulus notionem et encapsulationis methodum componentium in SAPUI5 introducit, et ejus usum per exemplum demonstrat.

Technology sharing