Βήμα 13: Απόδοση συστατικού στοιχείου σε ένα ενσωματωμένο πλαίσιο

Ομοιότητες μεταξύ συστατικών στοιχείων ενσωματωμένου και μη ενσωματωμένου πλαισίου

Πίνακας "Ρυθμίσεις"

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

SDK API Τοποθεσιών

Το SDK API είναι το ίδιο και για τις δύο περιπτώσεις χρήσης. Θα χρησιμοποιήσετε τον ίδιο κώδικα για την ενεργοποίηση εναυσμάτων, την ακρόαση για ενέργειες και τη λήψη και ρύθμιση τιμών ιδιοτήτων. Αν και ορισμένες ιδιότητες μπορεί να μην εφαρμόζονται και στις δύο περιπτώσεις (για παράδειγμα, δεν μπορείτε να ρυθμίσετε την ιδιότητα "ύψος" για ένα συστατικό στοιχείο που δεν χρησιμοποιεί ενσωματωμένο πλαίσιο) το API παραμένει το ίδιο. Συνεπώς, μπορείτε να αντιγράψετε τον κώδικα μεταξύ και των δύο αυτών τύπων συστατικών στοιχείων και το παράδειγμα κώδικα που παρουσιάζεται σε αυτό το εκπαιδευτικό πρόγραμμα θα λειτουργεί και για τις δύο περιπτώσεις.

Διαφορές μεταξύ συστατικών στοιχείων ενσωματωμένου και μη ενσωματωμένου πλαισίου

Δομή αρχείων και εξαρτήσεις

<component name>
    assets
        css
            app-styles.css
        js
            jquery.mn.js
            knockout.mn.js
            sites.min.js
        render.html
        settings.html
    appinfo.json
    _folder_icon.jpg

Αυτά τα αρχεία δημιουργούνται για να σας επιτρέψουν να εκτελέσετε αμέσως το συστατικό στοιχείο σας σε ένα ενσωματωμένο πλαίσιο στη σελίδα. Οι βασικές διαφορές μεταξύ αυτής της δομής και εκείνης ενός τυπικού τοπικού συστατικού στοιχείου είναι:

• Εξαρτήσεις JavaScript:

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

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

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

• render.html:

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

Διαχείριση "ύψους" συστατικού στοιχείου

Ένα από τα σημαντικά ζητήματα κατά τη χρήση ενός ενσωματωμένου πλαισίου είναι η διαχείριση ύψους του ίδιου του ενσωματωμένου πλαισίου. Εάν κάνετε λάθος σε αυτό, θα δείτε να εμφανίζονται γραμμές κύλισης για το συστατικό στοιχείο στη σελίδα, που μπορεί να θέλετε ή μπορεί και όχι.

Για να διαχειριστεί το ύψος του ενσωματωμένου πλαισίου, το συστατικό στοιχείο πρέπει να πει στη σελίδα πόσο ψηλό θέλει να είναι το ενσωματωμένο πλαίσιο. Με τα απομακρυσμένα συστατικά στοιχεία, μπορεί να αντιμετωπίζετε προβλήματα μεταξύ τομέων, έτσι πρέπει να χρησιμοποιήσετε τα μηνύματα του SDK τοποθεσιών για να ζητήσετε από τη σελίδα να ρυθμίσει το ενσωματωμένο πλαίσιο στο απαιτούμενο ύψος μετά την απόδοση του συστατικού στοιχείου στη σελίδα. Αυτό γίνεται χρησιμοποιώντας το SitesSDK.setProperty('height', {value}) API. (Ανατρέξτε στην ενότητα SDK για Oracle Content and Experience.)

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

• Συνάρτηση ενημέρωσης ύψους:

  // set the height of the iFrame for this App
  self.setHeight = function () {
  // use the default calculation or supply your own height value as a second parameter
  SitesSDK.setProperty('height');
  };

• Εργαλείο χειρισμού προσαρμογής δέσμευσης για την κλήση του setHeight όποτε το συστατικό στοιχείο αποδίδεται στη σελίδα ή αλλάζει μια ιδιότητα:

  ko.bindingHandlers.sampleAppSetAppHeight = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      // create dependencies on any observables so this handler is called whenever it changes
      var imageWidth = viewModel.imageWidth(),
          imageUrl = viewModel.imageUrl(),
          titleText = viewModel.titleText(),
          userText = viewModel.userText();
  
    // re-size the iFrame in the Sites page now the template has rendered
    // Note: If you still see scrollbars in the iframe after this, it is likely that CSS styling in your app is the issue
    viewModel.setHeight();
   }
  };

• Ενημέρωση προτύπου για κλήση εργαλείου χειρισμού δέσμευσης:

  <div data-bind="sampleAppSetAppHeight: true"></div>

Εγγραφή εναυσμάτων και ενεργειών

Αν και η εγγραφή εναυσμάτων/ενεργειών για συστατικά στοιχεία που δεν βρίσκονται σε ενσωματωμένα πλαίσια βρίσκεται στο αρχείο appinfo.json , για τα συστατικά στοιχεία ενσωματωμένου πλαισίου, το ίδιο το συστατικό στοιχείο είναι υπεύθυνο για την παροχή αυτών των πληροφοριών. Αυτό γίνεται με τη χρήση αυτών των δύο API:

SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);

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

    // Register TRIGGERS meta-data
    SampleAppViewModel.prototype.getAppTriggers = function (args) {
      var triggers = [{
        "triggerName": "imageClicked",
        "triggerDescription": "Image clicked",
        "triggerPayload": [{
          "name": "payloadData",
          "displayName": "Trigger Payload Data"
        }]
      }];

      return triggers;
    };

    // Register ACTIONS meta-data
    SampleAppViewModel.prototype.getAppActions = function (args) {
      var actions = [{
        "actionName": "setImageWidth",
        "actionDescription": "Update the image width",
        "actionPayload": [{
          "name": "imageWidth",
          "description": "Image Width in pixels",
          "type": {
            "ojComponent": {
            "component": "ojInputText"
            }
          },
          "value": ""
        }]
      }];

      return actions;
    };

Πρόσβαση σε στυλ θέματος

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

Αυτό το θέμα αναλύεται περαιτέρω στην ενότητα Βήμα 14: Χρήση προσαρμοσμένων στυλ όταν το συστατικό στοιχείο αποδίδεται σε ένα ενσωματωμένο πλαίσιο.

Μικτό HTTPS και πρωτόκολλο HTTP

Επειδή το Oracle Content Management χρησιμοποιεί το πρωτόκολλο HTTPS, όλοι οι πόροι που αναφέρονται εντός της σελίδας πρέπει επίσης να χρησιμοποιούν HTTPS. Οι πόροι περιλαμβάνουν το αρχείο βάσης .html που θα αποδοθεί στο ενσωματωμένο πλαίσιο μαζί με όλα τα αρχεία που αναφέρει.

Αυτή η απαίτηση πόρων εφαρμόζεται κυρίως σε απομακρυσμένα συστατικά στοιχεία, ωστόσο, πρέπει να γνωρίζετε αυτόν τον περιορισμό. Οι πόροι για τα τοπικά συστατικά στοιχεία που χρησιμοποιούν ενσωματωμένα πλαίσια παρέχονται από τον Oracle Content Management server, επομένως αυτά τα συστατικά στοιχεία χρησιμοποιούν ήδη ένα πρωτόκολλο αντιστοίχισης.

Συνεχίστε στην ενότητα Βήμα 14: Χρήση προσαρμοσμένων στυλ όταν το συστατικό στοιχείο αποδίδεται σε ένα ενσωματωμένο πλαίσιο.