Stap 13: een component weergeven in een inline-frame

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.