Βήμα 2: Εξέταση της δομής απόδοσης τοπικών συστατικών στοιχείων

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

Για ένα απλό παράδειγμα Hello World, τα τέσσερα αντικείμενα JavaScript και ο αριθμός των σειρών κώδικα μπορεί να φαίνονται υπερβολικά, αλλά σκοπός είναι να σας παρέχουν τη βάση δόμησης πιο σύνθετων συστατικών στοιχείων και να βοηθήσουν στον χειρισμό της αλληλεπίδρασης με τον κύκλο ζωής των σελίδων της υπηρεσίας Oracle Cloud Sites Service.

Για να εξετάσετε τη δομή του τοπικού συστατικού στοιχείου σας:

1. Στην αρχική σελίδα του Oracle Content Management, κάντε κλικ στο στοιχείο Προγραμματιστής.

   Εμφανίζεται η σελίδα "Προγραμματιστής".

2. Κάντε κλικ στην επιλογή Προβολή όλων των συστατικών στοιχείων.

3. Από το μενού, επιλέξτε Δημιουργία τοπικού συστατικού στοιχείου.

4. Εισαγάγετε ένα όνομα για το συστατικό στοιχείο, για παράδειγμα, A_Local_Component.

5. Προαιρετικά καταχωρίστε μια περιγραφή.

6. Κάντε κλικ στην επιλογή "Δημιουργία".

   Αφού το κάνετε αυτό θα δείτε ένα συστατικό στοιχείο με το όνομα A_Local_Component στη λίστα των συστατικών στοιχείων σας.

1. Χρησιμοποιώντας το client συγχρονισμού με υπολογιστή του Oracle Content Management, εντοπίστε το συστατικό στοιχείο σας και συγχρονίστε το με το σύστημα αρχείων.

   Εάν δεν έχετε το client υπολογιστή, μπορείτε να κάνετε προβολή όλων των συστατικών στοιχείων και να επιλέξετε το συστατικό στοιχείο στη σελίδα "Συστατικά στοιχεία" του περιβάλλοντος εργασίας του Oracle Content Management και να εμφανίσετε λεπτομέρειες για να δείτε τα αρχεία.

2. Αν παραθέσετε τα αρχεία κάτω από το συστατικό στοιχείο, θα δείτε αυτά τα αρχεία:

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

3. Ανοίξτε το αρχείο render.js στον κατάλογο /assets .

   Τα βασικά σημεία του αρχείου render.js είναι:

   • Είναι δομημένο ως λειτουργική μονάδα AMD JavaScript, ώστε να "απαιτείται" στη σελίδα.

   • Περιλαμβάνει επίσης αναφορές σε KnockoutJS και JQuery που έχουν ήδη φορτωθεί ως μέρος της σελίδας του Oracle Content Management.

Εξετάστε τη δομή του αρχείου render.js .

Στα περιεχόμενα του αρχείου render.js βρίσκονται δύο αντικείμενα JavaScript που υλοποιούν τα απαιτούμενα API συστατικών στοιχείων του Oracle Content Management: sampleComponentFactory και SampleComponentImpl. Αυτά τα αντικείμενα είναι ένα παράδειγμα υλοποίησης για τη δημιουργία συστατικών στοιχείων βάσει KnockoutJS. Η υλοποίηση αυτών των αντικειμένων θα αλλάξει βάσει της τεχνολογίας που χρησιμοποιείτε.

• sampleComponentFactory

  • Αυτό το αντικείμενο επιστρέφει από τη λειτουργική μονάδα AMD render.js .

  • Αυτό είναι ένα πολύ απλό αντικείμενο Factory και υλοποιεί το μεμονωμένο περιβάλλον εργασίας χρήστη createComponent().

  • Οι πιο σύνθετες υλοποιήσεις μπορεί να χρησιμοποιούν την τιμή args που μεταβιβάστηκε για την επιστροφή διαφορετικών υλοποιήσεων του συστατικού στοιχείου, βάσει της παραμέτρου viewMode. Αυτό σας επιτρέπει να έχετε μια πολύ πιο ελαφριά υλοποίηση του συστατικού στοιχείου για τον χρόνο εκτέλεσης σε σχέση με το Εργαλείο δημιουργίας τοποθεσιών.

