In het tot dusver behandelde voorbeeld is een lokale component getoond die inline op de pagina werd weergegeven. U kunt er ook voor kiezen een component in een inline-frame weer te geven.
U kunt er bijvoorbeeld voor kiezen een component in een inline-frame weer te geven als uw component niet-omnipotente updates van de pagina uitvoert, wat vereist dat u de pagina steeds als er eigenschappen worden gewijzigd, opnieuw maakt. Verder worden externe componenten altijd in een inline-frame weergegeven.
De voorbeelden in deze sectie zijn ontleend aan de bestanden die voor u worden gemaakt als u de optie Een component maken die wordt weergegeven in een iFrame selecteert wanneer u een lokale component maakt. Het is mogelijk deze bestandenset op uw externe server te hosten, dus de voorbeelden gelden ook voor externe componenten.
Overeenkomsten tussen inline-framecomponenten en niet-inline-framecomponenten
Paneel Instellingen
Omdat het paneel 'Instellingen' altijd in een inline-frame op de pagina wordt geplaatst, verandert de code voor dit paneel niet, of voor de component nu wel of geen inline-frame wordt gebruikt. Voor beide toepassingen maakt u dezelfde code voor het paneel 'Instellingen'.
SDK-API van Sites
De SDK-API is hetzelfde voor beide toepassingen. U gebruikt dezelfde code voor het genereren van triggers, voor het luisteren naar acties en voor het ophalen en instellen van eigenschapswaarden. Bepaalde eigenschappen zijn misschien niet in beide gevallen van toepassing (u kunt bijvoorbeeld de eigenschap hoogte
niet instellen voor een component waarbij geen inline-frame wordt gebruikt), maar de API blijft hetzelfde. U kunt dus de code van het ene type component naar het andere kopiëren. De in deze zelfstudie besproken voorbeeldcode werkt in beide gevallen.
Verschillen tussen inline-framecomponenten en niet-inline-framecomponenten
Bestandsstructuur en afhankelijkheden
<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
Met behulp van deze bestanden kunt u uw component direct uitvoeren in een inline-frame on de pagina. Wat zijn de belangrijkste verschillen tussen deze structuur en die van een lokale standaardcomponent?
JavaScript-afhankelijkheden:
Om uw component uit te kunnen voeren, krijgt u een volledige kopie van deze bestanden. U hebt de bestanden nodig voor het uitvoeren van de inline-framevoorbeeldcomponent. Afhankelijk van uw behoeften kunt u bestanden aan deze directory toevoegen of eruit verwijderen.
Omdat alles onder de directory assets
voor uw component naar een publieke site wordt gepusht wanneer de component wordt gepubliceerd, is alles in de directory js
zowel in de sitebuilder als tijdens runtime beschikbaar.
Opmerking: deze bestanden zijn gemaakt voor gebruiksgemak. Overweeg deze bestanden te consolideren in het thema of op een andere publieke locatie, in plaats van afzonderlijke versies van deze bestanden te maken voor elk van uw inline-framecomponenten.
render.html
:
Dit is een volledig HTML-document, in tegenstelling tot het bestand render.js
voor standaardcomponenten. Dat is een AMD-module.
Beheer van de component 'Hoogte'
Een van de problemen bij het gebruik van een inline-frame is het hoogtebeheer van het inline-frame zelf. Als u dit niet correct doet, zult u merken dat er schuifbalken voor de component op de pagina worden weergegeven, wat u misschien niet wilt.
Voor het beheer van de hoogte van het inline-frame moet door de component aan de pagina worden doorgegeven hoe hoog het inline-frame moet zijn. Bij externe componenten krijgt u mogelijk te maken met problemen tussen domeinen. In dat geval moet u Sites SDK-messaging gebruiken om de pagina te vragen het inline-frame op de vereiste hoogte in te stellen nadat het renderen van de component op de pagina is voltooid. Hiervoor wordt de API SitesSDK.setProperty('height', {value})
gebruikt. (Zie voor meer informatie: SDK's van Oracle Content and Experience.)
Maak bijvoorbeeld de functie setHeight
en een speciale bindinghandler om deze functie aan te roepen wanneer het renderen van de component op de pagina is voltooid.
Hoogtefunctie bijwerken
// 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'); };
Speciale Knockout-bindinghandler voor het aanroepen van setHeight
wanneer het renderen van de component op de pagina is voltooid of wanneer een eigenschap verandert:
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(); } };
Sjabloon bijwerken voor het aanroepen van de bindinghandler:
<div data-bind="sampleAppSetAppHeight: true"></div>
Registratie van triggers en acties
Voor componenten die zich niet in inline-frames bevinden, is de trigger-/actieregistratie te vinden in het bestand appinfo.json
, maar bij inline-framecomponenten is de component zelf verantwoordelijk voor het verstrekken van deze gegevens. Dit gebeurt via deze twee API's:
SitesSDK.subscribe('GET_ACTIONS', self.getAppActions); SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);
Hieronder ziet u een voorbeeld van hoe u deze API's kunt gebruiken.
// 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; };
Toegang tot themastijlen
Omdat de component in een inline-frame wordt weergegeven, heeft deze geen toegang tot de stijlen die binnen het thema beschikbaar zijn. In de Sites SDK vindt u een API waarmee deze stijlen kunnen worden opgehaald, zodat ze kunnen worden toegepast op elementen binnen het inline-frame.
Dit onderwerp wordt verder uitgediept in Stap 14: aangepaste stijlen gebruiken wanneer de component wordt weergegeven in een inline-frame.
Gemengd HTTPS-protocol versus HTTP-protocol
Omdat bij Oracle Content Management het HTTPS-protocol wordt gebruikt, moeten alle resources waarnaar binnen de pagina wordt verwezen ook HTTPS
gebruiken. Tot de resources behoort het .html
-basisbestand dat in het inline-frame wordt weergegeven, samen met alle bestanden waarnaar in dat bestand wordt verwezen.
Deze resourcevereiste is vooral van toepassing op externe componenten. U moet zich echter bewust zijn van deze beperking. Resources voor lokale componenten waarvoor inline-frames worden gebruikt, worden aangeleverd door de Oracle Content Management server, dus voor deze componenten wordt al een passend protocol gebruikt.
Ga door naar Stap 14: aangepaste stijlen gebruiken wanneer de component wordt weergegeven in een inline-frame.