Βήμα 10: Χρήση ένθετων συστατικών στοιχείων με ενσωματωμένη επεξεργασία

Oracle Content Management συστατικά στοιχεία υλοποιούνται με χρήση της αρχιτεκτονικής συστατικών στοιχείων KnockoutJS. Αυτό σημαίνει ότι εάν χρησιμοποιείτε KnockoutJS για την υλοποίηση των συστατικών στοιχείων σας, μπορείτε να συμπεριλάβετε τα ενσωματωμένα συστατικά στοιχεία του Oracle Content Management απευθείας στο πρότυπό σας.

Σημείωση:

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

Για να αξιοποιήσετε τα ένθετα συστατικά στοιχεία:

  1. Υλοποιήστε το συστατικό στοιχείο σας χρησιμοποιώντας το KnockoutJS.

  2. Χρησιμοποιήστε το RequireJS για να συμπεριλάβετε το συστατικό στοιχείο σας και χρησιμοποιήστε την ίδια μεταβλητή στιγμιότυπου "ko" του Knockout που δημιουργείται από το Oracle Content Management.

    Αυτό απαιτείται επειδή το επεκτείνει το Oracle Content Management επεκτείνει το Knockout με συστατικά στοιχεία και αυτά τα συστατικά στοιχεία δεν θα είναι διαθέσιμα, εάν χρησιμοποιήσετε το δικό σας στιγμιότυπο του KnockoutJS.

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

Για να δείτε πώς αυτά τα συστατικά στοιχεία θα συμπεριληφθούν στο πρότυπό σας, επεξεργαστείτε το αρχείο render.js και εντοπίστε το αντικείμενο sampleComponentTemplate. Η προεπιλεγμένη ενότητα που αποδίδεται εμφανίζεται εδώ:

'<!-- ko if: alignImage() !== \'right\' -->' +
'<div style="display:flex;">' +
'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData } }"></scs-image>' +
'</div>' +
'<div data-bind="attr: {style: paragraphStyle}">' +
'<scs-title params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'titleId\', \'data\': titleData } }"></scs-title>' +
'<scs-paragraph params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'paragraphId\', \'data\': paragraphData } }"></scs-paragraph>' +
'</div>' +
'</div>' +
'<!-- /ko -->' +

Κοιτάζοντας το ένθετο συστατικό στοιχείο <scs-image>, θα δείτε την ακόλουθη καταχώριση:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
Τα δεδομένα scsComponent που μεταβιβάζονται στη σύνδεση προτύπου params περιλαμβάνουν τα εξής:

  • renderMode: Αυτό αναφέρεται στην κατάσταση στην οποία βρίσκεται το Εργαλείο δημιουργίας τοποθεσιών. Μπορείτε να το χρησιμοποιήσετε για να ενεργοποιήσετε και να απενεργοποιήσετε λειτουργίες. Για παράδειγμα, όταν χρησιμοποιείται από το συστατικό στοιχείο <scs-title>, προσθέτει το πρόγραμμα επεξεργασίας εμπλουτισμένου κειμένου κατά την εκτέλεση στην κατάσταση edit.

  • parentId: Αυτό απαιτείται ώστε το συστατικό στοιχείο του Oracle Content Management να γνωρίζει ότι αποδίδεται ως ένθετο συστατικό στοιχείο. Όλες οι αλλαγές στο ένθετο συστατικό στοιχείο θα αποθηκευτούν στα δεδομένα για το προσαρμοσμένο συστατικό στοιχείο.

  • id: Ένα μοναδικό αναγνωριστικό για το ένθετο συστατικό στοιχείο. Αυτό, στη συνέχεια, καταχωρίζεται στον χώρο ονομάτων από το αναγνωριστικό για το προσαρμοσμένο συστατικό στοιχείο.

  • data: Αρχικά δεδομένα για το ένθετο συστατικό στοιχείο. Εάν το συστατικό στοιχείο δεν τροποποιηθεί περαιτέρω, θα αποδοθεί με αυτά τα αρχικά δεδομένα.

Οι αναφερόμενες τιμές id και mode μεταβιβάζονται στο προσαρμοσμένο συστατικό στοιχείο σας στο αντικείμενο SampleComponentViewModel, έτσι δεν χρειάζεται να τροποποιήσετε το αντικείμενο για να λάβετε αυτές τις τιμές:

// Store the args
self.mode = args.viewMode;
self.id = args.id;

Η σύνταξη για όλα τα υπόλοιπα υποστηριζόμενα ένθετα συστατικά στοιχεία ακολουθεί το ίδιο μοτίβο όπως για το <scs-paragraph>, για παράδειγμα: <scs-image>, <scs-title>, <scs-button>.

Έλεγχος αποτελεσμάτων για το βήμα 10

  1. Ανανεώστε τη σελίδα σας στην τοποθεσία σας, ώστε το Εργαλείο δημιουργίας τοποθεσιών να μπορεί να επιλέξει τις αλλαγές στο συστατικό στοιχείο.

  2. Αλλάξτε τη σελίδα στην κατάσταση επεξεργασίας.

  3. Μεταφέρετε και αποθέστε το συστατικό στοιχείο σας στη σελίδα.

  4. Κάντε κλικ στο κείμενο Ως συντάκτης της σελίδας, μπορείτε να κάνετε επεξεργασία. . . στο συστατικό στοιχείο σας και ενημερώστε την περιγραφή χρησιμοποιώντας το πρόγραμμα επεξεργασίας εμπλουτισμένου κειμένου.

  5. Μεταβείτε στην κατάσταση προεπισκόπησης για να δείτε την ενημέρωσή σας.

  6. Επιστρέψτε στην κατάσταση επεξεργασίας.

  7. Ανοίξτε τον πίνακα "Ρυθμίσεις" για το συστατικό στοιχείο σας.

  8. Κάντε κλικ στον δεσμό Συστατικά στοιχεία που τώρα εμφανίζεται, επειδή βρήκε το ένθετο συστατικό στοιχείο σας.

  9. Κάντε κλικ στην επιλογή Παράγραφος, που είναι το ένθετο συστατικό στοιχείο που βρήκε.

Μπορείτε πλέον να ενημερώσετε τις ιδιότητες για το συστατικό στοιχείο "Παράγραφος" εντός του συστατικού στοιχείου σας.

Σημείωση:

Μέχρι να δημιουργηθεί στιγμιότυπο για το συστατικό στοιχείο, το Oracle Content Management δεν γνωρίζει τα ένθετα συστατικά στοιχεία που μπορεί να υπάρχουν στο πρότυπο. Για να δει το Oracle Content Management τα κρυφά ένθετα συστατικά στοιχεία, μπορείτε να χρησιμοποιήσετε το API SitesSDK.setProperty('visibleNestedComponents', []);. Για να εμφανίζονται τα κρυφά ένθετα συστατικά στοιχεία από προεπιλογή, πρέπει να ενημερώσετε τον πίνακα "nestedComponents": [] κατά την εγγραφή του συστατικού στοιχείου.

Συνεχίστε στην ενότητα Βήμα 11: Υποστήριξη διαφορετικών διατάξεων.