Το δείγμα μέχρι στιγμής δείχνει ένα τοπικό συστατικό στοιχείο που αποδίδεται ενσωματωμένο στη σελίδα. Μπορείτε επίσης να επιλέξετε να αποδώσετε ένα συστατικό στοιχείο σε ένα ενσωματωμένο πλαίσιο.
Για παράδειγμα, μπορείτε να επιλέξετε να αποδώσετε ένα συστατικό στοιχείο σε ένα ενσωματωμένο πλαίσιο εάν το συστατικό στοιχείο σας κάνει μη τελικές αλλαγές στη σελίδα, το οποίο απαιτεί από εσάς να αναδημιουργείτε τη σελίδα κάθε φορά που αλλάζουν οι ιδιότητες. Επιπλέον, τα απομακρυσμένα συστατικά στοιχεία αποδίδονται πάντα σε ένα ενσωματωμένο πλαίσιο.
Τα δείγματα σε αυτήν την ενότητα λαμβάνονται από αρχεία που δημιουργούνται για εσάς όταν ενεργοποιείτε την επιλογή Δημιουργία συστατικού στοιχείου που αποδίδεται σε iframe κατά τη δημιουργία ενός τοπικού συστατικού στοιχείου. Μπορείτε, ωστόσο, να πάρετε αυτό το σύνολο αρχείων και να το φιλοξενήσετε στον απομακρυσμένο server σας, ώστε να εφαρμόζεται εξίσου στα απομακρυσμένα συστατικά στοιχεία.
Ομοιότητες μεταξύ συστατικών στοιχείων ενσωματωμένου και μη ενσωματωμένου πλαισίου
Πίνακας "Ρυθμίσεις"
Επειδή ο πίνακας "Ρυθμίσεις" τοποθετείται πάντα στη σελίδα σε ένα ενσωματωμένο πλαίσιο, ο κώδικας για τον πίνακα "Ρυθμίσεις" δεν αλλάζει ανεξάρτητα από το εάν το συστατικό στοιχείο χρησιμοποιεί ένα ενσωματωμένο πλαίσιο ή όχι. Θα δημιουργήσετε τον ίδιο κώδικα πίνακα ρυθμίσεων και για τις δύο περιπτώσεις χρήσης.
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: Χρήση προσαρμοσμένων στυλ όταν το συστατικό στοιχείο αποδίδεται σε ένα ενσωματωμένο πλαίσιο.