Trin 13: Gengive en komponent i en inline-ramme

Indtil videre har eksemplet vist en lokal komponent, der gengives inline på siden. Du kan også vælge at gengive en komponent i en inline-ramme.

Du kan for eksempel vælge at gengive en komponent i en inline-ramme, hvis komponenten udfører ikke-omnipotente opdateringer af siden, hvilket kræver, at du opretter siden igen, hver gang egenskaber ændres. Desuden gengives eksterne komponenter altid i en inline-ramme.

Eksemplerne i dette afsnit er taget fra de filer, der oprettes til dig, når du angiver valget Opret en komponent, der gengives i en iframe under oprettelsen af en lokal komponent. Du kan imidlertid lade din eksterne server være vært for dette sæt filer, så de anvendes på samme måde på eksterne komponenter.

Ligheder mellem inline-ramme- og ikke-inline-ramme-komponenter

Panelet Indstillinger

Panelet Indstillinger placeres altid på siden i en inline-ramme, og koden til panelet Indstillinger er derfor uændret, uanset om komponenten bruger en inline-ramme eller ej. Du opretter den samme kode til panelet Indstillinger i begge use cases.

Sites-SDK-API

SDK-API'en er den samme i begge use cases. Du bruger den samme kode til at udløse triggere, lytte efter handlinger og hente og sætte egenskabsværdier. Nogle egenskaber kan muligvis ikke anvendes i begge tilfælde (du kan for eksempel ikke angive egenskaben "height" for en komponent, der ikke bruger en inline-ramme), men API'en forbliver den samme. Du kan derfor kopiere koden mellem begge disse komponenttyper, og eksempelkoden, der omtales i dette selvstudium, fungerer i begge tilfælde.

Forskelle mellem inline-ramme- og ikke-inline-ramme-komponenter

Filstruktur og afhængigheder

Når du vælger Opret en komponent, der gengives i en iframe under oprettelsen af en lokal komponent, oprettes følgende filer til dig:
<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

Disse filer oprettes, så du med det samme kan køre din komponent i en inline-ramme på siden. De vigtigste forskelle mellem denne struktur og strukturen for en lokal standardkomponent er:

  • JavaScript-afhængigheder:

    • Du får en fuldstændig kopi af disse filer, så din komponent kan køre. Disse filer er påkrævet til kørslen af inline-ramme-eksempelkomponenten. Du kan tilføje og fjerne indhold i dette katalog, afhængigt af dine behov.

    • Alt under kataloget assets for din komponent sendes til et offentligt site, når komponenten publiceres, og alt i kataloget js bliver derfor tilgængeligt både i Site Builder og under runtime.

    • Bemærk: Disse filer oprettes af hensyn til brugervenligheden. Du bør overveje at konsolidere disse filer i temaet eller på en anden offentlig lokation i stedet for at oprette separate versioner af filerne til hver af dine inline-ramme-komponenter.

  • render.html:

    • Dette er et fuldstændigt HTML-dokument, i modsætning til filen render.js for standardkomponenter, der er et AMD-modul.

Styring af komponenters "højde"

Et af problemerne ved brug af en inline-ramme er styring af selve inline-rammens højde. Hvis du gør noget forkert her, vises der rullepaneler for komponenten på siden, og du er muligvis ikke interesseret i dette.

For at styre højden på inline-rammen skal komponenten fortælle siden, hvor høj inline-rammen skal være. Med eksterne komponenter kan der opstå problemer på tværs af domæner, og du skal derfor bruge Sites SDK-messaging og anmode siden om at angive inline-rammen til den påkrævede højde, når komponenten er gengivet på siden. Dette gøres ved hjælp af SitesSDK.setProperty('height', {value})-API'en. SeOracle Content and Experience-SDK'er.

For eksempel kan du oprette funktionen setHeight og en handler for tilpasset tilknytning, som skal kaldes, når komponenten er gengivet på siden.

  • Funktion til opdatering af højde:

    // 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');
    };
  • Knockout-handler til tilpasset tilknytning, der kalder setHeight, når komponenten gengives på siden eller en egenskab ændres:

    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();
     }
    };
  • Skabelonopdatering, der kalder tilknytningshandler:

    <div data-bind="sampleAppSetAppHeight: true"></div>

Trigger- og handlingsregistrering

Trigger-/handlingsregistreringen for komponenter, der ikke er inline-rammer, findes i filen appinfo.json, men for inline-ramme-komponenter er det selve komponenten, der er ansvarlig for leveringen af disse oplysninger. Dette gøres ved hjælp af disse to API'er:

SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);

Her er et eksempel på brugen af disse API'er.

    // 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;
    };

Adgang til tematypografier

Komponenten gengives i en inline-ramme, og den har derfor ikke adgang til de typografier, der er tilgængelige i temaet. Sites-SDK indeholder en API til hentning af disse typografier, så de kan anvendes på elementer i inline-rammen.

Dette emne udforskes yderligere i Trin 14: Bruge tilpassede typografier, når komponenten gengives i en inline-ramme.

Blandet HTTPS-protokol versus HTTP-protokol

Oracle Content Management bruger HTTPS-protokollen, og alle ressourcer, der refereres til på siden, skal derfor også bruge HTTPS. Ressourcer omfatter basis-.html-filen, der gengives i inline-rammen, og alle de filer, som den refererer til.

Dette ressourcekrav gælder især for eksterne komponenter, men du skal være opmærksom på denne begrænsning. Ressourcer for lokale komponenter, der bruger inline-rammer, leveres af Oracle Content Management-serveren, så disse komponenter bruger i forvejen en matchende protokol.

Fortsæt til Trin 14: Bruge tilpassede typografier, når komponenten gengives i en inline-ramme.