Trin 13: Gengive en komponent i en inline-ramme

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

<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.