Trinn 13: Gjengi en komponent i en linjebundet ramme

Likheter mellom komponenter med og uten linjebundet ramme

Ruten Innstillinger

Siden ruten Innstillinger alltid er plassert på siden i en linjebundet ramme, blir ikke koden for ruten Innstillinger endret uansett om komponenten bruker en linjebundet ramme eller ikke. Du skal opprette samme kode for ruten Innstillinger i begge tilfellene.

SDK-API for områder

SDK-API-et er det samme for begge brukstilfellene. Du skal bruke samme kode til å initiere triggere, lytte etter handlinger og hente og angi egenskapsverdier. Selv om enkelte egenskaper kanskje ikke kan brukes i begge tilfellene (du kan for eksempel ikke angi egenskapen "height" for en komponent som ikke bruker en linjebundet ramme), forblir API-et det samme. Derfor kan du kopiere koden mellom begge disse komponenttypene, og da kommer eksempelkoden som gjennomgås i denne opplæringen, til å fungere i begge tilfellene.

Forskjeller mellom komponenter med og uten linjebundet ramme

Filstruktur og avhengigheter

<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 filene blir opprettet for at du skal kunne kjøre komponenten umiddelbart i en linjebundet ramme på siden. Dette er hovedforskjellene mellom denne strukturen og strukturen for en standard lokal komponent:

• JavaScript-avhengigheter:

  • Du får en fullstendig kopi av disse filene slik at komponenten kan kjøres. Disse filene er nødvendige for at eksempelkomponenten med linjebundet ramme skal kunne kjøre. Du kan legge til og fjerne innhold i denne katalogen etter behov.

  • Siden alt under katalogen assets for komponenten din blir skjøvet til et offentlig område når komponenten publiseres, kommer alt i katalogen js til å være tilgjengelig både i områdebyggeren og under kjøring.

  • Merknad: Disse filene opprettes av hensyn til brukervennlighet. Du bør vurdere å konsolidere disse filene i temaet eller på en annet offentlig plassering i stedet for å opprette atskilte versjoner av disse filene for hver enkelt komponent med linjebundet ramme.

• render.html:

  • Dette er et fullstendig HTML-dokument i motsetning til filen render.js for standardkomponenter, som er en AMD-modul.

Behandling av komponenthøyde

Ett av problemene ved bruk av en linjebundet ramme er behandlingen av høyden til selve den linjebundne rammen. Hvis dette blir feil, ser du rullefelt for komponenten på siden, og det er jo ikke sikkert du ønsker det.

For at høyden på den linjebundne rammen skal kunne behandles, må komponenten fortelle siden hvordan den ønsker at den linjebundne rammen skal være. Med eksterne komponenter er det mulig at det dreier seg om problemer for flere domener, så du må bruke SDK-meldinger for områder til å be siden om å angi den linjebundne rammen med nødvendig høyde når komponenten er gjengitt på siden. Dette gjøres ved hjelp av API-et SitesSDK.setProperty('height', {value}). (Se SDK-er for Oracle Content and Experience.)

Du kan for eksempel opprette funksjonen setHeight og en behandler for egendefinert binding som skal kalles når komponenten er gjengitt på siden.

• Funksjonen for oppdatering av høyde:

  // 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-behandler for egendefinert binding som skal kalle setHeight hver gang komponenten blir gjengitt på siden, eller når en egenskap blir endret:

  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();
   }
  };

• Maloppdatering for kall av bindingsbehandleren:

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

Registrering av triggere og handlinger

Selv om registrering av triggere/handlinger for komponenter som ikke ligger i linjebundne rammer, er plassert i filen appinfo.json, er selve komponenten ansvarlig for å skaffe disse opplysningene for komponenter i linjebundne rammer. Dette gjøres ved hjelp av disse to API-ene:

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

Dette er et eksempel på bruk av disse API-ene.

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

Tilgang til temastiler

Siden komponenten blir gjengitt i en linjebundet ramme, har den ikke tilgang til stilene som er tilgjengelige i temaet. SDK-et for områder sørger for et API som henter disse stilene, slik at de kan brukes på elementer i den linjebundne rammen.

Dette emnet blir utforsket nærmere i Trinn 14: Bruke egendefinerte stiler når komponenten gjengis i en linjebundet ramme.

Blandet HTTPS kontra HTTP-protokoll

Ettersom Oracle Content Management bruker HTTPS-protokollen, må alle ressurser det refereres til på siden, også bruke HTTPS. Ressursene omfatter den grunnleggende *.html-filen som blir gjengitt i den linjebundne rammen sammen med alle filene den refererer til.

Dette ressurskravet gjelder stort sett for eksterne komponenter, men du bør likevel være oppmerksom på denne begrensningen. Ressurser for lokale komponenter som bruker linjebundne rammer, kommer fra Oracle Content Management-tjeneren, så disse komponentene bruker allerede en samsvarende protokoll.

Gå videre til Trinn 14: Bruke egendefinerte stiler når komponenten gjengis i en linjebundet ramme.