• SampleComponentImpl

  • Η κύρια συνάρτηση εντός αυτού του αντικειμένου είναι η συνάρτηση render, η οποία χρησιμοποιείται για να αποδοθεί το συστατικό στοιχείο στη σελίδα.

    Για να αποδοθεί το συστατικό στοιχείο Knockout στη σελίδα, η συνάρτηση render προσθέτει δυναμικά το πρότυπο στη σελίδα και έπειτα εφαρμόζει τις δεσμεύσεις viewModel στο πρότυπο.

  • Η υπόλοιπη υλοποίηση σχετίζεται με την αρχικοποίηση της παραμέτρου viewModel και του προτύπου, και με τη διαχείριση της ανταλλαγής μηνυμάτων μεταξύ σελίδας και συστατικού στοιχείου.

Τα δύο τελευταία αντικείμενα στο αρχείο render.js , sampleComponentTemplate και SampleComponentViewModel, παρέχουν μια προσαρμοσμένη υλοποίηση για το συστατικό στοιχείο. Η υλοποίησή τους θα διαφέρει βάσει των απαιτήσεών σας.

• sampleComponentTemplate

  • Αυτό το αντικείμενο παρέχει τη δημιουργία προτύπου KnockoutJS. Περιμένει μέχρι το συστατικό στοιχείο να αρχικοποιήσει όλα τα δεδομένα πριν επιχειρήσει να εμφανίσει οποιοδήποτε περιεχόμενο.

• SampleComponentViewModel

  • Το viewModel ανακτά τις πληροφορίες που έχουν αποθηκευτεί από το Oracle Content Management εκ μέρους του συστατικού στοιχείου και έπειτα επιλέγει την κατάλληλη διάταξη του συστατικού στοιχείου βάσει αυτών των δεδομένων.

  • Γενικά Knockout observable αντικείμενα, που χρησιμοποιούνται από το πρότυπο για τη διαχείριση της πρόσβασης στα μεταδεδομένα που αποθηκεύονται εκ μέρους του συστατικού στοιχείου:

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • Ενοποίηση εναυσμάτων και ενεργειών:

    Trigger: Μια συνάρτηση για την ενεργοποίηση ενός εναύσματος του Oracle Content Management από το συστατικό στοιχείο που μπορεί να συνδέεται με ενέργειες άλλων συστατικών στοιχείων στη σελίδα.

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    Action: Μια συνάρτηση για τη διαχείριση της επανάκλησης, για περιπτώσεις όπου στο συστατικό στοιχείο δίνεται εντολή να εκτελέσει μια ενέργεια με ένα δεδομένο ωφέλιμο φορτίο.

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    Callback για την εκτέλεση εγγεγραμμένων ενεργειών κατ' απαίτηση.

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

  • Συνδρομές στον κύκλο ζωής του συστατικού στοιχείου:

    • Αρχικοποίηση συστατικού στοιχείου: Βεβαιωθείτε ότι το συστατικό στοιχείο δεν αποδίδεται μέχρι να ανακτηθούν όλα τα δεδομένα. Η συγκεκριμένη διαχείριση γίνεται μέσω των Knockout observable.

      self.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

      Λάβετε τις αρχικές τιμές για τις απαιτούμενες ιδιότητες. Η συγκεκριμένη διαχείριση γίνεται από τις επανακλήσεις για ανάκτηση των δεδομένων.

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • Ενημερώσεις μεταδεδομένων: Επονάκληση όποτε γίνεται αλλαγή σε μεταδεδομένα συστατικών στοιχείων που έχουν αποθηκευτεί εκ μέρους του συστατικού στοιχείου. Για παράδειγμα, όταν ο χρήστης καλεί τον πίνακα "Ρυθμίσεις" και ενημερώνει τα δεδομένα.

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));