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

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

Όπως ισχύει και με το αρχείο render.js στον κατάλογο /assets , υπάρχει ένα προ-δημιουργημένο αρχείο settings.html στον ίδιο κατάλογο. Το αρχείο settings.html αποδίδει τυχόν προσαρμοσμένα δεδομένα ρυθμίσεων για το συστατικό στοιχείο σας. Στην προεπιλεγμένη υλοποίηση, υπάρχει μια μεμονωμένη ιδιότητα imageWidth στα προσαρμοσμένα δεδομένα ρυθμίσεων.

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

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

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

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

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

Ανοίξτε το αρχείο settings.html στον κατάλογο /assets και ελέγξτε το περιεχόμενο. Σε αντίθεση με το αρχείο render.js , το αρχείο settings.html χρησιμοποιεί ένα ενσωματωμένο πλαίσιο στον πίνακα "Ρυθμίσεις" του Εργαλείου δημιουργίας τοποθεσιών, που είναι επίσης ο λόγος για τον οποίο χρειάζεται πρόσβαση στα αρχεία υποστήριξης, ώστε να αποδοθεί σωστά εντός του ενσωματωμένου πλαισίου. Το Εργαλείο δημιουργίας τοποθεσιών απαιτείται για τη διαχείριση της τοποθεσίας σας, ώστε τυχόν σφάλματα στον κώδικα της JavaScript να μπορούν να απομονωθούν από το Εργαλείο δημιουργίας τοποθεσιών, και για τον λόγο αυτό το αρχείο settings.html χρησιμοποιεί ένα ενσωματωμένο πλαίσιο.

Αυτές είναι οι κύριες περιοχές του αρχείου settings.html :

• Πρότυπο Knockout για απόδοση του πίνακα "Ρυθμίσεις".

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

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

  ko.bindingHandlers.scsCompComponentImpl

• Ένα Knockout ViewModel για εφαρμογή στο πρότυπο Knockout.

  SettingsViewModel

Αυτά είναι τα κύρια στοιχεία του SettingsViewModel :

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

• Αρχικοποίηση συστατικού στοιχείου:

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

    self.initialized = ko.observable(false);

  • Βεβαιωθείτε ότι δεν επιχειρούμε να ενημερώσουμε τα δεδομένα μέχρι να είμαστε έτοιμοι.

    self.saveData = false;

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

        SitesSDK.getProperty('customSettingsData', function (data) {
          //update observable
          self.width(data.width);
    
          // note that viewModel is initialized and can start saving data
          self.initialized(true);
          self.saveData = true;
        });

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

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

Για να προσθέσετε μια ακόμη ιδιότητα που θέλετε να καταγράψετε, απαιτούνται αρκετά βήματα:

1. Ενημερώστε το περιβάλλον εργασίας χρήστη για να εμφανιστεί η νέα τιμή.

2. Αρχικοποιήστε την τιμή στην τρέχουσα αποθηκευμένη τιμή για το συστατικό στοιχείο.

3. Αποθηκεύστε τυχόν αλλαγές στην τιμή για το συστατικό στοιχείο.

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

1. Προσθέστε ένα ακόμη observable αντικείμενο για τη διαχείριση της νέας ιδιότητας. Αλλάξτε αυτόν τον κώδικα:

   self.width = ko.observable();

   Χρησιμοποιήστε στη θέση του αυτόν τον κώδικα:

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. Λάβετε την τρέχουσα τιμή για τη νέα ιδιότητα την πρώτη φορά που εμφανίζεται ο πίνακας ρυθμίσεων. Αλλάξτε αυτόν τον κώδικα:

   self.width(data.width);

   Χρησιμοποιήστε στη θέση του αυτόν τον κώδικα:

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. Αποθηκεύστε πιθανές αλλαγές σε αυτήν τη νέα ιδιότητα. Αλλάξτε αυτόν τον κώδικα:

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   Χρησιμοποιήστε στη θέση του αυτόν τον κώδικα:

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. Προσθέστε ένα περιβάλλον εργασίας χρήστη για να εμφανιστεί το νέο πεδίο. Αλλάξτε αυτόν τον κώδικα:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

   Χρησιμοποιήστε στη θέση του αυτόν τον κώδικα:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. Συγχρονίστε ή αποστείλετε το αρχείο settings.html .

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

1. Κάντε λήψη του αρχείου appinfo.json , το οποίο βρίσκεται στο ίδιο επίπεδο με τον κατάλογο assets/ για το συστατικό στοιχείο σας, και ενημερώστε το μέγεθος του πίνακα ρυθμίσεων. Αλλάξτε αυτόν τον κώδικα:

   "settingsHeight": 90,

   Χρησιμοποιήστε στη θέση του αυτόν τον κώδικα:

   "settingsHeight": 160,

2. Συγχρονίστε ή αποστείλετε το αρχείο appinfo.json .