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

Τα συστατικά στοιχεία που αποδίδονται σε ένα ενσωματωμένο πλαίσιο δεν έχουν απευθείας πρόσβαση στο αρχείο design.css . Αντί αυτού, υπάρχει ένα πρόσθετο βήμα για λήψη της διεύθυνσης τοποθεσίας για το design.css στο συστατικό στοιχείο σας και για την προσθήκη του στη σελίδα. Στη συνέχεια, πρέπει να ενημερώσετε το συστατικό στοιχείο σας ώστε να αντικατοπτρίζει το στυλ που επιλέγει ο χρήστης.

Για να συμπεριλάβετε και να χρησιμοποιήσετε το αρχείο design.css στο συστατικό στοιχείο σας απαιτούνται αλλαγές στο αρχείο render.html :

Εντοπίστε και συμπεριλάβετε τη διεύθυνση τοποθεσίας στο αρχείο design.css .
Λάβετε την τιμή της επιλεγμένης κλάσης στυλ όποτε αλλάζει
Ενημερώστε το πρότυπο για να αντικατοπτρίζει το επιλεγμένο styleClass
Αντικατοπτρίστε τις αλλαγές στην επιλεγμένη κλάση στυλ στο συστατικό στοιχείο σας
Βεβαιωθείτε ότι το ενσωματωμένο πλαίσιο αλλάζει μέγεθος όταν αλλάζει το στυλ

Αυτές είναι οι λεπτομερείς οδηγίες για την επεξεργασία του αρχείου render.html :

Εντοπίστε και συμπεριλάβετε τη διεύθυνση τοποθεσίας στο αρχείο design.css .

Προσθέστε δυναμικά το αρχείο design.css στην ενότητα <head> της σελίδας. Μετά τη φόρτωση, ορίστε το ύψος του ενσωματωμένου πλαισίου επειδή μπορεί να έχει τροποποιηθεί μετά την εφαρμογή των στυλ.

Προσθέστε τον ακόλουθο κώδικα στο αντικείμενο viewModel:

// Dynamically add any theme design URL to the <head> of the page
self.loadStyleSheet = function (url) {
    var $style,
        styleSheetDeferred = new $.Deferred(),
        attempts = 100,
        numAttempts = 0,
        interval = 50,
        pollFunction = function () {
            // try to locate the style sheet
            for (var i = 0; i < document.styleSheets.length; i++) {
                try {
                    // locate the @import sheet that has an href based on our expected URL
                    var sheet = document.styleSheets[i],
                        rules = sheet && sheet.cssRules,
                        rule = rules && rules[0];
                    // check whether style sheet has been loaded
                    if (rule && (rule.href === url)) {
                        styleSheetDeferred.resolve();
                        return;
                    }
                } catch (e) {}
            }
            if (numAttempts < attempts) {
                numAttempts++;
                setTimeout(pollFunction, interval);
            } else {
                // didn't find style sheet so complete anyway
                styleSheetDeferred.resolve();
            }
        };
 
    // add the themeDesign stylesheet to <head>
    // use @import to avoid cross domain security issues when determining when the stylesheet is loaded
    $style = $('<style type="text/css">@import url("' + url + '")</style>');
    $style.appendTo('head');
 
    // kickoff the polling
    pollFunction();
 
    // return the promise
    return styleSheetDeferred.promise();
};
 
// update with the design.css from the Sites Page
SitesSDK.getSiteProperty('themeDesign', function (data) {
    if (data && data.themeDesign && typeof data.themeDesign === 'string') {
        // load the style sheet and then set the height
        self.loadStyleSheet(data.themeDesign).done(self.setHeight);
    }
});

Λάβετε την τιμή της επιλεγμένης κλάσης στυλ όποτε αλλάζει.

Δημιουργήστε ένα observable αντικείμενο για να παρακολουθείτε πότε αλλάζει η τιμή της ιδιότητας styleClass. :

self.selectedStyleClass = ko.observable();

Λάβετε υπόψη ότι δεν μπορούμε να κάνουμε απόδοση μέχρι να λάβουμε την κλάση στυλ. Αλλάξτε αυτόν τον κώδικα:

self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized();
}, self);

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

self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);

Λάβετε την αρχική τιμή για την επιλεγμένη κλάση στυλ προσθέτοντας:

self.updateStyleClass = function (styleClass) {
    self.selectedStyleClass((typeof styleClass === 'string') ? styleClass : 'hello-world-default-style'); // note that this 'hello-world' prefix is based on the app name
    self.styleClassInitialized(true);
};
SitesSDK.getProperty('styleClass', self.updateStyleClass);

Ενημερώστε το πρότυπο για να αντικατοπτρίζει το styleClass. Αλλάξτε αυτόν τον κώδικα:
```
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
```
Χρησιμοποιήστε στη θέση του αυτόν τον κώδικα:
```
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>
```

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

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}

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

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
    self.updateStyleClass(settings.value);
}

Βεβαιωθείτε ότι το ενσωματωμένο πλαίσιο αλλάζει ξανά μέγεθος όταν αλλάζει το στυλ. Αλλάξτε αυτόν τον κώδικα:

// 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();

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

// 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(),
      selectedStyleClass = viewModel.selectedStyleClass();

Αποθηκεύστε και συγχρονίστε τα αρχεία σας στον server του στιγμιότυπου Oracle Content Management.

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

Ανανεώστε τη σελίδα σας στην τοποθεσία σας, ώστε το Εργαλείο δημιουργίας τοποθεσιών να μπορεί να επιλέξει τις αλλαγές στο συστατικό στοιχείο.
Αλλάξτε τη σελίδα στην κατάσταση επεξεργασίας.
Μεταφέρετε και αποθέστε το συστατικό στοιχείο σας στη σελίδα.
Ανοίξτε τον πίνακα "Ρυθμίσεις" για το συστατικό στοιχείο σας.
Μεταβείτε στην καρτέλα "Στυλ".
Κάντε εναλλαγή μεταξύ των στυλ Gothic και Plain που ορίζονται στο αρχείο σας design.json .

Θα παρατηρήσετε ότι το μέγεθος γραμματοσειράς εντός του συστατικού στοιχείου σας προσαρμόζεται αντικατοπτρίζοντας την αλλαγή της κλάσης CSS που εφαρμόζεται με κάθε επιλογή.

Συνεχίστε στην ενότητα Βήμα 15: Ενοποίηση με τη συμπεριφορά αναίρεσης/ακύρωσης αναίρεσης σελίδας.