In deze stap bekijken we de structuur van de instellingen die voor een lokale component zijn opgegeven.
Naast het bestand render.js
in de directory /assets
is er in dezelfde directory ook een vergelijkbaar, vooraf gemaakt bestand settings.html
. In het bestand settings.html
worden alle aangepaste instellingsgegevens voor uw component weergegeven. In de standaardimplementatie staat er één eigenschap imageWidth
in de aangepaste instellingsgegevens.
Ga als volgt te werk om de structuur van uw lokale component te bekijken:
Zoek uw component en synchroniseer deze met het bestandssysteem met behulp van de Oracle Content Management desktopsynchronisatieclient.
Als u geen desktopsynchronisatieclient hebt, kunt u de component selecteren op het tabblad Componenten in de webinterface van Oracle Content Management en omlaag drillen om de bestanden te zien.
Als u de bestanden onder de component weergeeft, ziet u de volgende bestanden:
assets render.js settings.html appinfo.json _folder_icon.jpg
Open het bestand settings.html
in de directory /assets
en bekijk de inhoud. Anders dan voor het bestand render.js
wordt voor het bestand settings.html
een inline-frame gebruikt in het paneel 'Instellingen' in de sitebuilder. Daarom is voor correcte weergave binnen het inline-frame ook toegang tot de ondersteunende bestanden nodig. De sitebuilder is nodig voor het beheren van uw site. Eventuele fouten in uw JavaScript-code moeten kunnen worden geïsoleerd van de sitebuilder, daarom wordt voor het bestand settings.html
een inline-frame gebruikt.
Dit zijn de belangrijkste gebieden van het bestand settings.html
:
Knockout-sjabloon voor het weergeven van het paneel 'Instellingen'
<!-- 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 -->
Aangepaste binding-handler voor aanpassing van de hoogte van het inline-frame nadat het paneel 'Instellingen' is gerenderd
ko.bindingHandlers.scsCompComponentImpl
Een Knockout-ViewModel voor toepassing op het Knockout-sjabloon
SettingsViewModel
Dit zijn de belangrijkste elementen van SettingsViewModel
:
Abonnementen op componentlevensduur
Componentinitialisatie:
Zorg ervoor dat de component niet wordt gerenderd voordat alle gegevens zijn opgehaald. Dit wordt afgehandeld via Knockout-observables.
self.initialized = ko.observable(false);
Zorg ervoor dat we de gegevens niet proberen bij te werken voordat we klaar zijn.
self.saveData = false;
De initiële waarden voor vereiste eigenschappen worden opgehaald. Dit wordt afgehandeld met callbacks voor het ophalen van de gegevens.
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; });
Sla eventuele eigenschapswijzigingen op in de aangepaste instellingsgegevens.
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);
Als u een andere eigenschap wilt toevoegen die u vast wilt leggen, is er een aantal stappen nodig:
Werk de gebruikersinterface bij om de nieuwe waarde weer te geven.
Initialiseer de waarde op basis van de huidige waarde die voor de component is opgeslagen.
Sla eventuele wijzigingen in de waarde weer op voor de component.
Als u een andere eigenschap wilt toevoegen aan uw aangepaste component, brengt u de volgende wijzigingen aan in het bestand settings.html
:
Voeg nog een observable toe om de nieuwe eigenschap af te handelen. Wijzig deze code:
self.width = ko.observable();
Gebruik in plaats daarvan deze code:
self.width = ko.observable(); self.imageBannerText = ko.observable();
Haal een eventuele huidige waarde voor de nieuwe eigenschap op als het instellingenpaneel de eerste keer wordt weergegeven. Wijzig deze code:
self.width(data.width);
Gebruik in plaats daarvan deze code:
self.width(data.width); self.imageBannerText(data.imageBannerText);
Sla eventuele wijzigingen in deze nieuwe eigenschap op. Wijzig deze code:
'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
Gebruik in plaats daarvan deze code:
'width': isNaN(self.width()) ? self.width() : self.width() + 'px', 'imageBannerText': self.imageBannerText()
Voeg een gebruikersinterface toe om het nieuwe veld weer te geven. Wijzig deze code:
<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">
Gebruik in plaats daarvan deze code:
<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">
Synchroniseer of upload het bestand settings.html
.
Als u deze code nu zou uitvoeren, zou het veld worden weergegeven. De grootte van het paneel 'Instellingen' wordt echter niet automatisch gewijzigd. Omdat u het paneel groter hebt gemaakt, moet u ook de registratievermelding voor components.json
bijwerken naar de nieuwe grootte.
Download het bestand appinfo.json
, dat zich op hetzelfde niveau bevindt als de directory assets/
voor uw component, en werk de grootte van het instellingenpaneel bij. Wijzig deze code:
"settingsHeight": 90,
Gebruik in plaats daarvan deze code:
"settingsHeight": 160,
Synchroniseer of upload het bestand appinfo.json
.
Controleer de resultaten voor stap 3.
Als het goed is, kunt u nu de nieuwe eigenschap die u aan het paneel 'Instellingen' hebt toegevoegd, zien en invoeren.
Vernieuw uw pagina op uw site, zodat wijzigingen in de component kunnen worden opgehaald met de sitebuilder.
Open de pagina in de bewerkmodus.
Sleep de component naar de pagina.
Open het paneel 'Instellingen' voor uw component.
Klik op de knop Aangepaste instellingen.
Voor elke eigenschap in uw bestand settings.html
worden er twee velden weergegeven.
Doorgaan naar Stap 4: De nieuwe eigenschap van de component weergeven.