Κοινή χρήση τεχνολογίας

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

1. Ιστορικό

συστατικάΤο (Component) είναι ένα ανεξάρτητο και επαναχρησιμοποιήσιμο στοιχείο σε μια εφαρμογή SAPUI5.

Το SAPUI5 παρέχει τους ακόλουθους δύο τύπους στοιχείων:

• απρόσωπο συστατικό (τάξη:sap.ui.core.Component): Χωρίς στοιχείο διεπαφής σημαίνει ότι δεν υπάρχειδιεπαφή χρήστηΣχετικά στοιχεία, που χρησιμοποιούνται σε σενάρια που δεν απαιτούν κωδικοποίηση στοιχείων διεπαφής χρήστη.

• Στοιχεία διεπαφής χρήστη (τάξη:sap.ui.core.UICcomponent): Τα στοιχεία διεπαφής χρήστη χρησιμοποιούνται για την αναπαράσταση στοιχείων διεπαφής χρήστη στη διεπαφή της εφαρμογής, όπως κουμπιά, καθώς και αντίστοιχες ρυθμίσεις και μεταδεδομένα.

Σημείωση: Δεν είναι δυνατή η προσθήκη "Εξαρτήματα χωρίς κεφαλή" στο δοχείο εξαρτημάτων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

Σε αυτό το παράδειγμα, ορίζουμε πρώτα ένα νέο στοιχείο διεπαφής χρήστη και, στη συνέχεια, ορίζουμε τη δήλωση σε json στο χαρακτηριστικό μεταδεδομένων, πράγμα που σημαίνει ότι θα χρησιμοποιήσουμε το αρχείο δήλωσης σε μορφή JSON για να ορίσουμε τη διαμόρφωση του στοιχείου.

Στη συνέχεια, στη συνάρτηση init, καλέσαμε πρώτα τη συνάρτηση init της γονικής κλάσης, μετά ορίσαμε το μοντέλο JSON και το ορίσαμε ως μοντέλο του στοιχείου. Αυτό το μοντέλο περιέχει ένα αντικείμενο παραλήπτη, το οποίο έχει ένα χαρακτηριστικό name με την τιμή World.

2.2 Φόρτωση εξαρτημάτων

Αφού ορίσουμε το αρχείο συστατικού, θα το προσθέσουμε στο αρχείο της εφαρμογήςindex.jsαρχείο, δημιουργήστε το κοντέινερ του στοιχείου, φορτώστε το δημιουργημένο στοιχείο και φορτώστε το στη σελίδα.

Ακολουθεί ένα παράδειγμα στοιχείου φόρτωσης αρχείου 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. Εξάσκηση

Σε αυτήν την άσκηση ιστολογίου, ας ενσωματώσουμε όλα τα στοιχεία διεπαφής χρήστη σε ένα στοιχείο ανεξάρτητο από το αρχείο 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.xmlαναφορά αρχείου, ώστε το στοιχείο να μπορεί να διαχειρίζεται την εμφάνιση της προβολής της εφαρμογής αντί απευθείας στοindex.js Δημιουργήστε και εμφανίστε την προβολή root απευθείας στο αρχείο.Το τμήμα ορισμού μεταδεδομένων υλοποιείται επίσης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 θα συζητήσουμε το ρόλο του σε ένα επόμενο ιστολόγιο για την περιγραφή "Δρομολόγηση και πλοήγηση".

Στην ενότητα λειτουργίας init, κάνουμε το ίδιο πράγμα όπως πρινApp.controller.jsΔημιουργήστε το μοντέλο δεδομένων όπως κάνατε στο αρχείο ελεγκτήoModelκαι μοντέλο 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

Σημειώστε ότι το μοντέλο είναιΣυνδέστε απευθείας στο εξάρτημα , όχι στην ριζική προβολή του στοιχείου. Ωστόσο, επειδή τα ένθετα στοιχεία ελέγχου κληρονομούν αυτόματα το μοντέλο του γονικού ελέγχου, το μοντέλο είναι επίσης διαθέσιμο στην προβολή.

3.3 Προσαρμογή του αρχείου App.controller.js

Εφόσον έχουμε ήδη εφαρμόσει τη σύνδεση αντικειμένων δεδομένων και αντικειμένων μοντέλου i18n στο αρχείο Component.js, ας γράψουμε πριν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

3.4 Προσαρμογή του αρχείου index.js

Στο προηγούμενο αρχείο index.js, δημιουργήσαμε απευθείας το αντικείμενο προβολής της εφαρμογής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

3.5 Γενικές Συμφωνίες

Κατά την ενθυλάκωση των στοιχείων μιας εφαρμογής, θα πρέπει να ακολουθούμε τις ακόλουθες συμβάσεις:

• Το όνομα του στοιχείου είναι Component .js
• Τα στοιχεία θα πρέπει να βρίσκονται μαζί με όλους τους πόρους διεπαφής χρήστη της εφαρμογήςwebappντοσιέ
• Εάν θέλετε να χρησιμοποιήσετε το αρχείο index.html αποτελεσματικά, βρίσκεται επίσης στοwebappσε φάκελο

3.6 Λειτουργία

Εκτελέστε το προσαρμοσμένο πρόγραμμα και το αποτέλεσμα είναι το εξής:

Η εφαρμογή εκτελείται όπως και πριν την προσαρμογή.Αν όμως περάσειctrl + shift + alt + sΑνοίξτε το παράθυρο διαγνωστικού ελέγχου για να δείτε τη διάταξη ελέγχου, μπορούμε να βρούμε τις ακόλουθες διαφορές.

Το ComponentContainer που προστέθηκε πρόσφατα είναι ο γονικός έλεγχος του XMLView.

4. Περίληψη

Αυτό το άρθρο εισάγει την έννοια και τη μέθοδο ενθυλάκωσης των στοιχείων στο SAPUI5 και δείχνει τη χρήση του μέσω ενός παραδείγματος.