Krok 13: Vykreslenie komponentu vo vloženom ráme

Podobnosti medzi komponentmi vo vloženom ráme a priamo na stránke

Panel Nastavenia

Keďže panel Nastavenia je na stránke vždy vložený vo vloženom ráme, kód panela Nastavenia zostáva rovnaký bez ohľadu na to, či komponent používa vložený rám, alebo nie. Pre obidva prípady použitia vytvoríte rovnaký kód panela Nastavenia.

Rozhranie SDK API lokalít

Rozhranie SDK API je rovnaké pre obidva prípady použitia. Rovnaký kód použijete aj na vyvolávanie spúšťačov, prijímanie akcií a načítanie a nastavenie hodnôt vlastností. Kým niektoré vlastnosti sa nebudú dať použiť v obidvoch prípadoch (napríklad vlastnosť "height" nemôžete nastaviť pre komponent, ktorý nepoužíva vložený rám), rozhranie API zostáva rovnaké. Preto nemôžete kopírovať kód medzi obidvoma týmito typmi komponentov a vzorový kód preberaný v tomto tutoriáli bude fungovať v obidvoch prípadoch.

Rozdiely medzi komponentmi vo vloženom ráme a priamo na stránke

Štruktúra a závislosti súborov

<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

S týmito vytvorenými súbormi budete môcť komponent okamžite spustiť vo vloženom ráme na stránke. Hlavné rozdiely medzi touto štruktúrou a štruktúrou štandardného lokálneho komponentu sú:

• Závislosti skriptu JavaScript:

  • Dostanete kompletnú kópiu týchto súborov, aby sa komponent mohol spustiť. Sú potrebné na spustenie vzorového komponentu vo vloženom ráme. Obsah tohto adresára môžete podľa potreby pridávať alebo odstraňovať.

  • Keďže všetko v adresári assets pre váš komponent sa odošle na verejnú lokalitu automaticky (push) pri publikovaní komponentu, všetko v adresári js bude dostupné tak v generátore lokalít, ako aj v čase behu.

  • Poznámka: Tieto súbory sa vytvárajú kvôli ľahšiemu používaniu. Namiesto vytvárania samostatných verzií týchto súborov pre jednotlivé komponenty vo vložených rámoch odporúčame zvážiť konsolidáciu týchto súborov v motíve alebo v inom verejnom umiestnení.

• render.html:

  • Ide o úplný dokument HTML na rozdiel od súboru render.js pre štandardné komponenty, ktorý je modulom AMD.

Správa „výšky“ komponentu

Jedným z problémov pri používaní vloženého rámu je správa výšky samotného vloženého rámu. Ak ju nenastavíte správne, na stránkach komponentu uvidíte posúvače, ktoré môžete, ale nemusíte chcieť.

Aby ste mohli spravovať výšku vloženého rámu, musí komponent stránku informovať, aký vysoký má byť vložený rám. Pri vzdialených komponentoch možno budete riešiť problémy naprieč doménami. Bude preto potrebné, aby ste prostredníctvom správ súpravy Sites SDK požiadali stránku o nastavenie vloženého rámu na požadovanú výšku po vykreslení komponentu na stránke. Používa sa na to rozhranie API – SitesSDK.setProperty('height', {value}). (Pozrite si časť Súpravy SDK služby Oracle Content and Experience.)

Vytvorte napríklad funkciu setHeight a obslužný program vlastného viazania, ktorý ju bude volať po vykreslení komponentu na stránke.

• Aktualizujte funkciu výšky:

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

• Obslužný program vlastného viazania Knockout, ktorý volá funkciu setHeight po každom vykreslení komponentu na stránke alebo po zmene vlastnosti:

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

• Aktualizácia šablóny na volanie obslužného programu viazania:

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

Registrácia spúšťača a akcií

Kým informácie o registrácii spúšťača a akcie pre komponenty, ktoré nie sú vo vložených rámoch, sú umiestnené v súbore appinfo.json, v prípade komponentov vo vložených rámoch je za poskytnutie týchto informácií zodpovedný samotný komponent. Používajú sa na to tieto dve rozhrania API:

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

Tu je príklad použitia týchto rozhraní API.

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

Prístup k štýlom motívu

Komponent, ktorý sa vykresľuje vo vloženom ráme, nemá prístup k štýlom v motíve. Súprava Sites SDK poskytuje rozhranie API na vyvolanie týchto štýlov, aby sa mohli použiť pre prvky vo vloženom ráme.

Táto téma je podrobnejšie rozobraná v časti Krok 14: Použitie vlastných štýlov, keď sa komponent vykresľuje vo vloženom ráme.

Zmiešaný obsah protokolov HTTPS a HTTP

Keďže služba Oracle Content Management používa protokol HTTPS, aj všetky prostriedky odkazované na stránke musia používať protokol HTTPS. Prostriedky zahŕňajú základný súbor .html, ktorý sa vykreslí vo vloženom ráme spolu so všetkými súbormi, na ktoré odkazuje.

Hoci sa táto požiadavka na prostriedky týka hlavne vzdialených komponentov, je potrebné vedieť o tomto obmedzení. Prostriedky pre lokálne komponenty, ktoré používajú vložené rámy, poskytuje server Oracle Content Management, takže tieto komponenty už používajú zodpovedajúci protokol.

Pokračujte na Krok 14: Použitie vlastných štýlov, keď sa komponent vykresľuje vo vloženom ráme.