प्रौद्योगिकी साझेदारी

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

1. पृष्ठभूमिः

घटकाः(Component) SAPUI5 अनुप्रयोगे एकः स्वतन्त्रः पुनः उपयोगयोग्यः च घटकः अस्ति ।

SAPUI5 निम्नलिखितद्वयप्रकारस्य घटकं प्रदाति ।

• अमुखघटकः (श्रेणी:sap.ui.core.Component): कोऽपि अन्तरफलकघटकः नास्ति इति अर्थः अस्ति नास्तिउपयोक्तृ-अन्तरफलकंसम्बन्धिततत्त्वानि, येषु परिदृश्येषु उपयुज्यन्ते येषु UI तत्त्वसङ्केतनस्य आवश्यकता नास्ति;

• UI घटकाः (श्रेणी:sap.ui.core.UICcomponent): UI घटकानां उपयोगः अनुप्रयोग-अन्तरफलके UI-तत्त्वानां प्रतिनिधित्वार्थं भवति, यथा बटन्, तथैव तत्सम्बद्धानि सेटिंग्स्, मेटाडाटा च ।

नोटः- "Headless components" घटकपात्रे योजयितुं न शक्यन्तेComponent Containerमध्यं;
sap.ui.core.UICcomponent sap.ui.core.Component इत्यस्य विस्तारं करोति तथा च sap.ui.core.Component इत्यस्य आधारेण स्क्रीन रेण्डरिंग् फंक्शन् योजयति ।

सामान्यतया अनुप्रयोगे सम्पूर्णघटकस्य द्वौ भागौ भवितुमर्हति - घटकःनियन्त्रकःप्रलेख(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 घटकं परिभाषयामः, ततः मेटाडाटा विशेषतायां manifest json इति सेट् कुर्मः, यस्य अर्थः अस्ति यत् घटकस्य विन्यासं परिभाषितुं वयं JSON प्रारूपेण manifest सञ्चिकायाः ​​उपयोगं करिष्यामः

ततः init फंक्शन् मध्ये वयं प्रथमं parent class इत्यस्य init function इति आह्वयन्तः, ततः JSON model सेट् कृत्वा component इत्यस्य model इति सेट् कृतवन्तः । अस्मिन् मॉडल् मध्ये एकं प्राप्तकर्ता वस्तु अस्ति, यस्य World इति मूल्येन सह नाम विशेषता अस्ति ।

२.२ घटकानां भारः

घटकसञ्चिकां परिभाषित्वा वयं तत् अनुप्रयोगस्य मध्ये योजयिष्यामःindex.jsfile, घटकपात्रस्य उदाहरणं कृत्वा, निर्मितं घटकं लोड् कृत्वा, पृष्ठे लोड् कुर्वन्तु ।

अत्र 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 launchpad इत्यादिपात्रे एम्बेड् कर्तुं शक्यते ।

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 सञ्चिका द्वौ भागौ स्तः ।元数据部分तथा घटकस्य आरम्भे आह्वयति।init函数部分。

मेटाडाटा विभागः मूलदृश्यं परिभाषयतिApp.view.xmlfile reference यथा घटकः प्रत्यक्षतया इत्यस्य स्थाने अनुप्रयोगदृश्यस्य प्रदर्शनं प्रबन्धयितुं शक्नोति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 वयं "Routing and Navigation" इत्यस्य विषये अनन्तरं ब्लोग् मध्ये तस्य भूमिकायाः ​​चर्चां करिष्यामः;

init function विभागे वयं पूर्ववत् एव कुर्मः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 सञ्चिकां समायोजयन्तु

यतः वयं Component.js सञ्चिकायां data objects तथा i18n model objects इत्येतयोः binding इत्येतत् पूर्वमेव कार्यान्वितवन्तः अतः पूर्वं लिखामः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

३.४ index.js सञ्चिकां समायोजयन्तु

पूर्वस्मिन् index.js सञ्चिकायां वयं प्रत्यक्षतया application’s view object इत्यस्य instantiated कृतवन्तःXMLView . अधुना, घटकपात्रस्य माध्यमेन दृश्यस्य उदाहरणं कुर्मः ।

एतत् कर्तुं वयं पूर्वं योजितं दृश्यनिर्भरतां नूतनेन प्रतिस्थापयामःsap/ui/core/ComponentContainer आश्रयाः । घटकपात्रं अनुप्रयोगघटकस्य मूलघटकरूपेण कार्यं करोति तथा च तस्य गुणाः, नेविगेशनघटनानि च नियन्त्रयति ।

घटकपात्रस्य उदाहरणं निर्माय भवद्भिः अनुप्रयोगस्य नामस्थानं निर्दिष्टव्यम् अर्थात्zsapui5.test(इदं परियोजनायाः webapp फोल्डर् प्रति सूचयति, यत्र घटकः .js सञ्चिकाः सन्ति) ।

समायोजितस्य 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

३.५ सामान्यसम्झौताः

अनुप्रयोगस्य घटकान् समाहितं कुर्वन् अस्माभिः निम्नलिखितरूढयः अनुसरणं कर्तव्यम् ।

• घटकनाम अस्ति Component .js
• अनुप्रयोगस्य सर्वैः UI संसाधनैः सह घटकाः स्थिताः भवेयुःwebappपुटम्
• यदि भवान् index.html सञ्चिकां कुशलतया उपयोक्तुं इच्छति तर्हि सा अपि अत्र स्थिता अस्तिwebappफोल्डर् मध्ये

३.६ संचालनम्

समायोजितं कार्यक्रमं चालयन्तु ततः प्रभावः निम्नलिखितरूपेण भवति ।

अनुप्रयोगः समायोजनात् पूर्वं यथा चालितः तथा एव चालयति ।परन्तु यदि गच्छतिctrl + shift + alt + sनियन्त्रणविन्यासं द्रष्टुं diagnostic विण्डो उद्घाटयन्तु, वयं निम्नलिखितभेदं ज्ञातुं शक्नुमः ।

नवीनतया योजितं ComponentContainer XMLView इत्यस्य मातापितृनियन्त्रणम् अस्ति ।

4. सारांशः

अयं लेखः SAPUI5 इत्यस्मिन् घटकानां अवधारणां, एन्कैप्सुलेशन-विधिं च परिचययति, उदाहरणद्वारा च तस्य उपयोगं प्रदर्शयति ।